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 = 8 ;
// Hard coded product ID from the Products collection.
const productId = “4e5552cb-f17b-1cad-5d75-74b3525e4352” ;
// 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 ( 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 ( ‘#bodyImg’ ). hide ();
$w ( “#armsImg” ). hide ();
$w ( ‘#legsImg’ ). hide ();
$w ( “#faceImg” ). hide ();
$w ( “#mouthImg” ). hide ();
$w ( “#headwearImg” ). hide ();
$w ( “#eyesImg” ). hide ();
$w ( “#bootsImg” ). hide ();
$w ( “#bodyImg” ). src = ‘https://’ ;
$w ( “#armsImg” ). src = ‘https://’ ;
$w ( “#faceImg” ). src = ‘https://’ ;
$w ( “#legsImg” ). src = ‘https://’ ;
$w ( “#mouthImg” ). src = ‘https://’ ;
$w ( “#headwearImg” ). src = ‘https://’ ;
$w ( “#eyesImg” ). src = ‘https://’ ;
$w ( “#bootsImg” ). src = ‘https//’ ;
// Disable the “Add to Cart” button.
$w ( “#addToCartButton2” ). disable ();
}
//-------------Repeaters Setup-------------//
// Set up each item in the body selection repeater as it is loaded.
export function bodySelectionRepeater_itemReady ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the body option.
$w ( ‘#selectBodyButton’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘body’ , 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 armsSelectionRepeater_itemReady ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the sleeves option.
$w ( ‘#selectArmsButton’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘arms’ , 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 legsSelectionRepeater_itemReady ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the pocket option.
$w ( ‘#selectLegsButton’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘legs’ , 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 faceSelectionRepeater_itemReady ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the neckline option.
$w ( ‘#selectFaceButton’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘face’ , itemData );
//on mobile, make all repeaters collapsed
if ( wixWindow . formFactor === 'Mobile' ) {
toggleFold ( 5 );
}
});
}
// Set up each item in the mouth selection repeater as it is loaded.
export function mouthSelectionRepeater_itemReady ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the body option.
$w ( ‘#selectMouthButton’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘mouth’ , itemData );
//on mobile, collapse the repeater and expand the next one
if ( wixWindow . formFactor === 'Mobile' ) {
toggleFold ( 6 );
}
});
}
// Set up each item in the pocket selection repeater as it is loaded.
export function headwearSelectionRepeater_itemReady ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the pocket option.
$w ( ‘#selectHeadwearButton’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘headwear’ , itemData );
//on mobile, collapse the repeater and expand the next one
if ( wixWindow . formFactor === 'Mobile' ) {
toggleFold ( 7 );
}
});
}
// Set up each item in the pocket selection repeater as it is loaded.
export function eyesSelectionRepeater_itemReady ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the pocket option.
$w ( ‘#selectEyesButton’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘eyes’ , itemData );
//on mobile, collapse the repeater and expand the next one
if ( wixWindow . formFactor === 'Mobile' ) {
toggleFold ( 8 );
}
});
}
// Set up each item in the pocket selection repeater as it is loaded.
export function bootsSelectionRepeater_itemReady ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the pocket option.
$w ( ‘#selectBootsButton’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘boots’ , itemData );
//on mobile, collapse the repeater and expand the next one
if ( wixWindow . formFactor === 'Mobile' ) {
toggleFold ( 9 );
}
});
}
// 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 ( ‘#addToCartButton2’ ). 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 fourth option header.
export function option5Button_click ( event , $w ) {
// Expand and collapse the appropriate sections by calling the toggleFold() function.
toggleFold ( 5 );
}
// Set the action that occurs when a user clicks the fourth option header.
export function option6Button_click ( event , $w ) {
// Expand and collapse the appropriate sections by calling the toggleFold() function.
toggleFold ( 6 );
}
// Set the action that occurs when a user clicks the fourth option header.
export function option7Button_click ( event , $w ) {
// Expand and collapse the appropriate sections by calling the toggleFold() function.
toggleFold ( 7 );
}
// Set the action that occurs when a user clicks the fourth option header.
export function option8Button_click ( event , $w ) {
// Expand and collapse the appropriate sections by calling the toggleFold() function.
toggleFold ( 8 );
}
// 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-------------//
import { cart } from “wix-stores” ;
$w . onReady ( function () {
let productData = $w ( “#dynamicDataset” ). getCurrentItem ()
let productId = productData . _id
let quantity = 1
let product = [{
“productId” : productId ,
“quantity” : quantity
}]
$w ( “#addToCartButton2” ). onClick ( ( event ) => {
cart . addProducts ( product )
} );
})
/**
- Adds an event handler that runs when the element is clicked.
Read more - @param {$w.MouseEvent} event
*/
export function addtocartbutton_click ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
}
/**
- Adds an event handler that runs when the element is clicked.
Read more - @param {$w.MouseEvent} event
*/
export function addToCartButton2_click ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
}