No change event when switching product variant options.

Solved
Tourist
9 0 2

Hey guys. 

I am trying to fire a bit of code when any of the product variant options is changed, however on my particular theme there does not seem to be any change event to attach this to.

This is the test page I am working on: https://www.blackartgraphics.com/products/0000-0001-test#orderform

 

Out of the three available variants, the top two 'Model' and 'Transmission' are standard product variants set in the dashboard, the third one 'Plaque Size' is a custom variant added as a custom drop down menu.

This is the bit of code I am trying to fire. (The toggle function is just a test I am using with an obvious response if it is working correctly).

 

 

$(".single-option-selector, .plaque-size").change(function() {
       $('.add-to-cart').toggle();
  })

 

The standard product options (Model and Transmission) use the selector .single-option-selector, the custom 'Plaque Size' option uses the .plaque-size selector.

Changing Plaque Size toggles the Add to Cart button as intended, but Model and Transmission options do not. 

It seems there is no change event triggered by the .single-option-selector elements!

Not sure how to get round this. Any ideas welcomed!

 

0 Likes
Shopify Partner
503 111 152

@Kozakewycz86 

 

Try this code, I hope it will help you.

$(document).on("change", ".product-options .selector-wrapper select", function() {
       alert("changed");
});

Cheers,

Tejas

Shopify Expert | skype: tejas.nadpara
- Feel free to contact me on support@hexaecommerce.com regarding any help
- Like and Mark as an Accepted Solution if reply helpful
0 Likes
Highlighted
Tourist
9 0 2

Thanks Tejas

That sort of works, it will flash an alert when on of the product options is changed. 

The trouble is, it doesn't actually change {{product.selected_or_first_available_variant.id}} which is what I need to change.

 

This is the test page I am working on.


https://www.blackartgraphics.com/products/0000-0001-test?dc=orderform&variant=29568525566050#orderfo...

 

I am testing a 'Buy Now' (straight to checkout) button, but for some reason no matter what I do it only ever picks up the first_available_variant, never the selected one. 

Here's the code which is supposed to generate a dynamic checkout link...

<script language="javascript" type="text/javascript">   

 	  var productVariantId = '{{product.selected_or_first_available_variant.id}}';
          var plaqueSize = $('#plaque-size option:selected').val();
      	  var customisationPackage = $('#customisation-package option:selected').val();
		
     	 $(document).on("change", ".product-options .selector-wrapper select", function() {
       		var productVariantId = {{product.selected_or_first_available_variant.id}};
	 });   
 
         $('.add-to-cart').on('click', function(){        
			
            productVariantId = '{{product.selected_or_first_available_variant.id}}';
            plaqueSize = $('#plaque-size option:selected').val();
      	    customisationPackage = $('#customisation-package option:selected').val();  
            stcLink = productVariantId + ':1,' + plaqueSize + ':1,' + customisationPackage + ':1' 
            window.location='https://www.blackartgraphics.com/cart/' + stcLink;              
         })

    </script>


It works for the custom variants (Artwork Options) but not for the inbuilt product options (Model Variants).

 

 

0 Likes

Success.

Shopify Partner
503 111 152

@Kozakewycz86 

 

I checked and understood the issue. Please replace your code with following:

<script language="javascript" type="text/javascript">   

 	  var productVariantId = $(".shappify_add_to_cart_form select[name='id']").val();
          var plaqueSize = $('#plaque-size option:selected').val();
      	  var customisationPackage = $('#customisation-package option:selected').val();
		
     	 $(document).on("change", ".product-options .selector-wrapper select", function() {
       		var productVariantId = $(".shappify_add_to_cart_form select[name='id']").val();
	 });   
 
         $('.add-to-cart').on('click', function(){        
			
            productVariantId = $(".shappify_add_to_cart_form select[name='id']").val();
            plaqueSize = $('#plaque-size option:selected').val();
      	    customisationPackage = $('#customisation-package option:selected').val();  
            stcLink = productVariantId + ':1,' + plaqueSize + ':1,' + customisationPackage + ':1' 
            window.location='https://www.blackartgraphics.com/cart/' + stcLink;              
         })

</script>

Let me know if it works for you.

 

Thank you,

Tejas

 

 

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

That works perfectly! Thank you so much! :)

1 Like