Prestashop versione 1.7 Visualizzare le SottoCategorie

Back to Blog

Prestashop versione 1.7 Visualizzare le SottoCategorie

Prestashop versione 1.7 Visualizzare le SottoCategorie.

In prestashop versione 1.7, da come è possibile notare, non vengono visualizzate le sottocategorie all’interno della categoria madre, bisogna anche dire (almeno in base ad alcuni dei miei clienti), che questa opzione di visualizzare le sottocategorie mi è stato chiesto di nasconderla perchè era già presente nel menù principale, ma adesso con l’avvento della versione 1.7 mi si chiede di mostrarla, ma questo è in base ad i gusti di come si desidera visualizzare il proprio sito web.

Per visualizzare il video clicca qui, per visualizzare il nostro canale youtube clicca qui

Bene passiamo ora a come effettuare questa modifica.

Passo 1

accedere attraverso il vostro ftp, cpanel, plesk e andare in themes/classic/templates/catalog/listing ed aprire il file category.tpl con il vostro editor di testo, qualora non ne avete uno vi consiglio di scaricare notepad+++ che trovate a questo link. Sempre attraverso il vostro ftp, cpanel, plesk  andare in themes/classic/assets ed aprire il file custom.css.

Passo 2

adesso che abbiamo i file custom.css e category.tpl aperti con il nostro editor di testo, andare al file custom.css ed aggiungere il seguente codice (se in caso avete già del codice presente, andare all’ultima riga)

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

bene adesso salvate il file custom.css con le modifiche apportate.

Passo 3

nel file catalog.tpl vi troverete questo codice

{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>
{/if}
{if $category.image.large.url}
<div class=”category-cover”>
<img src=”{$category.image.large.url}” alt=”{$category.image.legend}”>
</div>
{/if}
</div>
<div class=”text-sm-center hidden-md-up”>
<h1 class=”h1″>{$category.name}</h1>
</div>
{/block}

modificare il codice con questo

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

fatto queso salvate il tutto, accedere al vostro sito web e visualizzate la modifica effettuata.
In caso non viene visualizzata la modifica appena fatta, cancellare la cache sia di prestashop che del vostro browser.
Si ricorda sempre di fare un backup e/o una copia dei file prima di effettuare questa modifica.
Se desideri visualizzare altri contenuti del nostro blog clicca qui

Condividi questo post

Commenti (13)

  • Onofrio Rispondi

    Innanzitutto Complimenti per questa guida e per tutto ciò che c’è di utile sul vostro sito…
    sul mio template ( ovviamente prestashop 1.7) non trovo il file custom.css ( forse perchè non è quello CLASSIC)…
    La mia domanda è : Se lo creo e lo metto dentro la cartella miotema/assets/css funzionerà tutto correttamente?
    grazie

    il 11 luglio 2018 alle 19:51
    • SitoLab Rispondi

      salva Onofrio, grazie per i complimenti lei è molto gentile, vediamo di dare risposte alle sue domande

      non trova il file custom.css questo perchè (come giustamente ha scritto anche lei), non è il template di default, ogni sviluppatore ha una propria gestione dei file css quindi se non trova questo è perchè non ne necessita

      aggiungere il file custom ? ti consiglio di leggere qui

      saluti

      Sito Lab

      il 12 luglio 2018 alle 8:37
  • Fabio Rispondi

    salve con PS 1730 ho provato ad modificare i file (utilizzo un Theme diverso dal Custom) modificando e salvando tutto, cliccando sulle categorie non carica più le pagine delle categorie e va in errore

    il 18 luglio 2018 alle 16:52
    • SitoLab Rispondi

      sarebbe opportuno poter visualizzare vedere quello che lei ha fatto comunque le consiglio di aggiornare la sua versione prestashop perchè quella che utilizza è piena di bug, può contattare il nostro servizio clienti se lo desidera

      il 24 agosto 2018 alle 11:39
  • fabio Rispondi

    salve a me non funziona con un tema personalizzato non mi carica le pagine dei gruppi

    il 19 luglio 2018 alle 11:51
    • SitoLab Rispondi

      su che versione prestashop stà utilizzando questa modifica ?

      il 24 agosto 2018 alle 11:39
  • Alessandro Rispondi

    Salve,

    ho provato a settare come da configurazioni suggerite i due file. Avendo installato un tema sull’e-commerce, ho il file theme.css e non custom.css.
    Purtroppo il problema principale non è nemmeno quello, infatti, sostituendo il codice nel file catalog.tpl, ho un bruttissimo error 500.
    Come poter risolvere?

    grazie

    il 24 agosto 2018 alle 11:19
    • SitoLab Rispondi

      su che versione prova a fare questo ?

      il 24 agosto 2018 alle 11:39
      • Alessandro Rispondi

        Salve, la versione prestashop è : 1.7.2.4 .

        il 25 agosto 2018 alle 1:09
  • antonio Rispondi

    Il problema sono gli apici, con alcuni editor di codice copiando da questo sito gli apici non sono corretti, prova a sostituire tutti i doppi e singoli apici, cancellandoli e riscrivendoli da editor. A me ha funzionato.

    il 5 settembre 2018 alle 12:18
  • Cristian Pintaudi Rispondi

    Salve, complimenti per il suo sito, veramente utile per i neofiti come me, anche io applicando il suo codice ho riscontrato l’errore 500 ma credo di aver risolto lasciando intatta la prima parte di codice nel file category.tpl aggiungendo all’interno del {block} il nuovo codice, in questo modo le sub-categorie si sono finalmente visualizzate, quindi ho studiato dove poteva essere l’errore e ho notato la mancanza della stringa:
    {/if}
    {if $category.image.large.url}
    nella seconda parte di codice la lei ricopiata già presente sul file category.tpl
    Sperando di essere stato utile a comprendere l’errore le pongo adesso un nuovo quesito, la visualizzazione delle sub-categorie purtroppo si accavalla alla finestra di preferenza di visualizzazione dei prodotti, c’è un modo per portare i prodotti un pò più in basso? Saluti

    il 18 settembre 2018 alle 18:21
  • Alessandro Rispondi

    Salve, grazie per il suggerimento, adesso codice viene correttamente riconosciuto.
    Confermo che copiando dalla pagina e incollando su blocco note, oppure notepad++, oppure su file direttamente category.tpl, non vengono correttamente riconosciuti gli apici singoli e doppi.
    Ho sostituito tutti gli apici, e la pagina non è andata in error 500.

    il 18 settembre 2018 alle 18:43
  • Agostino miranda Rispondi

    ciao e complimenti per il sito

    utilizzo la versione 1.7.4, ho provato a fare tutto come descritto, ma niente
    ho provato a fare anche come a suggerito antonio a sostituire gli apici sia singolo che doppi ma il risultato non si vede!!!

    il 24 settembre 2018 alle 12:00

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*

Back to Blog