Customize
Wenn Sie das Modul Produktempfehlungen installieren, erstellt Adobe Commerce das ProductRecommendationsLayout. Dieses Verzeichnis enthält Vorlagendateien, die Sie anpassen können, um zu ändern, wie die Empfehlungen auf Ihrer Storefront angezeigt werden. Insbesondere können Sie die folgende Vorlage ändern oder überschreiben:
<your theme>/Magento_ProductRecommendationsLayout/web/template/recommendations.html
Weitere Informationen zum Ändern von Vorlagendateien finden Sie unter Vorlagenanpassung im Frontend-Entwicklerhandbuch.
Wenn Sie die recommendations.html ändern, müssen Sie die folgenden Tags in der Datei beibehalten, um sicherzustellen, dass Adobe Commerce Empfehlungsmetriken aus Ihrer Storefront erfassen kann:
<div data-bind="attr : {'data-unit-id' : unitId }"...</div><a data-bind="attr : {'data-sku' : sku, 'data-unit-id'}"...</a>Hinweis: Wenn Sie Anker-Tags hinzufügen, müssen Sie diese Attribute einschließen.
Zusätzlich zur recommendations.html-Datei enthält das ProductRecommendationsLayout-Verzeichnis die folgenden Unterverzeichnisse:
layout*.xml Dateien für jeden Seitentyptemplatesweb/jsweb/templatemagento/product-recommendationsPositionierung der Empfehlungseinheit
Wenn Sie Empfehlung erstellen geben Sie den Speicherort an, an dem sie auf der Seite angezeigt wird. Eine Empfehlungseinheit kann entweder oben oder unten im Hauptinhalts-Container platziert werden. Sie können diese Platzierung jedoch anpassen. Wenn Sie einen Inhaltstyp „Page Builder-Empfehlung“ erstellen, verwenden Sie die Page Builder-Tools, um die Empfehlungseinheit auf der Seite zu positionieren. Bearbeiten Sie für alle anderen Seitentypen die *.xml, die beim Erstellen der Empfehlung generiert werden.
-
Wechseln Sie in das
layoutVerzeichnis :code language-bash cd `<your theme>/Magento_ProductRecommendationsLayout/layout`In der folgenden Tabelle sind die in diesem Verzeichnis vorhandenen XML-Dateien aufgeführt:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 Dateiname Seite catalog_category_view.xmlKategorie catalog_product_view.xmlProduktdetails checkout_cart_index.xmlWarenkorb checkout_onepage_success.xmlCheckout cms_index_index.xmlStartseite note note NOTE Die Dateinamen im layoutkönnen unterschiedlich sein, wenn Ihr Store Erweiterungen von Drittanbietern verwendet. -
Ändern Sie die
catalog_product_view.xmlso, dass die Empfehlungseinheit nach dem Produktbild auf der Produktdetailseite angezeigt wird. Sehen Sie sich vor dem Anpassen dieser XML-Datei die Datei an und lernen Sie die Abschnitte kennen, die Sie ändern müssen:code language-xml <?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>Im obigen Ausschnitt zeigt der
main.contentReferenzblock an, dass die Empfehlungseinheit relativ zu diesem Element platziert wird. Ihrblock-Element enthält dasafter="-"-Attribut, das angibt, dass die Empfehlungseinheit auf der Seite nach dem Hauptinhaltsblock angezeigt wird. -
Ändern wir diese Datei, indem wir einen anderen Inhaltsbaustein angeben.
Ändern Sie die
namedes Referenzblocks vonmain.contentinproduct.info.media.code language-xml <?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>Durch diese Änderung wird Ihre Empfehlungseinheit nach dem Produktbild auf der Produktdetailseite angezeigt. Wenn die Empfehlungseinheit vor dem
product.info.mediaangezeigt werden soll, ändern Sie dasafter="-"Attribut inbefore="-". DaspagePlacementArgument ist ein internes Argument, das nicht geändert werden sollte.
Weitere Informationen Blocktypen auf der Seite finden unter „Layout - Übersicht .
Benutzerdefinierte Produktattribute
Entwickler benötigen häufig Zugriff auf benutzerdefinierte Produktattributwerte in Recommendations-Einheiten auf Storefronts, damit sie auf der Grundlage dieser Attribute visuelle Abwandlungen zu Produkten hinzufügen können.
Wenn Ihr Geschäft beispielsweise Bio-Produkte verkauft, können Sie ein benutzerdefiniertes Attribut auf diesen Produkten haben, das sie als Organic = Yes kennzeichnet. Möglicherweise benötigen Sie Zugriff auf diesen Attributwert in der Storefront, damit Sie diesen Produkten eine besondere visuelle Behandlung bieten können, wenn sie in Recommendations angezeigt werden. Ebenso können Sie durch den Zugriff auf diese benutzerdefinierten Produktattributwerte Produkte kennzeichnen oder die benutzerdefinierte Logik in der Präsentationsebene Ihrer Site steuern.
Um sicherzustellen, dass beim Rendern der Empfehlungseinheit auf der Seite ein benutzerdefiniertes Produktattribut verfügbar ist, legen Sie die Used in Product Listing Eigenschaft auf der Seite "" Admin auf Yes fest.
Wenn diese Eigenschaft festgelegt ist, enthält die JSON-Payload ein attributes-Objekt, das ein Array von Attributcodes und -werten enthält. Sie können dann einen benutzerdefinierten Storefront-Stil anwenden, der auf diesen Attributwerten basiert, z. B. das Hinzufügen spezieller visueller Behandlungen oder Abzeichen wie zuvor erwähnt.