Personalizza
Creato per:
- Amministratore
Quando si installa il modulo Consigli di prodotto, Adobe Commerce crea la directory ProductRecommendationsLayout. Questa directory contiene file modello che è possibile personalizzare per modificare la modalità di visualizzazione dei consigli nella vetrina. In particolare, puoi modificare o sostituire il seguente modello:
<your theme>/Magento_ProductRecommendationsLayout/web/template/recommendations.html
Per ulteriori informazioni sulla modifica dei file modello, consultare Personalizzazione modello nella Guida per gli sviluppatori di Frontend.
Se modifichi il file recommendations.html, devi mantenere i seguenti tag nel file per garantire che Adobe Commerce possa raccogliere le metriche dei consigli dalla vetrina:
| Tag | Utilizzare |
|---|---|
<div data-bind="attr : {'data-unit-id' : unitId }"...</div> | Raccoglie gli eventi di visualizzazione. |
<a data-bind="attr : {'data-sku' : sku, 'data-unit-id'}"...</a> | Raccoglie eventi di clic. Nota: se aggiungi tag di ancoraggio, devi includere questi attributi. |
Oltre al file recommendations.html, la directory ProductRecommendationsLayout contiene le seguenti sottodirectory:
| Directory | Finalità |
|---|---|
layout | Contiene *.xml file per ogni tipo di pagina |
templates | Contiene file che chiamano gli script di recupero e rendering |
web/js | Contiene i file JavaScript che recuperano ed eseguono il rendering dei consigli per l’archivio |
web/template | Contiene il modello per il modulo magento/product-recommendations |
Posizionamento dell’unità per i consigli
Quando crei un consiglio, specifica il percorso in cui viene visualizzato nella pagina. Un’unità di consigli può essere posizionata nella parte superiore o inferiore del contenitore di contenuto principale. Tuttavia, potete personalizzare questo posizionamento. Se crei un tipo di contenuto per consigli di Page Builder, utilizza gli strumenti di Page Builder per posizionare l’unità di consigli sulla pagina. Per tutti gli altri tipi di pagina, modifica i file *.xml generati al momento della creazione del consiglio.
-
Passare alla directory
layout:cd `<your theme>/Magento_ProductRecommendationsLayout/layout`Nella tabella seguente sono elencati i file XML presenti in questa directory:
Nome filePaginacatalog_category_view.xmlCategoriacatalog_product_view.xmlDettagli del prodottocheckout_cart_index.xmlCarrellocheckout_onepage_success.xmlPagamentocms_index_index.xmlHome
NOTEI nomi dei file nella directorylayoutpotrebbero essere diversi se l'archivio utilizza estensioni di terze parti. -
Modificare il file
catalog_product_view.xmlin modo che l'unità di consigli venga visualizzata dopo l'immagine del prodotto nella pagina dei dettagli del prodotto. Prima di personalizzare il file XML, esaminare il file e comprendere le sezioni da modificare:<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <referenceBlock name="page.wrapper"> <block class="Magento\Framework\View\Element\Template" before="-" name="product_recommendations_fetcher" template="Magento_ProductRecommendationsStorefront::fetcher.phtml" /> </referenceBlock> <body> <referenceBlock name="main.content"> <block class="Magento\ProductRecommendationsStorefront\Block\Renderer" after="-" name="product_recommendations_product_below_content" template="Magento_ProductRecommendationsStorefront::renderer.phtml"> <arguments> <argument name="pagePlacement" xsi:type="string">below-main-content</argument> </arguments> </block> </referenceBlock> </body> </page>Nel frammento precedente, il blocco di riferimento
main.contentindica che l'unità di consigli verrà posizionata in un punto relativo a tale elemento. L'elementoblockcontiene l'attributoafter="-", che specifica che l'unità di consigli verrà visualizzata nella pagina dopo il blocco di contenuto principale. -
Modifichiamo questo file specificando un blocco di contenuto diverso.
Modificare il blocco di riferimento
namedamain.contentaproduct.info.media.<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <referenceBlock name="page.wrapper"> <block class="Magento\Framework\View\Element\Template" before="-" name="product_recommendations_fetcher" template="Magento_ProductRecommendationsStorefront::fetcher.phtml" /> </referenceBlock> <body> <referenceBlock name="product.info.media"> <block class="Magento\ProductRecommendationsStorefront\Block\Renderer" after="-" name="product_recommendations_product_below_content" template="Magento_ProductRecommendationsStorefront::renderer.phtml"> <arguments> <argument name="pagePlacement" xsi:type="string">below-main-content</argument> </arguments> </block> </referenceBlock> </body> </page>Con questa modifica, l’unità di consigli viene visualizzata dopo l’immagine del prodotto nella pagina dei dettagli del prodotto. Se si desidera che l'unità di consigli venga visualizzata prima di
product.info.media, modificare l'attributoafter="-"inbefore="-". L'argomentopagePlacementè un argomento interno da non modificare.
Per ulteriori informazioni sui tipi di blocchi nella pagina, consulta panoramica del layout.
Attributi di prodotto personalizzati
Gli sviluppatori spesso hanno bisogno di accedere a valori di attributi di prodotto personalizzati nelle unità Consigli su vetrine in modo da poter aggiungere trattamenti visivi ai prodotti basati su tali attributi.
Ad esempio, se il tuo negozio vende alcuni prodotti biologici, potresti avere un attributo personalizzato su tali prodotti che li designa come Organic = Yes. Potresti aver bisogno dell’accesso a questo valore di attributo nella vetrina in modo da poter dare a questi prodotti un trattamento visivo speciale quando compaiono in Consigli. Allo stesso modo, l’accesso a questi valori di attributi di prodotto personalizzati consente di assegnare distintivi ai prodotti o applicare una logica personalizzata nel livello di presentazione del sito.
Per assicurarsi che un attributo di prodotto personalizzato sia disponibile quando si esegue il rendering dell'unità di consigli sulla pagina, impostare la proprietà Used in Product Listing su Yes nella pagina Attributi di prodotto dell'amministratore.
Quando questa proprietà è impostata, il payload JSON include un oggetto attributes che contiene un array di codici e valori di attributo. Puoi quindi applicare uno stile di vetrina personalizzato in base a questi valori di attributo, ad esempio aggiungendo speciali trattamenti visivi o badge come indicato in precedenza.
NOTE