CODEWITHSUNDEEP
jqueryajaxwordpresswoocommerce
warm__tape
warm__tape

Reputation: 80

Trigger JQuery script once product has been successfully added to cart

Inside my child theme's custom.js I have the following:

$(document.body).on('added_to_cart', function() {
    console.log('Product Added');
});

In theory, this should output that message in the console when a product has been successfully added to the cart. However, at the moment it does nothing and I cannot work out why?

Upvotes: 0

Views: 1158

Answers (2)

Tanmay
Tanmay

Reputation: 31

jQuery(document).ready(function($){
    $('body').on( 'added_to_cart', function(){
        alert("testing!");
    });
});

Use this it works for me..:)

Upvotes: 1

Amruth Pillai
Amruth Pillai

Reputation: 1693

This seems to work fine for me...

HTML (w/ Bootstrap 4)

<div class="container mt-5">
  <div class="col-4 mx-auto">
    <div class="card">
      <div class="card-body text-center">
        <h5>Hello, World!</h5>
        <br>
        <button id="addToCart" class="btn btn-primary">
          Trigger Event
        </button>
      </div>
    </div>
  </div>
</div>

JS

var body = $(document.body);
var button = $('#addToCart');

body.on('add_to_cart', function (event) {
  console.log('added to cart!');
});

button.on('click', function () {
  body.trigger('add_to_cart');
})

You can check out this CodePen and play around with it:
https://codepen.io/anon/pen/ZjBoNY?editors=1010

Upvotes: 0

Related Questions