Hello Shopify Community,
I’m currently facing an issue with my custom code that involves displaying variant values based on a selected parent variant. Specifically, when a user selects a variant under the parent option “Flavours,” the second option “Pack” is supposed to reflect the relevant values. However, this isn’t happening as expected.
Here’s a bit more context:
- Setup: I have a product with two variant options – “Flavours” and “Pack.”
- Expectation: When a user selects a specific “Flavour,” the available “Pack” options should dynamically update to reflect only the relevant pack sizes or types for that particular flavour.
- Issue: Despite the selection of a “Flavour,” the “Pack” options are not updating and still showing all available pack options instead of the filtered ones. But if we refresh the whole page it would reflect the correct data. Also, if there are no flavours/first variant to call data from it is stuck onto only one variant option name.
**Attached is a video of the issue occurring: https://www.loom.com/share/bcca0f3ac5f24fdf92de50b5cd5d6da5?sid=e3f2e61f-ed22-4781-a554-bc127a447b55
–
On selecting 2nd variant the “Pack” stays the same and show “Cacao”’ variant’s data:
On selecting 1st variant the “Pack” stays the same and show “Vanilla”’ variant’s data:
BUT IF WE REFRESH THE PRODUCT PAGE IT WILL SHOW THE CORRECT DATA FOR EACH, JUST WANT TO FIX THE PROPER RENDERING OF THE “PACK” WHILE SELECTING A VARIANT IN THE REAL TIME, SHOULD’NT HAVE TO REFRESH.
- 2nd Issue: If there are no flavours/first variant to call data from it is stuck onto only one variant option name:
Stuck on one variant option name:
Originally should look like this:
Following it the liquid code that handles this variant operation:
{% comment %}
Renders product variant options
Accepts:
- product: {Object} product object.
- option: {Object} current product_option object.
- block: {Object} block object.
Usage:
{% render 'product-variant-options',
product: product,
option: option,
block: block
%}
{% endcomment %}
{%- liquid
assign variants_available_arr = product.variants | map: 'available'
assign variants_option1_arr = product.variants | map: 'option1'
assign variants_option2_arr = product.variants | map: 'option2'
assign variants_option3_arr = product.variants | map: 'option3'
assign product_form_id = 'product-form-' | append: section.id
-%}
{%- for value in option.values -%}
{%- liquid
assign option_disabled = true
for option1_name in variants_option1_arr
case option.position
when 1
if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 2
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 3
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
endcase
endfor
-%}
<script type="text/javascript">
console.log({{ product.selected_or_first_available_variant | json }});
</script>
{% assign new_variant = product.variants[forloop.index0] %}
{%- if block.settings.picker_type == 'button' -%}
{% if new_design %}
<div class="single__variant{% if forloop.first %} active{% endif %}" data_variant_id="{{ new_variant.id }}">
<span class="checkbox_round">{% render 'checkbox_round' %}</span>
<div class="data__loop">
{{ product.selected_or_first_available_variant.option1 }}
{% if new_variant.title == '1' %}
<!-- Content for the first variant -->
{% elsif new_variant.title == '2' %}
<!-- Content for the second variant -->
<p>This is the content for the second variant.</p>
{% else %}
<!-- Content for other variants -->
{% endif %}
</div>
<div class="variant__title hidden">{{ value }}</div>
{% if new_variant.metafields.custom.short_description != blank %}
<div class="variant_meta_data">
{% for meta_short_description in new_variant.metafields.custom.short_description.value limit: 2 %}
{{ meta_short_description -}}
{%- unless forloop.last %}<br>{% endunless %}
{% endfor %}
</div>
{% endif %}
<div class="variant__disc_pers">
{% if new_variant.compare_at_price > new_variant.price -%}
{{- new_variant.price | times: 100 | divided_by: new_variant.compare_at_price | minus: 100 }}% OFF
{%- endif %}
</div>
<div class="variant__sale_price">{{ new_variant.price | money_without_trailing_zeros }}</div>
<div class="variant__comp_price">
{% if new_variant.compare_at_price > new_variant.price -%}
<del>{{ new_variant.compare_at_price | money_without_trailing_zeros }}</del>
{%- endif %}
</div>
{% if new_variant.compare_at_price > new_variant.price %}
{% assign save_price = new_variant.compare_at_price | minus: new_variant.price %}
<div class="finally_save_price">SAVE {{ save_price | money_without_currency }}/-</div>
{% endif %}
{% if new_variant.metafields.custom.dummy_text != blank %}
<div class="variant_meta_button">{{ new_variant.metafields.custom.dummy_text }}</div>
{% endif %}
</div>
{% endif %}
<input
type="radio"
{% if new_design %}
style="display: none;"
{% endif %}
id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
js_variant_id="{{ new_variant.id }}"
{% if option.selected_value == value %}
checked
{% endif %}
{% if option_disabled %}
class="disabled"
{% endif %}
>
<label
for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
{% if new_design and option.name == 'Pack' %}
class="hidden"
{% endif %}
>
{{ value -}}
<span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
</label>
{%- elsif block.settings.picker_type == 'dropdown' -%}
<option
value="{{ value | escape }}"
{% if option.selected_value == value %}
selected="selected"
{% endif %}
>
{% if option_disabled -%}
{{- 'products.product.value_unavailable' | t: option_value: value -}}
{%- else -%}
{{- value -}}
{%- endif %}
</option>
{%- endif -%}
{%- endfor -%}
Store preview link: https://rcfbhyfcckmhyib8-81727586612.shopifypreview.com
(Note: If preview is not available please consider asking for the same.)
### Request for Help
Need to fix this as soon as possible. Has anyone encountered a similar issue or could provide insights into what might be going wrong? Any suggestions or improvements to the code would be greatly appreciated!
Thank you in advance for your help!
Best regards,
PDS