Fix variant conditions not working

In some cases the app does not detect that a variant selection has changed. This happens if your theme is using a custom way of changing variants.

Automatic

The app now has a setting to automatically fix the variant conditions if they are not working. It is recommend to first try to enable the setting on the App's Settings tab:

Manual

There can be two different cases:

Variant condition is one off

In this case the variant conditions only work after you've changed the variant again.  This can be fixed by including the following script on your theme's product page:

{% comment %}
Custom Script to trigger change event on the product form when a variant is changed
{% endcomment %}
<script>
(function(history){
var replaceState = history.replaceState;

history.replaceState = function(state) {
setTimeout(function(){ // timeout to wait for variant id update
// manually trigger change > triggers app

var productForm = document.querySelector('form[action*="/cart/add"]')
productForm.dispatchEvent(new Event('change'));

}, 300);

// call original
return replaceState.apply(history, arguments);
};
})(window.history);
</script>

Variant condition not working 

If the variant conditions are not working at all, you have to add a script that triggers a change event when your specific variant selector are clicked:

{% comment %}
Custom Script to manually trigger change event on the product form when a variant is changed
{% endcomment %}
<script type="text/javascript">

var selector = '.variations';

document.addEventListener('DOMContentLoaded', function() {
 var variantsEl = document.querySelector(selector);
 if(variantsEl){
	variantsEl.addEventListener('click', function(){
	  setTimeout(function(){ // timeout to wait for variant id update
 	  // manually trigger change > triggers app
 	  var productForm = document.querySelector('form[action*="/cart/add"]')
	  productForm.dispatchEvent(new Event('change'));
 	  }, 300);
 	});
 }
});

Make sure to update the selector variable to match your variant selector.