Creating product dynamic page with product options

Ask the community
, ,
1

Hi everyone,
I am creating a dynamic page (from dynamic dataset) with a selection of products. All worked fine as long as I didn’t have any product option.
I have added a dropdown menu with the different product options (probably the code isn’t well designed though). I need the price to update every time the visitor change the selection in this dropdown (#pesi) but I can’t manage to retrieve the product option price.

I followed the instructions I found on the API reference but I can’t figure out what’s wrong. I always get " TypeError: Cannot read property ‘0’ of undefined"

Here is my code:

import { myBackendFunction } from 'backend/store';

export function pesi_change(event) {
 //Add your code for this event here: 
 let ItemData = $w("#dataset1").getCurrentItem();
 let ID = ItemData._id
 let options = {
 "choices": {
 "Peso": "8.3 kg"
        }
    }
myBackendFunction(ID, options)
        .then((variants) => {
 let firstVariant = variants.items[0];
 let firstPrice = firstVariant.variant.price;
            console.log(firstPrice)
        })
        .catch((error) => {
            console.log(error);
        });

}

// in the backend _______________________________________

import wixStoresBackend from 'wix-stores-backend';

export function myBackendFunction(productId, options) {
 return wixStoresBackend.getProductVariants(productId, options);
}

Thanks for the help!

2

Did you have any luck?

3

Hi, Yes I did. Not sure the way is the most efficient though. I ll copy u the code:

export async function dammi_varianti() {

 let ItemData = $w("#dataset1").getCurrentItem();
    option = ItemData.productOptions.Peso.choices[0].value

 if (ItemData.productOptions !== "") {

        pesature = ItemData.productOptions.Peso.choices
 
 for (var index = 0; index <= 2; ++index) {
 let opts = $w("#pesi").options
            opts.push({ label: pesature[index].value, value: pesature[index].value });
            $w("#pesi").options = opts;
        }

        $w("#pesi").show()
    } else {
        console.log("no options available for this product")
    }

}

export function pesi_change(event) {
 //Add your code for this event here: 
 let ItemData = $w("#dataset1").getCurrentItem();
 let ID = ItemData._id
 //let options = pesature[$w("#pesi").selectedIndex];
 let options = {
 "choices": {
 "Peso": pesature[$w("#pesi").selectedIndex].value
        }
    };
 //pesature[$w("#pesi").selectedIndex].value this should get me the product option selected from the dropdown

    myBackendFunction(ID, options)
        .then((variants) => {

 let firstVariant = variants[0]
 let firstPrice = firstVariant.variant.formattedPrice;
 let x = JSON.stringify(variants)
 //let prezzo = x.variant.price
 //console.log(prezzo)
            console.log(JSON.stringify(variants)[0])
            console.log(firstPrice)
            $w("#prezzo").text = firstPrice
        })
        .catch((error) => {
            console.log(error);
        });

}

$w.onReady(function () {

    $w("#imgProsciutto").fitMode = "fit"
    $w("#dataset1").onReady(() => {
        dammi_varianti();
    });
 
    $w("#addToCart").onClick((event) => {
 let $item = $w.at(event.context)
 let selectedProduct = $item('#dataset1').getCurrentItem()
 let productId = selectedProduct._id
        console.log(selectedProduct.productOptionName1)
        console.log((option))

 if (option) {
            console.log("opzion diversa da null")
 let dropdownOptions = $w("#pesi").options
 let selectedPeso = dropdownOptions[$w("#pesi").selectedIndex].value
            $w('#shoppingCartIcon1').addToCart(productId, 1, {
 "choices": {
 "Peso": selectedPeso
                    }
                })
                .then(() => {
                    console.log("add product ${productId} success");
                })
                .catch((error) => {
 //$w("#addToCart").disable()
                    $w("#addToCart").label = "Prodotto esaurito"
                    console.log(error);
                });
        } else {
            $w('#shoppingCartIcon1').addToCart(productId)

                .then(() => {
                    console.log("add product ${productId} success");
                })
                .catch((error) => {
 //$w("#addToCart").disable()
                    $w("#addToCart").label = "Prodotto esaurito"
                    console.log(error);
                });

        }
    })
})
4

Amazing, thank you!

5

I have the same issue here, do we really need to use the backend ? or we can just use getProductVariants( ) ?

6

you rock!

7

Hey! i´m trying to use the code but i´m not sure about a few things, what does “option” and “pesature” stand for? I have an error “cannot find name” in both cases and I tried with dataset field names, with elements ID and I can´t figure it out. Same happens with " myBackendFunction" which i thought it was the backend jsw file name but it´s not. Could you help me? I´m very new at code