Collections (vendor) description is missing on collections page - when visited from all Brands page

SK_TG
Shopify Partner
17 0 5

Hi all,

For one our of stores we're using the Ella theme. 

We're facing a weird issue.

In our collections template, we're including title and description of the collection to be displayed. 

We have a brands page displaying all the brands (vendors) of the store, say A, B, C etc. 
When someone clicks on Brand A and lands on A's collection page, only the title is visible. Description is missing.

As in, if someone visits https://storename/collections/vendors?q=VENDOR  the description is missing.. 
However if we visit https://storename/collections/VENDOR then both title & description is present. 

 

This is problematic because most users would visit the brand's (vendor) page from the all brands page. 

I'm not sure how to fix this because the theme code seems fine. 


Any clue on how to resolve this please?

Here's the collections-description.liquid code - the part responsible for displaying title & description:

<div
  class="changing on collection collection-info collection-info--{{ position }} align-{{ collection_description_align_tb }}{% if show_sub_collection %} show_sub_collection{% endif %}{% if settings.banner_animation == 'effect_fade_up' %} scroll-trigger animate--slide-in{% endif %}"
  {% if sub_collection_layout == 'slider' %}
    data-loader-script="{{ 'halo.slide-sub-collection.js' | asset_url }}"
  {% endif %}
  style="--desc-color: {{ collection_description_color }};"
>
  {%- if show_breadcrumb -%}
    <div
      class="collection-breadcrumb text-{{ breadcrumb_alignment }}"
      style="--breadcrumb-color: {{ breadcrumb_color }}; --breadcrumb-color-mb: {{ breadcrumb_color_mb }};--breadcrumb-bg: {% if breadcrumb_gradient != blank and breadcrumb_gradient != 'rgba(0,0,0,0)' %}{{ breadcrumb_gradient }}{% elsif breadcrumb_bg != blank and breadcrumb_bg != 'rgba(0,0,0,0)' %}{{ breadcrumb_bg }}{% endif %};--breadcrumb-bg-mb: {% if breadcrumb_gradient_mb != blank and breadcrumb_gradient_mb != 'rgba(0,0,0,0)' %}{{ breadcrumb_gradient_mb }}{% elsif breadcrumb_bg_mb != blank and breadcrumb_bg_mb != 'rgba(0,0,0,0)' %}{{ breadcrumb_bg_mb }}{% endif %}"
    >
      {% render 'breadcrumb' %}
    </div>
  {%- endif -%}

  {%- if show_page_title -%}
    <h1 class="collection-title page-header text-{{ page_title_alignment }}">{{ collection.title | escape }}</h1>
  {%- endif -%}

  {%- if show_collection_description -%}
    <div class="collection-info-item">
      <div
        class="collection-description halo-text-format text-{{ collection_description_align }}"
        style="{% if collection_description_align == 'left' or collection_description_align == 'right' %}margin: 0;{% endif %}"
      >
        {%- if show_read_more_read_less -%}
          <div class="short-description">
            {%- liquid
              assign desc = collection.description | strip_html
              assign word_number = 50
              assign countWord = desc | split: ' '
              assign countWordSize = countWord.size
            -%}
            {{ desc | truncatewords: word_number }}
          </div>
          <div class="full-description">{{ collection.description }}</div>
          <button
            type="button"
            class="link link-underline read-description more{% if word_number > countWordSize %} hidden{% endif %}"
          >
            <span class="text">{{ 'sections.collection_template.read_more' | t }}</span>
          </button>
        {%- else -%}
          {{ collection.description }}
        {%- endif -%}

        <div class="full-description">{{ collection.description }}</div>
      </div>
    </div>
  {%- endif -%}

  {%- if show_sub_collection -%}
    {%- if sub_collection_position == 'absolute' -%}
      {%- if linklists[collection.handle] != blank -%}
        <div class="collection-info-item sub-collection{% if show_sub_collection_image == true %} has-image{% else %} no-image{% endif %}{% if sub_collection_layout == 'slider' %} has-slider {% else %} no-slider{% endif %}">
          <div
            class="collection-sub-list list-unstyled text-{{ collection_description_align }}"
            {% if sub_collection_layout == 'slider' %}
              {%- if settings.layout_body == 'default' %} data-rows="6"{% else %} data-rows="8"{% endif %}
              data-sub-collection-slider data-link="{{ linklists[collection.handle].links.size }}"
            {% endif %}
          >
            {%- liquid
              if sub_collection_type == 'some'
                assign limit = 5
              else
                assign limit = 10000
              endif
            -%}
            {%- for link in linklists[collection.handle].links limit: limit -%}
              <div
                class="item"
                {% if forloop.first %}
                  data-first
                {% endif -%}
                {% if forloop.last %}
                  data-last
                {% endif %}
              >
                <a href="{{ link.url }}">
                  {%- if show_sub_collection_image -%}
                    {%- assign subImg = link.object.image | img_url: '210x', format: 'jpg' -%}
                    {%- if link.object -%}
                      <img class="sub-image" src="{{ subImg }}" alt="{{ link.title }}">
                    {%- endif -%}
                  {%- endif -%}
                  <span class="sub-title">{{ link.title | escape }}</span></a
                >
              </div>
            {%- endfor -%}
          </div>
        </div>
      {%- endif -%}
    {%- endif -%}
  {%- endif -%}
</div>

{%- if show_sub_collection -%}
  {%- if sub_collection_position == 'relative' -%}
    {%- if linklists[collection.handle] != blank -%}
      <div
        class="collection-info-item sub-collection{% if show_sub_collection_image == true %} has-image{% else %} no-image{% endif %}{% if sub_collection_layout == 'slider' %} has-slider {% else %} no-slider{% endif %} no-show-more"
        data-collection-links
      >
        <div class="collection-sub-wrapper text-{{ collection_description_align }}">
          {%- if sub_collection_title -%}
            <div class="item-title text-{{ collection_description_align }}">
              <span>{{ sub_collection_title }}</span>
            </div>
          {%- endif -%}
          <div
            class="collection-sub-list list-unstyled text-{{ collection_description_align }}"
            {% if sub_collection_layout == 'slider' %}
              {%- if settings.layout_body == 'default' %} data-rows="6"{% else %} data-rows="8"{% endif %}
              data-sub-collection-slider data-link="{{ linklists[collection.handle].links.size }}"
            {% endif %}
            {% if sub_collection_layout == 'grid' %}
              data-sub-collection-show-more style="--max-height: {{maxheight_sub_collection}}; --max-height-mb: 110"
            {% endif %}
          >
            {%- liquid
              if sub_collection_type == 'some'
                assign limit = 5
              else
                assign limit = 10000
              endif
            -%}
            {%- for link in linklists[collection.handle].links limit: limit -%}
              <div class="item">
                <a href="{{ link.url }}">
                  {%- if show_sub_collection_image -%}
                    {%- assign subImg = link.object.image | img_url: '210x', format: 'jpg' -%}
                    {%- if link.object -%}
                      <img class="sub-image" src="{{ subImg }}" alt="{{ link.title }}">
                    {%- endif -%}
                  {%- endif -%}
                  <span class="sub-title">{{ link.title | escape }}</span></a
                >
              </div>
            {%- endfor -%}
          </div>
        </div>
        <div
          class="button-show-more"
          data-des-max="{{maxheight_sub_collection}}"
          data-des-max-mb="110"
          style="display: none;"
        >
          <button
            type="button"
            class="button"
            data-show-more-text="{{ 'products.product.read_more' | t }}"
            data-show-less-text="{{ 'products.product.read_less' | t }}"
            data-show-more-sub-collection
          >
            {{ 'products.product.read_more' | t }}
          </button>
        </div>
      </div>
    {%- endif -%}
  {%- endif -%}
{%- endif -%}
<style type="text/css" media="screen">
  	#HeaderCollectionSection-{{ section.id }} .collection-info-item.sub-collection {padding-top: {{ all_sub_collection_padding_top }};padding-bottom: {{ all_sub_collection_padding_bottom }};margin-top: {{ sub_collection_mg_top }};
  		{%- if colors_bg_gradient != blank -%}
        background: {{ colors_bg_gradient }};padding-left: 15px;padding-right: 15px
      {%- else -%}
        background-color: {{ colors_bg }};
        {%- if colors_bg != blank and colors_bg != 'rgba(0,0,0,0)' -%}
        padding-left: 15px;padding-right: 15px
        {%- endif -%}
      {%- endif -%}
  	}
  	#HeaderCollectionSection-{{ section.id }} .collection-sub-list .item {padding-left: {{ sub_collection_grid_gap }};padding-right: {{ sub_collection_grid_gap }};margin-right: 0}

  	{%- if sub_collection_layout == 'slider' and show_sub_collection_image == false -%}
    #HeaderCollectionSection-{{ section.id }} .collection-sub-list .item {margin-bottom: 0}
    {%- endif -%}

  	#HeaderCollectionSection-{{ section.id }} .collection-info-item.sub-collection .item-title span{font-size: {{ fontsize_sub_collection }};font-weight: {{ fontweight_sub_collection }};text-transform: {{ sub_collection_text_transform }};color: {{ sub_collection_title_color }};display: block;background-image: linear-gradient(transparent 97%, {{ sub_collection_title_color}} 3%);background-repeat: repeat-x;background-position-y: -4px;display: inline-block}
  	#HeaderCollectionSection-{{ section.id }} .collection-sub-list .item a {font-size: {{ fontsize_sub_collection }};font-weight: {{ fontweight_sub_collection }};text-transform: {{ sub_collection_text_transform }};color: {{ color_sub_collection }};padding-top: {{ sub_collection_padding_top }};padding-bottom: {{ sub_collection_padding_bottom }};border: 1px solid {{ sub_collection_border }};text-align: center;{%- if sub_collection_background_gradient != blank -%}background: {{ sub_collection_background_gradient }}{%- else -%}background-color: {{ sub_collection_background }}{%- endif -%}}
      #HeaderCollectionSection-{{ section.id }} .collection-info-item .button-show-more .button {font-size: {{ fontsize_sub_collection }}}

  {%- if show_sub_collection_image -%}
    #HeaderCollectionSection-{{ section.id }} .collection-sub-list .item a .sub-image {margin-bottom: 10px}
  {%- endif -%}

  {%- if sub_collection_background != blank or sub_collection_background != 'rgba(0,0,0,0)' or sub_collection_border != blank or sub_collection_border != 'rgba(0,0,0,0)' -%}
    #HeaderCollectionSection-{{ section.id }} .collection-info-item.sub-collection.has-image .item-title {margin-bottom: 15px}
  {%- else -%}
    #HeaderCollectionSection-{{ section.id }} .collection-info-item.sub-collection.has-image .item-title {margin-bottom: 5px}
  {%- endif -%}

  @media (min-width: 1025px) {
  	#HeaderCollectionSection-{{ section.id }} .collection-sub-list .item a:hover {border-color: {{ sub_collection_border_hover }} !important; color: {{ sub_collection_color_hover }} !important;
    	{%- if sub_collection_background_gradient_hover != blank -%}
        background: {{ sub_collection_background_gradient_hover }} !important
      {%- else -%}
        background: {{ sub_collection_background_hover }} !important
      {%- endif -%}
    }

    {%- if sub_collection_background == blank or sub_collection_background == 'rgba(0,0,0,0)' -%}
      #HeaderCollectionSection-{{ section.id }} .collection-sub-list .item a:hover {text-decoration: underline;text-underline-offset: 0.1em}
    {%- endif -%}
    {%- if sub_collection_title -%}
      #HeaderCollectionSection-{{ section.id }} .collection-info-item.sub-collection .item-title {padding-top: {{ sub_collection_padding_top }}}
    {%- endif -%}
  }
      @media (max-width: 767px) {#HeaderCollectionSection-{{ section.id }} [data-sub-collection-show-more] {margin-left: -15px;margin-right: -15px}#HeaderCollectionSection-{{ section.id }} .collection-sub-list .item {padding-left: 10px; padding-right: 10px}}
</style>
<script
  type="text/javascript"
>
	window.addEventListener('load', () => {
		const collectionLinksElement = document.querySelector('[data-collection-links]')
		const collectionLinksList = [...collectionLinksElement.querySelectorAll('ul li.item')]
		const firstLink = collectionLinksList[0]
		const lastLink = collectionLinksList.pop()

		collectionLinksElement.classList.add('initialized')

		const scrollToLastObserver = new IntersectionObserver((entries) => {
			if (entries[0].isIntersecting) {
				collectionLinksElement.classList.add('disable-last')
			} else {
				collectionLinksElement.classList.remove('disable-last')
			}
		}, {
			threshold: 0.6
		})
		
		const scrollToFirstObserver = new IntersectionObserver((entries) => {
			if (entries[0].isIntersecting) {
				collectionLinksElement.classList.add('disable-first')
			} else {
				collectionLinksElement.classList.remove('disable-first')
			}
		}, {
			threshold: 0.6
		})
    window.read_description = { more: `{{ 'sections.collection_template.read_more' | t }}`, less: `{{ 'sections.collection_template.read_less' | t }}` };

    function checkOverflow() {
        const subCollection = document.querySelector('[data-sub-collection-show-more]');
        const readMoreButtons = document.querySelectorAll('[data-show-more-sub-collection]');
        const item = subCollection.querySelector('.item');
        const mgBot = parseInt(getComputedStyle(item).getPropertyValue('margin-bottom').split('px')[0]);
        
        if (subCollection.clientHeight < subCollection.scrollHeight - mgBot) {
          readSubCollectionToggle();
          document.querySelector('.collection-info-item.sub-collection').classList.remove('no-show-more');
        } else {
          // readMoreButtons.forEach(button => button.remove());
        }
    }
        
    function readSubCollectionToggle() {
      const readMoreButtons = document.querySelectorAll('[data-show-more-sub-collection]');

      if (readMoreButtons.length > 0) {
        readMoreButtons.forEach(button => {
          button.addEventListener('click', e => {
              event.preventDefault();
              event.stopPropagation();

              var $this = event.target,
                  textShowMore = $this.getAttribute('data-show-more-text'),
                  textShowLess = $this.getAttribute('data-show-less-text'),
                  desMax = $this.closest('.button-show-more').dataset.desMax
                  desMaxMb = $this.closest('.button-show-more').dataset.desMaxMb;
                  
              if($this.classList.contains('is-less')) {
                  $this.closest('.button-show-more').classList.remove('is-less');
                  $this.classList.remove('is-less');
                  $this.closest('.button-show-more').classList.add('is-show');
                  $this.classList.add('is-show');
                  $this.innerText = textShowMore;
                  if (window.innerWidth > 1024) {
                    document.querySelector('[data-sub-collection-show-more]').style.setProperty('--max-height', `${desMax}`);
                  } else {
                    document.querySelector('[data-sub-collection-show-more]').style.setProperty('--max-height-mb', `${desMaxMb}`);
                  }
              } else {
                  $this.closest('.button-show-more').classList.remove('is-show');
                  $this.classList.remove('is-show');
                  $this.closest('.button-show-more').classList.add('is-less');
                  $this.classList.add('is-less');
                  $this.innerText = textShowLess;
                  if (window.innerWidth > 1024) {
                    document.querySelector('[data-sub-collection-show-more]').style.setProperty('--max-height', 'unset');
                  } else {
                    document.querySelector('[data-sub-collection-show-more]').style.setProperty('--max-height-mb', 'unset');
                  }
              }
          })
        })
      }
    }
    checkOverflow();
		scrollToLastObserver.observe(lastLink)
		scrollToFirstObserver.observe(firstLink)
	})
</script>


Any help is greatly appreciated, thanks!

Replies 0 (0)