Per aggiungere in Magento 2 un tab nella pagina prodotto, sarà necessario creare un attributo prodotto e poi fare in modo che Magento lo mostri a frontend tra i tab.
Di seguito tutti i passaggi per eseguire l’attività
- Crea prodotto (o usane uno esistente).
- Crea l’Attribute Set.
- Crea l’Attributo (da backend su Store e poi su Product). come “area text” (ma ricorda che puoi usare anche altra modalità). Imposta “yes” a due settaggi: Enable WYSIWYG (in Storefront Propertie) e Visible on Catalog Pages on Storefront.
- Vai su backend, Store, Attribute Set, scegli l’Attribute Set e aggiungi l’attributo che hai creato, e che si trova sulla destra, e spostalo nella lista in un punto qualunque.
- Vai in: app/design/frontend/Vendor/ThemeName/Magento_Catalog/layout/catalog_product_view.xml
- Modifica il file .xml, inserendo questo codice:
<referenceBlock name="product.info.details">
<block class="MagentoCatalogBlockProductView" name="product.info.custom" as="ingredients" template="product/view/custom.phtml" group="detailed_info" >
<arguments>
<argument translate="true" name="title" xsi_type="string">Ingredients</argument>
<argument name="type" xsi_type="string">ingredients</argument>
</arguments>
</block>
</referenceBlock>
- Il name del Reference block dispone dove si trova il block. “Product.info.details” è il block che racchiude tutti i tab, infatti se viene rimosso, spariranno dal frontend tutti i tab.
- Al posto della string “Ingredients” inserisci il nome visibile su frontend che vuoi dare al tab.
- l’”as=ingredients” assegna il nome all’id nel css. Quindi per modificarlo nel css devi scrivere #id=tab-laber-ingredients”.
- Il nome del block (product.info.custom), può essere uno qualsiasi, ma deve essere unico.
- Il template=”product/view/custom.phtml” indica quale phtml deve mostrare.
- Vai in: app/design/frontend/Vendor/ThemeName/Magento_Catalog/templates/product/view/custom.phtml
nel caso in cui tali cartelle non esistessero, puoi crearle. Modifica il file “custom.phtml”, a cui puoi dare il nome che vuoi. E inserisci il seguente codice:
<?php
$_product = $block->getProduct();
$value = $_product->getResource()->getAttribute('prova_attributo')->getFrontend()->getValue($_product); //attribute value
echo $value;
?>
Conclusioni
Abbiamo visto come creare aggiungere tab nella pagina prodotto in Magento 2.
In caso di difficoltà puoi contattarci dal nostro form contatti se lo desideri.
Note: Per la guida è stato utilizzato Magento 2.2.