Magento 2 | Aggiungere tab nella pagina prodotto

Magento 2 | Aggiungere tab nella pagina prodotto

INDICE

Cerca nel sito

Cerca inserendo le parole chiave di tuo interesse. Puoi cercare tra centinaia di articoli e decine di pagine informative sul mondo web e blockchain.

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.

Magento2 - tab custom

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.

Servizi di sviluppo IT che forniamo sia ai clienti finali, sia alle altre aziende di sviluppo in subappalto in white label