Add to shopping cart via Ajax

Jan 9, 2014 2:05 pm

By default, when a website visitor clicks on an "Add to Cart" button on a product page, they are taken to a shopping cart page. If they then wanted to add more items in their cart, they will then have to press the back button on their browser, or press a "Continue Shopping" button to reload the product page.

This video will show you how to allow visitors to remain on the product page, while adding multiple items to the shopping cart.
VIDEO HERE

The code used in the video is:

jQuery('document').ready(function(){
      $('form.cart_add').on('submit', function(e){
       
              var formObj = $(this);
              e.preventDefault();
              var formData = formObj.serialize();
              var formAction = formObj.attr('action');
              var baseurl = 'https://www.yourdomainname.com/';
              $.ajax({
                          type: 'POST',
                           url: baseurl+"index.php?direct=n", data: formData,
                          success : function(data, status, xhr){
                                  console.log('done');

                                  $('#miniCartWrapperResult').load(baseurl+'index.php?src=gendocs&ref=mini_cart&link=mini_cart #miniCartWrapper');
                           }
                           });
               return false;
       });
});

Quick Summary:
1. Make the products lister a secure page (https)
2. Paste the javascript code in the body section of the products lister
3. Change the baseurl variable to the secure URL of your website
4. Paste a mini shopping cart layout in the Page Layout that the product lister is using
5. Wrap the mini shopping cart include with a div with the ID of miniCartWrapperResult
6. Create a web page in the web pages module, with the link name: mini_cart and set it to a secure display type (https)
7. Paste the mini shopping cart include in the web page wysiwyg with it wrapped inside a div, with an ID of miniCartWrapper
8. Edit the mini shopping cart module layout in green and check the box to Allow Blue to embed this layout