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

[CreatieWilder]

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.

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…

[LitExtension]

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.

[CreatieWilder]

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]

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

[CreatieWilder]

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]

Hi @CreatieWilder ,

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

[LitExtension]

Hi @CreatieWilder ,

Please follow the steps below:

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

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

Hope it is clear to you.

[CreatieWilder]

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

[OliverJacob12]

@CreatieWilder

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.

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…

There are few apps like quiz which can fulfill your requirement. You can create quiz with different questions, customer can get products based on that.

you can also create custom app or customization in liquid.

With Guidelines you are able to create a series of questions and then associate tags with each answer. As a shopper goes through your product finder answering questions, we build a dynamic search query based on the selected answers/tags. i.e… Show all products that have Tag_A(From Q1) and Tag_B(From Q2) etc… The app is pretty flexible and can be customized to fit your needs. We also released a new feature that tracks sales directly attributed to someone going through your product finder/quiz. This way, you can clearly justify if shopify app is providing real tangible value to your bottom line.

As many do, shopify offer a free trial. Check us and if you need more help, please let me know.

[Luffird09]

Das Erstellen eines benutzerdefinierten Rechners auf einer Produktseite umfasst einige wichtige Schritte. Zunächst müssen Sie HTML verwenden, um die Grundstruktur des Rechners zu erstellen, einschließlich Eingabefeldern und Schaltflächen. Verwenden Sie als Nächstes CSS, um den Rechner so zu gestalten, dass er sich nahtlos in Ihre Produktseite integriert. Der kritischste Teil ist das Schreiben des JavaScript-Codes, der die Funktionalität des Rechners handhabt. Sie müssen Funktionen erstellen, um die Eingabevalidierung zu handhaben, Berechnungen durchzuführen und die Anzeige basierend auf Benutzerinteraktionen zu aktualisieren. Testen Sie den Rechner gründlich, um Genauigkeit und Benutzerfreundlichkeit sicherzustellen. Wenn Sie mit zeitbezogenen Berechnungen arbeiten, kann die Integration einer Arbeitszeitrechnerfunktion Ihrer Produktseite wertvolle Funktionen hinzufügen und Benutzern helfen, zeitbasierte Kosten oder Zeitpläne direkt auf Ihrer Site zu ermitteln.