Hello,
We recently found this bug in our store and we are near to launch, so a quick help would be extremely appreciated.
In the screen-recording below the Price fields (Regular Price & Compare at Price) does not update when a different variant is selected after the page has loaded on the Product Page. You can refer to the screen recording for a better understanding.
The problem is in the Javascript, but if someone could help us what code changes and where should we make those changes exactly to fix this issue, we would be really thankful.
I am also attaching the part of the Javascript file that is responsible for these changes (If these are not the correct lines), please guide us
/**
* 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;
}
/**** Code added by Siraj on 25-8-2022 for Showing Inventory Left In Stock ****/
let inventoryHash = document.querySelectorAll('[inventorymanagment]');
debugger;
Array.from(inventoryHash).forEach(
(Selectedvariant)=>{
if(Selectedvariant.dataset.id == variant.id){
if(Selectedvariant.dataset.inventory > 4)
{
$("#variant-inventory").html("We have **"+ Selectedvariant.dataset.inventory +"** pieces in Stock.!");
}
else{
$("#variant-inventory").html("");
}
}
}
);
/**** End Code by Siraj ****/
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;
})();
this.Shopify = this.Shopify || {};
this.Shopify.theme = this.Shopify.theme || {};
this.Shopify.theme.PredictiveSearch = (function() {
'use strict';
function validateQuery(query) {
var error;
if (query === null || query === undefined) {
error = new TypeError("'query' is missing");
error.type = 'argument';
throw error;
}
if (typeof query !== 'string') {
error = new TypeError("'query' is not a string");
error.type = 'argument';
throw error;
}
}
function GenericError() {
var error = Error.call(this);
error.name = 'Server error';
error.message = 'Something went wrong on the server';
error.status = 500;
return error;
}
function NotFoundError(status) {
var error = Error.call(this);
error.name = 'Not found';
error.message = 'Not found';
error.status = status;
return error;
}
function ServerError() {
var error = Error.call(this);
error.name = 'Server error';
error.message = 'Something went wrong on the server';
error.status = 500;
return error;
}
function ContentTypeError(status) {
var error = Error.call(this);
error.name = 'Content-Type error';
error.message = 'Content-Type was not provided or is of wrong type';
error.status = status;
return error;
}
function JsonParseError(status) {
var error = Error.call(this);
error.name = 'JSON parse error';
error.message = 'JSON syntax error';
error.status = status;
return error;
}