I am using a custom version of the Dawn theme. I am trying to show/hide a subscription purchase option based on which variant is selected. The code I have currently is working fine:
class VariantSelects extends HTMLElement {
constructor() {
super();
this.addEventListener('change', this.onVariantChange);
}
onVariantChange() {
this.updateOptions();
this.updateMasterId();
this.toggleAddButton(true, '', false);
this.updatePickupAvailability();
this.removeErrorMessage();
this.updateVariantStatuses();
this.noSubOption();
if (!this.currentVariant) {
this.toggleAddButton(true, '', true);
this.setUnavailable();
} else {
this.updateMedia();
this.updateURL();
this.updateVariantInput();
this.renderProductInfo();
this.updateShareUrl();
}
}
noSubOption() {
let noSub = 'Watermelon'
let subForm = document.getElementById("subSave")
let sellPlans = document.getElementById("sellingPlans")
let lto = document.getElementById("ltoDiv")
if (this.currentVariant.option1 == noSub ) {
subForm.style.visibility = 'hidden';
sellPlans.style.display = 'none';
lto.style.display = 'block'
} else {
subForm.style.visibility = 'visible'
sellPlans.style.display = 'block'
lto.style.display = 'none'
}
}
}
However, when you first navigate to the page in question, the `currentVariant` variable is being filled with data from a completely different product page. I assume this is because it is technically pulling in the first available variant on the site as a whole.
My question is, how do I force the currentVariant variable to populate the first available variant on a specific page, and not from the site overall?
