Variants as individual products on collection page, but without duplicates

Shopify Partner
5 0 0

I'm working with the Mr. Parker theme and am trying to show my product variants as individual products on a collection page. I've got this working thanks to other posts related to this, however since I have two variant options there are duplicates being shown. For example, a product has Size and Fragrance options.

Size
4oz, 8oz

Fragrance 
Fig, Grapfruit, Milk, Vanilla

 

Currently my collection lists the 4oz and 8oz for each Fragrance. I'd like to only show the Fragrance once. Also, one thing to keep in mind is that some products might only have the Fragrance option, soI'd like to be able to determine if a variant exists and if it is "Fragrance", then only show one in the product listing. Or would it be easier to determine this by assigning a tag? How could I best accomplish this and still have it work during searches?

Here's the collection.liquid:

{% paginate collection.products by 32 %}
<div id="collection-description" class="desktop-12">
  <h1>{{ collection.title }}</h1>
  {{ collection.description }}
</div>

{% if settings.filters %}
<div id="full-width-filter" class="desktop-12 tablet-6 mobile-3">
  {% include 'dropdown-filter' %}
</div>
{% endif %}


<ul id="product-loop" style="width: 100%">
  {% for product in collection.products %}  
  	{% for variant in product.variants %}
      <li class="product desktop-3 mobile-half{% cycle ' first', '', '', ' last' %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">   
        {% include 'product-listing' %}
      </li>
    {% endfor %}    
  {% endfor %}  
</ul>

{% include 'pagination' %}

{% endpaginate %}

 

Here's my product-listing.liquid

{% if product.available %}
{% for col in product.collections %}
{% if col.handle == 'new' %}
<div class="new">{{ 'products.general.new' | t }}</div>
{% endif %}
{% endfor %}
{% if product.price < product.compare_at_price %}
<div class="sale-item">{{ 'products.general.sale' | t }}</div>
{% endif %}
{% else %}
<div class="so">{{ 'products.general.sold' | t }}</div>
{% endif %}

{% for option in product.options %}
	{% if option == 'Fragrance' %}

      <a href="{{ variant.url | within: collection }}" title="{{ variant.title }} {{ product.title | escape }}">  
        <img src="{{ variant.image.src | product_img_url: 'grande' }}" alt="{{ variant.image.alt | escape }}"/>
      </a>              

	{% endif %}
{% endfor %}

<div id="product-info"> 
  <a href="{{ variant.url | within: collection }}"> 
    {% if settings.vendor %}<p>{{ product.vendor }}</p>{% endif %}
    <h3>{{ variant.title }} {{ product.title }}</h3>
  </a>
  <div class="price">
    {% if product.price < product.compare_at_price %}
    <div class="onsale">{{ product.price | money }}</div>
    <div class="was">{{ product.compare_at_price | money }}</div>
    {% else %}
    <div class="prod-price">{% if product.price_varies %} {{ 'products.general.from' | t }} {{ product.price_min | money }} - {{ product.price_max | money }} {% else %}{{ product.price | money }}{% endif %}</div>
    {% endif %}	
  </div>
</div>

 

Any help is appreciated. Thanks!

0 Likes
Shopify Partner
4 0 0
    {% assign currentVariantOption1 = '' %}
      {% for variant in product.variants %}
        {% if variant.option1 == currentVariantOption1 %}
          {% continue %}
        {% endif %}
          <!-- variant display code here -->
        {% assign currentVariantOption1 = variant.option1 %}
      {% endfor %}

This works when you're only looking at the first option, because they're in order, so the comparison works properly. There's a better way to do it I'm sure, but hope this helps

0 Likes