I have been working on this site all day and can not see the error…
Any help is appreciated - #3 just won’t open
Typeerrors for the collapse and fold functions
www.mrspandbcreations.com/butterflykit
// 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 = 3 ;
// Hard coded product ID from the Products collection.
const productId = “e015550b-88d5-fdbe-f510-d1fefd01cba1” ;
// 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 ( “#ball1Img” ). hide ();
$w ( “#yarn1Img” ). src = ‘https://’ ;
$w ( “#yarn2Img” ). src = ‘https://’ ;
$w ( “#ball1Img” ). 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 ( 1 );
}
});
}
// 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 ( 2 );
}
});
}
// Set up each item in the sleeves selection repeater as it is loaded.
export function ball1SelectionRepeater_itemReady_1 ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the sleeves option.
$w ( ‘#selectBall1Button’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘ball1’ , itemData );
//on mobile, collapse the repeater and expand the next one
if ( wixWindow.formFactor === 'Mobile' ) {
toggleFold ( 3 );
}
});
}
// 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 second option header.
export function option3Button_click ( event , $w ) {
// Expand and collapse the appropriate sections by calling the toggleFold() function.
toggleFold ( 3 );
}
// 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 . show ();
// If the specified section is currently expanded:
} **else** {
// Set its elements to the collapsed state.
$fold . collapse ();
$arrowDown . show ();
$arrowUp . hide ();
}
// 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 } ` ). show ();
$w ( `#arrowUp ${ i } ` ). show ();
}
}
}
export function addToCartButton_click_1 ( event , $w ) {
$w ( ‘#shoppingCartIcon1’ ). addToCart ( productId , 1 , { choices : selectedOptions });
$w ( ‘#addToCartButton’ ). disable ();
}