I am a beginner in liquid and currently I am trying to develop a shopify store. In the products page, I am displaying the options as radio buttons and taking customer inputs. The prices are different for the variants. Now I am trying to display the variant price based on the customer input, I am a bit lost. This is what I have so far:
{% for product_option in product.options_with_values %}
{{ product_option.name }}
{% for value in product_option.values %}
<input type="radio" id = "{{ value }}" name="{{ product_option.name}}" value="{{ value }}" >
<label for="{{ value }}">{{ value }}</label>
{% endfor %}
<!--want to show the variant price here-->
<br>
{% endfor %}
</div>
I know that I can display all the variant prices like this:
{% for variant in product.variants %}
{{ variant.title }} - {{ variant.price | money }}
{% endfor %}
But that's not what I want. Is there any way to do it without having to use javaScript? Thanks in advance.
Liquid is a server side language. It is processed by the server and cannot offer any dynamic behaviour. You need to change the price with Javascript. There is no other solution. Using your code I've made a small example
document
.querySelectorAll("input[name='Size']").forEach(option =>{
option.addEventListener("change", function (event, target) {
document.querySelectorAll(".price").forEach((price) => {
if(price.dataset.option==option.value){
price.classList.remove("hide");
}else{
price.classList.add("hide");
}
});
});
}).hide{
display: none;
}<html>
<form>
Size
<input type="radio" id="S" name="Size" checked="checked" value="S">
<label for="S">S</label>
<input type="radio" id="M" name="Size" value="M">
<label for="M">M</label>
<br>
<p>Price:
<span class="price" data-option="S">£14.00</span>
<span class="price hide" data-option="M">£15.00</span>
</p>
<input type="number" min="1">
<button type="submit">Add to Cart</button>
</form>
</html>