Come cambiare automaticamente la visualizzazione del catalogo in funzione dei prodotti
Lettura 3 minuti
Vi è mai capitato di aver a che fare con pochi prodotti in lista su Magento, cioè il caso in cui i prodotti visualizzati sono inferiori al numero di colonne per riga, e ritrovarvi così un layout a griglia dove non sarebbe necessario? Non sarebbe meglio che soltanto in questo caso il layout passasse da griglia a lista?
È proprio l’idea che sta dietro questo semplice modulo, creato senza mettere mano ai phtml ma sfruttando la logica degli xml che utilizza Magento, in particolare nelle pagine di categoria e nei risultati della ricerca
di seguito i file che compongono il modulo con relativa spiegazione:
file:app/etc/modules/Company_Catalog.xml
<?xml version="1.0"?>
<config>
<modules>
<Company_Catalog>
<active>true</active>
<codePool>local</codePool>
<depends>
<Mage_Catalog/>
</depends>
</Company_Catalog>
</modules>
</config>- Company è il namespace della nostra azienda
- Catalog è il modulo di Magento che vogliamo estendere
file:app/local/Company/Catalog/etc/config.xml
<?xml version="1.0"?>
<config>
<modules>
<Company_Catalog>
<version>0.1.0</version>
</Company_Catalog>
</modules>
<global>
<models>
<company_catalog>
<class>Company_Catalog_Model</class>
</company_catalog>
</models>
<events>
<core_block_abstract_to_html_before>
<observers>
<company_catalog>
<class>company_catalog/observer</class>
<method>setListMode</method>
</company_catalog>
</observers>
</core_block_abstract_to_html_before>
</events>
</global>
<frontend>
<layout>
<updates>
<company_catalog>
<file>company_catalog.xml</file>
</company_catalog>
</updates>
</layout>
</frontend>
</config>frontend/layout/updates/company_catalog indica in quale file verranno inseriti le regole di aggiornamento di layout (layout update rules) raggruppate sotto gli opportuni layout handle.
In config/global/events/ utilizzo in nome dell’evento “core_block_abstract_to_html_before” per agganciarmi a quando sta per essere renderizzato un blocco. All’interno del metodo setListMode come vedremo faremo in modo di limitarne l’azione soltanto al blocco che ci interessa.
La cosa interessante qui è che avrei potuto semplicemente estendere il blocco Mage_Catalog_Block_Product_List e implementare il metodo setItemsLayoutDepend che inseriremo tra poco nel layout per applicare la nostra logica, tuttavia è sempre preferibile utilizzare gli Observer quando è possibile, per evitare incompatibilità con altri moduli che estendono le stesse classi (banalmente se un altro modulo estendesse il blocco Mage_Catalog_Block_Product_List una logica escluderebbe l’altra).
file: app/design/frontend/base/default/layout/company_catalog.xml (o al posto di base il tema dove lo vogliamo inserire)
<?xml version="1.0"?>
<layout version="0.1.0">
<catalogsearch_result_index>
<reference name="search.result">
<block type="catalog/product_list" name="search_result_list" template="catalog/product/list.phtml">
<action method="setItemsLayoutDepend"><range><from>1</from><to>2</to></range></action>
<block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
<block type="page/html_pager" name="product_list_toolbar_pager"/>
</block>
<action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
</block>
</reference>
</catalogsearch_result_index>
<catalog_category_default translate="label">
<reference name="category.products">
<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
<action method="setItemsLayoutDepend"><range><from>1</from><to>2</to></range></action>
<block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
<block type="page/html_pager" name="product_list_toolbar_pager"/>
</block>
<action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
</block>
</reference>
</catalog_category_default>
</layout>per gli handle catalogsearch_result_index e catalog_category_default ho ripreso i blocchi dall’xml rispettivamente da catalogsearch.xml e catalog.xml e aggiunto l’action method=“addItemsLayoutDepend” con specificato il range.
file:app/code/local/Company/Catalog/Model/Observer.php
<?php class Company_Catalog_Model_Observer{ public function setListMode($observer){ $block = $observer->getBlock();
if ($block instanceof Mage_Catalog_Block_Product_List && $block->hasData('items_layout_depend')){
$range = $block->getData('items_layout_depend');
if(count($block->getLoadedProductCollection()) >= $range['from']
&& count($block->getLoadedProductCollection()) <= $range['to']){ $block->getChild('product_list_toolbar')->setData('_current_grid_mode','list');
}
return $this;
}
}
}
creiamo il metodo setListMode che fa semplicemente il controllo che il numero di prodotti correnti sia nel range specificato precedentemente nell’xml, in quel caso imposta la toolbar come “list” altrimenti lascia quella della configurazione
Se avete impostato tutto correttamente dovreste ottenere un risultato simile a questo:
Ricerca:
e Pagina di Categoria:
Da notare che il fatto di mettere parametrico il range ci consente di modificarlo facilmente, nel caso ad esempio si passasse alla disposizione dei prodotti su 4 colonne.
In questo caso basterà cambiare il range (da 1 a 3 ) già nell’xml senza rivedere la logica o dover riscrivere codice.
Potete trovare il codice su questo repository git:
In bocca al Bitbull!
Articolo scritto da
Marco Greco☝ Ti piace quello che facciamo? Unisciti a noi!