I’m stuck trying to setup a custom bottle in Wix.

Let me explain this as quick as possible : I’m selling bottles that can be filled with four little glasses. There are twenty differents kinds of these. What I tried (hard since this morning) is to create ether four dropdown menus or four sliders that could allow users to choose the glasses they want in their custom bottle, and see the result in the preview bottle.

I upload a picture of an empty bottle, and I create a dataset with every single glasse. Each of them has its own picture, and a picture of where it should be displayed on the single bottle when the user click on it.

Here’s the page : https://www.caveduchardon.ch/studer

Here’s my code :

import wixWindow from 'wix-window';
import { cart } from 'wix-stores';

//-------------Global Variables-------------//
const NUMBER_OF_CHOICES = 4;
const productId = "5833e0c1-bd8a-1721-f2c7-f66b4ccbaf94";
let selectedOptions = {};

// Start with clean slate when page loads.
$w.onReady(function () {
    // Clear the customizations by calling the clearSelection() function.
    clearSelection();

    // Set the action that occurs when a user clicks the refresh button.
    $w('#refreshButton').onClick((event) => {
        // Clear the customizations by calling the clearSelection() function.
        clearSelection();
    })

    //-------------Repeaters Setup-------------//

    selectionRepeatersReady()

    //-------------Expand/Collapse Sections-------------//

    // Set the action that occurs when a user clicks the first option header.
    $w('#option1Button').onClick((event) => {
        // Expand and collapse the appropriate sections by calling the toggleFold() function.
        toggleFold(1);
    })

    // Set the action that occurs when a user clicks the second option header.
    $w('#option2Button').onClick((event) => {
        // Expand and collapse the appropriate sections by calling the toggleFold() function.
        toggleFold(2);
    })

    // Set the action that occurs when a user clicks the third option header.
    $w('#option3Button').onClick((event) => {
        // Expand and collapse the appropriate sections by calling the toggleFold() function.
        toggleFold(3);
    })

    // Set the action that occurs when a user clicks the fourth option header.
    $w('#option4Button').onClick((event) => {
        // Expand and collapse the appropriate sections by calling the toggleFold() function.
        toggleFold(4);
    })

    //-------------Cart Button-------------//

    $w('#addToCartButton').onClick((event) => {
        cart.addProducts([{
            "productId": productId,
            "quantity": 1,
            "options": { choices: selectedOptions }
        }])
    })
});

// Clear customization images and selected options
function clearSelection() {
    selectedOptions = {};
    $w('#verre1Img').hide();
    $w("#verre2Img").hide();
    $w('#verre3Img').hide();
    $w("#verre4Img").hide();
    $w("#verre1Img").src = 'https://';
    $w("#verre2Img").src = 'https://';
    $w("#verre3Img").src = 'https://';
    $w("#verre4Img").src = 'https://';
    $w("#addToCartButton").disable();
}

// Select a specific choice for a specific customization option.
function selectChoiceForOption($item, option, choiceData) {
    // Set the selected choice in the selectedOptions global object.
    selectedOptions[capitalizeFirstLetter(option)] = choiceData.title;
    // Change the image for the selected option to the selected choice's image.
    $item(`#${option}Img`).src = choiceData.displayImage;
    // Show the option image.
    $item(`#${option}Img`).show();
    // If a choice has been selected for all of the options:
    if (Object.keys(selectedOptions).length === NUMBER_OF_CHOICES) {
        //Enable the "Add to Cart" button.
        $item('#addToCartButton').enable();
    }
}

// Utility function for capitalizing the first letter of a string.
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

function selectionRepeatersReady() {
    // Set up each item in the body selection repeater as it is loaded.
    $w('#verre1SelectionRepeater').onItemReady(($item, itemData, index) => {
        // Set the action that occurs when a user clicks a choice for the body option.
        $item('#selectBodyButton').onClick(() => {
            // Select the choice using the selectChoiceForOption() function.
            selectChoiceForOption($item, 'verre1', itemData);

            //on mobile, collapse the repeater and expand the next one
            if (wixWindow.formFactor === 'Mobile') {
                toggleFold(2);
            }
        });
    })

    // Set up each item in the sleeves selection repeater as it is loaded.
    $w('#verre2SelectionRepeater').onItemReady(($item, itemData, index) => {
        // Set the action that occurs when a user clicks a choice for the sleeves option.
        $item('#selectSleevesButton').onClick(() => {
            // Select the choice using the selectChoiceForOption() function.
            selectChoiceForOption($item, 'verre2', itemData);

            //on mobile, collapse the repeater and expand the next one
            if (wixWindow.formFactor === 'Mobile') {
                toggleFold(3);
            }
        });
    })
// Set up each item in the pocket selection repeater as it is loaded.
    $w('#verre3SelectionRepeater').onItemReady(($item, itemData, index) => {
        // Set the action that occurs when a user clicks a choice for the pocket option.
        $item('#button2').onClick(() => {
            // Select the choice using the selectChoiceForOption() function.
            selectChoiceForOption($item, 'verre3', itemData);

            //on mobile, collapse the repeater and expand the next one
            if (wixWindow.formFactor === 'Mobile') {
                toggleFold(4);
            }
        });
    })

    // Set up each item in the neckline selection repeater as it is loaded.
    $w('#verre4SelectionRepeater').onItemReady(($item, itemData, index) => {
        // Set the action that occurs when a user clicks a choice for the neckline option.
        $item('#button3').onClick(() => {
            // Select the choice using the selectChoiceForOption() function.
            selectChoiceForOption($item, 'verre4', itemData);

            //on mobile, make all repeaters collapsed
            if (wixWindow.formFactor === 'Mobile') {
                toggleFold(4);
            }
        });
    })
}

// Expand the specified section if it is collapsed. Collapse the specified section if it is expanded.
// If expanding, collapse all other sections.
function toggleFold(index) {
    // Set variables for the elements that correspond to specified index's section.  
    let fold = $w(`#option${index}Box`);
    let arrowDown = $w(`#arrowDown${index}`);
    let arrowUp = $w(`#arrowUp${index}`);

    // If the specified section is currently collapsed:
    if (fold.collapsed) {
        // Set its elements to the expanded state.
        fold.expand();
        arrowDown.show();
        arrowUp.hide();
        // If the specified section is currently expanded:
    } else {
        // Set its elements to the collapsed state.
        fold.collapse();
        arrowDown.hide();
        arrowUp.show();
    }

    // For each section index:
    for (let i = 1; i <= NUMBER_OF_CHOICES; i++) {
        // If it is not the specified index:
        if (i !== index) {
            // Set its elements to the collapsed state.
            $w(`#option${i}Box`).collapse();
            $w(`#arrowDown${i}`).hide();
            $w(`#arrowUp${i}`).show();
        }
    }
}

Everything seems to work fine, except two things :

1. the most important : the add to cart button is not working. I can’t figure out why, since console.log and console.error show that it’s working. But my basket icon remains empty, even if I click on it.
2. The first toggle doesn’t collapse properly, as you can see.

Could you help me ?

I tried very different codes, using this tutorial as an example and asking ChatGPT for help.