Check if product has specific product option

Ask the community
, ,
1

Hello! I’m coding a custom product page with product size options populated in a dropdown and it’s working, but I need the dropdown to collapse when the product doesn’t have such option. How would the code for this be? I can’t find how to check if the product has the option Size or however I called that option.
Thanks!

2

To create a custom product page that lists available product variants, you can leverage the Wix Stores Backend API.

getProductVariants() is a method that can be used to get a list of a product’s available variants based on a specified product ID.

You can then use the object that this method returns to build a series of elements (including dropdowns) which accurately reflect the variants which are available.

4

Thank you for your reply Thomas! I’m afraid I haven’t been clear enough, the product page with a dropdown that lists the product option with the add to cart function is already up an running. I’m not very good at code so for me to develop a piece of code by myself it’s not really that easy. I was wondering if it would be possible to check if that specific product has a specific Size (In spanish I called it Talle) product option, so that I can then collapse the size dropdown if it doesn’t. Also, I have the problem that a product won’t be added to cart unless it has options/choices. How could I modify my code so that it doesn’t include choices when the product doesn’t have any? The only product variant I’ll use is Talle.

This is my code including the size dropdown and the add to cart function:

let productOptions = {};
let quantity = 1;

$w.onReady(function () {
    resetUItoDefault();

    wixLocation.onChange(() => {
        resetUItoDefault();
        getProductDetails();
        productOptions = {};
    });
 
   async function getProductDetails() {
        await $w('#productPage').getProduct()

            .then((productInfo) => {
                console.log(productInfo);
                setProductTextInfo(productInfo);
                if ('productOptions' in productInfo) {
                    updateProductOptions(productInfo.productOptions);
                }
                updateProductQuantityLimit(productInfo.quantityInStock)
                setAditionalInfo(productInfo.additionalInfoSections);

                $w('#addToCart').onClick(async () => {
                    await validateProductOptions().then((x) => { //Return true or false
                        if (x) {
                            $w('#shoppingCartIcon2').addToCart(productInfo._id, quantity, {
                                    "choices": productOptions,
                                })
                                .then(() => {
                                    console.log("Product added");
                                })
                                .catch((error) => {
                                    console.log(error);
                                });
                        }
                    });
                });

            })
            .catch((error) => {
                console.error(error);
            });
    }


function updateProductOptions(options) {

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

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

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

export function sizesDropdown_change(event) {
    productOptions.Talle = event.target.value;
}

Thank you very much for taking the time to read my questions!
Euge