Il widget relativo ai prodotti ha il limite di non comprendere la toolbar, e di conseguenza non comprende il menu a tendina per l’ordinamento dei prodotti. In questo articolo quindi, vedremo come inserire il blocco prodotti, come se fossimo all’interno di una categoria.
Supponiamo di avere un nostro modulo MyVendor/Module già pronto, per i nostri esperimenti. Il primo passo è quello di creare il file cms_index_index.xml nella cartella MyVendor/Module/view/frontend/layout.
La parte fondamentale dell’operazione consiste nello specificare che nel container “content” vogliamo inserire il blocco prodotti, tramite il codice:
<referenceContainer name="content">
<block class="\Magento\Catalog\Block\Product\ListProduct" name="product_list"
template="Magento_Catalog::product/list.phtml">
</block>
</referenceContainer>
ma questo non è sufficiente, perchè dobbiamo tenere conto della presenza di eventuali prodotti configurabili. E infatti in quel caso, il risultato visivo non sarà dei migliori.
Il codice completo è il seguente
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column">
<head>
<css src="Magento_Swatches::css/swatches.css"/>
</head>
<body>
<attribute name="class" value="page-with-filter"/>
<referenceContainer name="content">
<block class="\Magento\Catalog\Block\Product\ListProduct" name="product_list"
template="Magento_Catalog::product/list.phtml">
<container name="category.product.list.additional" as="additional" />
<block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers" as="details.renderers">
<block class="Magento\Framework\View\Element\Template" as="default"/>
</block>
</block>
</referenceContainer>
<referenceBlock name="category.product.type.details.renderers">
<block class="Magento\Swatches\Block\Product\Renderer\Listing\Configurable" as="configurable" template="Magento_Swatches::product/listing/renderer.phtml" ifconfig="catalog/frontend/show_swatches_in_product_list" />
</referenceBlock>
</body>
</page>
Se voleste fare una prova per vedere come cambia il risultato finale, potreste commentare la sezione <referenceBlock> che trovate subito dopo la chiusura del tag referenceContainer.