Variant limit to first size available

[Asepul]

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 -%}

[EBOOST]

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>

[Asepul]

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

[EBOOST]

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>

[Asepul · 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