HELP! I’m almost there… I’m trying to replicate this product configurator example that Wix has: https://pauledesign.wixsite.com/mysite
Here’s the site I’m working on: https://pauledesign.wixsite.com/anchor-attire/hat-configurator
As you can see, mine only has 2 options (beanie and pom) and I’m not using the toggle feature on the repeaters that Wix has in their example, so I don’t need the code for that.
Why isn’t mine working? What am I missing? Who wants to help? I will pay for your time.
Here’s my code:
import wixWindow from ‘wix-window’ ;
//-------------Global Variables-------------//
// Number of parts that can be customized.
const NUMBER_OF_CHOICES = 2 ;
// Hard coded product ID from the Products collection.
const productId = “f4a7ecbb-cb59-00c9-a21d-8117fd0dde4f” ;
// 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 ( ‘#beanieImg’ ). hide ();
$w ( “#pomImg” ). hide ();
$w ( “#beanieImg” ). src = ‘https://’ ;
$w ( “#pomImg” ). src = ‘https://’ ;
// Disable the “Add to Cart” button.
$w ( “#addToCartButton” ). disable ();
}
//-------------Repeaters Setup-------------//
// Set up each item in the beanie selection repeater as it is loaded.
export function beanieSelectionRepeater_itemReady ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the beanie option.
$w ( ‘#selectBeanieButton’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘beanie’ , itemData );
});
}
// Set up each item in the pom selection repeater as it is loaded.
export function pomSelectionRepeater_itemReady ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the pom option.
$w ( ‘#selectPomButton’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘pom’ , itemData );
});
}
// 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 );
}
//-------------Cart Button-------------//
export function addToCartButton_click ( event , $w ) {
$w ( ‘#shoppingCartIcon1’ ). addToCart ( productId , 1 , { choices : selectedOptions });
}
