Solved

Variant limit to first size available

Asepul
Tourist
5 1 0

Need to limit the limit of the loop to display only first size variant available keeping the following loop that shows each color variant as independent product. The code works really well but keeps showing sizes as independent product too so need to limit to show only the first avialable size variant.

<div
class="tt-product-listing row{% if collection.products.size == 0 %} flex-center-message{% endif %}{% if settings.products_in_one_row %} tt-col-one only-row{% endif %}"
data-onerow="{{ settings.use_one_row_in_theme }}"
>
{%- if collection.products.size > 0 -%}
{% for product in collection.products %}
{% assign color_active = true %}
{% for option in product.options %}
{% if option == 'Color' or option == "Colour" %}
{% assign color_active = true %}
{% endif %}
{% endfor %}
{% assign size_active = false %}
{% if product.variants.size > 1 and color_active == true %}
{% for option in product.options %}
{% if option == 'Color' or option == "Colour" %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% assign color_scheme = '' %}
{% for variant in product.variants offset:0 limit:8 %}
{% capture color %}
{{ variant.options[index] }}
{% endcapture %}

{% unless colorlist contains color %}
<div class="col-6 col-md-{% if item.products_in_column == '5' %}4{% else %}{{ item.products_in_column }}{% endif %}{% if item.products_in_column == '5' %} col-5-inrow-lg{% endif %} tt-col-item">
{%- include 'product-grid-item-variant' -%}
</div>
{% capture tempList %}
{{colorlist | append: color | append: " " }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
{% else %}
<div class="col-6 col-md-{% if item.products_in_column == '5' %}4{% else %}{{ item.products_in_column }}{% endif %}{% if item.products_in_column == '5' %} col-5-inrow-lg{% endif %} tt-col-item">
{%- include 'product-grid-item' -%}
</div>
{% endif %}
{%- endfor -%}

Accepted Solution (1)
Asepul
Tourist
5 1 0

This is an accepted solution.

It didn´t work but this one did:

<div class="tt-product-listing row{% if collection.products.size == 0 %} flex-center-message{% endif %}{% if settings.products_in_one_row %} tt-col-one only-row{% endif %}" data-onerow="{{ settings.use_one_row_in_theme }}">
{%- if collection.products.size > 0 -%}
{% assign color_option_index = 0 %}
{% assign size_option_index = 0 %}
{% for product in collection.products %}
{% assign color_active = false %}
{% assign size_active = false %}
{% for option in product.options %}
{% if option == 'Color' or option == "Colour" %}
{% assign color_active = true %}
{% assign color_option_index = forloop.index0 %}
{% elsif option == 'Size' %}
{% assign size_active = true %}
{% assign size_option_index = forloop.index0 %}
{% endif %}
{% endfor %}
{% if color_active and size_active %}
{% assign colorlist = '' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[color_option_index] }}
{% endcapture %}
{% unless colorlist contains color %}
{% assign colorlist = colorlist | append: color | append: " " %}
<div class="col-6 col-md-{% if item.products_in_column == '5' %}4{% else %}{{ item.products_in_column }}{% endif %}{% if item.products_in_column == '5' %} col-5-inrow-lg{% endif %} tt-col-item">
{%- include 'product-grid-item-variant' variant: variant -%}
<p>Color: {{ color }}</p>
</div>
{% endunless %}
{% endfor %}
{% else %}
<div class="col-6 col-md-{% if item.products_in_column == '5' %}4{% else %}{{ item.products_in_column }}{% endif %}{% if item.products_in_column == '5' %} col-5-inrow-lg{% endif %} tt-col-item">
{%- include 'product-grid-item' -%}
</div>
{% endif %}
{%- endfor -%}
{%- else -%}
<div class="tt-empty-search">
<span class="tt-icon icon-g-84"></span>
<h2 class="tt-title">{{ 'collections.general.empty' | t }}</h2>
<p>{{ 'collections.general.sort_result' | t }}</p>
</div>
{%- endif -%}
</div>

Now the issue is that is not selecting the size variant and it´s not displaying the price information

 

View solution in original post

Replies 4 (4)

EBOOST
Shopify Partner
833 229 256

Hi @Asepul ,

May I suggest you code below:

<div
class="tt-product-listing row{% if collection.products.size == 0 %} flex-center-message{% endif %}{% if settings.products_in_one_row %} tt-col-one only-row{% endif %}"
data-onerow="{{ settings.use_one_row_in_theme }}"
>
    {%- if collection.products.size > 0 -%}
	    {% for product in collection.products %}
	      {% assign color_active = false %}
	      {%  if product.options contains "Color"  or product.options contains "Colour" or product.options contains "colour" or product.options contains "color" %}
	       {% assign color_active = true %}
	      {%  endif %}
	      {% if color_active == false %}
		      {%  if product.options contains "Size"  or product.options contains "size" %}
		       {% assign color_active = true %}
		      {%  endif %}
	      {%  endif %}
		    {% if product.variants.size > 1 and color_active == true %}
		    	{% assign flag = false %}
			    {% for option in product.options %}
			    	{% assign optionDownCase = option | downcase %}
			    	{% if flag == false %}
					    {% if optionDownCase == 'color' or optionDownCase == "colour" or optionDownCase == "size" %}
					    	{% assign flag = true %}
						    {% assign index = forloop.index0 %}
						    {% assign colorlist = '' %}
						    {% assign color = '' %}
						    {% assign color_scheme = '' %}
						    {% for variant in product.variants offset:0 limit:8 %}
							    {% capture color %}
							    	{{ variant.options[index] }}
							    {% endcapture %}
							    {% unless colorlist contains color %}
								    <div class="col-6 col-md-{% if item.products_in_column == '5' %}4{% else %}{{ item.products_in_column }}{% endif %}{% if item.products_in_column == '5' %} col-5-inrow-lg{% endif %} tt-col-item">
										{%- include 'product-grid-item-variant' -%}
									</div>
								    {% capture tempList %}
								    	{{colorlist | append: color | append: " " }}
								    {% endcapture %}
							    	{% assign colorlist = tempList %}
							    {% endunless %}
						    {% endfor %}
					    {% endif %}
				    {% endif %}
			    {% endfor %}
		    {% else %}
			    <div class="col-6 col-md-{% if item.products_in_column == '5' %}4{% else %}{{ item.products_in_column }}{% endif %}{% if item.products_in_column == '5' %} col-5-inrow-lg{% endif %} tt-col-item">
					{%- include 'product-grid-item' -%}
				</div>
		    {% endif %}
	    {%- endfor -%}
    {% endif %}
</div>
Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
Asepul
Tourist
5 1 0

Thank you, keep showing all the sizes as independent. Need to only show each color as independent but not the sizes

EBOOST
Shopify Partner
833 229 256

Hi  @Asepul,

You can try code below:

<div
class="tt-product-listing row{% if collection.products.size == 0 %} flex-center-message{% endif %}{% if settings.products_in_one_row %} tt-col-one only-row{% endif %}"
data-onerow="{{ settings.use_one_row_in_theme }}"
>
    {%- if collection.products.size > 0 -%}
      {% for product in collection.products %}
        {% assign color_active = false %}
        {%  if product.options contains "Color"  or product.options contains "Colour" or product.options contains "colour" or product.options contains "color" %}
         {% assign color_active = true %}
        {%  endif %}
        
        {% if product.variants.size > 1 and color_active == true %}
          {% assign flag = false %}
          {% for option in product.options %}
            {% assign optionDownCase = option | downcase %}
            {% if flag == false %}
              {% if optionDownCase == 'color' or optionDownCase == "colour"  %}
                {% assign flag = true %}
                {% assign index = forloop.index0 %}
                {% assign colorlist = '' %}
                {% assign color = '' %}
                {% assign color_scheme = '' %}
                {% for variant in product.variants offset:0 limit:8 %}
                  {% if variant.available %}
                    {% capture color %}
                      {{ variant.options[index] }}
                    {% endcapture %}
                    {% unless colorlist contains color %}
                      <div class="col-6 col-md-{% if item.products_in_column == '5' %}4{% else %}{{ item.products_in_column }}{% endif %}{% if item.products_in_column == '5' %} col-5-inrow-lg{% endif %} tt-col-item">
                      {%- include 'product-grid-item-variant' -%}
                    </div>
                      {% capture tempList %}
                        {{colorlist | append: color | append: " " }}
                      {% endcapture %}
                      {% assign colorlist = tempList %}
                    {% endunless %}
                  {% endif %}  
                {% endfor %}
              {% endif %}
            {% endif %}
          {% endfor %}
        {% else %}
          <div class="col-6 col-md-{% if item.products_in_column == '5' %}4{% else %}{{ item.products_in_column }}{% endif %}{% if item.products_in_column == '5' %} col-5-inrow-lg{% endif %} tt-col-item">
          {%- include 'product-grid-item' -%}
        </div>
        {% endif %}
      {%- endfor -%}
    {% endif %}
</div>

EBOOST_0-1715221629348.png

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
Asepul
Tourist
5 1 0

This is an accepted solution.

It didn´t work but this one did:

<div class="tt-product-listing row{% if collection.products.size == 0 %} flex-center-message{% endif %}{% if settings.products_in_one_row %} tt-col-one only-row{% endif %}" data-onerow="{{ settings.use_one_row_in_theme }}">
{%- if collection.products.size > 0 -%}
{% assign color_option_index = 0 %}
{% assign size_option_index = 0 %}
{% for product in collection.products %}
{% assign color_active = false %}
{% assign size_active = false %}
{% for option in product.options %}
{% if option == 'Color' or option == "Colour" %}
{% assign color_active = true %}
{% assign color_option_index = forloop.index0 %}
{% elsif option == 'Size' %}
{% assign size_active = true %}
{% assign size_option_index = forloop.index0 %}
{% endif %}
{% endfor %}
{% if color_active and size_active %}
{% assign colorlist = '' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[color_option_index] }}
{% endcapture %}
{% unless colorlist contains color %}
{% assign colorlist = colorlist | append: color | append: " " %}
<div class="col-6 col-md-{% if item.products_in_column == '5' %}4{% else %}{{ item.products_in_column }}{% endif %}{% if item.products_in_column == '5' %} col-5-inrow-lg{% endif %} tt-col-item">
{%- include 'product-grid-item-variant' variant: variant -%}
<p>Color: {{ color }}</p>
</div>
{% endunless %}
{% endfor %}
{% else %}
<div class="col-6 col-md-{% if item.products_in_column == '5' %}4{% else %}{{ item.products_in_column }}{% endif %}{% if item.products_in_column == '5' %} col-5-inrow-lg{% endif %} tt-col-item">
{%- include 'product-grid-item' -%}
</div>
{% endif %}
{%- endfor -%}
{%- else -%}
<div class="tt-empty-search">
<span class="tt-icon icon-g-84"></span>
<h2 class="tt-title">{{ 'collections.general.empty' | t }}</h2>
<p>{{ 'collections.general.sort_result' | t }}</p>
</div>
{%- endif -%}
</div>

Now the issue is that is not selecting the size variant and it´s not displaying the price information