Read more button in category description

[Peter.31]

Can anyone advise me how to add the "Read more" button to the product category? I want only 4 lines to be displayed and the rest of the text will be hidden, it will appear after pressing the button.

I want it to look like this: https://codepen.io/Idered/pen/ExYROd

PrestaShop 1.7.8.5

[webprog]

Hello, for 1.7.8.5 you will need to edit themes\classic\templates\catalog\_partials\category-header.tpl file for classic theme, if you want to see description as it is - in the top.

But better to use https://addons.prestashop.com/en/page-customization/16778-additional-description-category-new.html module. You will get partial view and now it supports powerfull FAQ system for category pages. And that is good for SEO.

[Peter.31]

I would rather edit the file in the theme than use the module.

[rthakur]

9 hours ago, Peter.31 said:

Can anyone advise me how to add the "Read more" button to the product category? I want only 4 lines to be displayed and the rest of the text will be hidden, it will appear after pressing the button.

I want it to look like this: https://codepen.io/Idered/pen/ExYROd

PrestaShop 1.7.8.5

Hello,

You can try to custom implementation. 

[JBW]

In the example code you are sharing the description has to be split into two sections so that can it be hidden/shown based on the checkbox state. This would require you to put some logic in the template file.

My module "Expandable descriptions - read more button in texts" can add the requested functionalliy to all desciptions texts (incl. category) in  Prestashop. You don't need any template change with the module as it uses javascript to add and control the read more function

[endriu107]

Try something like that in themes\classic\templates\catalog\_partials\category-header.tpl change this:

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

to this:

<div id="category-description" class="text-muted collapse" aria-expanded="false">{$category.description nofilter}</div>
<i data-toggle="collapse" href="#category-description" role="button" aria-expanded="false" aria-controls="category-description" class="material-icons collapsed">unfold_more</i>

in custom css add:

#category-description, #category-description.text-muted.collapse {
    height: 103px;
    overflow: hidden;
    display: block;
}

#category-description.text-muted.collapse.in {
    height: 100%;
}

 

[Peter.31]

On 12/1/2022 at 9:34 PM, endriu107 said:

Try something like that in themes\classic\templates\catalog\_partials\category-header.tpl change this:

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

to this:

<div id="category-description" class="text-muted collapse" aria-expanded="false">{$category.description nofilter}</div>
<i data-toggle="collapse" href="#category-description" role="button" aria-expanded="false" aria-controls="category-description" class="material-icons collapsed">unfold_more</i>

in custom css add:

#category-description, #category-description.text-muted.collapse {
    height: 103px;
    overflow: hidden;
    display: block;
}

#category-description.text-muted.collapse.in {
    height: 100%;
}

 

This code is not bad. But I have a problem with the scroll button. It is always displayed even with short texts. Is it possible to make the button appear only if there is a long text?

[Peter.31]

Adding a read more button to the category description:

 

Try something like that in themes\classic\templates\catalog\_partials\category-header.tpl change this:

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

to this:

<div id="category-description" class="text-muted">{$category.description nofilter}</div>
            <input id="readmore" type="hidden" value="{l s='Read more' d='Shop.Theme.Catalog'}">
            <input id="readless" type="hidden" value="{l s='Read less' d='Shop.Theme.Catalog' }">

 

In custom.js add:

$(document).ready( function() { / * to make sure the script runs after page load * /

    $ ('.text-muted').each(function(event){ / * select all divs with the item class * /

        var max_length = 500 ; / * set the max content length before a read more link will be added * /

        if ( $(this).html().length > max_length ) { / * check for content length * /
            var short_content      = fixhtml( $(this).html().substr(0,max_length),'less_text');

            var long_content     = fixhtml($(this).html(),'more_text');
            var readmore = btnhtml($( "#readmore" ).val(),'read_more');
            var readless = btnhtml($( "#readless" ).val(),'read_less');
            $(this).html("");
            $(this).append(short_content );
            $(this).append( readmore );
            $(this).append( long_content);
            $(this).append( readless );

            $(this).find( '.less_text' ).show ();
            $(this).find( '.read_more' ).show();
            $(this).find( '.read_less' ).hide();
            $(this).find( '.more_text' ).hide ();

            $(document).on('click','.read_more',function(event){ / * find the a.read_more element within the new html and bind the following code to it * /

                event.preventDefault(); / * prevent the a from changing the url * /
                $(this).hide(); / * hide the read more button * /
                $(this).parents( '.text-muted' ).find( '.read_less' ).show(); / * show the read less button * /
                $(this).parents( '.text-muted' ).find( '.more_text' ).show(); / * show the .more_text span * /
                $(this).parents( '.text-muted' ).find( '.less_text' ).hide(); / * hide the short text span * /

            });

            $(document).on('click','.read_less',function(event){ / * find the a.read_more element within the new html and bind the following code to it * /
                event.preventDefault(); / * prevent the a from changing the url * /
                $(this).parents( '.text-muted' ).find( '.read_more' ).show(); / * show the read more button * /
                $( this ).parents( '.text-muted' ).find( '.read_less' ).hide(); / * hide the read more button * /
                $( this ).parents( '.text-muted' ).find( '.more_text' ).hide (); / * hide the .more_text span * /
                $( this ).parents( '.text-muted' ).find( '.less_text' ).show (); / * show the short text span * /

            });
        }

    });

});

function fixhtml ( html, classname ) {
    const $div = document.createElement('div');
        $div.innerHTML = html;
        $div.classList.add(classname);
        console.log($($div));
     return ($($div));
}

function btnhtml ( html, classname ) {
    const $a = document.createElement('a');
        $a.innerHTML = html;
        $a.classList.add(classname);
     return ($($a));
}

[endriu107]

@Peter.31 there is a lot of js code for functionality that don't need any js code. I think it could be solved easer if you share url to page with issue.

[redfordnl]

This code worked for me

https://codepen.io/paulobrien/pen/JXrxBg

Very easy to implement

Step 1 --> Add class "truncate" to your div

<div class="truncate">

Step 2. --> Go to custom.js (somewhere in your theme folder on your webspace/FTP) and add the following code:

// requires jquery
$(document).ready(function() {
  (function() {
    var showChar = 400;
    var ellipsestext = "...";

    $(".truncate").each(function() {
      var content = $(this).html();
      if (content.length > showChar) {
        var c = content.substr(0, showChar);
        var h = content;
        var html =
          '<div class="truncate-text" style="display:block">' +
          c +
          '<span class="moreellipses">' +
          ellipsestext +
          '&nbsp;&nbsp;<a href="" class="moreless more">more</a></span></span></div><div class="truncate-text" style="display:none">' +
          h +
          '<a href="" class="moreless less">Less</a></span></div>';

        $(this).html(html);
      }
    });

    $(".moreless").click(function() {
      var thisEl = $(this);
      var cT = thisEl.closest(".truncate-text");
      var tX = ".truncate-text";

      if (thisEl.hasClass("less")) {
        cT.prev(tX).toggle();
        cT.slideToggle();
      } else {
        cT.toggle();
        cT.next(tX).fadeToggle();
      }
      return false;
    });
    /* end iffe */
  })();

  /* end ready */
});

You can change character length to whatever you need:

var showChar = 400;

Works like a charm on PS 8.X (so will work also for PS 1.7).

Edited May 30, 2023 by redfordnl (see edit history)