category desc read more button

[VidWeeks]

Hello,

I have a problem. 

I have a read more button and when I click on it I want to see the rest of the text. If I use nofilter, it works well, but the layout is removed, which is not necessary. But if I do not use a nofilter, I will only see the layout, then you will see all the text while most of the text must be hidden under the read more button.

I have prestashop 1.7.6.1

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
    function AddReadMore() {
        //De lengte van de tekst wat die laat zien
        var carLmt = 400;
        // Tekst wat die laat zien als die is samengevouwen
        var readMoreTxt = " ...<br/><br />Lees verder";
        // Tekst wat die laat zien als die is uitgevouwen
        var readLessTxt = "<br /><br />Lees minder";


        //Traverse all selectors with this class and manupulate HTML part to show Read More
        $(".addReadMore").each(function() {
            if ($(this).find(".firstSec").length)
                return;

            var allstr = $(this).text();
            if (allstr.length > carLmt) {
                var firstSet = allstr.substring(0, carLmt);
                var secdHalf = allstr.substring(carLmt, allstr.length);
                var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span><span class='readMore'  title='Click to Show More'>" + readMoreTxt + "</span><span class='readLess' title='Click to Show Less'>" + readLessTxt + "</span>";
                $(this).html(strtoadd);
            }

        });
        //Read More and Read Less Click Event binding
        $(document).on("click", ".readMore,.readLess", function() {
            $(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent");
        });
    }
    $(function() {
        //Calling function after Page Load
        AddReadMore();
    });
    </script>
    <style>
    .addReadMore.showlesscontent .SecSec,
    .addReadMore.showlesscontent .readLess {
        display: none;
    }

    .addReadMore.showmorecontent .readMore {
        display: none;
    }

    .addReadMore .readMore,
    .addReadMore .readLess {
        margin-left: 2px;
        color: black;
        cursor: pointer;
        font-family: rubik, sans serif;
    }

    .addReadMoreWrapTxt.showmorecontent .SecSec,
    .addReadMoreWrapTxt.showmorecontent .readLess {
        display: block;
    }
    </style>






     <DIV class="addReadMore showlesscontent">
          {$category.description nofilter}
        </DIV>

 

[lototo]

I got a same problem. With the nofilter smarty tag tpl works but validator.prestashop.com give me error

Quote

"Removing variable escaping is highly discouraged because malicious code can be displayed and executed"

 

[prestapp]

Hi,

can you explain me how add "read more" button on categories description in PS 1.7.7.3?

Thank you

[JBW]

On 4/29/2021 at 11:15 AM, prestapp said:

can you explain me how add "read more" button on categories description in PS 1.7.7.3?

Hi, my module "Expandable Descriptions - "read more..." in your texts" can support all kind of decscriptions including category descriptions: