Hello,
Wonder if any has experienced this error when working on setting up their custom product page?
I set it up as the custom sweater example and it worked just fine until I got to the Add to Cart Button.
I have set up the product on wix store with exact same options, no typo as the one I set up on option dataset but it is not working… Help!
The best way to get help with such an issue is to show your code (please use a code block) and any relevant screenshots.
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 = “9d4eafd9-953f-3dd8-cc48-f3c31fa717ce” ;
// 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 ( ‘#BackgroundImg’ ). hide ();
$w ( “#FontImg” ). hide ();
$w ( “#BackgroundImg” ). src = ‘https://’ ;
$w ( “#FontImg” ). 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 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 , ‘Background’ , 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 sleevesSelectionRepeater_itemReady ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the sleeves option.
$w ( ‘#selectSleevesButton’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘Font’ , 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 );
}
// 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 });
}
Hey Marlowe - Thank you! please see the comment below and the code in the next comment. So I followed the custom sweater examples and made changes to fit for my business, however i can’t get the Add To Cart Button to work. I keep getting this message
Hi, we are experiencing problems with adding custom products to cart. Is anyone working on the fix for this or is WIX going to create a custom product cart page?
@mail62783 Please be mindful not to post the same question in multiple threads, as this is against the Forum guidelines.
If you think you are experiencing a bug, please follow the instructions here to report it: https://www.wix.com/velo/forum/coding-with-velo/how-to-report-a-bug-1
Hi Marlowe, sorry for cross posting, I thought I was just joining in the conversation and highlighting a problem exists in the system. Are you able to help please?
@mail62783 I haven’t got help from Marlowe 
