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 (for the slider version) :
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 = {};
//-------------Page Setup-------------//
$w.onReady(function () {
clearSelection();
$w('#refreshButton').onClick(clearSelection);
setupSlider(); // Configurer le slider
$w('#addToCartButton').onClick(() => {
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();
}
// Handle slider item click
function setupSlider() {
$w('#gallery1').onItemClicked((event) => {
const itemData = event.item;
const currentIndex = $w('#gallery1').currentIndex;
console.log("Current Index:", currentIndex);
console.log("Item Data:", itemData);
// Get the corresponding data from the dataset based on the clicked item
$w("#dataset1").getItems(0, 100).then((result) => {
const items = result.items;
console.log("Items Retrieved:", items);
const choiceData = items[currentIndex];
console.log("Choice Data:", choiceData);
if (choiceData) {
console.log("Image URL:", choiceData.displayImage);
selectChoiceForOption('verre1', {
title: choiceData.Title,
displayImage: choiceData.displayImage
});
} else {
console.error("No matching data found for the selected index.");
}
}).catch((err) => {
console.error("Error fetching data from dataset:", err);
});
});
}
function selectChoiceForOption(option, choiceData) {
selectedOptions[capitalizeFirstLetter(option)] = choiceData.title;
$w(`#${option}Img`).src = choiceData.displayImage;
$w(`#${option}Img`).show();
if (Object.keys(selectedOptions).length === NUMBER_OF_CHOICES) {
$w('#addToCartButton').enable();
}
}
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
For now, I just tried to change the first glass (the one on top of the bottle), but for some reasons, it didn’t work (and I can’t debug the code using the console).
Could you help me ?
I tried very different codes, using this tutorial as an example and asking ChatGPT for help.