mathematics in timber.js.liquid

Olivier_Contant
New Member
18 0 0

Hi,

I have variant for a product and the price and compare price display correctly when we change from variant to another variant in the dropdown menu for a product.. 

I created a comparison price per 100g to give an idea of the cost per 100g between different product to help customer compare price between product. I did this mathematic formula in product.liquid but the price doesn't update when people choose another variant.  There is a call back in timber.js.liquid that is being used by productPrice and comparePrice in product.liquid to update the price.  

By adding the same method for productPrice and comparePrice, it would seems that the callback replace the value of my code in product.liquid and instead display just the variant.price variable; so the mathematic done in product.liquid is not done after the callback and only the variant.price is displayed and I lose as well all the other formating like adding / 100g after the price. 

I believe I need to set the formula in the timber.js.liquid and the formatting in order to have the callback display:  price / 100g in the product page. 

I have this code in product.liquid (the commented code is the original used and the commented out is the one I'm testing.)

<span id="VariantComparePrice100g" class="product-single__price_comparaison" itemprop="price"> 
  <!-- {{ product.price | times: 100 | divided_by: product.variants.first.weight |  money }} / 100g -->
  {{ variant.price | money }}  // Using product.price or variant.price display the same thing.
</span>

 

timber.js.liquid

// Selectors
  var $productImage = $('#ProductPhotoImg'),
      $addToCart = $('#AddToCart'),
      $productPrice = $('#ProductPrice'),
      $comparePrice = $('#ComparePrice'),
      $variantComparePrice100g = $('#VariantComparePrice100g'),
      $quantityElements = $('.quantity-selector, label + .js-qty'),
      $addToCartText = $('#AddToCartText');

  if (variant) {

    // Update variant image, if one is set
    if (variant.featured_image) {
      var newImg = variant.featured_image,
          el = $productImage[0];
      Shopify.Image.switchImage(newImg, el, timber.switchImage);
    }

    // Select a valid variant if available
    if (variant.available) {
      // Available, enable the submit button, change text, show quantity elements
      $addToCart.removeClass('disabled').prop('disabled', false);
      $addToCartText.html(translations.add_to_cart);
      $quantityElements.show();
    } else {
      // Sold out, disable the submit button, change text, hide quantity elements
      $addToCart.addClass('disabled').prop('disabled', true);
      $addToCartText.html(translations.sold_out);
      $quantityElements.hide();
    }

    // Regardless of stock, update the product price
    $productPrice.html( Shopify.formatMoney(variant.price, moneyFormat) );
    
    // Attempt 1 using javascript math operator:
    // $variantComparePrice100g.html ( variant.price * 100 / product.variants.first.weight );
    
    // Attempt 2 using liquid math operator
    // $variantComparePrice100g.html ( Shopify_fromatMoney(variant.price | times: 100 | divided_by: product.variants.first.weight, moneyFormat) );

    // Also update and show the product's compare price if necessary
    if (variant.compare_at_price > variant.price) {
      $comparePrice
        .html(Shopify.formatMoney(variant.compare_at_price, moneyFormat))
        .show();
    } else {
      $comparePrice.hide();
    }

  } else {
    // The variant doesn't exist, disable submit button.
    // This may be an error or notice that a specific variant is not available.
    // To only show available variants, implement linked product options:
    //   - http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-...
    $addToCart.addClass('disabled').prop('disabled', true);
    $addToCartText.html(translations.unavailable);
    $quantityElements.hide();
  }
};

 

 

So far, I had no luck.  Most example in timber.js.liquid use existing object like variant.price or product.price directly without modifying the value of the object.  I don't know the handle or way to do to modify the value and output the result of my math operations.

 

Thank you for your assistance,

Olivier
https://www.javanize.me

0 Likes
PaulNewton
Shopify Partner
2588 134 445

Wrong forum knowing what a forum is for gets it to the rights eyes, and multi-posting isn't good, just crosslink to a central post if you want a post to be .seen in different channels. The post in the design forum is what you want to focus on.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Guillaume_Malet
Shopify Staff
Shopify Staff
81 0 11

Hey Oliver! I'm going to close this post as it's in the wrong forum, and it's been open on the correct forum (https://ecommerce.shopify.com/c/ecommerce-design/t/mathematics-in-timber-js-liquid-334388)

0 Likes