Change price based on checkbox selection

Ask the community
,
1

I would like to create a function that changes the price element of the page based on the dropdown and checkbox selections. So far, I was able to get the price to change based off of the first dropdown but am running into an issue with getting the price from the array which is based off a db with the name of the option (title) and the price change (price). I am able to get the price if only one option is selected but when more than one is selected the code does not respond as expected.

Here is my page code:

import wixData from 'wix-data';

$w.onReady(function () {
    // Write your JavaScript here

    // To select an element by ID use: $w('#elementID')

    // Click 'Preview' to run your code
});

export function wig_change(event) {
    let wig = $w('#wig').value;
    console.log(wig)
    wixData.query("Items")
        .contains("title", wig)
        .find()
        .then((results) => {
            console.log(results)
            let wigPrice = JSON.parse(results.items[0].price);
            $w("#price").text = JSON.stringify(wigPrice + 200);
        $w("#options").onChange((event) => {
   let option1 = $w("#options").value;
    let options = option1.toString();
    let opt = JSON.stringify(options)
    let opts = JSON.parse(opt)
    console.log(option1)
    console.log(options)
    console.log(opt)
    wixData.query("custom")
        .hasSome("title", option1)
        .find()
        .then((cusresult) => {
            console.log(cusresult)
            let cus = cusresult.items
            console.log(cus)
            let o0 = cus[0].price;
            console.log(o0)
            if (cus.length < 0) {
            let o1 = cusresult.items[1].price;
            let o2 = cusresult.items[2].price;
            let o3 = cusresult.items[3].price;
            let o4 = cusresult.items[4].price;
            let o5 = cusresult.items[5].price;
            
            $w("#coloring").onChange((event) => {
                      let price = o0 + o1 + o2 + o3 + o4 + o5
                      console.log(price);
                      $w("#price").text + JSON.stringify(wigPrice + 200 + price);
               
            

        
})}})})})}

This is what shows in the developer console when more than one option from the checkbox portion is selected:

Lace Frontal

CUSTOM WIG
Line 13

{...}

CUSTOM WIG
Line 18

[...]

CUSTOM WIG
Line 26

Bleached Knots

CUSTOM WIG
Line 27

"Bleached Knots"

CUSTOM WIG
Line 28

{...}

CUSTOM WIG
Line 33

[...]

CUSTOM WIG
Line 35

25

CUSTOM WIG
Line 37

[...]

CUSTOM WIG
Line 26

Bleached Knots,Tweezed/Pre-Plucked

CUSTOM WIG
Line 27

"Bleached Knots,Tweezed/Pre-Plucked"

CUSTOM WIG
Line 28

{...}

CUSTOM WIG
Line 33

[...]

CUSTOM WIG
Line 35

6

What I need is to add the 25 and 6 together but do not know how to go about it. I have read the API documentation and a few posts here in the forum but can’t seem to figure out where I am going wrong.

Thank you in advance for any feedback! It is greatly appreciated.

2

Your code, or your wished functionality, or your issue not realy clear.

Could you please replace your shown CODE-PART with the following one…
…runing a console-log in GOOGLE-CHROME-BROWSER and showing all given results ( open → {…} ← ) ???

import wixData from 'wix-data';

$w.onReady(()=>{
    let wigPrice, o0, o1, o2, o3, o4, o5

    $w("#options").onChange((event) => {
        let option1 = $w("#options").value; console.log("Opt-1: ", option1);
        let options = option1.toString(); console.log("Options: ", options);
        let opt = JSON.stringify(options); console.log("Opt: ", opt);
        let opts = JSON.parse(opt); console.log("Opts: ", opts);             
        //------------------------------
        wixData.query("custom")
        .hasSome("title", option1)
        .find()
        .then((cusresult)=> {console.log("CusResult: ", cusresult);
            let cus = cusresult.items; console.log("Cus-Items: ", cus);
            o0 = cus[0].price; console.log("O-0: ", o0);
            if (cus.length < 0) {
                o1 = cus[1].price; console.log("Cus-1: ", o1);
                o2 = cus[2].price; console.log("Cus-2: ", o2);
                o3 = cus[3].price; console.log("Cus-3: ", o3);
                o4 = cus[4].price; console.log("Cus-4: ", o4);
                o5 = cus[5].price; console.log("Cus-5: ", o5);
            }
        });
    }); 

    $w("#coloring").onChange((event) => {
        let price = o0+o1+o2+o3+o4+o5; console.log(price);
        $w("#price").text+JSON.stringify(wigPrice+200+price);
    });  
});


//------------------------------------------------------------


export function wig_change(event) {
    let wig = $w('#wig').value; console.log("Wig: ", wig);
    wixData.query("Items")
    .contains("title", wig)
    .find()
    .then((results)=> {console.log("Results: ", results);
        wigPrice = JSON.parse(results.items[0].price);
        console.log("Wig-Price: ", wigPrice);
        $w("#price").text = JSON.stringify(wigPrice + 200);
    });
}

Or are you now able to read your code better and perhaps now you are able to make your wished CALCULATION?

Inspect every of your own CODE-STEPS in → CONSOLE!