Need help working out the code to create a custom calculator on product page!

Solved
CreatieWilder
Tourist
10 0 3

 

Hello,

 

I'm looking to create a custom calculator which would multiply the quantity by product price and display the total. I'm working on a store and can't seem to get the quantity to update but have got everything working otherwise! 

 

I've got this far... using the following calculation formula but it isn't picking up the quantity as it increases. 

 

{{ current_variant.price | times: 'we need the quantity variable in here' | divided_by: 100.00  }}
 
It's the underlined section I can't seem to get working but it works with a flat number such as times 5 etc.
 
Screenshot 2022-04-05 at 13.23.30.png

I've read setting up an event listener using JS may work for this but wondered if anyone knows the identifier to grab the live quantity as a user changes it. 
 
I have tried apps and they don't work.
 
 
 
This is what I would like it to look like...
 

Screenshot 2022-04-05 at 16.24.17.png

Accepted Solution (1)

Accepted Solutions
LitExtension
Shopify Partner
3374 665 726

This is an accepted solution.

Hi @CreatieWilder,

Please follow the steps below:

- Step 1: Go to product-template.liquid file and add code here:

Screenshot.png

- Step 2: Go to theme.js file and add code:

Screenshot.png

Hope it is clear to you.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!

View solution in original post

Replies 7 (7)
LitExtension
Shopify Partner
3374 665 726

Hi @CreatieWilder,

Yes, it can only be added by JS, you cannot add liquid code for this.

Please send your site and if your site is password protected, please send me the password. I will check it.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
CreatieWilder
Tourist
10 0 3
I thought that might be the case! Thankyou so much it would be great to
work out how to do this.

Live site is:
https://lamazifabrics.com/products/art-gallery-fabrics-paparounes-crimson-in-cotton-jersey

LitExtension
Shopify Partner
3374 665 726

Hi @CreatieWilder,

I have checked and your JS file is minify, can you send me staff account, I will help you to add it quickly

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
CreatieWilder
Tourist
10 0 3
Hey! Thanks for the reply. It's actually a client site they are on holiday
at the moment so I can't add any other collaborators. Is there any way of
sharing the code and I can try that out?

I can try get access next week. Do you do regular jobs like this as can
email you and get a quote for future things?
LitExtension
Shopify Partner
3374 665 726

Hi @CreatieWilder,

I sent you a private message with email, when you are ready just send collaborators I will check it for you

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
LitExtension
Shopify Partner
3374 665 726

This is an accepted solution.

Hi @CreatieWilder,

Please follow the steps below:

- Step 1: Go to product-template.liquid file and add code here:

Screenshot.png

- Step 2: Go to theme.js file and add code:

Screenshot.png

Hope it is clear to you.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
CreatieWilder
Tourist
10 0 3

Incredible thankyou so much this is perfect!!! I've been trying to solve this for weeks 😄