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

Kloppek
New Member
1 0 0

Hey Justin!

I tried to implement your code step by step but somehow nothing is happening at all...

I found the template under sections, so I pasted the first snippet right before schema and then replaced the {{collection.description}} (found two of them) with the second snippet...

Do you maybe have an idea what could be the issue with that?

 

Thank you so much for your help,

Greetings Alex

I also copied my code for you to maybe take a look at it (I am using the debutify theme if it is of any importance to know):

<div id="CollectionSection" data-section-id="{{ section.id }}" data-section-type="collection-template">
  <div class="box">
    <div class="wrapper">
 
      {% if collection.handle == 'all' or collection.handle == 'frontpage' %}
        <div class="grid">
          <div class="grid__item large--eight-twelfths push--large--two-twelfths">
            <div class="section-header">
              <h1 class="page-title">{{ collection.title }}</h1>
              {% if collection.description %}
                <p class="collection-description"><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></p>
              {% endif %}
            </div>
          </div>
        </div>
      {% else %}
        {% unless settings.show_hero and collection.image %}
          <div class="grid bob">
            <div class="grid__item large--eight-twelfths push--large--two-twelfths">
              <div class="section-header">
                <h1 class="page-title">{{ collection.title }}</h1>
                {% if collection.description %}
                  <p class="collection-description"><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></p>
                {% endif %}
              </div>
            </div>
          </div>
        {% endunless %}
      {% endif %}
 
      {% if section.settings.collection_tags_enable or section.settings.collection_sort_enable %}
        <div class="grid grid-uniform">
          
          {% assign filter_width = 'large--eight-twelfths push--large--two-twelfths large--text-center medium--text-center' %}
          
          {% if section.settings.collection_tags_enable and collection.all_tags.size > 0 %}
            <div class="grid__item {{ filter_width }}">
              
              {% if section.settings.tag_selector == 'button' %}
                <ul class="tags tags--collection">
                  {% if section.settings.show_label %}
                    <label class="filter-dropdown__label" for="filterBy">
                      <span class="filter-dropdown__label--title">{{ 'collections.sorting.title_tags' | t }}</span>
                    </label>
                  {% endif %}
                  <li{% unless current_tags %} class="tag--active"{% endunless %}>
                    {% comment %}
                      Good for /collections/all collection and regular collections
                    {% endcomment %}
                    {% if collection.handle %}
                      <a href="/collections/{{ collection.handle }}">
                        {{ 'collections.general.all_of_collection' | t }}
                      </a>
                      {% comment %}
                        Good for automatic type collections
                      {% endcomment %}
                    {% elsif collection.current_type %}
                      <a href="{{ collection.current_type | url_for_type }}">
                        {{ 'collections.general.all_of_collection' | t }}
                      </a>
                      {% comment %}
                        Good for automatic vendor collections
                      {% endcomment %}
                      {% elsif collection.current_vendor %}
                        <a href="{{ collection.current_vendor | url_for_vendor }}">
                          {{ 'collections.general.all_of_collection' | t }}
                        </a>
                    {% endif %}
                  </li>
 
                  {% for tag in collection.all_tags %}
                    {% if current_tags contains tag %}
                      <li class="tag--active">
                        {{ tag | link_to_remove_tag: tag }}
                      </li>
                    {% else %}
                      <li>
                        {% comment %}
                          Use link_to_add_tag if you want to allow filtering
                          by multiple tags
                        {% endcomment %}
                        {{ tag | link_to_tag: tag }}
                      </li>
                    {% endif %}
                  {% endfor %}
                </ul>
              {% else %}
                <div class="filter-dropdown__wrapper collection-tags">
                  <div class="filter-dropdown">
                    {% if section.settings.show_label %}
                      <label class="filter-dropdown__label" for="filterBy">
                        <span class="filter-dropdown__label--title">{{ 'collections.sorting.title_tags' | t }}</span>
                      </label>
                    {% endif %}
                    <select name="filterBy" id="filterBy" class="tag-filter select--small small--full">
                      <option value="">All</option>
                      {% for tag in collection.all_tags %}
                      {% if current_tags contains tag %}
                      <option value="{{ tag | handle }}" selected>{{ tag }}</option>
                      {% else %}
                      <option value="{{ tag | handle }}">{{ tag }}</option>
                      {% endif %}
                      {% endfor %}
                    </select>
                  </div>
                </div>
              {% endif %}
            </div>
          {% endif %}
 
          {% if section.settings.collection_sort_enable %}
            <div class="grid__item {{ filter_width }} collection-sorting collection-sorting--enabled">
              {% include 'collection-sorting' %}
            </div>
          {% endif %}
          
        </div>
      {% endif %}
      
      {%- assign limit = section.settings.desktop_grid | times: section.settings.rows -%}
      {% paginate collection.products by limit %}
        <div class="grid grid-uniform grid--spacer">
          {% include 'product-width' %}
 
          {% for product in collection.products %}
{%- if product.type == 'GSC_HIDDEN_PRODUCT' -%}{%- continue -%}{%- endif -%} 
 
            {% include 'product-grid-item' %}
          {% else %}
            {% if collection.handle == 'all' %}
              {% assign emptyState = true %}
              {% for i in (1..limit) %}
                {% include 'product-grid-item' %}
              {% endfor %}
            {% else %}
              <div class="grid__item text-center">
                <p>{{ 'collections.general.no_matches' | t }}</p>
              </div>
            {% endif %}
          {% endfor %}
          
          {% if paginate.pages > 1 %}
            <div class="grid__item">
              {% include 'pagination' %}
            </div>
          {% endif %}
        </div>
      {% endpaginate %}
      
    </div>
  </div>
</div>
<style>
  .read-more-collection:hover{cursor:pointer}
</style>
<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>
{% schema %}
  {
    "name": "Collection pages",
"class": "collection-section",
    "settings": [
  {
"type": "header",
"content": "Sorting"
  },
      {
        "type": "checkbox",
        "id": "collection_tags_enable",
        "label": "Show collection tags",
"default": true
      },
      {
        "type": "checkbox",
        "id": "collection_sort_enable",
        "label": "Show collection sorting",
"default": true
      },
      {
        "type": "checkbox",
        "id": "show_label",
        "label": "Show label",
"default": true
      },
      {
        "type": "select",
        "id": "tag_selector",
        "label": "Tag picker type",
"default": "select",
        "options": [
          {
            "value": "button",
            "label": "Button"
          },
          {
            "value": "select",
            "label": "Dropdown"
          }
        ]
      },
  {
"type": "header",
"content": "Grid"
  },
  {
        "type": "select",
        "id": "rows",
        "label": "Number of rows",
        "default": "2",
        "options": [
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          },
          {
            "value": "5",
            "label": "5"
          },
          {
            "value": "6",
            "label": "6"
          }
        ]
      },
  {
"type": "select",
"id": "desktop_grid",
"label": "Products per row (desktop)",
        "default": "4",
        "options": [
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          }
        ]
  },
  {
  "type": "select",
"id": "mobile_grid",
"label": "Product per row (mobile)",
"default": "2",
"options":[
  {
"value": "1",
"label": "1"
  },
  {
"value":"2",
"label": "2"
  }
]
  }
    ]
  }
{% endschema %}
0 Likes
HawkLou1
New Member
1 0 0

Awesome, Awesome Awesome!!!! Thanks so much, Legend...

0 Likes
taylorbs
New Member
1 0 0

Do you have a version of this code that works for MOBILE ONLY? I want the description to show as-is on desktop and add "read more" only on mobile.

0 Likes
Tom-BlueBee
Tourist
6 0 1

Hi @taylorbs,

You can achieve this using CSS media queries to show everything above a certain screen width, then collapse only below a certain screen width. There are various other options besides width available as part of media queries as well, but width is probably the most commonly used to achieve mobile-only styles. 

More info can be found here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp.

 

0 Likes
GorillaDave
New Member
1 0 0

Hey Justin,

I've tried this solution for my site and it doesn't work quite right - the collection pages still display the full description, but with a "Read Less" link at the bottom which makes the description disappear completely.

 

Example page: https://carcologne.co.uk/collections/car-perfume-diffusers

 

Thanks in advance!

Dave.

0 Likes
mGioDigital
New Member
2 0 0

So glad to have stumbled upon this thread!  I have implemented this on a couple sites. On the site with only one collection description snippet on the page, it worked wonderfully. The second site is unique in that this specific collection page template is a category page which also lists sub categories and their descriptions.

It properly truncates and expands/collapses the first main description on the page. Sub category descriptions  below that are truncated, but their read more tag controls the top/main collection description.

Any ideas on this? I assume it's because this solution wasn't initially crafted to deal with multiple collection descriptions being pulled into a main category page.

Here are the code samples:
Page: https://hartlyn.com/collections/spearfishing
First collection description (the one for the page; spearfishing)

<div id="collection-description" class="desktop-12 tablet-6 mobile-3 text-center">
  <div id="bc-sf-filter-collection-description" class="rte">
    <div id="truncated">{{ collection.description | strip_html | truncatewords: 30, "... <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>
  </div>
  </div>

 

That works perfectly.

Next, is the snippet which pulls in the sub categories and their descriptions, which does not work with the read more tag. The read more tag controls the above.

<div class="collection-index text-center">
          <div class="section-title desktop-12 tablet-6 mobile-3 lines"><h2>{{ collection.title | escape }}</h2></div>
          <div id="truncated">{{ collection.description | strip_html | truncatewords: 30, "... <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>
            <div class="collection-carousel list-collection-carousel desktop-12 tablet-6 mobile-3" id="carousel-{{ section.id }}">
              {% for product in collection.products limit: prod_limit %}
              <div class="lazyOwl" id="product-listing-{{ product.id }}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">
                {% include 'product-listing' %}
              </div>
              {% endfor %}
            </div>
            <a class="collection-btn button" href="{{ collection.url }}" title="Shop All {{ collection.title }}">View All</a>
       
        </div>

Any insight on this would be much appreciated! Also, the second above snippet is part of a loop on collections.

0 Likes
mGioDigital
New Member
2 0 0

***EDIT***
I found a way to get the different read more paragraphs to work independent of each other, but it is sloppy as hell. I don't think it's the way to go. I was able to differentiate descriptions by giving them different ID's which would then require repeating the script over and over using slightly different identifiers. 

I imagine there is a much slicker way to do this?

<!-- Begin Read More Tag -->
<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>
<style>
  .read-more-collection-extra: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-extra').on('click', function(e){
    e.preventDefault();
    if (!jq224('#fullDescription-extra').is(':visible')){
      jq224('#truncated-extra').fadeOut(300, function(){ 
        jq224('#fullDescription-extra').fadeIn(500);
      });
    }else{
      jq224('#fullDescription-extra').fadeOut(300, function(){ 
        jq224('#truncated-extra').fadeIn(500);
      });
    }
  });
</script>
<!-- End Read More Tag -->

 Google will probably see this as pure trash. 

0 Likes

Hi,

In case anyone needs help adding a "read more" button to the product page description on the Debut theme, I recently wrote a tutorial teaching how to achieve that. It can be found here.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Tutorials: Minimal theme product pages slideshow | Debut Theme product pages slideshow
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes