Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to Specify the Variant Sold on an Upsell/Downsell Page
(function () {
if ( typeof window.CustomEvent === "function" ) return false;
function CustomEvent ( event, params ) {
params = params || {
bubbles: false, cancelable: false, detail: null };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
}
window.CustomEvent = CustomEvent;
}
)();
/*
"variantCategory" represents each variant category on your page, in order.
For each "variantCategory", replace the value with the number you identified as the position of the option you want to select.
*/
var variantOption = [
{
variantCategory: null}
, //Variant Selector 1
{
variantCategory: null}
, //Variant Selector 2 (if applicable)
{
variantCategory: null}
, //Variant Selector 3 (if applicable)
{
variantCategory: null}
, //Variant Selector 4 (if applicable)
{
variantCategory: null}
, //Variant Selector 5 (if applicable)
];
/*DO NOT MODIFY BELOW THIS LINE*/
function chooseVariant(){
for (var i = 0; i < variantOption.length; i++){
if (variantOption[i].variantCategory != null){
variantOption[i].variantCategory--
var variantSelect = document.querySelectorAll('select.select-variant-selector-component')[i];
if (variantSelect) {
variantSelect.selectedIndex = variantOption[i].variantCategory;
var clickEvent = new CustomEvent('click', {
type: 'click',
bubbles: false,
cancelable: true,
}
);
var changeEvent = new CustomEvent('change', {
type: 'change',
bubbles: false,
cancelable: true,
}
);
variantSelect.dispatchEvent(clickEvent);
variantSelect.dispatchEvent(changeEvent);
variantSelect.style.display = "none";
variantSelect.parentNode.style.display = "none";
}
};
}
};
chooseVariant();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.