Custom Product Dynamic Page - Cart problems

Ask the community
, ,
1

Hello,

I have created a custom product dynamic page. The product has 8 x options located within dynamic repeaters. Once you select the options the custom product image layers (8 of them) appear within a single product image window. This part of the page appears to be working fine.

The problems start when you add the custom product to cart.

Within the cart the custom product does not appear, as per your chosen custom design. Instead a default stock image appears and there are no details about the custom options selected.

How can we fix this?

I have have read several posts with similar problems and there does not appear to be a solution.

The following ‘Product Configurator’ example for the sweater is great, but lets be honest its incomplete, as there are no instructions about this product ends up on a custom product cart page.

Therefore the instructions are incomplete.

It would be amazing if whoever wrote the ‘Product Configurator’ example could please finish the tutorial, as clearly lots of WIX users are in need of this information.

Product customisation is a growing in popularity and it would be amazing if you can please sort this out.

Thank you in advance.

Below is the code for the dynamic custom product page.
Let me know if you need any further information.

2

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 )
} );
})

/**

/**