Adding "Read More..." to Product Descriptions - help?

[Sunny_Wang]

I've tried everything, including the solution discussed here, but it doesn't work for me no matter what I do...

https://ecommerce.shopify.com/c/ecommerce-design/t/hiding-text-in-product-page-with-a-read-more-opti...

I also tried truncate characters but then it isn't expandable to full text. 

Product page here: http://theplanneremporium.com/collections/notable-planners/products/the-wedding-planner

I would appreciate any help thrown my way. Thank you in advance!

[Lixon_Louis]

Hi Sunny,

Let me know what was the issue/error that you encountered when trying the solution mentioned above (first one). you can inbox me if you like. 

[Sunny_Wang]

Hi Lixon,

Thanks so much for your reply. I've added the "read more" part of the fiddle after the {{ product.description }}, and I've added the javascript within script tags at the end. See below for my product.liquid.

{% if settings.prod_desc_placement == 'below' %}
          <div id="product-description" class="below">
            <div id="full_description" class="rte" itemprop="description">
              <ul class="tabs">
                    <li><a href="#tab-1">Info</a></li>
                 <li><a href="#tab-2">Shipping</a></li>
                 <li><a href="#tab-3">Reviews</a></li> 
                 <li><a href="#tab-4">Policies</a></li>
                  </ul>
                   <div id="tab-1">
                   {{ product.description }}
                    <a class="readmore" href="#">Read more...</a>
                   </div>
                   <div id="tab-2">
                       {{ pages.shipping-info.content }}
                   </div>
                 <div id="tab-3">
                      {{ pages.reviews.content }}
                 </div>
                   <div id="tab-4">
                      {{ pages.returns-and-policies.content }}
                 </div>
               </div>
            </div>
          </div>
        {% endif %}

And this towards the end of the product.liquid. 

<script>
$(document).ready(function () {
 //   $('.fulltext').hide();
    $('.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>

Basically, the "Read More" link will come up at the end of my product descriptions, but clicking it doesn't do anything, and it does not shorten my product descriptions at all, like it's supposed to.

What am I doing wrong?

Thanks so much in advance.

[brimin]

Sunny,

Did you add CSS to theme's stylesheet?

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

Also, please notice that in fiddle in question http://jsfiddle.net/h9u1n66g/ description is within div element with class product-description.

While on your site, description is within div element with ID product-description.

<div id="product-description" class="below">

So, you'll need to change

.product-description

to

#product-description

in both Javascript and CSS to reflect this.

[Sunny_Wang]

Hi Brimin,

Thanks for the tips! Unfortunately, after integrating everything you mentioned, I still can't get it to work.

I did have the portion below added to my css, but after reading your tips, I've changed the "." to "#" for "#product-description":

#product-description {
  height: 92px;
  overflow: hidden;
}

I've changed the ".product-description" to "#product-description" in the javascript as well:

<script>
$(document).ready(function () {
 //   $('.fulltext').hide();
    $('.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>

The piece of code for my product description is this:

        {% if settings.prod_desc_placement == 'below' %}
          <div id="product-description" class="below">
            <div id="full_description" class="rte" itemprop="description">
              <ul class="tabs">
                    <li><a href="#tab-1">Info</a></li>
                 <li><a href="#tab-2">Shipping</a></li>
                 <li><a href="#tab-3">Reviews</a></li> 
                 <li><a href="#tab-4">Policies</a></li>
                  </ul>
                   <div id="tab-1">
                   {{ product.description }}
                    <a class="readmore" href="#">Read more...</a>
                   </div>
                   <div id="tab-2">
                       {{ pages.shipping-info.content }}
                   </div>
                 <div id="tab-3">
                      {{ pages.reviews.content }}
                 </div>
                   <div id="tab-4">
                      {{ pages.returns-and-policies.content }}
                 </div>
               </div>
            </div>
          </div>
        {% endif %}

I have noticed, that the "Read More...", "Read Less..." will now change when you click it, but it still does not collapse the product description.

Any ideas?

[Sunny_Wang]

Alright, so after some fiddling, I managed to get it to collapse properly (I've set it at 260 px instead of 92); however now the "Read More..." link does not show up because it's hidden...

To see what I mean:
http://theplanneremporium.com/collections/notable-planners/products/the-wedding-planner

I'm so close! How do I fix this?

Thanks in advance!

[brimin]

Sunny,

You may want to try this.

Change back "#" to ".", and instead put {{ product.description }} in div with class product-description.

<div id="tab-1">
<div class="product-description">{{ product.description }}</div>
<a class="readmore" href="#">Read more...</a>
</div>

[Sunny_Wang]

It works!! Thank you so much for your help!! 

[duc_ho_duy]

I have the issue with my theme, I don’t find where to add the code , could you please help me show me where to put it in,

I include my code of yourstore theme , and this theme.

Hope to see your answer.

Best regard

[sunflower]

What is the theme you are using? I am using Brooklyn theme. somehow it does not work for me.  Please help