My variant picker doesn’t work all of a sudden. When I click on a different variant, the variant product (different variant product has different prices) doesn’t change accordingly. The variant set-up in products is good. Could someone please help with the issue?
Topic summary
Issue: Variant selector on the product page stopped updating price/media when switching variants, despite correct product setup.
Evidence: Console error shown in screenshots; one analysis says the theme’s JS searches for a product image with data-index=“1” that isn’t present on the page.
Initial guidance: Roll back recent JS changes or use a fresh copy of the same theme.
Investigation: After the store URL (bluemefragrance.com) was shared, a contributor identified an incorrect updateMedia function in variants.js breaking variant switching.
Proposed fix: Replace the entire variants.js with a provided implementation of VariantSelects (covers init/change handling, updateMedia, URL updates, product info rendering, sticky add-to-cart, and inventory checks). Steps: Admin > Online Store > Theme > Edit code > open variants.js and replace its contents with the supplied code.
Additional check: Review the product page section Liquid to ensure expected image elements/attributes (e.g., data-index) are rendered.
Status: Fix suggested; awaiting confirmation from the original poster. No final resolution yet.
Notes: Console screenshots and a lengthy code snippet are central to understanding the cause and fix.
Hello @NorthwestWind ,
As I can see in the screenshot there is conflict in JS.
Try to remove the changes you did recently.
Alternatively use a new copy of the same theme.
If you need further help don’t hesitate to contact me.
You can find the email in the signature below.
Thanks
Please contact us via email for support :hatptech@gmail.com
Hi @NorthwestWind ,
Hope you’re doing well! Could you please share the store URL with me? I’d love to take a closer look and see if I can help you find a solution.
Kind Regards,
Roy
Hard to tell from outside.
The JS error in console happens because the theme JS code tries to find product image with data-index=“1” attribute, but it does not exist on the page.
It’d be necessary to look at your product page section liquid code …
Thanks @NorthwestWind for sharing the store URL with me.
I have had a look, seems like the code which is written inside variants.js for the updateMedia function is incorrect which is causing the whole variant switching functionality to break.
Don’t worry I have spent some time and came up with a fix.
Let’s implement it.
To get started, follow these steps:
- Log in to your Shopify Admin panel.
- Go to Online Store > Theme > Edit code.
- In the code editor, navigate to the variants**.js** file. Replace the whole code with the below one:
class VariantSelects extends HTMLElement {
constructor() {
super();
this.item = $(this).closest('.productView');
this.isFullWidth = this.item.is('.layout-4');
this.onVariantInit();
this.addEventListener('change', this.onVariantChange.bind(this));
}
onVariantInit(){
this.updateOptions();
this.updateMasterId();
this.updateMedia(1500);
// this.updateURL();
this.renderProductAjaxInfo();
this.renderProductInfo();
if (!this.currentVariant) {
this.updateAttribute(true);
} else {
this.updateAttribute(false, !this.currentVariant.available);
}
this.updateVariantStatuses();
}
onVariantChange(event) {
this.updateOptions();
this.updateMasterId();
this.updatePickupAvailability();
this.updateVariantStatuses();
if (!this.currentVariant) {
this.updateAttribute(true);
this.updateStickyAddToCart(true);
} else {
this.updateMedia(200);
this.updateURL();
this.updateVariantInput();
this.renderProductAjaxInfo();
this.renderProductInfo();
this.updateProductInfo();
this.updateAttribute(false, !this.currentVariant.available);
this.updateStickyAddToCart(false, !this.currentVariant.available);
this.checkQuantityWhenVariantChange();
}
}
updateOptions() {
this.options = Array.from(this.querySelectorAll('select'), (select) => select.value);
}
decodeOptions() {
this.options = this.options.map(option => {
const parsedOption = this.decodeOption(option)
return parsedOption
})
}
decodeOption(option) {
if (option) {
return option.split('Special_Double_Quote').join('"').split('Special_Slash').join('/')
} else {
return null
}
}
encodeOption(option) {
if (option) {
return option.split('"').join('Special_Double_Quote').split('/').join('Special_Slash')
} else {
return null
}
}
updateMasterId() {
this.decodeOptions()
this.currentVariant = this.getVariantData().find((variant) => {
return !variant.options.map((option, index) => {
return this.options[index] === option;
}).includes(false);
});
}
updateMedia(time) {
if (!this.currentVariant || !this.currentVariant?.featured_media) return;
var variantImageCount = 0;
this.variantData.forEach((singleVariant) => {
var mediaId = singleVariant.featured_media.id;
var mediaElement = document.querySelector(
`.productView-nav .productView-image[data-media-id="${mediaId}"]`
);
if (mediaElement) {
mediaElement.remove();
variantImageCount = variantImageCount + 1;
}
});
$(window).trigger('resize');
const newMedia = document.querySelectorAll(
`[data-media-id="${this.dataset.section}-${this.currentVariant.featured_media.id}"]`
);
/* if (!newMedia) return;
window.setTimeout(() => {
$(newMedia).trigger('click');
}, time); */
/* var mediaStyle = document.querySelector('.productView-nav').getAttribute('data-style');
if (mediaStyle == 'style-1' || mediaStyle == 'style-4' || window.innerWidth < 768){
var currentMediaId = this.currentVariant.featured_media.id;
var newImageIndex = document.querySelector(
`.productView-nav .productView-image[data-media-id="${currentMediaId}"]`
);
if (newImageIndex) {
var slickIndex = newImageIndex.getAttribute('data-slick-index');
if(slickIndex){
$('.productView-nav').slick('slickGoTo', parseInt(slickIndex));
}
}
return;
} */
const mediaToReplace = document.querySelector('.productView-image[data-index="1"]')
if (!mediaToReplace) return;
const imageToReplace = mediaToReplace.querySelector('img')
var slickIndex = mediaToReplace.getAttribute('data-slick-index')
if (!this.currentVariant) return;
const image = this.currentVariant?.featured_image;
if (image == null) return;
imageToReplace.setAttribute('src', image.src)
imageToReplace.setAttribute('srcset', image.src)
imageToReplace.setAttribute('alt', image.alt)
if(slickIndex){
$('.productView-nav').slick('slickGoTo', parseInt(slickIndex));
}
if (mediaToReplace.getBoundingClientRect().top < window.scrollY) {
this.scrollToBlock(mediaToReplace)
}
}
scrollToBlock(block) {
const headerHeight = document.querySelectorAll('.section-header-navigation')[0]?.getBoundingClientRect().height
const announcementBarHeight = document.querySelectorAll('.announcement-bar')[0]?.getBoundingClientRect().height
const positionTop = block.getBoundingClientRect().top - headerHeight - announcementBarHeight
window.scrollTo({
top: positionTop,
behavior: 'smooth'
})
}
updateURL() {
if (!this.currentVariant) return;
window.history.replaceState({ }, '', `${this.dataset.url}?variant=${this.currentVariant.id}`);
}
updateVariantInput() {
const productForms = document.querySelectorAll(`#product-form-${this.dataset.product}, #product-form-installment-${this.dataset.product}`);
productForms.forEach((productForm) => {
const input = productForm.querySelector('input[name="id"]');
input.value = this.currentVariant.id;
input.dispatchEvent(new Event('change', { bubbles: true }));
});
}
updatePickupAvailability() {
const pickUpAvailability = document.querySelector('pickup-availability');
if (!pickUpAvailability) return;
if (this.currentVariant?.available) {
pickUpAvailability.fetchAvailability(this.currentVariant.id);
} else {
pickUpAvailability.removeAttribute('available');
pickUpAvailability.innerHTML = '';
}
}
renderProductAjaxInfo() {
fetch(`${this.dataset.url}?variant=${this.currentVariant.id}§ion_id=${this.dataset.section}`)
.then((response) => response.text())
.then((responseText) => {
const id = `product-price-${this.dataset.product}`;
const html = new DOMParser().parseFromString(responseText, 'text/html')
const destination = document.getElementById(id);
const source = html.getElementById(id);
const property = `product-property-${this.dataset.product}`;
const destinationProperty = document.getElementById(property);
const sourceProperty = html.getElementById(property);
if (source && destination) {
destination.innerHTML = source.innerHTML;
}
if (this.checkNeedToConvertCurrency()) {
let currencyCode = document.getElementById('currencies')?.querySelector('.active')?.getAttribute('data-currency');
Currency.convertAll(window.shop_currency, currencyCode, 'span.money', 'money_format');
}
if(destinationProperty) {
if (sourceProperty) {
destinationProperty.innerHTML = sourceProperty.innerHTML;
destinationProperty.style.display = 'table';
} else{
destinationProperty.style.display = 'none';
}
} else if (sourceProperty) {
document.querySelector('.productView-product').insertBefore(sourceProperty, document.querySelector('.productView-options'));
}
document.getElementById(`product-price-${this.dataset.product}`)?.classList.remove('visibility-hidden');
});
}
renderProductInfo() {
if(this.item.find('[data-sku]').length > 0){
this.item.find('[data-sku] .productView-info-value').text(this.currentVariant.sku);
}
var inventory = this.currentVariant?.inventory_management;
if(inventory != null) {
var arrayInVarName = `product_inven_array_${this.dataset.product}`,
inven_array = window[arrayInVarName];
if(inven_array != undefined) {
var inven_num = inven_array[this.currentVariant.id],
inventoryQuantity = parseInt(inven_num);
this.item.find('input[name="quantity"]').attr('data-inventory-quantity', inventoryQuantity);
if(this.item.find('[data-inventory]').length > 0){
if(inventoryQuantity > 0){
const showStock = this.item.find('[data-inventory]').data('stock-level');
if (showStock == 'show') {
this.item.find('[data-inventory] .productView-info-value').text(inventoryQuantity+' '+window.inventory_text.inStock);
}
else {
this.item.find('[data-inventory] .productView-info-value').text(window.inventory_text.inStock);
}
} else {
this.item.find('[data-inventory] .productView-info-value').text(window.inventory_text.outOfStock);
}
}
hotStock(inventoryQuantity);
}
}
if(this.item.find('.productView-stickyCart').length > 0){
const sticky = this.item.find('.productView-stickyCart');
const optionSticky = sticky.find('.select__select');
optionSticky.val(this.currentVariant.id);
}
}
updateProductInfo() {
fetch(`${this.dataset.url}?variant=${this.currentVariant.id}§ion_id=${this.dataset.section}`)
.then((response) => response.text())
.then((responseText) => {
const description = `[data-product-description-${this.dataset.product}]`
const html = new DOMParser().parseFromString(responseText, 'text/html')
const destinationDesc = document.querySelector(description);
const sourceDesc = html.querySelector(description);
if (sourceDesc && destinationDesc) {
destinationDesc.innerHTML = sourceDesc.innerHTML;
if (destinationDesc.closest('.toggle-content--height')){
destinationDesc.style.maxHeight = null;
}
}
});
}
updateAttribute(unavailable = true, disable = true){
const addButton = document.getElementById(`product-form-${this.dataset.product}`)?.querySelector('[name="add"]');
var quantityInput = this.item.find('input[name="quantity"]'),
notifyMe = this.item.find('.productView-notifyMe'),
hotStock = this.item.find('.productView-hotStock'),
buttonAddtocart = this.item.find('.product-form__submit'),
maxValue = parseInt(quantityInput.attr('data-inventory-quantity'));
if (isNaN(maxValue)) {
maxValue = maxValue = parseInt(buttonAddtocart.attr('data-inventory-quantity'));
} else {
maxValue = parseInt(quantityInput.attr('data-inventory-quantity'));
}
if(unavailable){
var text = window.variantStrings.unavailable;
quantityInput.attr('disabled', true);
notifyMe.slideUp('slow');
addButton.setAttribute('disabled', true);
addButton.textContent = text;
quantityInput.closest('quantity-input').addClass('disabled');
if(hotStock.length > 0) hotStock.addClass('is-hiden');
} else {
if (disable) {
var text = window.variantStrings.soldOut;
quantityInput.attr('data-price', this.currentVariant?.price);
quantityInput.attr('disabled', true);
addButton.setAttribute('disabled', true);
addButton.textContent = text;
quantityInput.closest('quantity-input').addClass('disabled');
if(notifyMe.length > 0){
notifyMe.find('input[name="halo-notify-product-variant"]').val(this.currentVariant.title);
notifyMe.find('.notifyMe-text').empty();
notifyMe.slideDown('slow');
}
} else{
var text,
subTotal = 0,
price = this.currentVariant?.price;
const stickyPrice = $('[data-sticky-add-to-cart] .money-subtotal .money');
const stickyComparePrice = $('[data-sticky-add-to-cart] .money-compare-price .money');
if(window.subtotal.show) {
let qty = quantityInput.val();
subTotal = qty * price;
subTotal = Shopify.formatMoney(subTotal, window.money_format);
subTotal = extractContent(subTotal);
const moneySpan = document.createElement('span')
moneySpan.classList.add(window.currencyFormatted ? 'money' : 'money-subtotal')
moneySpan.innerText = subTotal
document.body.appendChild(moneySpan)
if (this.checkNeedToConvertCurrency()) {
let currencyCode = document.getElementById('currencies')?.querySelector('.active')?.getAttribute('data-currency');
Currency.convertAll(window.shop_currency, currencyCode, 'span.money', 'money_format');
}
subTotal = moneySpan.innerText
$(moneySpan).remove()
if (window.subtotal.style == '1') {
const pdView_subTotal = document.querySelector('.productView-subtotal .money') || document.querySelector('.productView-subtotal .money-subtotal');
if (pdView_subTotal != null) {
pdView_subTotal.textContent = subTotal;
}
if (this.currentVariant.available && maxValue <= 0 && this.currentVariant.inventory_management == "shopify") {
text = window.variantStrings.preOrder;
} else {
text = window.variantStrings.addToCart;
}
}
else if (window.subtotal.style == '2') {
text = window.subtotal.text.replace('[value]', subTotal);
}
} else {
subTotal = Shopify.formatMoney(price, window.money_format);
subTotal = extractContent(subTotal);
if (this.currentVariant.available && maxValue <= 0 && this.currentVariant.inventory_management == "shopify") {
text = window.variantStrings.preOrder;
} else {
text = window.variantStrings.addToCart;
}
}
quantityInput.attr('data-price', this.currentVariant?.price);
quantityInput.attr('disabled', false);
addButton.removeAttribute('disabled');
addButton.textContent = text;
quantityInput.closest('quantity-input').removeClass('disabled');
if (subTotal != 0 && stickyPrice.length) {
stickyPrice.text(subTotal);
}
if (subTotal != 0 && stickyComparePrice.length && window.subtotal.show) {
let comparePrice = $('[data-sticky-add-to-cart] .money-compare-price').data('compare-price'),
qty = quantityInput.val();
comparePrice = qty * comparePrice;
comparePrice = Shopify.formatMoney(comparePrice, window.money_format);
comparePrice = extractContent(comparePrice);
stickyComparePrice.text(comparePrice);
}
if(notifyMe.length > 0){
notifyMe.slideUp('slow');
}
}
}
}
updateStickyAddToCart(unavailable = true, disable = true){
if(this.item.find('.productView-stickyCart').length > 0){
const sticky = this.item.find('.productView-stickyCart');
const itemImage = sticky.find('.sticky-image');
const option = sticky.find('.select__select');
const input = document.getElementById(`product-form-sticky-${this.dataset.product}`)?.querySelector('input[name="id"]');
const button = document.getElementById(`product-form-sticky-${this.dataset.product}`)?.querySelector('[name="add"]');
var quantityInput = this.item.find('input[name="quantity"]');
var maxValue = parseInt(quantityInput.attr('data-inventory-quantity'));
if(unavailable){
var text = window.variantStrings.unavailable;
button.setAttribute('disabled', true);
button.textContent = text;
} else {
if (!this.currentVariant) return;
const image = this.currentVariant?.featured_image;
if (image != null) {
itemImage.find('img').attr({
'src': image.src,
'srcset': image.src,
'alt': image.alt
});
}
option.val(this.currentVariant.id);
if (disable) {
var text = window.variantStrings.soldOut;
button.setAttribute('disabled', true);
button.textContent = text;
} else {
if (this.currentVariant.available && maxValue <= 0 && this.currentVariant.inventory_management == "shopify") {
text = window.variantStrings.preOrder;
} else {
text = window.variantStrings.addToCart;
}
button.removeAttribute('disabled');
button.textContent = text;
}
input.value = this.currentVariant.id;
input.dispatchEvent(new Event('change', { bubbles: true }));
}
}
}
getVariantData() {
this.variantData = this.variantData || JSON.parse(this.querySelector('[type="application/json"]').textContent);
return this.variantData;
}
checkNeedToConvertCurrency() {
var currencyItem = $('.dropdown-item[data-currency]');
if (currencyItem.length) {
return (window.show_multiple_currencies && Currency.currentCurrency != shopCurrency) || window.show_auto_currency;
} else {
return;
}
}
checkQuantityWhenVariantChange() {
var quantityInput = this.closest('.productView-details').querySelector('input.quantity__input')
var maxValue = parseInt(quantityInput?.dataset.inventoryQuantity);
var inputValue = parseInt(quantityInput?.value);
let value = inputValue
if (inputValue > maxValue && maxValue > 0) {
value = maxValue
} else {
value = inputValue
}
if (value < 1 || isNaN(value)) value = 1
if (quantityInput) {
quantityInput.value = value
}
document.getElementById('product-add-to-cart').dataset.available = this.currentVariant.available && maxValue <= 0
}
updateVariantStatuses() {
// const options = this.item.find('.productView-details .product-form__input'),
// optionsLength = options.length,
// pvOptionsLength = PVoptions.length,
// checkStickyVariant = false;
// optionsLength > pvOptionsLength ? checkStickyVariant = true : '';
const selectedOptionOneVariants = this.variantData.filter(variant => this.querySelector(':checked').value === variant.option1);
const inputWrappers = [...this.querySelectorAll('.product-form__input')];
const inputLength = inputWrappers.length;
inputWrappers.forEach((option, index) => {
option.querySelector('[data-header-option]').innerText = option.querySelector(':checked').value;
if (index === 0 && inputLength > 1) return;
const optionInputs = [...option.querySelectorAll('input[type="radio"], option')]
const previousOptionSelected = inputLength > 1 ? inputWrappers[index - 1].querySelector(':checked').value : inputWrappers[index].querySelector(':checked').value;
const optionInputsValue = inputLength > 1 ? selectedOptionOneVariants.filter(variant => variant[`option${ index }`] === previousOptionSelected).map(variantOption => variantOption[`option${ index + 1 }`]) : this.variantData.map(variantOption => variantOption[`option${ index + 1 }`]);
const availableOptionInputsValue = inputLength > 1 ? selectedOptionOneVariants.filter(variant => variant.available && variant[`option${ index }`] === previousOptionSelected).map(variantOption => variantOption[`option${ index + 1 }`]) : this.variantData.filter(variant => variant.available).map(variantOption => variantOption[`option${ index + 1 }`]);
this.setInputAvailability(optionInputs, optionInputsValue, availableOptionInputsValue)
});
}
setInputAvailability(optionInputs, optionInputsValue, availableOptionInputsValue) {
optionInputs.forEach(input => {
if (availableOptionInputsValue.includes(input.getAttribute('value'))) {
input.classList.remove('soldout');
input.innerText = input.getAttribute('value');
} else {
input.classList.add('soldout');
optionInputsValue.includes(input.getAttribute('value')) ? input.innerText = input.getAttribute('value') + ' (Sold out)' : input.innerText = window.variantStrings.unavailable_with_option.replace('[value]', input.getAttribute('value'))
}
});
}
}
customElements.define('variant-selects', VariantSelects);
class VariantRadios extends VariantSelects {
constructor() {
super();
}
setInputAvailability(optionInputs, optionInputsValue, availableOptionInputsValue) {
optionInputs.forEach(input => {
if (availableOptionInputsValue.includes(input.getAttribute('value'))) {
input.nextSibling.classList.remove('soldout', 'unavailable');
input.nextSibling.classList.add('available');
} else {
input.nextSibling.classList.remove('available', 'unavailable');
input.nextSibling.classList.add('soldout');
if (window.variantStrings.hide_variants_unavailable && !optionInputsValue.includes(input.getAttribute('value'))) {
input.nextSibling.classList.add('unavailable')
if (!input.checked) return;
let inputsValue;
availableOptionInputsValue.length > 0 ? inputsValue = availableOptionInputsValue : inputsValue = optionInputsValue;
input.closest('.product-form__input').querySelector(`input[value="${inputsValue[0]}"]`).checked = true;
this.dispatchEvent(new Event('change'))
}
}
});
}
updateOptions() {
const fieldsets = Array.from(this.querySelectorAll('fieldset'));
this.options = fieldsets.map((fieldset) => {
return Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value;
});
}
}
customElements.define('variant-radios', VariantRadios);
class QuantityInput extends HTMLElement {
constructor() {
super();
this.input = this.querySelector('input');
this.changeEvent = new Event('change', { bubbles: true });
this.input.addEventListener('change', this.onInputChange.bind(this));
this.querySelectorAll('button').forEach(
(button) => button.addEventListener('click', this.onButtonClick.bind(this))
);
if (!this.checkHasMultipleVariants()) {
this.initProductQuantity();
this.checkVariantInventory();
}
}
onInputChange(event) {
event.preventDefault();
var inputValue = this.input.value;
var maxValue = parseInt(this.input.dataset.inventoryQuantity);
var currentId = document.getElementById(`product-form-${this.input.dataset.product}`)?.querySelector('[name="id"]')?.value;
var saleOutStock = document.getElementById('product-add-to-cart').dataset.available === 'true' || false ;
const addButton = document.getElementById(`product-form-${this.input.dataset.product}`)?.querySelector('[name="add"]');
if(inputValue < 1) {
inputValue = 1;
this.input.value = inputValue;
}
if (inputValue > maxValue && !saleOutStock && maxValue > 0) {
var arrayInVarName = `selling_array_${this.input.dataset.product}`,
itemInArray = window[arrayInVarName],
itemStatus = itemInArray[currentId];
if(itemStatus == 'deny') {
inputValue = maxValue
this.input.value = inputValue;
const message = getInputMessage(maxValue)
showWarning(message, 3000)
}
} else if (inputValue > maxValue && saleOutStock && maxValue <= 0) {
this.input.value = inputValue;
}
if(window.subtotal.show) {
var text,
price = this.input.dataset.price,
subTotal = 0;
var parser = new DOMParser();
subTotal = inputValue * price;
subTotal = Shopify.formatMoney(subTotal, window.money_format);
subTotal = extractContent(subTotal);
const moneySpan = document.createElement('span')
moneySpan.classList.add(window.currencyFormatted ? 'money' : 'money-subtotal')
moneySpan.innerText = subTotal
document.body.appendChild(moneySpan)
if (this.checkNeedToConvertCurrency()) {
let currencyCode = document.getElementById('currencies')?.querySelector('.active')?.getAttribute('data-currency');
Currency.convertAll(window.shop_currency, currencyCode, 'span.money', 'money_format');
}
subTotal = moneySpan.innerText
$(moneySpan).remove()
if (window.subtotal.style == '1') {
const pdView_subTotal = document.querySelector('.productView-subtotal .money') || document.querySelector('.productView-subtotal .money-subtotal');
pdView_subTotal.textContent = subTotal;
}
else if (window.subtotal.style == '2') {
text = window.subtotal.text.replace('[value]', subTotal);
addButton.textContent = text;
}
const stickyPrice = $('[data-sticky-add-to-cart] .money-subtotal .money');
const stickyComparePrice = $('[data-sticky-add-to-cart] .money-compare-price .money');
if (stickyPrice.length) {
stickyPrice.text(subTotal);
}
if (stickyComparePrice.length && window.subtotal.show) {
let comparePrice = $('[data-sticky-add-to-cart] .money-compare-price').data('compare-price');
comparePrice = inputValue * comparePrice;
comparePrice = Shopify.formatMoney(comparePrice, window.money_format);
comparePrice = extractContent(comparePrice);
stickyComparePrice.text(comparePrice);
}
}
if (this.classList.contains('quantity__group--2') || this.classList.contains('quantity__group--3')) {
const mainQty = document.querySelector('.quantity__group--1 .quantity__input');
mainQty.value = inputValue;
const mainQty2Exists = !!document.querySelector('.quantity__group--2 .quantity__input');
const mainQty3Exists = !!document.querySelector('.quantity__group--3 .quantity__input');
if (this.classList.contains('quantity__group--2') && mainQty3Exists) {
const mainQty3 = document.querySelector('.quantity__group--3 .quantity__input');
mainQty3.value = inputValue;
}
else if (this.classList.contains('quantity__group--3') && mainQty2Exists) {
const mainQty2 = document.querySelector('.quantity__group--2 .quantity__input');
mainQty2.value = inputValue;
}
}
}
onButtonClick(event) {
event.preventDefault();
const previousValue = this.input.value;
event.target.name === 'plus' ? this.input.stepUp() : this.input.stepDown();
if (previousValue !== this.input.value) this.input.dispatchEvent(this.changeEvent);
}
checkNeedToConvertCurrency() {
return (window.show_multiple_currencies && Currency.currentCurrency != shopCurrency) || window.show_auto_currency;
}
checkHasMultipleVariants() {
const arrayInVarName = `product_inven_array_${this.querySelector('[data-product]').dataset.product}`
this.inven_array = window[arrayInVarName];
return Object.keys(this.inven_array).length > 1
}
initProductQuantity() {
if(this.inven_array != undefined) {
var inven_num = Object.values(this.inven_array),
inventoryQuantity = parseInt(inven_num);
this.querySelector('input[name="quantity"]').setAttribute('data-inventory-quantity', inventoryQuantity);
this.querySelector('input[name="quantity"]').dataset.inventoryQuantity = inventoryQuantity
}
}
checkVariantInventory() {
const addBtn = document.getElementById('product-add-to-cart')
this.input.disabled = addBtn.disabled
this.querySelector('.btn-quantity.minus').disabled = addBtn.disabled
this.querySelector('.btn-quantity.plus').disabled = addBtn.disabled
}
getVariantData() {
this.variantData = this.variantData || JSON.parse(document.querySelector('.product-option [type="application/json"]').textContent);
return this.variantData;
}
}
customElements.define('quantity-input', QuantityInput);
function hotStock(inventoryQuantity) {
const productView = document.querySelector('.productView');
const hotStock = productView.querySelector('.productView-hotStock');
if(hotStock) {
let hotStockText = hotStock.querySelector('.hotStock-text'),
maxStock = parseFloat(hotStock.dataset.hotStock),
textStock;
if(inventoryQuantity > 0 && inventoryQuantity <= maxStock){
hotStock.matches('.style-2') ? textStock = window.inventory_text.hotStock2.replace('[inventory]', inventoryQuantity) : textStock = window.inventory_text.hotStock.replace('[inventory]', inventoryQuantity);
if (hotStockText) hotStockText.innerHTML = textStock;
hotStock.classList.remove('is-hide');
} else {
hotStock.classList.add('is-hide');
}
if (hotStock.matches('.style-2')) {
const invenProgress = inventoryQuantity / maxStock * 100,
hotStockProgressItem = hotStock.querySelector('.hotStock-progress-item');
hotStockProgressItem.style.width = `${invenProgress}%`;
}
}
}
const hotStockNoOptions = document.querySelector('.productView .productView-hotStock[data-current-inventory]');
if (hotStockNoOptions) {
const inventoryQuantity = parseFloat(hotStockNoOptions.dataset.currentInventory);
hotStock(inventoryQuantity);
}
function showWarning(content, time = null) {
if (window.warningTimeout) {
clearTimeout(window.warningTimeout);
}
const warningPopupContent = document.getElementById('halo-warning-popup').querySelector('[data-halo-warning-content]')
warningPopupContent.textContent = content
document.body.classList.add('has-warning')
if (time) {
window.warningTimeout = setTimeout(() => {
document.body.classList.remove('has-warning')
}, time)
}
}
function getInputMessage(maxValue) {
var message = window.cartStrings.addProductOutQuantity.replace('[maxQuantity]', maxValue);
return message
}
This should work! Remember the update media function remains broken. To fix it we need to delve deep into the code base to learn how things are being executed.