To make price dynamically change when variants are switched

To make price dynamically change when variants are switched

In assets/product-card.js, 

Find 

updatePrice(html) {
const priceContainer = this.querySelectorAll(`product-price [ref='priceContainer']`)[1];
const newPriceElement = html.querySelector(`product-price [ref='priceContainer']`);

if (newPriceElement && priceContainer) {
morph(priceContainer, newPriceElement);
}
}

Replace with the followings:

updatePrice(html) {
const priceContainer = this.querySelector(
"product-price [ref='priceContainer']"
);
const newPriceElement = html.querySelector(
"product-price [ref='priceContainer']"
);

if (!newPriceElement || !priceContainer) return;

morph(priceContainer, newPriceElement);

const updatedContainer = this.querySelector(
"product-price [ref='priceContainer']"
);
const salePrice = updatedContainer?.querySelector('.price');
const compareAtPrice =
updatedContainer?.querySelector('.compare-at-price');

if (
salePrice &&
compareAtPrice &&
salePrice.parentElement === compareAtPrice.parentElement
) {
compareAtPrice.before(salePrice);
compareAtPrice.style.marginInlineStart = '0.4em';
}
}

This will make the price dynamically changed, and put the compare at price in place.