Duplication contenu page catégorie

[enmoderugby]

Bonjour,

Je suis sous P.S 1.7. Dès que le champs description dépasse un certain nombre de caractères, il duplique ces premières lignes !

Exemple : https://www.enmoderugby.com/fr/22-casques

Quelqu'un sait-il comment corriger ce bug ?

 

Merci

 

Nicolas

[Eolia]

Bug de votre thème (category.tpl) Normalement si le champ est inférieur à x caractères c'est le bloc 1 qui s'affiche (avec parfois un bouton "voir plus") sinon c'est le bloc 2 qui s'affiche.

[enmoderugby]

Voici le contenu du fichier themes/classic/templates/catalog/listing/category.tpl. Que faut-il corriger ?

{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
    {include file='catalog/_partials/category-header.tpl' listing=$listing category=$category}
{/block}

 

[Eolia]

en 1.7 il faut faire le petit Poucet et suivre les chemins, donc regarder le contenu du fichier catalog/_partials/category-header.tpl

[enmoderugby]

Voici le script.  Ce serait quoi le bug ?
 

<div id="js-product-list-header">
    {if $listing.pagination.items_shown_from == 1}
        <div class="block-category card card-block">
            <h1 class="h1">{$category.name}</h1>
            <div class="block-category-inner">
                {if $category.description}
                    <div id="category-description" class="text-muted">{$category.description nofilter}
                
</div>
                {/if}
                {if !empty($category.image.large.url)}
                    <div class="category-cover">
                        <img src="{$category.image.large.url}" alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}" loading="lazy" width="141" height="180">
                    </div>
                {/if}
            </div>
        </div>
    {/if}
</div>

 

[Eolia]

je ne sais pas où on remplit le bouton "Voir plus" dans la page catégorie mais chez vous il est vide

Si je le remplis et que je cache le second block en display none, j'obtiens ceci:

[enmoderugby]

Après avoir pas mal creuser, il semble que la page affiche une version courte du champ description et une version longue mais que les 2 restent affichées.

Quand la page se charge, elle affiche la version totale, puis, une fois chargée,  la version courte haut dessus au lieu de masquer la version longue. 

 

De mémoire dans des versions plus anciennes de PS, il y avait un bouton qui permettait de déplier le texte. 

[Eolia]

Je vous ai répondu il y a 3 heures mais mon contenu doit être approuvé...

[enmoderugby]

Oui donc le soucis est bien là a priori

[Mediacom87]

Bonjour,

Voilà pourquoi j'ai développé un module pour gérer l'affichage des descriptions de catégories trop longues sans dupliquer le contenu.

[enmoderugby]

Bug résolu avec l'aide @Eolia .... merci beaucoup et de ChatGPT

Etape 1 - Modification cateogry-header.tpl

<div id="js-product-list-header">
    {if $listing.pagination.items_shown_from == 1}
        <div class="block-category card card-block">
            <h1 class="h1">{$category.name}</h1>

            {*
             Textes utilisés par le JS "Voir plus / Voir moins"
             (doivent exister dans le DOM)
            *}
            <span id="readmore" style="display:none;">Voir plus</span>
            <span id="readless" style="display:none;">Voir moins</span>

            <div class="block-category-inner">
                {if $category.description}
                    <div id="category-description" class="text-muted">
                        {$category.description nofilter}
                    </div>
                {/if}

                {if !empty($category.image.large.url)}
                    <div class="category-cover">
                        <img src="{$category.image.large.url}"
                             alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}"
                             loading="lazy"
                             width="141"
                             height="180">
                    </div>
                {/if}
            </div>
        </div>
    {/if}
</div>

Etape 2 - Modification du custom.css avec l'ajout de : 

/* Cache la version longue de la description par défaut */
.text-muted .more_text {
    display: none;
}

/* Cache le bouton "Voir moins" par défaut */
.text-muted .read_less {
    display: none;
}