On the Product page, there’s a variant select option that I have named “Quantity”.
I’ve added a button below it that has an on-click event handler to change the selected option from the above select menu.
However, that only changes the displayed value in the select menu and doesn’t trigger the details of the product to be updated ( e.g price, image etc ), but if I manually select any option from the variant selector with my mouse or keyboard, it works.
I thought of using the jquery trigger() function with the button input to trigger the function on the select menu that updates the variant information, but I don’t know what is the name of the function ( most likely in theme.js I’m assuming? ) to be triggered.
Can someone please help me out in achieving this functionality by either helping me find which event to trigger on the click of the button or any other way to achieve this result?
Here is the variant update related javascript code I found in theme.js
/**
* Variant Selection scripts
* ------------------------------------------------------------------------------
*
* Handles change events from the variant inputs in any `cart/add` forms that may
* exist. Also updates the master select and triggers updates when the variants
* price or image changes.
*
* @namespace variants
*/
slate.Variants = (function() {
/**
* Variant constructor
*
* {object} options - Settings from `product.js`
*/
function Variants(options) {
this.container = options.container;
this.product = options.product;
this.originalSelectorId = options.originalSelectorId;
this.enableHistoryState = options.enableHistoryState;
this.singleOptions = this.container.querySelectorAll(
options.singleOptionSelector
);
this.currentVariant = this._getVariantFromOptions();
this.singleOptions.forEach(
function(option) {
option.addEventListener('change', this._onSelectChange.bind(this));
}.bind(this)
);
}
Variants.prototype = Object.assign({}, Variants.prototype, {
/**
* Get the currently selected options from add-to-cart form. Works with all
* form input elements.
*
* {array} options - Values of currently selected variants
*/
_getCurrentOptions: function() {
var result = [];
this.singleOptions.forEach(function(option) {
var type = option.getAttribute('type');
var isRadioOrCheckbox = type === 'radio' || type === 'checkbox';
if (!isRadioOrCheckbox || option.checked) {
result.push({
value: option.value,
index: option.getAttribute('data-index')
});
}
});
return result;
},
/**
* Find variant based on selected values.
*
* {array} selectedValues - Values of variant inputs
* {object || undefined} found - Variant object from product.variants
*/
_getVariantFromOptions: function() {
var selectedValues = this._getCurrentOptions();
var variants = this.product.variants;
var found = variants.find(function(variant) {
return selectedValues.every(function(values) {
return variant[values.index] === values.value;
});
});
return found;
},
/**
* Event handler for when a variant input changes.
*/
_onSelectChange: function() {
var variant = this._getVariantFromOptions();
this.container.dispatchEvent(
new CustomEvent('variantChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
if (!variant) {
return;
}
this._updateMasterSelect(variant);
this._updateImages(variant);
this._updatePrice(variant);
this._updateSKU(variant);
this.currentVariant = variant;
if (this.enableHistoryState) {
this._updateHistoryState(variant);
}
},
/**
* Trigger event when variant image changes
*
* {object} variant - Currently selected variant
* {event} variantImageChange
*/
_updateImages: function(variant) {
var variantImage = variant.featured_image || {};
var currentVariantImage = this.currentVariant.featured_image || {};
if (
!variant.featured_image ||
variantImage.src=== currentVariantImage.src
) {
return;
}
this.container.dispatchEvent(
new CustomEvent('variantImageChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
/**
* Trigger event when variant price changes.
*
* {object} variant - Currently selected variant
* {event} variantPriceChange
*/
_updatePrice: function(variant) {
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
}
this.container.dispatchEvent(
new CustomEvent('variantPriceChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
/**
* Trigger event when variant sku changes.
*
* {object} variant - Currently selected variant
* {event} variantSKUChange
*/
_updateSKU: function(variant) {
if (variant.sku === this.currentVariant.sku) {
return;
}
this.container.dispatchEvent(
new CustomEvent('variantSKUChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
/**
* Update history state for product deeplinking
*
* {variant} variant - Currently selected variant
* {k} [description]
*/
_updateHistoryState: function(variant) {
if (!history.replaceState || !variant) {
return;
}
var newurl =
window.location.protocol +
'//' +
window.location.host +
window.location.pathname +
'?variant=' +
variant.id;
window.history.replaceState({ path: newurl }, '', newurl);
},
/**
* Update hidden master select of variant change
*
* {variant} variant - Currently selected variant
*/
_updateMasterSelect: function(variant) {
var masterSelect = this.container.querySelector(this.originalSelectorId);
if (!masterSelect) return;
masterSelect.value = variant.id;
}
});
return Variants;
})();
I had to dispatch the event with these props