get variant id in javascript

Solved
Highlighted
Excursionist
58 2 1

I am using brooklyn theme and wondering how you can get the selected variant id in a .js file 

0 Likes
Highlighted
Shopify Partner
1023 214 464

@benjk 

 

Try this code:

var selectedID = $("select[name='id']").val();

Thank you,

Tejas

 

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Highlighted
Excursionist
58 2 1

Nice one that helped a lot also if you don't mind how would you make it so when a variant is selected it changes a div e.g hides/shows it?

 

0 Likes
Highlighted
Shopify Partner
1023 214 464

@benjk 

 

Send me your store url and explain which giv would you like to hide/show? so I can check and send you excat solution.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Highlighted
Excursionist
58 2 1

Sorry I don't want to give my url out but this is the code and theme is brooklyn

 

    var targetId = '.item-'+$('select[name=id]').val();
    $(targetId).show();

  $('.single-option-selector__radio').on('change', function(){
      if(targetId != targetId){
          $(targetId).show();
    }
  });

But the idea is when you change variant it will show the which has the variant id attached to it

0 Likes
Highlighted
Shopify Partner
1023 214 464

This is an accepted solution.

@benjk 

 

First, add any common class (like "item-common-class") to all elements which you want to hide/show based on variant change, because whenever you change the variant then we have to hide the previous element too.

var targetId = '.item-'+$('select[name=id]').val();
   $(".item-common-class").hide();
    $(targetId).show();

  $('.single-option-selector__radio').on('change', function(){
        var targetId = '.item-'+$('select[name=id]').val();
         $(".item-common-class").hide();
          $(targetId).show();
  });

 Try this code and let me know if it works for you.

 

Thank you,

Tejas

 

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Highlighted
Excursionist
58 2 1

You are a legend it works perfectly! Thanks a lot!

0 Likes
Highlighted
New Member
1 0 0

Hi ,

 

I 'm trying to run javascript according to  "online" parameter in code.

But its not working.

 

cart-item.liquid which is shown below, is a snipped page . Its is in a section called 'static-cart' and this section is in "cart.liquid" template file.

 

 

{% assign online = false %}

 

....

 

{% if item.product.type == 'Genel Merkez Online' %}
{% assign online = true %}
<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
<label style="display:inline; float:none" for="agree">
<a href="https://cdn.shopify.com/s/files/1/2260/8365/files/ONLINE_DERS_SATIS-_MESAFELI_SATIS_SOZLESMESI.pdf?v..." target="_blank"> Mesafeli Satış Sözleşmesi </a>'ni onaylıyorum.
</label>
</p>
{% endif %}

 ...

 

{% if online = true %}
<script>
$(document).ready(function() {
$('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
if ($('#agree').is(':checked')) {
$(this).submit();
}
else {
alert("Öncelikle seçmiş olduğunuz online ders/derslerin yanında bulunan mesafeli satış sözleşmesini onaylamalısınız.");
return false;
}
});
});
<script>
{% endif %}

0 Likes
Highlighted
New Member
2 0 0

That looks great, what code would I use to change the product template depending on the variant? I generally have 3 variants but one of them is to customize the product so only want to display the customize boxes for that variant. Is this possible?

 

 

0 Likes