How can I convert options to variants in Liquid for product availability?

Store Design
,
1

Hello Shopify Community,

Context:

For our webshop we are attempting to beter visualize the availability of products, based on whether the variant linked to a certain option is in or out of stock. I’ve attempted to generalise the question to make any responses useful for other users as well.

We are using the Debut theme - but converting from product options to product variants within Liquid could be useful for use in other themes as well.

Problem:

The selection list for users on the product page is generated based on the available product options by iterating through:

product.options_with_values

We then displaying a radio-button for each of the values within the present options (code sample abbreviated):

{%- for value in option.values -%}
   
{%- endfor -%}

When a user selects one of the buttons, JavaScript is used to convert the current option to the relevant variant through theme.js :

**
     * Find variant based on selected values.
     *
     *   {array} selectedValues - Values of variant inputs
     *  {object || undefined} found - Variant object from product.variants
     */
    _getVariantFromOptions: function() {
      var selectedValues = this._getCurrentOptions();
      var variants = this.product.variants;

      var found = _.find(variants, function(variant) {
        return selectedValues.every(function(values) {
          return _.isEqual(variant[values.index], values.value);
        });
      });

      return found;
    },

Question:

We are wondering if there is a possibility to convert from option to variant in Liquid, so you would be able to use something like:

{%- for value in option.values -%}
   {%- if option.variant.available == false %}
      
   {% elseif option.variant.available == true %}
      
   {% endif %}
{%- endfor -%}

As both

product.variants

and

product.options_with_values

are available to Liquid, it seems like this should be possible. If not, does anyone have any other suggestions to achieve the same result?

Kind regards,

Thisissoul

2

After playing around we’ve made a solution which works but isn’t the cleanest code:

{% unless product.has_only_default_variant %}
              {% for option in product.options_with_values %}
                
                {% assign option_position = forloop.index %}
                
              {% endfor %}
            {% else %}
              {% for option in product.options_with_values %}
                
                {% assign option_position = forloop.index %}
                
              {% endfor %}
          {% endunless %}

However: This will only work for products with one option field - not with multiple options!

1 Like