Adding a product to a Magento (ver. 1.3.1) 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 template 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/ / /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.

<input type="checkbox" class="input-checkbox add" name="add_<?php echo $_iterator; ?>" id="add_<?php echo $_iterator; ?>" />
<input type="hidden" name="url_<?php echo $_iterator; ?>" id="url_<?php echo $_iterator; ?>" value="<?php echo $this->getAddToCartUrl($_product) ?>" />
<?php if(!$_product->isGrouped()): ?>
     <input type="text" class="input-text qty" name="qty_<?php echo $_iterator; ?>" id="qty_<?php echo $_iterator; ?>" maxlength="12" value="<?php echo $this->getMinimalQty($_product) ?>" />
<?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').

<script type="text/javascript">
    function processNext(urls, i) {
        var next = i + 1;
        $('processing-text').update('Processing item ' + next);
        if (next < urls.size()) {
            new Ajax.Request(urls[i], {
              method: 'get',
              onComplete: function(transport) {
                processNext(urls, next);
              }
            });
        } else {
            new Ajax.Request(urls[i], {
              method: 'get',
              onComplete: function(transport) {
                window.location.reload();
              }
            });
        }
    }

    function addItemsToCart() {
        $('add-items-to-cart').hide();
        $('waiting').show();
        
        var addToCartUrls = [];
        $$('input.add').each(function(e){ 
            if(e.checked == true) {
                var id = e.readAttribute('id').split('_')[1];
                var qty = Number($('qty_' + id).value);
                if (qty < 1) qty = 1;
                addToCartUrls.push($('url_' + id).value + 'qty/' + qty);
            }
        });
        
        if (addToCartUrls.size() > 0) {
            processNext(addToCartUrls, 0);
        } else {
            $('add-items-to-cart').show();
            $('waiting').hide();
            alert('Please check off the items you want to add.');
        }
    }
</script>

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

<div style="margin-bottom:5px; text-align:right;"><button id="add-items-to-cart" class="form-button" onclick="addItemsToCart()"><span><?php echo $this->__('Add Items to Cart') ?></span></button><div id="waiting" style="height:22px; display:none; line-height:22px;"><span id="processing-text">Processing...</span> <img src="<?php echo $this->getSkinUrl().'images/wait22trans.gif'; ?>" width="22" height="22" style="display:inline; vertical-align:middle;"/></div></div>

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 processing 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. If there is anything wrong with the code, it assumes that all the GET requests will complete. Unfortunately, given the time constraints there was no time to account for the scenario where a GET request fails.

Let’s say you have a page with an SEF (search engine friendly) URL Identifier of “foo”. You’d like to have a subpage “bar” nested under foo. The CMS doesn’t let you create parent-child relationships, but Magento will let you include forward slashes in the SEF URL Identifier so that it is “foo/bar”.

That’s the good news. The bad news is if you want to use the breadcrumbs block, it won’t work out of the box. The Magento CMS is flat, so the default breadcrumbs will always look like “Home / My Page Title.” The optimal solution is to override the breadcrumbs module and parse the SEF URL Identifier and construct the breadcrumbs from that. (I may write a post about it in the future so stay tuned.) The good news for those designers out there, you don’t have to dive into code.

Magento’s CMS has a feature where each page has a way to override its XML layout. When you’re editing a page, go to the “Custom Design” tab. There you’ll see a form field called “Layout Update XML”. This is the key. Here’s where you add XML to first unset the breadcrumbs block and then add it back in but with your specific breadcrumbs. Here’s the code:

<reference name="root">
<action method="unsetChild"><alias>breadcrumbs</alias></action>
</reference>

<reference name="root">
<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs">
    <action method="addCrumb">
        <crumbName>home</crumbName>
        <crumbInfo><label>Home</label><title>Go to Home Page</title><link>/</link></crumbInfo>
    </action>             
    <action method="addCrumb">
        <crumbName>foo</crumbName>
        <crumbInfo><label>Foo</label><title>Foo</title><link>/foo/</link></crumbInfo>
    </action>             
    <action method="addCrumb">
        <crumbName>cms_page</crumbName>
        <crumbInfo><label>Bar</label><title>Bar</title></crumbInfo>
    </action>                  
</block>
</reference>

The first reference tells Magento to call the unset action on the root block to remove the original breadcrumbs. The second reference tells Magento to add a new breadcrumbs block. Then within that block it tells Magento to add three new breadcrumbs, one for “home”, one for “foo”, and another for “bar”. crumbName is just a unique identifier. Under crumbInfo, label is the link text, title is the hover text, and link is the URL. You need to include the root forward slash. The trailing slash is optional, but to be consistent with Magento you should include it.

And that’s all there is to it. If you have a Magento site with lots of CMS subpages or pages that are deeply nested, then this method can get tedious. That’s why I said the optimal solution is to override the breadcrumbs module in core as a local modification. If you don’t have many CMS subpages and they’re only one-level deep, then this method is adequate.