Selected Variant Price Change with Divided by 18

Hey,

I want to know something about the variant price change with the selected variant.

below is the JavaScript code:

_updatePricesUnit(variant) {
      let productPricesUnit = this.querySelector("[data-product-price-list-edit]"), currencyFormat = window.themeVariables.settings.currencyCodeEnabled ? window.themeVariables.settings.moneyWithCurrencyFormat : window.themeVariables.settings.moneyFormat;
      if (!productPricesUnit) {
        return;
      }
      if (!variant) {
        productPricesUnit.style.display = "none";
      } else {
        productPricesUnit.innerHTML = "";
        if (variant["price"]) {
          productPricesUnit.innerHTML += `${window.themeVariables.strings.productSalePrice}${formatMoney(variant["price"], currencyFormat)}`;
        }
      }
    }

My Liquid Code:


Basically, I have two types of conditions.

  1. Is it possible to divide the value from the JavaScript code.

  2. Would it be possible to store the price value in the .liquid file.

Also, you free the tell another option to help me achieve my target.

Thanks,

Rajni Bobel

I’m not 100% sure of your question here but can see you’ve got a JS snippet, and some Liquid.

To kick us off:

  • You can do division in JS or Liquid. Liquid will do the math once and since there’s variants involved I am assuming this needs to be dynamic as a customer changes options. JS is likely the better path if so.
  • You can not take JS derived value and use Liquid to divide. JS runs long after Liquid has finished and one is client side, the other server side.
  • You can take values rendered with Liquid and do things with them in JS.

Come back with more specific example or context so I understand the need.

Hello Jason,

Firstly thanks for your answer.

Basically, I want the per qty price of my product.

If the customer chooses the Qty by a slab with the variant. The current variant price was divided by option3 = Qty 50.

I achieve almost the same as what I want. but the problem is the price will change after refreshing the product page. with this code:

{% assign price = product.selected_or_first_available_variant.price %}
{% assign qty_value = total_items %}

Per Item Cost :{{ price | divided_by: qty_value | money }}/-

So, I will use the JS snippet with the “this.querySelector” for the live price change, but I can’t assign this price value from the. Liquid Template.

Thanks,

Rajni Bobel