Linking alternative product sizes together - Need help to re-order labels

[M0w45]

Hi there,

I know Shopify allows us to set up multiple variants per product, including size and colour. However we decided to have individual product pages for each size available of a single product.

I was able to implement a piece of code (see below) to show product labels for each product size or option. It works really well, however I can't seem to find a way to re-order these labels alphabetically (A-Z or 0-9). So if you read this and know how to fix this, pleeeeeeeease let me know as I've spent way too much time trying to figure this out by myself. 

Example: https://orka.ca/products/packout%E2%84%A2-tool-box if you look under the "Also Available In", these are the labels I am referring to that are showing different options for this product. I want them to be ordered alphabetically, A to Z.

Another example: https://orka.ca/products/nvent-raychem-frostguard-freeze-protection-plug-in-kit-12-ft-model-fg112p if you look under the "Also Available In", these are the labels I am referring to that are showing the different sizes for this product. I want them to be ordered numerically, 0 to 9.

Here my code to generate these labels. I basically create a product tag (i.e: len-milwaukee-packout) and assign it to all products I want to link together, and then use the metafield "product_size" I created to assign the name I want to display in the label.

      {%- assign tag_len = "BLANK" -%}
      {%- for tag in product.tags -%}
        {%- assign tag_len_prefix = tag | slice: 0, 4 -%}
        {%- if tag_len_prefix == "len-" -%}
          {%- assign tag_len = tag -%}
          {%- break -%}
        {%- endif -%}
      {%- endfor -%}
      {%- unless tag_len == "BLANK" -%}
        {%- assign vendor_handle = product.vendor | handle -%}
        {%- if collections[vendor_handle].products.size > 0 -%}
          {%- assign len_products_total = 0 -%}
          {%- capture products_len_output -%}
            {%- paginate collections[vendor_handle].products by 2000 -%}
              {%- for len_product in collections[vendor_handle].products -%}
                {%- if len_product.tags contains tag_len -%}
      			{%- unless len_product.id == product.id -%}
                  {%- assign len_products_total = len_products_total | plus: 1 -%}
    			  	<a href="{{ len_product.url }}" title="{{ len_product.title }}"><span class="product--badge-orka badge--othersize-orka">{{ len_product.metafields.global.product_size }}</span></a>
                  {%- endunless -%}
                {%- endif -%}
              {%- endfor -%}
            {%- endpaginate -%}
          {%- endcapture -%}
        {%- endif -%}
      {%- endunless -%}
      {%- if len_products_total > 0 -%}
      <div class="product-alt-len-section">   
        <div class="product-len-colours-titles">
          <strong>Also Available In:</strong>
        </div>
        <div class="product-len-colours">
          {{ products_len_output }}
        </div>
	  </div>
      {%- endif -%}    

I hope this makes sense. Any help would be much appreciated here 🙂

[StephenK · Accepted solution]

The array sort filters will likely be your friend:-

https://shopify.dev/api/liquid/filters/array-filters#sort

Probably on the `collections[handle].products` object

PS Code looks familiar 😉

[StephenK · Accepted solution]

The array sort filters will likely be your friend:-

https://shopify.dev/api/liquid/filters/array-filters#sort

Probably on the `collections[handle].products` object

PS Code looks familiar 😉

[M0w45]

Thank you Stephen for your help with this! 

My apologies for not mentioning you as the source for the code. 

[StephenK]

{%- paginate collections[vendor_handle].products by 2000 -%}
              {%- for len_product in collections[vendor_handle].products | sort: 'title' -%}

This should sort the array by title in an A-z fashion

[M0w45]

Thank you @StephenK , but for some reason I get an error when adding this.

Error: "Liquid syntax error (sections/static-product.liquid line 472): Expected end_of_string but found pipe in "len_product in collections[vendor_handle].products | sort: 'title'"

[StephenK · Accepted solution]

{%- assign sorted_products = collections[vendor_handle].products | sort: 'title' -%}
{%- paginate sorted_products by 2000 -%}
              {%- for len_product in sorted_products -%}

Sorry don't have a store I can test the liquid with currently, this should work IIRC. So sorting the array and assigning to a variable which you then paginate and iterate over.

Might need to be done after the paginate, although I think that would only sort that 'page' although, shouldn't be a problem unless you have more than 2000 items.