Ahhh - For the life of me I can not work out what is not working on this page. https://www.mrspandbcreations.com/heartkit #2 Colour One & #2 Colour Two just will not work!!!! Typeerrors for the onClick function
Desperate for some help pls. This is the final page before I can re-launch my business.
There are 3 other similar pages - all working
- https://www.mrspandbcreations.com/makeyourownrainbow
- https://www.mrspandbcreations.com/flowerkit
- https://www.mrspandbcreations.com/candycanes
// For full API documentation, including code examples, visit http://wix.to/94BuAAs import wixWindow from 'wix-window'; //-------------Global Variables-------------// // Number of parts that can be customized. const NUMBER_OF_CHOICES = 4; // Hard coded product ID from the Products collection. const productId = "984be2b6-3b55-b510-1f0e-773f7b46885a"; // 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('#yarn1Img').hide(); $w("#yarn2Img").hide(); $w('#yarn3Img').hide(); $w("#yarn4Img").hide(); $w("#yarn1Img").src = 'https://'; $w("#yarn2Img").src = 'https://'; $w("#yarn3Img").src = 'https://'; $w("#yarn4Img").src = 'https://'; // Disable the "Add to Cart" button. $w("#addToCartButton").disable(); } //-------------Repeaters Setup-------------// // Set up each item in the body selection repeater as it is loaded. export function yarn1SelectionRepeater_itemReady_1($w, itemData, index) { // Set the action that occurs when a user clicks a choice for the body option. $w('#selectYarn1Button').onClick(() => { // Select the choice using the selectChoiceForOption() function. selectChoiceForOption($w, 'yarn1', 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. export function yarn2SelectionRepeater_itemReady_1($w, itemData, index) { // Set the action that occurs when a user clicks a choice for the sleeves option. $w('#selectYarn2Button').onClick(() => { // Select the choice using the selectChoiceForOption() function. selectChoiceForOption($w, 'yarn2', 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. export function yarn3SelectionRepeater_itemReady_1($w, itemData, index) { // Set the action that occurs when a user clicks a choice for the pocket option. $w('#selectYarn3Button').onClick(() => { // Select the choice using the selectChoiceForOption() function. selectChoiceForOption($w, 'yarn3', 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. export function yarn4SelectionRepeater_itemReady($w, itemData, index) { // Set the action that occurs when a user clicks a choice for the neckline option. $w('#selectYarn4Button').onClick(() => { // Select the choice using the selectChoiceForOption() function. selectChoiceForOption($w, 'yarn4', itemData); //on mobile, make all repeaters collapsed if (wixWindow.formFactor === 'Mobile') { toggleFold(5); } }); } // 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.displayImage; // 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 third option header. export function option4Button_click(event, $w) { // Expand and collapse the appropriate sections by calling the toggleFold() function. 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(); } } } export function addToCartButton_click_1(event, $w) { $w('#shoppingCartIcon1').addToCart(productId, 1, { choices: selectedOptions }); $w('#addToCartButton').disable(); }