Dynamic Pricing based on size and color (Custom Product Page)

Ask the community
,
1

I am trying to create a custom product page with dynamic pricing and image sets.

I couldn’t set the price (text box) dynamic,
it stays on the initial value after selecting option.
It will be a great help to know how this can be implemented.
Thank You

2

To get some help from the community, I recommend sharing your code using the code block option. That way folks can get an idea of what you have tried and offer suggestions

3

Here is the code section I am working with.
Currently the code works for dynamically changing the price when a size is selected.
I want to implement it without using a predefined array, and also compare the pricing with size and color.

try {
        const setSizes = options.Size.choices.map(item => {
            return {
                label: item.description,
                value: item.value
            };
        });

        $w('#sizesDropdown').options = setSizes;

        let sizes = ["s", "m", "l", "xl"];
$w('#sizesDropdown').onChange((event) => {
    let selectedSize = event.target.value.toLowerCase();
    for (let i = 0; i < sizes.length; i++) {
        let size = sizes[i];
        if (selectedSize === size) {
            console.log(size);
            productSizes = size;
            let currentVariant = productDynamic.variants.filter((v) => v.choices.Size.toLowerCase() === size);
            console.log(currentVariant);
            $w('#productPrice').text = productDynamic.currency + currentVariant[0].variant.price.toString();
            break; 
        }
    }
})


    } catch (err) { console.error(err); }
}