Help requested to add "Read More" and to Collection Descriptions in collection.liquid

Highlighted
Shopify Partner
6 0 3

Hi Justin, this is exactly what I've been looking for. Everything looks great on the page but when I click the 'read more' I get a blank page with a 'page not found' error. I've tried the new code pointing to the specific Java snippet. I've also pasted the 'style' into my css style sheet and the 'script' into my custom JS snippet file. Can you offer any pointers as to where I go from here?

 

Regards

Gavin

0 Likes
Highlighted
New Member
2 0 1

Good Afternoon Gavin,

 

Hmm. Again, it is extremely hard to troubleshoot these issues blindly. But i'm going to guess that either one of two things is happening on your shop.

 

  1. You may have instant click on your theme. Which basically is a javascript library that speeds up the navigation of internal links in your shop. But we do not want it to fire on our read more link. Because you are not actually navigating anywhere. 
  2. Your anchor tag is attempting to navigate to a URL from the anchor tag read more button rather than remaining on the same page.

 

Option 1:

Can you try to add an empty attribute of data-no-instant to the read more link? 


So, this:

<a class='read-more-collection'>Read More</a>

Would become this:

<a class='read-more-collection' data-no-instant>Read More</a>

 

Option 2:

If option 1 did not fix the issue, please try adding an e.preventDefault(); Just after the opening click handler function.

 

So, this:

  var jq224 = jQuery.noConflict(true);
  jq224('#truncated').on('click', function(){
    jq224('#truncated').fadeOut(300, function(){ 
      jq224('#fullDescription').fadeIn(500);
    })
  });

Would become this:

  var jq224 = jQuery.noConflict(true);
  jq224('#truncated').on('click', function(e){
    e.preventDefault();
    jq224('#truncated').fadeOut(300, function(){ 
      jq224('#fullDescription').fadeIn(500);
    })
  });

 

If you try either of these options, please be sure not to remove any of the other code on the page, including the script tag. I was just trying to keep the code snippets as short as possible to make it a bit easier to copy/paste.

So, just replace the code that looks almost identical to the new code.

 

I truly hope this helps!

-Justin

W3trends is one of the leading app developers in the Shopify ecosystem. We can handle anything E-commerce or App related for your business. Feel free to message me if you need any work done!
0 Likes
Highlighted
Shopify Expert
5 0 1

Hey Justin,

 

Another issue i have just realised with your awesome solution is the 5th item in the navigation is being cut off by the code, any idea how i would go about stopping this?

 

Video showing issue: https://drive.google.com/file/d/1Z4CF0JhdFAS4dg1qsjnrbpUptH62SrH5/view

 

Thanks,

Mark

0 Likes
Shopify Expert
5 0 1
Hey guys

Add this to your scss file to stop the navigation being cut off.

.main-navigation-wrapper-inner .dropdown-menu{z-index:2 !important;}
7752
div#main{ z-index: 1 !important;}

Cheers
Mark
1 Like
Highlighted
Tourist
4 0 2

What a breath of fresh air this thread is!  I was able to implement this on my site after trying several other versions of code.  Thank you to everyone who has contributed to this thread!

 

My site is at https://www.customled.com and you can see I have implemented this (with some minor style changes) on my collection pages such as: https://www.customled.com/collections/integrated-led-tail-lights-for-motorcycles

 

I would like to have the text hidden/shrunk as such when the visitor is on a smaller browser window like mobile.  My site has a responsive theme but I can't seem to figure out how to pull this off.  Can anyone provide some guidance?  I would greatly appreciate it.

 

I'm thinking there should be a way to have this only happen when the browser window is less than XX pixels wide.  Or even better, if the description wraps more than x lines on the browser, it should be kept at x with the option to expand.  That would be the best solution for me!

 

Thanks in advance,

 

Jon

0 Likes
Highlighted
New Member
1 0 0

This was a godsend. Just implemented in on our site. Wondering if there is a Read Less toggle to close after copy has been viewed. 

0 Likes