Hello Shopify Community,
I'm experiencing an issue with my Shopify store where selecting different product variants does not update the price and quantity fields as expected. I've followed various tutorials and added the necessary HTML and JavaScript, but the problem persists. Here are the details of my setup:
`variant-select-box.liquid`
{%- unless product.has_only_default_variant -%}
{%- for option in product.options_with_values -%}
<select id="ProductSelect-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{%- for value in option.values -%}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>
{{ value | escape }}
</option>
{%- endfor -%}
</select>
{%- endfor -%}
{%- endunless -%}
<script type="application/json" id="ProductSelect-option-{{ current_variant.id }}">
{{ product | json }}
</script>
`product.liquid`
{% layout none %}
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign product_image_scale = '2' -%}
{%- assign enable_image_zoom = section.settings.enable_image_zoom -%}
{%- assign compare_at_price = current_variant.compare_at_price -%}
{%- assign price = current_variant.price -%}
{%- liquid
if variant.title
assign compare_at_price = variant.compare_at_price
assign price = variant.price
assign available = variant.available
else
assign compare_at_price = 1999
assign price = 1999
assign available = true
endif
assign money_price = price | money
assign price = current_variant.price
assign money_price = price | money
-%}
{% assign product_image = '' %}
{%- liquid
for media in product.media
case media.media_type
when 'image'
assign product_image = media.src | product_img_url: 'master'
endcase
endfor
-%}
{% assign a_variants = product.variants[0] %}
{{ product.id }}~~{{ product.title}}~~{{product.handle}}~~{{product_image}}~~{{product.vendor}}~~{{ product.type}}~~{{money_price}}~~{{product.price_min}}~~{{product.price_max}}~~{{product.available}}~~{{product.price_varies}}~~{{a_variants.id}}~~{{a_variants.title}}~~{{a_variants.sku}}
Despite implementing the above code:
1. Selecting a different variant does not update the displayed price.
2. The quantity input does not update its `max` attribute based on the selected variant's inventory quantity.
What I've Tried:
- Verified that the `data-price` and `data-available` attributes are correctly set in the `<option>` elements.
- Ensured the JSON data script contains the correct product data.
- Added `console.log` statements to debug the values being selected and updated, but the issue persists without any console errors.
Request
Could anyone provide insight into what might be going wrong or suggest an alternative approach to ensure the price and quantity fields update correctly upon variant selection? Any help or guidance would be greatly appreciated!
Thank you in advance for your assistance!
