How to calculate a custom price based on user input?

I’ve just been reading about the new WIX code which has both excited me and confused the hell out of me!

Im half way through designing my new website with WIX and if I can get this feature to work it would make a huge difference.

Can I use the WIX code, specifically the user input, to allow a user on the site to tick various tick boxes and make size selections from drop down menus and then have it display a price on the site live based on the selections the user has made.

I can see how it can be tailored to collect data but I want to use it to shaw them a live price based on the selection they have made… IE

For a car wash.

Select car size from drop down

Tick to add on wheel deep clean
Tick to add on interior clean

…and then show them a price live

And if they then scroll back up and add another selection, the price automatically updates.
Is this possible?

Thank you in advance.

4 Likes

Anyone?

This is the page in question (please note the site is not finished. This is an update to my site www.cambridgeautogleam.com and I plan to finish it and put it live by new year )

https://nathan318.wixsite.com/mysite/newcar

It would be great if people can either click on the box to add the service / upgrade and then see a live price at the bottom.

Hi Nathan,

What you’ll need to do is to add an onChange() method for each element that contains information that affects the price.

Something like this will get the user’s information and then calculate the price based on the updated information:

var wheel;
var interior;
var price;
export function wheel_change(event) {
	//Add your code for this event here:
	wheel = $w("#wheel").checked;
	calculate_price();
}

export function interior_change(event) {
	//Add your code for this event here:
	interior = $w("#interior").checked;
	calculate_price(); 
}

function calculate_price() {
	price = < price calculation >
}

This should be what you need. And yes, I have to say it - your mileage may vary.

Yisrael

3 Likes

Thank you.

Sorry I’m a complete novice when it comes to code. Building my site was easy as its all drag and drop and graphical.

Do i need to set up a database with all the different price permiatations then?

I would say creating a database would be the easiest long-term. This way makes maintaining the list much easier since you only have one place to add new options, change prices, and so on.

The short-term “easy” way would be to hard-code in the prices. This makes it easier to figure out how to do it. The only catch is that you will then want to go back and get the prices from a database so that the site will be more stable and easier to make changes.

me neither, I cannot do any coding. please can u help me getting codes for my website?

here is the link, https://www.victoriafurnicenter.com/KingKoil/CHIRO-ENDORSED

  • I want the website to calculate each price with 2 elements of dropdown, for visitor’s convenient. When 2 elements of dropdown has chosen, i want the price automatically calculated live.
  1. by size, has 5 types of sizes: 100x200, 120x200, 160x200, 180x200 and 200x200 c

  2. by needs, has 3 types of needs: mattress only, matrress with divan, or full set (mattress, divan and headboard)
    so visitors can understand,
    on chiro endorsed product page, they must choose one of 5 sizes (100x200, 120x200, 160x200, 180x200 or 200x200 cm), then they have to choose their needs (mattress only, matrress with divan, or full set), after pressing the submit button, they can understand the price appear after calculated based on which they have chosen.

  • Also I use database collection to show this product. can it work with database collection? any recommendation?
    Thank You Wix Code Admin, I really wish Wix Code the best.
1 Like

Anyone?

Hi Daniel,
Unfortunately we are not able to code your Wix site on your behalf,
You can hire an expert in Wix Arena .
Roi

Thankyou for the info

hello, I am having the same problem. I am happy to try and have a go but where do we put the following information from Yisrael? And where it says add your code here, dhow do we know what code to use. Any information or a link to somewhere that explains it would be brilliant thank you, Mel

1 Like

Hey Yisrael,
I have a similar query and I have absolutely ZERO coding knowledge but I really want to understand this and apply it for my website.

I have read the above solution several times but I still can’t understand how to apply it.

I have multiple products like here >>> https://www.minervamerchandising.com/all-products

I would like to build a price estimate for my clients as I only sell wholesale. Hence I would like the wandering business who visits my website to head to a page that estimates the price.

Like say the list would be like this,

Product Name (Quantity/Case) | No. of Cases (drop down menu) | Total Value for No. of Cases (Rs.)

This list will keep filling with various products and subsequent prices…The client will keep selecting required quantities and may not pick some products.

At the bottom I need a submit button that send the data to my email as well as their email as input by client…and also redirect the client to a page with the list of selected products and its quantities and the TOTAL VALUE of all together.

Is it possible? and if yes please guide me how!

Thank you in advance.
Best regards.
Jose

Hi Jose,

Yes, it’s possible, but you will need to familiarize yourself with basic coding concepts to accomplish what you want. There are a wealth of Javascript coding sites which will help you learn Javascript from basic to advanced - Javascript.info is a good one. The Wix Code Resources page provides tutorials, examples, and articles on getting the most out of Wix Code. We are happy to get you pointed in the right direction, but you’ll need to take it from there. As questions or difficulties arise, we are here to help.

You may also want to check out the WixArena - it’s a hub where you can look for Wix Code (and other) experts for hire.

Good luck,

Yisrael

1 Like

Thank you so much for the resources Yisrael. I’ll be sure to work on this and will get back to you if any difficulty arises.

Hey did you manage to sort this out? It’s kind of what I need.

Hey
I was wondering if anyone managed to do this.
I am familiar with Javascript and have previously created a dynamic form which changes the price according the selection in sublime and seems to work.

Now I don’t get it how to connect it with wix?

I created the form connect it to the database and tried doing it with the hook connection that wix code offers.
I named my variables but just simply copy paste the code will not work,how do I “connect” my js code with the one from wix,obviously my variables are not “targeting” the form
It is like two separate code.
How I make my JS code to work in wix as well?

Thank you

1 Like

Hello,

I know how to program and I am able to calculate the price for my similar site. However, what is the actual property I need to update so that users will be charged in the same way as they would in the below image. Also, how do I access this property programmatically?


Thank you

1 Like

@sanderschulhoff @sanderschulhoff @yisrael-wix

@yisrael-wix How can I access programtically the item name and the item price of a wixform? The question above was never answered

Here is my comprehensive PARTIAL SOLUTION to the entire problem-- NO LIVE PRICE UPDATE :
I have done everything (custom pricing based on inputs, complete payment process ) except for the live update of the displayed price (it wasn’t necessary for my application, but I could figure it out if I had a specific application). This includes a solution to your question @gmfidelcorrales :
I have a form with a checkbox group (just multiple checkboxes put together) where you can click multiple items. It is for ‘coding’ lessons.
There are two parts to this-- front end and backend.

Here is the code I use for the form page (front end)
Don’t forget to connect your submit button to this script. (look at the video tutorial at the bottom)

//importing wixPay module and a backend module which I have written
import wixPay from 'wix-pay';
import {createPaymentForProduct} from 'backend/signup_PayAPI';

//defining price variables
var PRICE_FOR_ONE_WEEK = 10.0
var PRICE_FOR_TWO_WEEKS = 17.0
//name of the checkbox group
var elemName = "#checkboxGroup1"

//function called when the submit button is clicked
export function button1_click_1(event) {
 var price;
 //getting the checkBox element
 var checkBox = $w(elemName);
 //getting data from the checkBox (how many weeks have been selected)
 var weeks = checkBox.selectedIndices.length
 //simple if statement for price selection
 if (weeks == 1){
     price = PRICE_FOR_ONE_WEEK;
 } else{
     price = PRICE_FOR_TWO_WEEKS;
 }
 
 //calling backend function and passing it our price data
 createPaymentForProduct(price).then(payment => {
     //starts payment process, opening 
     wixPay.startPayment(payment.id);
 });
}

Code for Backend (A .jsw file I made under the Backend Folder):
Also take a look at the video tutorial for this.

//import wixPay module
import wixPay from 'wix-pay-backend';

//function called by frontend-- takes price parameter
export function createPaymentForProduct(price){
 //returns a sort of payment object
 return wixPay.createPayment({
        items: [{name: 'Coding Lessons', price: price, quantity: 1}],
        amount: price
    })
}

When the user clicks the submit button, the frontend calculates the price and sends it to the backend. Then, the backend returns a payment object which the frontend ‘executes’ and a window like this will popup (it will say the price at the top, but I cropped that part out):

NOTES:

  1. In general, the frontend should not compute the price-- it should pass necessary info (the CheckBox group object or how many/which parts have been checked) to the backend which then computes price. This is general programming practice and will make your code cleaner/more organized/reusable.

  2. I only put calculations in the frontend because it was a super simple program (basically I just didn’t feel like putting them in the backend).

  3. Instead of having variables set with the prices, you should have a database that contains prices so they will be easy for you and others to change in the future.

  4. I only used a CheckBox Group in this example. To extract data from different input sources, see the Corvid API. Here is a link to TextBoxes and other input sources can be seen on this page: https://www.wix.com/corvid/reference/$w/textbox

  5. Sorry for the loose use of semicolons-- I ignored a number of programming conventions due to the simplicity of this script.

  6. If you need Help with any part of this process (including updating a live display), let me know and I’ll see if we can work something out :slight_smile:

RESOURCES:
The Corvid API - general info

VIDEO on front end to backend process (VERY HELPFUL)

Helpful article/tutorial for backend stuff

SUMMARY:
It surprised me that people were having this problem at all-- I figured there would be a streamlined process through Wix standard page setup (little to no coding) that would be able to deal with custom form pricing. The reason I solved the problem but left out the live price update was because it simply wasn’t necessary for the application I was hired for. However, it seems most people here are looking for the other stuff anyways. I had never used Wix before (but know how to program) and this problem took me about 2 days to solve. The system has been implemented on my friend’s website and has already processed multiple payments. Again, if you need help with specific tasks related to this (or more general stuff?) please contact my in the replies or by email. Although I only learned Wix a couple days ago I’ve found it quite intuitive and this problem has forced me to become comfortable with it. Good luck.

PS: If I have any typos or other errors please lmk.

Thank you @Sander Schulhoff ! I will check it out and see if this solve my problem. It’s in fact weird and very disappointing that there is no way (Not even with code) to update the prize with user interaction. Which in my case is a must on my website.

1 Like