Click the button to see items in your cart being added!

Question

Click the button to see items in your cart being added!

I am looking to customize a button element to function as an 'add to bag' button with multiple text states triggered by user clicks. Initially, the button will display "Add to Bag," then change to a spinner image upon click. After a 1-second animation in this state, the text should switch to "Added to Bag!" before returning to the original "Add to Bag" state.

For reference, you can see a similar functionality in action on this page:

Below is a snippet of code that accomplishes most of these text changes, except for the spinner state:

// Cart button text change
(function() {
  $(".btn-cart").on("click", function() {
    var $this = $(this),
      oldText = $this.text();

    $this.text("Added to Bag!");
    $this.attr("disabled", "disabled");

    setTimeout(function() {
      $this.text(oldText);
      $this.removeAttr("disabled");
    }, 1600);
  });
})();

jquery css

Answer 1

Answer №1

Check out this example below

$( document ).ready(function() {
// Changing Cart button text
  $(".btn-cart").on("click", function() {
    var $this = $(this),
      oldText = $this.text(); 
 $this.html("<img width='50' height='50' src='http://www.bebestore.com.br/images/shared/lazyloader.gif'/>"); 
    setTimeout(function() {
      $this.text("Added to Bag!");
    }, 3000);
    setTimeout(function() {
      $("img").hide();
      $this.show();    
      $this.text(oldText);
    }, 5000);
  });
});

button,div{text-transform:uppercase;background: #828282;
    border: #828282 1px solid;
    color: #fff;    transition: opacity 0.2s;    border-radius: 0;
    cursor: pointer;
    font-family: "Calibre SemiBold", arial, sans-serif;
    font-size: 12px;
    height: 45px;
    letter-spacing: 1.5px;
    line-height: 45px;
    overflow: hidden;
    padding: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 170px;
    -webkit-appearance: none;}
/*div {
    border: 7px solid #f3f3f3; 
    border-top: 7px solid #3498db; 
    border-radius: 50%;
    width: 20px;
    height: 20px;
    
}*/
span {
    background: url(https://www.storefirst.com/static/common/images/loading-spinner.svg);
    height: 30px;
    display: inline-block;
    width: 30px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-cart">Add to bag</button>

Answer 2

Check out this example below

$( document ).ready(function() {
// Changing Cart button text
  $(".btn-cart").on("click", function() {
    var $this = $(this),
      oldText = $this.text(); 
 $this.html("<img width='50' height='50' src='http://www.bebestore.com.br/images/shared/lazyloader.gif'/>"); 
    setTimeout(function() {
      $this.text("Added to Bag!");
    }, 3000);
    setTimeout(function() {
      $("img").hide();
      $this.show();    
      $this.text(oldText);
    }, 5000);
  });
});

button,div{text-transform:uppercase;background: #828282;
    border: #828282 1px solid;
    color: #fff;    transition: opacity 0.2s;    border-radius: 0;
    cursor: pointer;
    font-family: "Calibre SemiBold", arial, sans-serif;
    font-size: 12px;
    height: 45px;
    letter-spacing: 1.5px;
    line-height: 45px;
    overflow: hidden;
    padding: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 170px;
    -webkit-appearance: none;}
/*div {
    border: 7px solid #f3f3f3; 
    border-top: 7px solid #3498db; 
    border-radius: 50%;
    width: 20px;
    height: 20px;
    
}*/
span {
    background: url(https://www.storefirst.com/static/common/images/loading-spinner.svg);
    height: 30px;
    display: inline-block;
    width: 30px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-cart">Add to bag</button>

Answer 3

Answer №2

To smoothly achieve this effect, consider providing the original text in markup and then adjusting it before and after a timeout period.

<button class="btn-cart">Add to bag</button>

$(".btn-cart").on("click", function(){
    var $this = $(this);
    $this.text("Adding to bag");

    setTimeout(function(){
        $this.setText("Added to bag!");   
    }, 1000);
});

Edit based on feedback

I prefer it to show a spinner rather than simply stating "adding to bag"

You can easily accomplish this by making slight changes to your markup

<button class="btn-cart">
    <span class="btn-cart--text">Add to cart</span>
    <span class="btn-cart--loading" style="display: none">
        <img src="spinner.gif" />
    </span>
</button>

$(".btn-cart").on("click", function(){
    var $this = $(this);
    $text = $(".btn-cart--text", $this);
    $loading = $(".btn-cart--loading", $this);

    // Hide text and display loading spinner
    $text.css("display", "none");
    $loading.css("display", "block");        

    setTimeout(function(){
        // Change text, display text again, hide spinner
        $text.setText("Added to bag!");   
        $text.css("display", "block");
        $loading.css("display", "none");
    }, 1000);
});

Answer 4

To smoothly achieve this effect, consider providing the original text in markup and then adjusting it before and after a timeout period.

<button class="btn-cart">Add to bag</button>

$(".btn-cart").on("click", function(){
    var $this = $(this);
    $this.text("Adding to bag");

    setTimeout(function(){
        $this.setText("Added to bag!");   
    }, 1000);
});

Edit based on feedback

I prefer it to show a spinner rather than simply stating "adding to bag"

You can easily accomplish this by making slight changes to your markup

<button class="btn-cart">
    <span class="btn-cart--text">Add to cart</span>
    <span class="btn-cart--loading" style="display: none">
        <img src="spinner.gif" />
    </span>
</button>

$(".btn-cart").on("click", function(){
    var $this = $(this);
    $text = $(".btn-cart--text", $this);
    $loading = $(".btn-cart--loading", $this);

    // Hide text and display loading spinner
    $text.css("display", "none");
    $loading.css("display", "block");        

    setTimeout(function(){
        // Change text, display text again, hide spinner
        $text.setText("Added to bag!");   
        $text.css("display", "block");
        $loading.css("display", "none");
    }, 1000);
});

Answer 5

Answer №3

In order to fulfill your requirements, you can implement a button update function triggered by a click event. This function will modify the text on the button and add a loading spinner image. Subsequently, a series of timers can be used to sequentially change the text. Here is an example:

$('.btn-cart').click(function() {
  var $btn = $(this).prop('disabled', true).addClass('adding').html('<img src="https://i.imgur.com/01yMDgZ.gif" />Adding to bag...');

  setTimeout(function() {
    $btn.text('Added to bag!').toggleClass('adding added');
    setTimeout(function() {
      $btn.text('Add to bag').removeClass('added').prop('disabled', false);
    }, 1000)
  }, 1000);
})

.btn-cart {
  background-color: #C00;
  border: 0;
  border-radius: 10px;
  color: #FFF;
  padding: 10px;
  font-size: 1em;
  cursor: pointer;
  outline: 0;
}

.btn-cart.adding {
  padding-left: 35px;
  background-color: #CCC;
}
.btn-cart.added {
  background-color: #CCC;
}

.btn-cart img {
  height: 25px;
  position: absolute;
  top: 15px;
  left: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-cart">Add to bag</button>

Answer 6

In order to fulfill your requirements, you can implement a button update function triggered by a click event. This function will modify the text on the button and add a loading spinner image. Subsequently, a series of timers can be used to sequentially change the text. Here is an example:

$('.btn-cart').click(function() {
  var $btn = $(this).prop('disabled', true).addClass('adding').html('<img src="https://i.imgur.com/01yMDgZ.gif" />Adding to bag...');

  setTimeout(function() {
    $btn.text('Added to bag!').toggleClass('adding added');
    setTimeout(function() {
      $btn.text('Add to bag').removeClass('added').prop('disabled', false);
    }, 1000)
  }, 1000);
})

.btn-cart {
  background-color: #C00;
  border: 0;
  border-radius: 10px;
  color: #FFF;
  padding: 10px;
  font-size: 1em;
  cursor: pointer;
  outline: 0;
}

.btn-cart.adding {
  padding-left: 35px;
  background-color: #CCC;
}
.btn-cart.added {
  background-color: #CCC;
}

.btn-cart img {
  height: 25px;
  position: absolute;
  top: 15px;
  left: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-cart">Add to bag</button>

Click the button to see items in your cart being added!

Answer №1

Answer №2

Answer №3

Similar questions

"Enhance your website with the powerful combination of SweetAlert

Alignment issue detected with the text for radio buttons

Sub-menus at multiple levels are failing to automatically close child elements when clicked

Tips for optimizing the positioning of HTML elements in a flexible and responsive manner

Refresh your jQuery function without the need to reload the entire page

Is there a workaround for jQuery serializing hidden form elements that are set to display:none?

Enhance your dynamic content with jQuery/AJAX through customized CSS styling

Aligning two columns accurately

In the Firebug console, Ajax posts are highlighted in a vibrant red color

Footnote fiascos

Greetings! I am interested in injecting HTML elements into a DOM using PHP and the jQuery Ajax method

How to Make Your Site/Content Fade In with jQuery Upon Loading?

Exploring multidimensional JSON arrays with the jQuery each() method

Creating a custom PHP header file that dynamically includes .js and .css files based on the page

IE6/7 dilemma with CSS floating

It appears that the pixel sizes are different than what was originally designed

Having issues with the functionality of Bootstrap 4 sticky-top feature

What is the best way to cycle through a JSON array of objects using JavaScript and jQuery?

Tips for applying personalized CSS to the ngbDatepicker component in Angular 4

Populate form fields with dynamic data using jQuery and Ajax JSON response