Loading collection on product page by tags

Solved
New Member
4 0 0

I'd like to link specific collections and display them on my product pages. For example on "Product A" page I'd like to list and display in a drop-down selector "Collection 1"'s items. It is important for me to be able to choose which collection I want for each product.

 

I found a solution by adding tags to my product pages. For example using tags like "collection_the-handle-of-the-collection" on my product page and the page would load products from collection "the-handle-of-the-collection". I got this code but unfortunately it doesn't work at this state:

 

<div class="selector-wrapper-secton">

{% for tag in product.tags %}
 {% if product.tags contains 'collection_' %}
  {% assign ourCollection = tag | split: 'collection_' | last %}
  {% assign col = collections[ourCollection] %}
  {% endif %}             
{% endfor %}           
                                   
<div class="swatch clearfix" >
  <div class="header">Compatibility :</div>
  <div class="swatch-section">
    <select onchange="javascript&colon;location.href = this.value;"> 
      {% for p in col.products %}
      {% unless p.id  == product.id %}
       <option value="{{ p.url | within: collection }}">{{ p.title }}</option> 
      {% endunless %}
      {% endfor %} 
    </select>
  </div>
</div>
</div>

 

Can anyone suggest me what to modify on this script? Or is there any other way for doing this?

0 Likes
Shopify Partner
236 59 70

Hey @icmoptics,

 

I understand that you'd like to link specific collections and display them on your product pages using a drop-down selector. You have a solution but the code isn't working.

 

I believe the problem is that there is a bug in your code.

 

{% if product.tags contains 'collection_' %}

 

should be

 

{% if tag contains 'collection_' %}

 

 

Try this out:

 

 

<div class="selector-wrapper-secton">

  {% for tag in product.tags %}
    {% if tag contains 'collection_' %}
      {% assign ourCollection = tag | split: 'collection_' | last %}
      {% assign col = collections[ourCollection] %}
    {% endif %}             
  {% endfor %}           

  <div class="swatch clearfix">
    <div class="header">Compatibility :</div>
    <div class="swatch-section">
    <select onchange="javascript&colon;location.href = this.value;"> 
      {% for p in col.products %}
        {% unless p.id  == product.id %}
          <option value="{{ p.url | within: collection }}">{{ p.title }}</option> 
        {% endunless %}
      {% endfor %} 
    </select>
    </div>
  </div>
</div>

 

Let me know how it goes or if you need further help!

 

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

0 Likes
New Member
4 0 0

Hello BrianAtWork,

 

Thank you for your reply! I changed the code and now it loads the collection I need.

 

There is only one problem with it: the first product in the drop-down list (which is the default selected when the page loads) can't be clicked. All the other products in the collection works great just the first one doesn't work. Maybe it would be a great option to put a text for this default selected like "Please select" which can't be clicked and under this would load all the products from the collection.

 

Could you help me solve this?

 

Thank you again!

0 Likes
Highlighted

Success.

Shopify Partner
236 59 70

@icmoptics That's a great idea. Try this out!

 

<div class="selector-wrapper-secton">

  {% for tag in product.tags %}
    {% if tag contains 'collection_' %}
      {% assign ourCollection = tag | split: 'collection_' | last %}
      {% assign col = collections[ourCollection] %}
    {% endif %}             
  {% endfor %}           

  <div class="swatch clearfix">
    <div class="header">Compatibility :</div>
    <div class="swatch-section">
    <select onchange="javascript&colon;location.href = this.value;"> 
      <option selected="true" disabled="disabled">Please select</option> 
      {% for p in col.products %}
        {% unless p.id  == product.id %}
          <option value="{{ p.url | within: collection }}">{{ p.title }}</option> 
        {% endunless %}
      {% endfor %} 
    </select>
    </div>
  </div>
</div>

Let me know if this solves your problem 🤞

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

0 Likes
New Member
4 0 0

How is it possible to use 2 "unless" in this selection? I would like to hide a product from all of my lists which contains the word "XYZ". I found that this code works well for hiding them:

 

{% for p in col.products %}
{% unless p.title contains 'XYZ' %}
<option value="{{ p.url | within: collection }}">{{ p.title }}</option> 
{% endunless %}
{% endfor %}

But how can I combine it with the original one, which would hide the currently selected product?

 

{% unless p.id == product.id %}

 

Thanks :)

0 Likes

Success.

Shopify Partner
236 59 70

Hey @icmoptics,

 

It's good to hear from you. Here's how to use 2 "unless" in your section:

 

{% for p in col.products %}
  {% unless p.id == product.id or p.title contains 'XYZ' %}
    <option value="{{ p.url | within: collection }}">{{ p.title }}</option> 
  {% endunless %}
{% endfor %}

Let me know if this solves your problem or if you need further help!

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

1 Like