Shopify Javascript $0.00 Price Replacement

Technical Q&A
1

Hello All,

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 does this 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 :slightly_smiling_face:

2

I think if you change this

// On sale
var quantity = parseInt($('[data-quantity-input]').val());
if (variant.compare_at_price > variant.price) {
  $regularPrice.html(

to

// On sale
var quantity = parseInt($('[data-quantity-input]').val());
if (variant.price == 0) {
  $regularPrice.html("POA")
}
else if (variant.compare_at_price > variant.price) {
  $regularPrice.html(

It will do what you are trying to achieve.

1 Like
3

Hi @MotoHeaven ,

Please change code:

_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) {
    if (variant.compare_at_price == 0) {
      $regularPrice.html('POA');
    } else {
      $regularPrice.html(
        theme.Currency.formatMoney(
          variant.compare_at_price,
          theme.moneyFormat
        )
      );
    }
    if (variant.price == 0) {
      $salePrice.html('POA');
    } else {
      $salePrice.html(
        theme.Currency.formatMoney(variant.price, theme.moneyFormat)
      );
    }
    $('[data-total-price]').attr('data-price-value', variant.price);
    if (variant.price == 0) {
      $('[data-total-price]').html('POA');
    } else {  
      $('[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
    if (variant.price == 0) {
      $regularPrice.html('POA');
    } else {
      $regularPrice.html(
        theme.Currency.formatMoney(variant.price, theme.moneyFormat)
      );
    }
    $salePrice.html("");
    $('[data-total-price]').attr('data-price-value', variant.price);
    if (variant.price == 0) {
      $('[data-total-price]').html('POA');
    } else {  
      $('[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);
  // }
},

I helped you check and change it to ‘POA’, you can change it to the text as you want.

Hope it helps!

1 Like