Radio button/database help

Ask the community
, ,
1

Hello!

I am attempting to create a site for taking orders for various custom built products.

Let’s say I need the customer to select different aspects of the build. Based on what they select I want them to see the total price AND price per square foot on their screen.

For example, lets say it was carpeting:

First,
I would need them to tell me how many sqft they need covered:
I figured a text box for them to input this in would suffice. (ex., “How many sqft do you have?”)

Second,
I need them to select custom options. (These will be radio buttons). The prices are listed in sqft.
ex.,
Section 1

  1. Color A (+$1/sqft)
  2. Color B (+$2/sqft)
  3. Color C (+$3/sqft)

Section 2

  1. Fabric A (+$5/sqft)
  2. Fabric B (+$6/sqft)

and etc…

Third,
I also want an image (or text, doesn’t matter) that reflects the total accumulated price to change, real-time, every time something is selected. They should be able to have a running total in view at all times, and ideally it will scroll with the page. I would like this to be in price per sqft AND total price. Displayed similar to: “Total Price: $75/sqft ; $15,000”

(I am also open to it being displayed when a submit button is pressed, as opposed to real time IF it makes the coding significantly easier)

A great example would be Gaming PCs - Gaming Desktops | iBUYPOWER®
where you are building a computer and the price is updated in the lower left corner as you make your selections.

(I do not need the radio buttons to adjust like it does on that website)

Lastly,
I need to have a “base price” ($30/sqft) that all of the extra selections are added to. (So, it starts at $30/sqft and then all the selections on the page get added to $30/sqft)

Now, I don’t expect anyone to build this for me lol, I just need someone experienced to point me in the right direction of what suggested path I should take.

Should I be getting the values from the buttons selected, sending the data to a database, and creating the ever changing ‘total price’ from the aforementioned database? This is the logic I have been going on but I am unsure if it’s the most efficient path. I don’t even know if coding is actually required or if maybe there is an app that makes this simple?

For reference, I am somewhat technically savvy, but not a coder by any means. I spent the last 2 hours trying to research what to do and figured asking for a head start would help me immensely.

Thank you for reading this and thanks in advance to anyone taking the time to help me out!

2

Did you ever get a solution for this? I’m after a very similar setup but am having difficulty locating (I may not be using the right words in my search).

3

Maybe it would be better, if you would open a new post with your own good described issue.

Show your setup…
-how do look like the page you created?
-which elements did you use?
-did you already created a database and how does it look like (which structure?)
-show your already generated running (not-running) code.

4

@russian-dima I can’t determine if what tcooper and I need is even possible in Wix. I’ve searched multiple forums to no avail. From a noob perspective tcooper explained it well, so if noone could offer a solution then, pretty sure I’ve got no chance.
Being a top contributor, do you have any feedback as to whether it’s possible (and I’ll continue my search efforts)?

5

The most simple example to work with Radio-Button-Groups…

$w.onReady(()=>{    
    $w('#radiogroup1').onChange(()=>{
        let selValue =  $w("#radiogroup1").value; console.log("Selected.Value: ", selValue);
    });    
});
  1. Create a new page.
  2. Add a Radio-Button-Group onto your page.
  3. Give it the following ID —> “radiogroup1”.
  4. Activate the DEV-MODE of your EDITOR.
  5. Copy & paste this code onto your page.
  6. Save your project and start a PREVIEW.
  7. In the CONSOLE of the preview you will get the results.

What happens? Do you get results?

  1. Create a second Radio-Button-Group (“radiogroup2”).
  2. Expand your code…
$w.onReady(()=>{    
    $w('#radiogroup1').onChange(()=>{
        let selValue =  $w("#radiogroup1").value; console.log("Selected.Value: ", selValue);
    });  
    
    $w('#radiogroup2').onChange(()=>{
        let selValue =  $w("#radiogroup2").value; console.log("Selected.Value: ", selValue);
    });   
});
  1. Play around and try to create a SUM-FUNCTION…
$w.onReady(()=>{    
    $w('#radiogroup1').onChange(()=>{
        start_SumFunction();
    });  
    
    $w('#radiogroup2').onChange(()=>{
        start_SumFunction();
    });   
});

function start_SumFunction() {
    let selValue1 =  $w("#radiogroup1").value; console.log("Selected.Value: ", selValue);
    let selValue2 =  $w("#radiogroup2").value; console.log("Selected.Value: ", selValue);
    
    if(selValue1 && selValue2) {console.log(selValue1 + selValue2);}
    else {console.log("One of the two needed values is not available!!!");}
}

Expand your code to generate the function you need. EVERYTHING IS POSSIBLE!!!

Maybe, the outputs of RADIOBUTTONGROUPS are as STRINGS, this for you will have to convert them first into NUMBERS, to be able to calculate.

myNumber = Number(myString);
myString = String(myNumber);
6

Okay, great! At least now I know it’s possible. I’ll now take the time to learn coding side and hopefully generate what I’m after.
Thanks very much for responding.