magento tab in pagina prodotto

Magento 2 | Aggiungere tab nella pagina prodotto

Stefano MeloniBy Stefano MeloniSettembre 21, 20203 Minuti

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="Magento\Catalog\Block\Product\View" 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); //atttribute value
   echo $value;
?>

Al posto di ‘prova_attributo’, inserisci il nome che avevi dato all’Attributo nel backend!

AREA SOPRA I TAB
Se vuoi posizionare il blocco sopra i tab sostituisci questo:
<referenceBlock name=”product.info.details”>
con: <referenceBlock name=”product.info.main”>

AREA SOTTO I TAB
Se vuoi posizionare il blocco sotto i tab sostituisci:
<referenceBlock name=”product.info.details”>
con: <referenceBlock name=”product.info.additional”>

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.