Solved

Add collapsible tab/ show more to collection description

nchantu
Excursionist
17 1 6

So I just started using Shopify and have been stuck on this problem for the last few days. I'm aware that I posted a similar question yesterday but I've asked a moderator to delete it since I believe this formulating below is more explanatory of the issue.

 

I'm using Dawn theme, and have very limited knowledge in coding. Only super-basic JS experience. 

 

So I got one main concern which I desperately been searching answers for, and that  is:

What I want to do is add a "show more button" / collapsible tab to my collection descriptions, preferably by default if text contains a certain amount of letters. I'm guessing that i need to change some code in the file "main-collection-banner.liquid". 

If someone could provide a helping hand i would be super grateful.

 

Then I've got another "extra follow-up" question. I think i would be able to figure this one out myself but if anyone have got the possibility to answer this as well I would really appreciate it: 

I want the collection banner to be like the image-banner.liquid, but also include the collection description beneath the image. I've kinda solved it by simply changing banner type in the collection.json  - template, but that excludes the collection description.

If there is no relatively simple solution for this I'm aware that I just can add a rich text beneath instead, and copy paste the desc. 

 

 

Accepted Solution (1)

nchantu
Excursionist
17 1 6

This is an accepted solution.

Finally found a solution thanks to this legend @Justin-Smith answers in this thread: https://community.shopify.com/c/shopify-design/help-requested-to-add-quot-read-more-quot-and-to-coll...

In main-collection-banner.liquid file, i replaced 

{{ collection.description }}

 with:

<div id="truncated">{{ collection.description | truncatewords: 10, "... <a class='read-more-collection' data-no-instant>Read More</a>" }}</div>
<div id="fullDescription" style="display: none">{{ collection.description | append: " <a class='read-more-collection' data-no-instant>Read Less</a>" }}</div>

 Then added this at the bottom, right before the schema starts:

<style>
.read-more-collection:hover{cursor:pointer}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
var jq224 = jQuery.noConflict(true);
jq224('.read-more-collection').on('click', function(e){
e.preventDefault();
if (!jq224('#fullDescription').is(':visible')){
jq224('#truncated').fadeOut(300, function(){
jq224('#fullDescription').fadeIn(500);
});
}else{
jq224('#fullDescription').fadeOut(300, function(){
jq224('#truncated').fadeIn(500);
});
}
});
</script> 

 

View solution in original post

Replies 3 (3)

nchantu
Excursionist
17 1 6

This is an accepted solution.

Finally found a solution thanks to this legend @Justin-Smith answers in this thread: https://community.shopify.com/c/shopify-design/help-requested-to-add-quot-read-more-quot-and-to-coll...

In main-collection-banner.liquid file, i replaced 

{{ collection.description }}

 with:

<div id="truncated">{{ collection.description | truncatewords: 10, "... <a class='read-more-collection' data-no-instant>Read More</a>" }}</div>
<div id="fullDescription" style="display: none">{{ collection.description | append: " <a class='read-more-collection' data-no-instant>Read Less</a>" }}</div>

 Then added this at the bottom, right before the schema starts:

<style>
.read-more-collection:hover{cursor:pointer}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
var jq224 = jQuery.noConflict(true);
jq224('.read-more-collection').on('click', function(e){
e.preventDefault();
if (!jq224('#fullDescription').is(':visible')){
jq224('#truncated').fadeOut(300, function(){
jq224('#fullDescription').fadeIn(500);
});
}else{
jq224('#fullDescription').fadeOut(300, function(){
jq224('#truncated').fadeIn(500);
});
}
});
</script> 

 

Steve791
Visitor
3 0 0

Thanks works great!

JustJazato
Visitor
2 0 0

This worked out perfect! Thanks!