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)

[Pillepalle909]

I am using 8.1.5 with the classic theme and would like to add "read more" to my description section. 

The code from the last post might work but I don't find the custom.js in the classic theme folder. 

I hope someone can help me out. 

[webprog]

19 hours ago, Pillepalle909 said:

I am using 8.1.5 with the classic theme and would like to add "read more" to my description section. 

The code from the last post might work but I don't find the custom.js in the classic theme folder. 

I hope someone can help me out. 

you will need to create this file before in assets\js folder of your theme.

Edited May 30 by webprog (see edit history)

[rthakur]

On 5/29/2024 at 6:24 PM, Pillepalle909 said:

I am using 8.1.5 with the classic theme and would like to add "read more" to my description section. 

The code from the last post might work but I don't find the custom.js in the classic theme folder. 

I hope someone can help me out. 

You can create custom.js file 
Just follow below steps

themes->classic->assets->js->custom.js

[endriu107]

Once I made tutorial how add "show more" button to product description. It is not in english but all you need is follow file changes I show in it.

https://www.youtube.com/watch?v=H7FaWSJ7kxc

[Pillepalle909]

18 hours ago, endriu107 said:

Once I made tutorial how add "show more" button to product description. It is not in english but all you need is follow file changes I show in it.

https://www.youtube.com/watch?v=H7FaWSJ7kxc

I have followed all the entries exactly and I have placed the additional custom.js and custom.css in the assets folder of the theme. If I then open any item in the store, the page cannot be opened. Error code 500.

So unfortunately it didn't work for me.

On 5/30/2023 at 10:36 PM, redfordnl said:

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

 

Unfortunately, it is not entirely clear to me where I have to enter this variable if I am to follow these instructions. I have created the custom.js and I have also found the corresponding folder.

[endriu107]

If you have 500 error at first turn on debug mode probably there is a typo in code.

[Pillepalle909]

5 hours ago, endriu107 said:

If you have 500 error at first turn on debug mode probably there is a typo in code.

I have found the error in the code. The error code 500 no longer appears. I have inserted a 1 instead of an i.

Despite the customized product.tpl, custom.css and custom.js, every product page loads as before. Unfortunately, no button “read more” or something similar is displayed, but the complete text is. 

Example: https://kleine-muehle.com/startseite/25-125-kleine-muhle-mit-titel-vorn-herren-shirt.html#/29-größe-s/41-farbe-white

[endriu107]

Try force compilation in BO.

[Pillepalle909]

Unfortunately, this has not changed anything. I selected “force compilation” under advanced settings -> performance and saved it. Unfortunately, the view is still the same as before.

[endriu107]

JS code are not loaded, try turn off js minification next clear cache and turn it on.

[Pillepalle909]

I did it twice, but unfortunately it didn't change anything. Unfortunately, I don't have the necessary experience to recognize the problem myself.

Thank you very much for your efforts.

[endriu107]

You have typo in this js line:

let description = document.query.Selector('.product-description.fulldesc')

it should be 

let description = document.querySelector('.product-description.fulldesc')

[Pillepalle909]

After I corrected the typo, “Expand description” is now displayed and can be expanded. Many thanks for your help.

Now I have three more questions:

- How can the font size of “Expand description” be adjusted?
- Can I specify that “Expand description” appears after 200 characters, for example?
- Can I set it so that “Expand description” is also used in the short description?

Quote

.product-description.fulldesc {
    display: inline-block;
    overflow: hidden;
}
.description-expander {
    display:none;
    transform: translateY(-60px);
    text-align: center;
    padding: 3rem;
    font-size: 1.4rem;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(218,218,218,1) 70%);
    cursor: pointer;
}
h2.title-desc {
    text-align: center;
    padding: 3rem;
}
.col-sm-6.image-slide img {
    max-width: 100%;
    height:auto;
}
.text.side, .fullblock, .sideblock {
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 2.5rem;
    letter-spacing: 2px;
    aspect-ratio: 1;
    }

Quote

let description = document.querySelector('.product-description.fulldesc')
let expander = document.querySelector('.description-expander')

function expand() {
    if (description.clientHeight > 900) {
        description.style.maxHeight = 900 + 'px'
        expander.style.display = 'block'
    }
    expander.addEventListener('click', () => {
        expander.style.display = 'none'
        description.style.maxHeight = '100' + '%'
    })
}

document.addEventListener('DOMContentLoaded', expand)

 

[endriu107]

7 hours ago, Pillepalle909 said:

- How can the font size of “Expand description” be adjusted?

.description-expander {
    display:none;
    transform: translateY(-60px);
    text-align: center;
    padding: 3rem;
    font-size: 1.4rem; /* Here is font size that you can change*/
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(218,218,218,1) 70%);
    cursor: pointer;
}

 

7 hours ago, Pillepalle909 said:

Can I specify that “Expand description” appears after 200 characters, for example?

It is possible but need changes in js code.

 

7 hours ago, Pillepalle909 said:

- Can I set it so that “Expand description” is also used in the short description?

Yes, easy way is add same code but with different classes.

[Mediacom87]

Hi,

you can add it very simply with this module for categories description, product description or home page text.