PrestaShop to najczęściej wybierane oprogramowanie do tworzenia sklepów internetowych. Stosunkowo często zdarza się, że team Presty wprowadza nowe aktualizacje dodając nowe lub usuwając stare funkcje.

Razem z aktualizacją do PrestaShop 1.7, usunięty został widok podkategorii na osobnej stronie. W tym poradniku pokażemy wam krok po kroku, jak w prosty sposób włączyć ją z powrotem.

Edycja pliku kategorii produktów Prestashop

Na początku, musimy dostać się do pliku category.tpl w zapleczu naszej strony. Ścieżka lokalizacji pliku powinna wyglądać tak:

themes/#nazwaszablonu#/templates/catalog/listing/category.tpl

Otwieramy plik i wklejamy ten kod wewnątrz {bucket}:

{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>

Po zaktualizowaniu pliku category.tpl sprawdzamy czy po kliknięciu w główną kategorię, otwiera nam się osobna strona na której pokażą nam się nasze podkategorie. Jeśli nie widać żadnych efektów, czasami warto wyczyścić dane przeglądarki oraz PrestaShop.

Stylowanie widoku kategorii

Poniżej dołączamy przykładowe stylowanie, które wklejamy do pliku theme.css (lub custom.css jeśli taki istnieje). Ścieżka jego lokalizacji powinna wyglądać w następujący sposób: themes/#nazwaszablonu#/assets/css/#nazwa_pliku.css.

#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;
}

 

Odwiedź nas na Facebooku i Instagramie,
-BSIDEWORK Team #innowacjewpraktyce