Thursday, 10 November 2011

How To Simultaneously Add Multiple Products To A Magento Shopping Cart

Magento's product list view lets customers add products to the shopping cart one at a time. I wanted customers to be able to add multiple products to the shopping cart simultaneously. I created an adhoc AJAX method to accomplish this feature request. Adding a product to a Magento shopping cart is accomplished through an HTTP GET request. It will look like or similar to this:
/path/to/app/checkout/cart/add?product=[id]&qty=[qty] 

That URL is output by the tem­plate helper:

$this->getAddToCartUrl($_product)

Since adding a product to the shopping cart is nothing more than a GET request, then all that needs to be done is queue up the URLs of the desired products, make each request in order, and then reload the page when done. First, in app/design/frontend/default/your-theme/template/catalog/product/list.html, I first added checkboxes to allow customers to select which products they want and also hidden fields for storing the URLs to add the product and text fields for the quantity.

<?php $_iterator = $_product->getId(); >?


<?php if(!$_product->isGrouped()): ?>

<?php endif; ?>

I added this code within the loop that generate the HTML for the product line items for the list. Next, I added the JavaScript that does the actual processing, also within the list section right after the script block that contains: decorateList('products-list', 'none-recursive').

At the bottom of the list I added a submit button.

Clicking the button calls the function addItemsToCart(). The function hides the button to prevent a double click and unhides the status message. Next, the function determines which checkboxes are checked. For each checked checkbox, the function finds the corresponding URL field and quantity field, concatenates the two values, and stores the new URL in an array. If the length of the array is greater than 0, then the function calls processNext(), otherwise it displays an error message and resets the submit button.

The function processNext() first updates the process­ing message. The function takes the array of URLs and an index, and then creates an AJAX GET request using the URL at the given index in the array. If the AJAX request completes, it calls processNext() with the same array but with an incremented index while the index is less than the array length. If the incremented index is greater than the array length, then that ends the processing and the function reloads the page.

 That's it.

3 comments:

  1. If you want to add Multiple group products to cart than you can contact me at ramram.be@gmail.com.

    ReplyDelete
  2. Hi Ram,
    Very Nice blog.
    It's very easy to implement.
    Actually I don't have any word to express my gratitude.
    Thanks a lot

    ReplyDelete
  3. It didn`t work for me it just adds the first product in list. Any solution for this?

    ReplyDelete