CODEWITHSUNDEEP
javascripthtmlshopifyliquid
Magnus Pilegaard
Magnus Pilegaard

Reputation: 67

SHOPIFY: How do I display div based on specific variant

I wish to show specific div based on variant id. There are 2 divs, where the both contains Custom Product Input Fields. When div 1 is showing, fields from div 2 should be disabled and vica-versa.

How do i accomplish this?

Thank you!

Upvotes: 0

Views: 1140

Answers (1)

Noob Dev
Noob Dev

Reputation: 103

You can do this

on your select dropdown, add this code

<select>
{% for variant in product.variants %}
<option data-variant="{{ variant.id }}">{{ variant.title }}</option>
{% endfor %}
</select>

````
{% for variant in product.variants %}
<div class="input_fields" id="div-{{ variant.id }}">
<p>content...</p>
</div>
{% endfor %}

Then you should have a script like

$(function() {
$('select').on('change', function() {
var selected_variant = $(this).attr('data-variant');
$('.input_fields').hide();
$('#div-'+selected_variant).show();
});
});

PS. Code is not tested! But this will give you an idea.

Upvotes: 1

Related Questions