Prestashop 1.7 è migliorato tanto sotto diversi aspetti rispetto alla precedente versione, velocità, sicurezza, caratteristiche ma ci ha anche tolto qualche feature che eravamo abituati ad usare con la 1.6.
Le Categorie genitore, o Macrocategorie, mostravano (una volta atterrati sulla pagina della macrocategoria) tutte le sottocategorie nella versione 1.6, mentre nella versione di Prestashop 1.7 non vengono più visualizzate.
Per rimediare a questo problema possiamo andare a fare una piccola modifica al nostro tema child che ci fornirà la possibilità di rendere visibili le sottocategorie nelle pagine delle categorie genitore (macrocategorie).
Lo ripeto ogni volta: ogni e-commerce e quindi ogni target di riferimento, ogni settore di mercato e quindi ogni circostanza può variare la necessità di implementare o meno le sottocategorie nel nostro e-commerce.
Sottocategorie nella pagina di categoria
Quindi, decretata l’utilità della visualizzazione delle sottocategorie nella pagina della macrocategoria vediamo come fare per rendere realtà questa caratteristica.
Ricerca e stampa delle sottocategorie
- Apriamo il sito via FTP o dal file manager del cPanel del nostro hosting
- Cerchiamo il file template delle categorie al percorso /themes/nometemplate/templates/catalog/listing/category.tpl e lo apriamo con un editor di testo
- Incolliamo questa porzione di codice all’interno del codice che trovate all’interno di {block}:
{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}In base a dove l’avrete incollata a questo punto vi appariranno le sotto categorie e così potrete navigare la categoria genitore e le relative sottocategorie molto più facilmente di prima.
Io solitamente preferisco lasciare in ordine, il titolo, la descrizione (e/o immagine) della macrocategoria e poi inserire subito di seguito le sottocategorie. In questo caso il codice sorgente del file category.tpl sarà così:
{**
* 2007-2016 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Open Software License (OSL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/osl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
* @author PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2016 PrestaShop SA
* @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*}
{extends file='catalog/listing/product-list.tpl'}
{block name='product_list_header'}
<div class="block-category card card-block hidden-sm-down">
<h1 class="h1">{$category.name}</h1>
{if $category.description}
<div id="category-description" class="text-muted">{$category.description nofilter}</div>
<div class="category-cover">
<img src="{$category.image.large.url}" alt="{$category.image.legend}">
</div>
{/if}
</div>
<div class="text-xs-center hidden-md-up">
<h1 class="h1">{$category.name}</h1>
</div>
{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}
{/block}Se avete una versione template non nuovissima, mentre potrebbe essere così:
{**
* 2007-2019 PrestaShop and Contributors
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License 3.0 (AFL-3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* https://opensource.org/licenses/AFL-3.0
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to https://www.prestashop.com for more information.
*
* @author PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2019 PrestaShop SA and Contributors
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
* International Registered Trademark & Property of PrestaShop SA
*}
{extends file='catalog/listing/product-list.tpl'}
{block name='product_list_header'}
{include file='catalog/_partials/category-header.tpl' listing=$listing category=$category}
{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}
{/block}
se avete una versione più recente del tema.
In ogni caso, dopo aver modificato il file .tpl delle categorie dovrete andare ad assegnare lo stile che volete all’interno del custom.css.
