Several visual Elements showing prices are not updated with the correct price when changing variant

[fthobe]

• When changing a variant, the inside the add to cart Button is not updated
• Featured Products show wrong price

Add to cart button

Featured Products use master price and variant price

Solidus Version:
All

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version Latest

[cdavaz]

Having the same issue. Looks like the default view renders the master price or first variant server side and there's no JS to dynamically update it. Also the default view references this nonexistent JS function addToCartButtonPriceChangeHandler.

[jarednorman]

Thanks for reporting. I think that there was some "refactoring" done to the JS that inadvertently broke something. I actually think I fixed this as part of a new project we just built, but forgot to come back and log the issue.

[cdavaz]

@jarednorman I wound up implementing this hacky solution for the #cta_price field (I renamed it to #cta-price). It assumes USD so probably not a good general solution but the point is the price has to be multiplied by the quantity:

function updateCtaPrice() {
  const ctaPrice = document.querySelector('#cta-price');
  const variant = document.querySelector(`[data-option-value-ids="${JSON.stringify(this.currentSelection())}"]`);
  const quantity = parseInt(document.querySelector('#quantity').value);

  if (Number.isNaN(quantity)) {
    console.log('Unable to parse quantity: ' + quantity);
    ctaPrice.innerHTML = 'ERROR';
    return;
  }

  let price = Number(variant.dataset.js_price.replace(/[^0-9.-]+/g, ""));

  if (Number.isNaN(price)) {
    console.log('Unable to parse price: ' + variant.dataset.price);
    ctaPrice.innerHTML = 'ERROR';
    return;
  }

  price = Math.round(price * 100) * quantity / 100;
  ctaPrice.innerHTML = '$' + price.toFixed(2);
}

since all the functions in product_selection_component.js are defined directly on window I was thinking I might convert the whole thing to a Stimulus controller.