This is my first post on Stack, I am very new to JavaScript and need some assistance in a change I am implementing.
In my Shopify theme I am trying to change the Javascript on variant changes to show any (variant.price) that is 0.00 to be displayed as “POA”. I have done the Liquid to ensure on initial page load the this is the case however JavaScript is overwriting this as a user selects different variants. I think the change can be done in this part of code below, however if there is another section I should be looking at please let me know.
_updatePrice: function(evt) {
var variant = evt.variant;
var $priceContainer = $(this.selectors.priceContainer, this.$container);
var $regularPrice = $(this.selectors.regularPrice, $priceContainer);
var $salePrice = $(this.selectors.salePrice, $priceContainer);
var $unitPrice = $(this.selectors.unitPrice, $priceContainer);
var $totalPrice = $(this.selectors.totalPrice, $priceContainer);
var $labelSale = $(this.selectors.labelSale, this.$container);
var $unitPriceBaseUnit = $(
this.selectors.unitPriceBaseUnit,
$priceContainer
);
// Reset product price state
$priceContainer
.removeClass(this.classes.productUnavailable)
.removeClass(this.classes.productOnSale)
.removeClass(this.classes.productUnitAvailable)
.removeAttr('aria-hidden');
// Unavailable
if (!variant) {
$priceContainer
.addClass(this.classes.productUnavailable)
.attr('aria-hidden', true);
return;
}
// On sale
var quantity = parseInt($('[data-quantity-input]').val());
if (variant.compare_at_price > variant.price) {
$regularPrice.html(
theme.Currency.formatMoney(
variant.compare_at_price,
theme.moneyFormat
)
);
$salePrice.html(
theme.Currency.formatMoney(variant.price, theme.moneyFormat)
);
$('[data-total-price]').attr('data-price-value', variant.price)
$('[data-total-price]').html(
theme.Currency.formatMoney(variant.price*quantity, theme.moneyFormat)
);
$priceContainer.addClass(this.classes.productOnSale);
// label Sale
$labelSale.show();
$labelSale.html('-' + Math.floor(((variant.compare_at_price - variant.price)/variant.compare_at_price)*100) + '%' );
} else {
// Regular price
$regularPrice.html(
theme.Currency.formatMoney(variant.price, theme.moneyFormat)
);
$salePrice.html("");
$('[data-total-price]').attr('data-price-value', variant.price)
$('[data-total-price]').html(
theme.Currency.formatMoney(variant.price*quantity, theme.moneyFormat)
);
$labelSale.hide();
}
if (checkNeedToConvertCurrency()) {
Currency.convertAll(window.shop_currency, $('#currencies .active').attr('data-currency'), 'span.money', 'money_format');
}
// Unit price
// if (variant.unit_price) {
// $unitPrice.html(
// theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
// );
// $unitPriceBaseUnit.html(this._getBaseUnit(variant));
// $priceContainer.addClass(this.classes.productUnitAvailable);
// }
},
Thank you all kindly 🙂