Hide long Product Description with Read More

Francis_Duggan
Tourist
5 0 3

I've taken a good look and tried to implement code from this thread https://ecommerce.shopify.com/c/ecommerce-design/t/hide-long-product-description-482305

but for the life of me I can't get it to work.

Any Help would be much appreciated

 

I've used the following code

<!––Just above </body> tag on theme.liquid ––>

{% if template == "product" %} 
<script type="text/javascript">
jQuery(document).ready(function($)
                             {
        //   $('.fulltext').hide();
		
        $('.readmore').insertAfter( '.product-description' );

        $('.readmore').click(function (event) {
          event.preventDefault();
          var description = document.querySelector('.product-description');
          console.log(description.style.height)
          if (description.style.height === ''){
            description.style.height = 'auto';
          } else if (description.style.height === 'auto'){
            description.style.height = '';
          }
          else{
            description.style.height = '92px';
          }

          $(this).text($(this).text() == 'Read less...' ? 'Read more...' : 'Read less...');
        });
      });
</script>
{% endif %}  


<!––On product-template.liquid ––>

 <div class="product-collapes">
            <div class="product-description rte" itemprop="description">
              {{ product.description }}
            </div>
            <a class="readmore" href="#">Read more...</a>
          </div>


<!––on theme.scss.liquid ––>

.product-description {
  height:200px;
  overflow: hidden;
 }

Any help would be greatly appreciated.

a link to a relevant product page is here

https://www.gomusicgear.com/collections/audio-interface/products/jgk

password: prahgh

Jivan_Suhagiya
Shopify Partner
458 62 95

Hi Francis,
Its because of jQuery not defined error.
Add jQuery scripttag before 

jQuery(document).ready(function($)
If helpful then please Like and Accept Solution.
Email: suhagiyajivan1992@gmail.com
Skype: jivan.suhagiya
First kind of Checkout Reminder APP: https://apps.shopify.com/checkout-reminder
Francis_Duggan
Tourist
5 0 3
foxen
New Member
1 0 1

thanks, bro it's  working  :)

krishn
Shopify Partner
8 0 2

Thanks for the code it's really helpful ...)

SVictory
New Member
2 0 0
Hi Francis

Can you please write the exact code after you did the below amendments. I have tried so many times and my show less and more buttons don't work. Thank you
"Sorted. forgot to include CDN
script
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">&lt;/script&gt;
0 Likes
Avec
Tourist
13 0 2

Hi,

 

I've followed the two guides starting here (https://community.shopify.com/c/Shopify-Design/Hide-long-Product-description/td-p/408505/page/2) and then moved onto this assistance.

 

Initially when I implemented the code, I got a duplication of the description (both had a Read More/Less Option.

 

That has been resolved so there is one, shortened description. Unfortunately, the Read More/Less content is no longer there.

 

Here's an example: https://avecenvie.com/collections/bras-bottoms/products/bra-ecru-roza-ewolet-soft-cup?variant=329232...

 

Hopeful someone can help!

0 Likes
Avec
Tourist
13 0 2

For anyone else reading I've managed to sort this out.

 

The code causing me a problem on Minimal theme was when I added the following to the bottom of the product-template.liquid:

 

<div class="product-collapes">
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
<a class="readmore" href="#">Read more...</a>
</div>

 

Instead of adding this to the bottom, I found the following code and added the <a class="readmore.."  around row 250.

 

That whole block looks like this now:

 

<div id="extra" class="tab-switch__content" data-content="extra">
<div class="rte">
{{ pages[section.settings.extra_tab_content].content }}
</div>
</div>
</div>
{% else %}
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
<a class="readmore" href="#">Read more...</a>
{% endunless %}

 

Hope this helps someone (it's taken me all morning with my limited skills)!

0 Likes
Armand_Z
New Member
5 0 0

Hi there, I'm trying to sort same problem, code you published is unavailable. Could you tell me where can I find it? I use Minimal theme.

Thanks, Armand.

0 Likes