Uno dei problemi principali passando alla nuova versione è quello di visualizzare le sottocategorie in Prestashop 1.7 , eravamo abituati a vederle direttamente, nella nuova verisone invece si vedono direttamente gli articoli. In questa immagine sotto il risultato di quello che vogliamo vedere e cioè l’elenco delle sottocategorie in Prestashop 1.7 direttamente nella pagina della categoria madre.
Risolvere questo problema è abbastanza semplice, basta modificare 2 file, il primo file è il tpl delle categorie e il secondo file è il css del foglio di stile.
Cerchiamo quindi il file tpl delle categorie che troveremo nella directory del tema classico, il percorso è “/themes/classic/templates/catalog/listing/category.tpl“, apriamolo con il Notepad++, se non lo avete vi consiglio di scaricarlo, lo troverete a questo link.
Il file che stiamo modificando è responsabile della visualizzazione della pagina delle categorie che noi andremo a sistemare in modo tale che visualizzi le sottocategorie così come nelle vecchie versioni.
Dopo aver aperto il file, all’interno del codice {block} aggiungiamo questo codice:
{if isset($subcategories)} <!-- Subcategories --> <div id="subcategories"> <p class="subcategory-heading">{l s='Subcategories'}</p> <ul class="clearfix"> {foreach from=$subcategories item=subcategory} <li> <div class="subcategory-image"> <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img"> {if $subcategory.id_image} <img class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category_default')|escape:'html':'UTF-8'}" alt="{$subcategory.name|escape:'html':'UTF-8'}"/> {else} <img class="replace-2x" src="{$img_cat_dir}{$lang_iso}-default-category_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"/> {/if} </a> </div> <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}</a></h5> {if $subcategory.description} <div class="cat_desc">{$subcategory.description}</div> {/if} </li> {/foreach} </ul> </div>{/if}Il codice appena inserito non fa altro che controllare se la pagina delle categoria contiene le sottocategorie, in questo caso crea l’elenco delle sottocategorie di quella categoria. L’elenco contiene anche l’immagine della sottocategoria oltre al nome della sottocategoria.
A questo punto bisogna personalizzare la visualizzazione delle sottocategorie che abbiamo inserito. Basta semplicemente modificare il file css del tema che troveremo in questo percorso: “/assets/css/theme.css“. Apriamo questo file sempre con il Notepad++ e alla fine incolliamo il seguente codice:
/* ************************************************************************************************ Sub Categories Styles************************************************************************************************ */#subcategories { border-top: 1px solid #d6d4d4; padding: 15px 0 0px 0;}#subcategories p.subcategory-heading { font-weight: bold; color: #333; margin: 0 0 15px 0;}#subcategories ul { margin: 0 0 0 -20px;}#subcategories ul li { float: left; width: 145px; margin: 0 0 13px 33px; text-align: center; height: 202px;}#subcategories ul li .subcategory-image { padding: 0 0 8px 0;}#subcategories ul li .subcategory-image a { display: block; padding: 9px; border: 1px solid #d6d4d4;}#subcategories ul li .subcategory-image a img { max-width: 100%; vertical-align: top;}#subcategories ul li .subcategory-name { font: 600 18px/22px "Open Sans", sans-serif; color: #555454; text-transform: uppercase;}#subcategories ul li .subcategory-name:hover { color: #515151;}#subcategories ul li .cat_desc { display: none;}#subcategories ul li:hover .subcategory-image a { border: 5px solid #333; padding: 5px;}Il gioco è fatto, a questo punto non ci resta che aprire una pagina di una qualsiasi categoria che abbia sottocategorie e le vedremo comparire, se non si dovessero vedere probabilmente sarà necessario svuotare la cache del browser (il browser avrà ancora in cache il vecchio file .css) e svuotare la cache di prestashop.
Scriveteci per qualsiasi informazione e continuate a seguirci per altri consigli!
