I have copied the WIX product configurator example code, pasted and changed all that needed to be changed. When all the options are selected the button turns on but does not send the selection to the cart, any suggestions ?..code is pasted below, thanks!
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
import wixWindow from ‘wix-window’;
//-------------Global Variables-------------//
// Number of parts that can be customized.
const NUMBER_OF_CHOICES = 5;
// Hard coded product ID from the Products collection.
const productId = “4e8ddebe-f366-6c8c-140e-8690be4252ec”;
// Options that have been selected.
let selectedOptions = {};
//-------------Page Setup-------------//
// 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.
export function refreshButton_click_1(event, $w) {
// Clear the customizations by calling the clearSelection() function.
clearSelection();
}
// Clear the customization images by calling the clearSelection() function.
function clearSelection() {
// Clear out selected options object.
selectedOptions = {};
// Hide and clear all the customization images.
$w(‘#topImg’).hide();
$w(“#bottomImg”).hide();
$w(“#thread1Img”).hide();
$w(‘#baseImg’).hide();
$w(“#threadImg”).hide();
$w(“#topImg”).src = ‘https://’;
$w(“#bottomImg”).src = ‘https://’;
$w(“#thread1Img”).src = ‘https://’;
$w(“#baseImg”).src = ‘https://’;
$w(“#threadImg”).src = ‘https://’;
// Disable the “Add to Cart” button.
$w(“#addToCartButton”).disable();
}
//-------------Repeaters Setup-------------//
// Set up each item in the top selection repeater as it is loaded.
export function topSelectionRepeater_itemReady($w, itemData, index) {
// Set the action that occurs when a user clicks a choice for the top option.
$w(‘#selectTopButton’).onClick(() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption($w, ‘top’, itemData);
//on mobile, collapse the repeater and expand the next one
if (wixWindow.formFactor === ‘Mobile’) {
toggleFold(2);
}
});
}
// Set up each item in the bottom selection repeater as it is loaded.
export function bottomSelectionRepeater_itemReady($w, itemData, index) {
// Set the action that occurs when a user clicks a choice for the bottom option.
$w(‘#selectBottomButton’).onClick(() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption($w, ‘bottom’, itemData);
//on mobile, collapse the repeater and expand the next one
if (wixWindow.formFactor === ‘Mobile’) {
toggleFold(3);
}
});
}
// Set up each item in the thread1 selection repeater as it is loaded.
export function thread1SelectionRepeater_itemReady($w, itemData, index) {
// Set the action that occurs when a user clicks a choice for the thread option.
$w(‘#selectThread1Button’).onClick(() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption($w, ‘thread1’, itemData);
//on mobile, make all repeaters collapsed
if (wixWindow.formFactor === ‘Mobile’) {
toggleFold(4);
}
});
}
// Set up each item in the base selection repeater as it is loaded.
export function baseSelectionRepeater_itemReady($w, itemData, index) {
// Set the action that occurs when a user clicks a choice for the base option.
$w(‘#selectBaseButton’).onClick(() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption($w, ‘base’, itemData);
//on mobile, collapse the repeater and expand the next one
if (wixWindow.formFactor === ‘Mobile’) {
toggleFold(4);
}
});
}
// Set up each item in the thread selection repeater as it is loaded.
export function threadSelectionRepeater_itemReady($w, itemData, index) {
// Set the action that occurs when a user clicks a choice for the thread option.
$w(‘#selectThreadButton’).onClick(() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption($w, ‘thread’, itemData);
//on mobile, make all repeaters collapsed
if (wixWindow.formFactor === ‘Mobile’) {
toggleFold(4);
}
});
}
// Select a specific choice for a specific customization option.
function selectChoiceForOption($w, 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.
$w(#${option}Img).src = choiceData.display;
// Show the option image.
$w(#${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.
$w(‘#addToCartButton’).enable();
}
}
// Utility function for capitalizing the first letter of a string.
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
//-------------Expand/Collapse Sections-------------//
// Set the action that occurs when a user clicks the first option header.
export function option1Button_click(event, $w) {
// 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.
export function option2Button_click(event, $w) {
// 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.
export function option3Button_click(event, $w) {
// 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.
export function option4Button_click(event, $w) {
// Expand and collapse the appropriate sections by calling the toggleFold() function.
toggleFold(4);
}
// Set the action that occurs when a user clicks the fifth option header.
export function option5Button_click(event, $w) {
// Expand and collapse the appropriate sections by calling the toggleFold() function.
toggleFold(5);
}
// 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();
}
}
}
//-------------Cart Button-------------//
export function addToCartButton_click(event, $w) {
$w(‘#shoppingCartIcon1’).addToCart(productId, 1, { choices: selectedOptions });
}