How can a add a pre-loader or disable a button once the form is submitted?

Ask the community
,
1

I have had a custom form developed. All is working very well except that once the “Add to cart” button is pressed there is a delay before the cart appears and users think it hasn’t worked. Can I disable or change the colour of the button once it is clicked?

Page code:

// 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 = 5 ;
// Hard coded product ID from the Products collection.
const productId = “d1d5f12e-073c-193c-6804-01792df426c4” ;
// 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_1 ( 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 ( ‘#yarn1Img’ ). hide ();
$w ( “#yarn2Img” ). hide ();
$w ( ‘#yarn3Img’ ). hide ();
$w ( “#POMPOMImg” ). hide ();
$w ( “#yarn4Img” ). hide ();
$w ( “#yarn1Img” ). src = ‘https://’ ;
$w ( “#yarn2Img” ). src = ‘https://’ ;
$w ( “#yarn3Img” ). src = ‘https://’ ;
$w ( “#POMPOMImg” ). src = ‘https://’ ;
$w ( “#yarn4Img” ). 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 yarn1SelectionRepeater_itemReady_1 ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the body option.
$w ( ‘#selectYarn1Button’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘yarn1’ , 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 yarn2SelectionRepeater_itemReady_1 ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the sleeves option.
$w ( ‘#selectYarn2Button’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘yarn2’ , 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 yarn3SelectionRepeater_itemReady_1 ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the pocket option.
$w ( ‘#selectYarn3Button’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘yarn3’ , 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 POMPOMSelectionRepeater_itemReady_1 ( $w , itemData , index ) {
// Set the action that occurs when a user clicks a choice for the neckline option.
$w ( ‘#selectPOMPOMButton’ ). onClick (() => {
// Select the choice using the selectChoiceForOption() function.
selectChoiceForOption ( $w , ‘POMPOM’ , itemData );

    //on mobile, make all repeaters collapsed 
    if  ( wixWindow . formFactor  ===  'Mobile' ) { 
        toggleFold ( 4 ); 
    } 
});

}

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

    //on mobile, make all repeaters collapsed 
    if  ( wixWindow . formFactor  ===  'Mobile' ) { 
        toggleFold ( 5 ); 
    } 
});

}

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

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

export function option5Button_click ( event , $w ) {
// Expand and collapse the appropriate sections by calling the toggleFold() function.
toggleFold ( 5 );
}
// 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 (); 
    } 
}

}

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

2

From what I can make out, quickly glancing at your code, you would need to disable it in the function: exportfunction addToCartButton_click_1 ( event , $w ).

Here you need to add: $w ( ‘#addToCartButton’ ).disable();
This should be your first line of code in that function

I haven’t fully reviewed your code, but the question is, once the button is disabled, how do you re-enable it. Is the user limited to adding only one item to the cart? I would assume you want the button re-enabled once the item is in the cart. You might have to re-enable it again after the item has been added to the card.

To re-enable it, use: $w ( ‘#addToCartButton’ ).enable();
You might need to do this after the item has been added to the cart. This might be put in the same function but, as the last line.

If you want to change the colour of the button, this is also the location in the code where you could change the button colour. Instead of adding the disable button line, you would add the line to change the color of the button here.

I have also experienced annoying delays before the data gets displayed.
To give feedback to the user/customer, I often use a hidden textbox. I will unhide the textbox and display a message that it will take a second to complete the request. Once the request is completed, I once again hide the textbox. This sets the expectation to the customer that something is going on, and to please wait.

3

Thank you. I really wanted to add a pre-loader GIF to display when the button is pressed, but I think that is going way above my comfort level.

I will try this suggestion first - Much appreciated.