Add to Cart Button Not Working

Ask the community
, ,
1

Hello everyone,

I am trying to create the configurator feature in my online store. I was able to put all the options and the products (I removed the collapse effect), and everything works properly. However, after adding all the options in the product, the add to cart button doesn’t work. Nothing happens when you click it.
Here is the code I am using:

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

import wixWindow from 'wix-window';

//-------------Global Variables-------------//

// Number of parts that can be customized.
const NUMBER_OF_CHOICES = 7;
// Hard coded product ID from the Products collection.
const productId = "eddc8e3c-0ae4-c0ee-5f07-b2c1a100046f";
// 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('#golaImg').hide();
    $w("#frenteImg").hide();
    $w('#mangadireitaImg').hide();
    $w("#mangaesquerdaImg").hide();
    $w("#punhodireitoImg").hide();
    $w('#punhoesquerdoImg').hide();
    $w("#bainhaImg").hide();
    $w("#golaImg").src = 'https://';
    $w("#frenteImg").src = 'https://';
    $w("#mangadireitaImg").src = 'https://';
    $w("#mangaesquerdaImg").src = 'https://';
    $w("#punhodireitoImg").src = 'https://';
    $w("#punhoesquerdoImg").src = 'https://';
    $w("#bainhaImg").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 golaSelectionRepeater_itemReady($w, itemData, index) {
 // Set the action that occurs when a user clicks a choice for the body option.
    $w('#selectgolaButton').onClick(() => {
 // Select the choice using the selectChoiceForOption() function.
        selectChoiceForOption($w, 'gola', itemData);
 
 
    });
}

// Set up each item in the sleeves selection repeater as it is loaded.
export function frenteSelectionRepeater_itemReady($w, itemData, index) {
 // Set the action that occurs when a user clicks a choice for the sleeves option.
    $w('#selectfrenteButton').onClick(() => {
 // Select the choice using the selectChoiceForOption() function.
        selectChoiceForOption($w, 'frente', itemData);

 
    });
}

// Set up each item in the pocket selection repeater as it is loaded.
export function mangadireitaSelectionRepeater_itemReady($w, itemData, index) {
 // Set the action that occurs when a user clicks a choice for the pocket option.
    $w('#selectmangadireitaButton').onClick(() => {
 // Select the choice using the selectChoiceForOption() function.
        selectChoiceForOption($w, 'mangadireita', itemData);

 
    });
}

// Set up each item in the neckline selection repeater as it is loaded.
export function bainhaSelectionRepeater_itemReady($w, itemData, index) {
 // Set the action that occurs when a user clicks a choice for the neckline option.
    $w('#selectbainhaButton').onClick(() => {
 // Select the choice using the selectChoiceForOption() function.
        selectChoiceForOption($w, 'bainha', itemData);

 
    });
}

// Set up each item in the neckline selection repeater as it is loaded.
export function mangaesquerdaSelectionRepeater_itemReady($w, itemData, index) {
 // Set the action that occurs when a user clicks a choice for the neckline option.
    $w('#selectmangaesquerdaButton').onClick(() => {
 // Select the choice using the selectChoiceForOption() function.
        selectChoiceForOption($w, 'mangaesquerda', itemData);

 
    });
}

// Set up each item in the neckline selection repeater as it is loaded.
export function punhodireitoSelectionRepeater_itemReady($w, itemData, index) {
 // Set the action that occurs when a user clicks a choice for the neckline option.
    $w('#selectpunhodireitoButton').onClick(() => {
 // Select the choice using the selectChoiceForOption() function.
        selectChoiceForOption($w, 'punhodireito', itemData);

 
    });
}

// Set up each item in the neckline selection repeater as it is loaded.
export function punhoesquerdoSelectionRepeater_itemReady($w, itemData, index) {
 // Set the action that occurs when a user clicks a choice for the neckline option.
    $w('#selectpunhoesquerdoButton').onClick(() => {
 // Select the choice using the selectChoiceForOption() function.
        selectChoiceForOption($w, 'punhoesquerdo', 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('#shoppingCartIcon').addToCart(productId, 1, {choices: selectedOptions});
}

Please help me!!! :cold_sweat:

2

Hi,
I see that the “add to cart” button is the only one added using export function.
Please note that it must be added through the properties panel , otherwise it won’t work.

If it was and the issue persists, please send the link to the page with the issue and it’s name in the editor.

3

Hi Aleks,

The Product Configurator (for which the above code is available from here https://www.wix.com/corvid/example/product-configurator)) uses a basic button as an Add to Cart Button. This is in my view where the problems come from:

Nowadays Add to Cart is done via the Wix Store App Add to Cart Button, which wasn’t around when the Configurator guide was written.

The new method has a drawback, too: Namely, the Configurator calls for enabling and disabling the button in order to force the user to fully configure their product (in this case, a shirt with multiple parts).
The drawback being that the new Wix Store App Add to Cart Button can’t be disabled/enabled, as is called for in the Configurator’s guide, specifically these lines do not work with the new Add to Cart Button:

$w("#addToCartButton").disable();
}        

$w('#addToCartButton').enable();
}

EDIT:
The export function

export function addToCartButton_click(event, $w) {
    $w('#shoppingCartIcon1').addToCart(productId, 1, {choices: selectedOptions});
}

should work just fine with the new Add to Cart Button.

Testing this now.

4

Okay I came up with a quick fix.
You can use the new Add to Cart Button with its features, and replace

$w("#addToCartButton").disable();
}        

$w('#addToCartButton').enable();
}

With

$w('#addToCartButton').collapse();
}
$w('#addToCartButton').expand();
}

This will hide the Add to Cart completely. EDIT: Just add a disabled button to the page, stick the collapsed Add to Cart on top of it.