Intro
In questo articolo analizzeremo come inserire attributi custom dinamici, nella Pagina Prodotto di una piattaforma sviluppata con Magento 2.
In pratica, creeremo degli attributi per i nostri Prodotti, e faremo apparire a schermo in ogni pagina Prodotto, tale attributo con il relativo valore assegnato per quel determinato prodotto.
Nell’esempio specifico, creeremo l’attributo “Peso Prodotto” e faremo apparire il relativo valore, che ovviamente varierà a seconda del Prodotto che stiamo visualizzando.
Creazione attributo prodotto
Anzitutto occorre creare l’Attributo Prodotto nel backend di Magento 2 in Stores/Attributes/Product, e aggiungere il nuovo attributo custom cliccando su “Add New Attribute“.
I valori che devono necessariamente essere settati sono i seguenti.
Nome campo: Nel nostro esempio sarà “Weight”.
Attributo code: “weight”.
Catalog Input Type for Store Owner: Text Field.
Scope: Global.
Successivamente recarsi in Store/Attributes/Attribute Set<
Cliccare su Default e trascinare il nostro attributo appena creato presente nella colonna di destra, nella colonna centrale insieme a tutti gli altri.
Adesso, in ogni Prodotto a backend, sarà presente tale attributo che è possibile valorizzare per ogni singolo prodotto.
Creazione blocco
A questo punto dobbiamo creare il “blocco” da inserire all’interno della pagina Prodotto. Tale blocco consiste in un file phtml che richiama l’attributo che abbiamo creato, così da mostrarne il valore che abbiamo settato nella relativa pagina del prodotto a backend.
Recarsi nel tema, nel seguente path: app/design/frontend/[Vendor del tema]/ [nome del tema]/Magento_Catalog/templates/product/view
e creare il file phtml che chiameremo “peso.phtml.
All’interno di questo file inserire:
<?php
$_product = $block->getProduct();
$value = $_product->getResource()->getAttribute('weight')->getFrontend()->getValue($_product); //atttribute value
$value = $value*1000;
$value = $value.' gr';
$lable = $_product->getResource()->getAttribute('weight')->getStoreLabel(); //attribute lable
echo '<div class="divWeight"><div class="labelWeight">'.$lable.':</div> <div class="valueWeight">'.$value."</div></div>";
?>
Come si può evincere dal codice, stiamo prendendo il valore del nostro attributo tramite il “get_attribute(‘weight’)” e ne stiamo stampando il valore tramite l’”echo” in una struttura html.
Posizioniamo il blocco nella pagina
Infine, dobbiamo soltanto prendere tale “blocco” phtml e posizionarlo nella pagina prodotto nella specifica posizione mostrata in figura poco più sù.
Per fare ciò, recarsi in: app/design/frontend/[Vendor del tema]/ [nome del tema]/Magento_Catalog/layout/catalog_prodoct_view.xml
ed inserire il seguente codice all’interno del tag “body”.
<!-- Peso -->
<referenceBlock name="product.info.main">
<block class="MagentoCatalogBlockProductView" name="product.info.weight1" as="weight1" template="product/view/peso.phtml" group="detailed_info" >
<arguments>
<argument translate="true" name="title" xsi_type="string">weight1</argument>
<argument name="type" xsi_type="string">weight1</argument>
</arguments>
</block>
</referenceBlock>
<!-- Posizione del blocco Peso -->
<move element="product.info.weight1" destination="product.info.social" after="product.info.stock.sku"/>
Tramite il percorso del “template” richiamiamo il file phtml che abbiamo creato poco fa e lo posizioniamo tramite il tag “move”.
Conclusioni
Adesso il nostro attributo prodotto custom è stato creato e verrà mostrato in ogni pagina. Ciò che viene mostrato è ovviamente il valore dell’attributo che abbiamo impostato per ogni singolo prodotto.
E’ possibile visionare la documentazione ufficiale di Magento riguardo la creazione di blocchi phtml al seguente link:
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/templates/template-override.html
Per ogni chiarimento o approfondimento potete contattarci tramite il form contatti del sito.