Update Product Price per Unit in Description

Highlighted
New Member
7 0 0

Hello,

I'm tweaking the Venture theme to display prices on the product page.
So far I've managed to display the SKU's under the product title (by including the following line to product-template.liquid in the theme code) and to enable them to be updated !

          <span class="variant-sku"> {{product.selected_or_first_available_variant.sku}}</span>

The product quantities are saved under variants (I'm selling in big quantities.) Here is the line of html /liquid code I've entered:

<i>({{ current_variant.price | divided_by: current_variant.option2  | money }} / unité) </i>

It does work. Except when the value is empty, this is not an issue. I plan to enter all variant.option2 with a value.

However, it does not get updated with variants... Is this possible ? Which class /id should I target ?
I fiddled around with the javascript code but didn't want to break the theme.
I want to price to be displayed under the product and to update.

Screenshot_2019-05-11_14-25-32.png

 

Thank you for your time !

0 Likes
Highlighted
New Member
7 0 0

Bump!

0 Likes
New Member
7 0 0
Bump. Any ideas ?
0 Likes
Highlighted
Shopify Partner
468 85 109

I think the problem is NOT clear fully, please try give a bit more information.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
1 Like
Highlighted
Tourist
20 0 1

Not really sure what you are trying to ask but if you can try doing onchange event in javascript then forward the string of it to which part you want it to show up.

0 Likes
Highlighted
New Member
7 0 0

Thanks for your replies !
Simply, I'm trying to show a price per product under the price of the product listing.
I'm selling products in bulk. So when I have a product listing it is actually not 1 single product, but x times a product.

I want to divide the product by the quantity.


Now I have created variants of product listing with different quantities of the product. When I select a different variant on a listing, this is where the code breaks. This is because I don't know how to fetch the javascript code.

 


Product price = X

Product quantity = (variant.option2)
Price per product = X / (variant.option2)

 

P.S: Website link, www.vaisselleverte.fr

Let me know if you need more info.

0 Likes
Highlighted
Highlighted
New Member
7 0 0

Bump

0 Likes
Highlighted
Shopify Partner
1665 52 192

At the end i'll cover the partial code theme.js already has for an updatePPU function.

 

First get the structure in place, I see what's being currently used is <span class="variant-ppu"> <br> <i>(0,14 € / unité) </i> </span>  

For sanity modify that display element to put a span directly around the formatted price output as a clean hook for the javascript&colon;

<span class="variant-ppu"><br><i>(<span id="ProductPricePerUnit">{{ current_variant.price | divided_by: current_variant.option2 | money }}</span> / unité)</i></span> 

So ProductPricePerUnit is the css ID and with this structure you only have to modify the formatted price itself and can ignore the " / unité" label.

 

For themes using slate , normally you'd make a <script> in the related templates to run a function when the variantChange event fires,

Using jquery, in your Venture themes product.liquid, or at the bottom of theme.liquid, or in theme.js(w/o <script> tag) :

 

<script>
$(document).on("variantChange",function(event){
    var unitPriceSelector = 'ProductPricePerUnit'; // container span class: 'variant-ppu';
    var variantPrice = event.variant.price;
    var productQuantity = event.variant.option2;
    var unitPrice = theme.Currency.formatMoney(variantPrice/productQuantity,theme.moneyFormat);
    var element = document.getElementById(unitPriceSelector);
element[0].innerText = unitPrice;

//example code if you were using .variant-ppu class instead and needed to also include the label when replacing the price content
//unused var unitText = " / unité";
//unused var unitPriceText = unitPrice + unitText; //unused var element = document.getElementsByClassName(unitPriceSelector);
//unused element[0].innerText = unitPriceText; }); </script>

 

Alternative update theme.js using updatePPU functions

For sanity consider refactoring updatePPU to updatePricePerUnit wherever it occurs (about 4 times in the file)

 

First fix the error it's using variant.option1 when you want variant.option2 

 

    _updatePPU: function(evt) {
      var variant = evt.variant;

      if (variant) {
        $(this.selectors.PPU).html(variant.price / variant.option1);

      }
    },

Modified:

    _updatePPU: function(evt) {
      var variant = evt.variant;

      if (variant) {
        var unitPrice = theme.Currency.formatMoney(variantPrice/variant.option2,theme.moneyFormat);
        var unitText = " / unité"; 
        var unitPriceText =  unitPrice + unitText;
        $(this.selectors.PPU).html(unitPriceText);
      }
    },

Note: Check other price elements and stick to the convention your theme uses to generate the css ID

, e.g. Product price element uses the output ID ProductPrice-product-template 

 

 

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes
Highlighted
Shopify Partner
47 1 2

Hi -

 

There's an app that can show per unit prices and keep them updated even if you change the product price - it's called EasyPrice: Price Per Unit

 

It's super easy to use and it calculates unit pricing for you. Try it free: https://apps.shopify.com/price-per-unit

0 Likes