How to add a read full description text to collections page on Fashionopolism theme

[Juel]

How can I add a read full description text to my main collections page? I have a long description and I would like to display only the first line and have text that reads "read full description". Here is a link to the page https://lindsays-shop.com/collections. I am using the Fasionopolism Theme.

[CodingFifty]

Hello,

If you have a product-template.liquid - open it and ctrl+f for "product.description". You should see something like:

{{ product.description }}

You're going to want to take that and wrap it like I had in my code:

<div class="truncate-container">
<div id="truncated-product-description">
  {{ product.description | truncate: 40 }} <span id="read-more" class="read-additional">Read more</span>
</div>
<div id="product-description">
    {{ product.description }} <span id="read-less" class="read-additional">Read less</span>
</div>
</div>

You have a css file and a javascript file that are linked to your site. What they are, I don't know. Typically the css file is called theme.scss.liquid in your assets folder, and the JS is either theme.js, custom.js (file for you to put your own custom js into), shop.js -- not sure, it could be anything. An alternative option is to put style tags directly above it and script tags directly below it and just add them in right there, this will probably be the easiest path for you but isn't really the "proper" way to do it. 

<style>
.truncate-container {
  width:300px;
}
.read-additional {
  color: blue;
  text-decoration: underline;
}
.read-additional:hover {
  cursor: pointer;
}
#product-description {
  display: none;
}
</style>
<div class="truncate-container">
<div id="truncated-product-description">
  Here is your truncated description, it'll go on for.... <span id="read-more" class="read-additional">Read more</span></div>
<div id="product-description">
    Here is your truncated description, it'll go on for however long you want to. You can add as many words in here and there'll be no limit to the amount of characters you can use. <span id="read-less" class="read-additional">Read less</span></div>
</div>
<script>
let read_more = document.getElementById('read-more')
let read_less = document.getElementById('read-less');
let truncated_description = document.getElementById('truncated-product-description');
let full_description = document.getElementById('product-description');

read_more.addEventListener('click', showHideDescription)
read_less.addEventListener('click', showHideDescription)

function showHideDescription(){
  let ID = this.id
  if(ID === "read-more"){
    truncated_description.style.display = "none";
    full_description.style.display = "block";
  }else {
    truncated_description.style.display = "block";
    full_description.style.display = "none";    
  }
}
</script>

If you'd like I can do it for you. Just send me a dm with your store url and I'll request access, duplicate your theme, and make the change and make sure everything is working.

Thanks!

[Juel]

I don't need this for product pages. I need it for the main collection page that displays all my stores collections.

[devcoders]

Hello @Juel 

Go to Online Store > Themes > Actions > Edit Code.
In the left sidebar, open the theme.liquid file and add before </body> tag.

<script>
$(document).ready(function() {
if (typeof jQuery != 'undefined') {
$(document).ready(function() {
var $description = $('.collection__page-description');
var descriptionText = $description.html();
var firstLine = descriptionText.split('\n')[0];
$description.html(firstLine + '... <a href="#" class="read-more">Read Full Description</a>');
$('.read-more').click(function(e) {
e.preventDefault(); // Prevent the link from navigating
$description.html(descriptionText + ' <a href="#" class="read-less">Read Less</a>');
});
$(document).on('click', '.read-less', function(e) {
e.preventDefault(); // Prevent the link from navigating
$description.html(firstLine + '... <a href="#" class="read-more">Read Full Description</a>');
});
});
} else {
console.log('jQuery not loaded');
}
});
</script>

[Juel]

Unfortunately this did not work.