Feature: Get the value of product options by title

[Legic]

Some time ago, I was asked by Stan Kostadinov to create an issue here.

Feature:

1. At the moment it is not possible to get a list of all the values per option. EG: Getting all the values for the option 'color' would have to be done like this:

{% for product_option in product.options_with_values %}
 {% if product_option == 'color' %}
  {% for value in product_option.values %}
   {{ value }}
  {% endfor %}
 {% endif %}
{% endfor %}

Would it be possible to have something like this instead?:

{% for value in product.options_with_values['color'] %}
   {{ value }}
{% endfor %}

2. Get the value of a variant option by title. EG: On some products we have the following options: Size, Color, Length. Respectively, these would be variant.option 1, 2 and 3. However, on some other products we have the options: Size and Pattern (Again, variant.option 1 and 2). If we want to get the color option of a product variant, whether it's there or not, whether the store admin or whoever we build the theme for has size before color, or the other way around. As a developer, you cannot know for sure whether the option 'color' will always be 'variant.option2'. So, what do you do?

{% for product_option in product.options %}
 {% if product_option == 'color' or product_option == 'colour' %}
  {% assign has_color = true %}
  {% assign color_index = 'option' | append: forloop.index %}
 {% endif %}
{% endfor %}

{% if has_color %}
 {% for variant in product.variants %}
 {{  variant[color_index] }}
 {% endfor %}
{% endif %}

Could we use something like variant.option['color'] or be able to get the title as well, instead of only the value? (variant.option1.title , variant.option1.value)

This could save a lot of lines of code and unnecesarry looping through tons of products/variants.

[shopmike]

Hey, @Legic thanks for raising these. I know it's been a long time in the making but I'm currently working on resolving some of these issues.

I'll keep you posted.

[shopmike]

@Legic I'm happy to announce the issue you have described in #1 has now been implemented with a new options_by_name method on products.

Before

{% for product_option in product.options_with_values %}
 {% if product_option == 'color' %}
  {% for value in product_option.values %}
   {{ value }}
  {% endfor %}
 {% endif %}
{% endfor %}

After

{% for value in product.options_by_name.color.values %}
   {{ value }}
{% endfor %}

[hasbrowow]

@shopmike - Thank you for implementing this! Dumb question, is this available on Shopify now?

[shopmike]

Sure is, it will be available in the docs next week.

[shopmike]

Happy to announce that options_by_name is now case-insensitive. So you no longer need to check for color when in fact it is Color as the method will do it for you.

[shopmike]

https://help.shopify.com/en/themes/liquid/objects/product#product-options_by_name

[Legic]

https://help.shopify.com/en/themes/liquid/objects/product#product-options_by_name

Let's gooooo! Thank you so much @shopmike !

However, there is still no way of getting the variant option value by for example 'color'.

[notrealdev]

Please add: product.options_by_object or something like that, then output can be return:

[
	{
		"name": "color",  /* Default handle. */
		"value": "Color" /* Can be: Colour, Couleur, Farbe or Màu sắc... for translate */
	},
	{
		"name": "size",  /* Default handle. */
		"value": "Size" /* Can be: Taille, mărimea... for translate */
	},
	{
		"name": "material",  /* Default handle. */
		"value": "Material" /* Can be: Matérielle, Материјал... for translate */
	},
	{
		"name": "style",  /* Default handle. */
		"value": "Style" /* Can be: Stil, शैली.. for translate */
	}
]

By default product.options output return ['Couleur', 'Taille'] ==> We can't do anything with returns like this

And product.options_by_name or product.options_with_values seems to be the same

We, developers, need more than that but you never did.

[vaelu]

I would like to ask again for the feature requested in the last comment. Currently, options do not have a unique identifier, like an ID or a handle. The name field returns the translated display name of the option. When you want to add specific things to a specific option like we do, then you have to check for all languages, which does not make sense at all.

Would it be possible to introduce a feature like this, or is there a good workaround for this problem?

[notrealdev]

Two years have passed and the problem is still here

[Adrianjs42]

I would like to ask again for the feature requested in the last comment. Currently, options do not have a unique identifier, like an ID or a handle. The name field returns the translated display name of the option. When you want to add specific things to a specific option like we do, then you have to check for all languages, which does not make sense at all.

Would it be possible to introduce a feature like this, or is there a good workaround for this problem?

Did you find a workaround here?

[vaelu]

I would like to ask again for the feature requested in the last comment. Currently, options do not have a unique identifier, like an ID or a handle. The name field returns the translated display name of the option. When you want to add specific things to a specific option like we do, then you have to check for all languages, which does not make sense at all.

Would it be possible to introduce a feature like this, or is there a good workaround for this problem?

Did you find a workaround here?

Unfortunately not.