How To Update Header Mini Cart Dynamically With Ajax Cart

TIps for updating your Ultimo theme in Magento.

By Suada Cane

For the Ultimo theme, if you are using ajax instant cart (or any ajax cart), you will want to have the header mini cart updated with the new cart subtotal and cart number of items. Here is how I accomplished this with other Ultimo sites.

Step 1: Create a file such as

public_html/src/cart_update.php

Use this code:

## Start of PHP Code ##

error_reporting(E_ALL);
ini_set(‘display_errors’, ‘1’);

# // call magento from Outside
require_once ‘../app/Mage.php’;

 umask(0);

// we use ‘3’ as it is website id 3 here. Use 1/2 accordingly for the other multi site domains.

Mage::app(‘3’);
// Let’s get that FRONTEND session for the SHOPPING CART
Mage::getSingleton(‘core/session’, array(‘name’=>’frontend’));
$cart = Mage::getSingleton(‘checkout/cart’)->getItemsCount();
 $cart = Mage::helper(‘checkout/cart’)->getItemsCount();
 $cart = Mage::helper(‘checkout/cart’)->getCart()->getItemsCount();
 $cart = Mage::getSingleton(‘checkout/session’)->getQuote()->getGrandTotal();
$cart=number_format($cart,2);
echo  Mage::app()->getLayout()->createBlock(“checkout/cart_sidebar”)->setTemplate(“checkout/cart/mini.phtml”)->toHtml(); 

## End of php code ##

See the bold line? That is setting website ID of ‘3’ which was used for SignatureSupply.com. If you are on a multi site install, find the website id in system–>config, and when adding cart_update.php to THAT domain, replace ‘3’ with that id. If you are doing this on a standard website without multi site install, just do Mage::app(1); and you’re fine. This just tells Magento “Find this website’s cart contents” otherwise it won’t update with anything but $0.00 and no items to show for it.

Step 2: In child theme, make sure you have icart folder (this is assuming we use mageworx instant cart). Whatever the template is for the instant cart you use, create that folder if it does not exist. Create a file called product_added.phtml Add the contents (or transfer from ultimo/default or frontend/base/default) the product_added.phtml template file. This way it is in the child theme.

So you’ll have /ultimo/child/template/icart/product_added.phtml

Open up that file and add this:

<script type=”text/javascript”>
reloadPage();
</script>

At the top of the template.

This is calling a js function you are going to add to the header, which is step 3 in this process.

Step 3: Add reloadPage Js Function In Header

<script type=”text/javascript”>
function reloadPage()
  {
jQuery(“div#mini-cart”).load(“<?php echo $store_url;?>src/cart_update.php”); // Change the content temporarily
  }
</script>

What this does is it says “Ok, reloadPage function was activated in the product_added template of instant cart, which is really that mini window you see when you hit ‘add to cart’ with this ajax add to cart module. so while that pop up window appears, this js function fires. The header loads this and via jquery you are telling it to hit the /src/cart_update.php file which loads the updated cart data and appends a ‘block’ which calls the templtae/structure of the header mini cart, usually found in the path being called in the bottom of cart_update.php (the last line).

Now, if you look carefully you see a variable $store_url appended to this jquery call. you may NOT have this variable available in the header, so place this ABOVE the jquery function in the header.php file:

   if ($_SERVER[‘HTTPS’] != “on”) {
      $store_url=$this->getUrl();
       }
       else
       {
      $store_url=$this->getUrl();
       $store_url=str_replace(“http://”,”https://”,$store_url);
       }

That’s it. Follow these 3 steps and you are set with regard to working with ajax instant cart and ulitmo. Please note this tutorial is based on ‘instant cart’ so any other ajax module, just find the confirmation .phtml template that represents the ‘confirmation pop up window’ after you add a product to cart and add the reloadpage call there as you do for product_added.phtml (step 2) in this tutorial and it will work just fine.

## IMPORTANT NOTE/UPDATE ##

When dealing with multiple websites, especially in the signature supply setup, only ONE domain has the files for the Magento install. So if you are going to follow these steps to work on the other websites, you must edit the header.phtml and the product_added.phtml in the child theme associated with that website. In the foodservicehoods.com site, we load those changes in the /ultimo/hoods directory. As for what file you point to, when pointing to /src/cart_update.php, you change things up in the header.phtml for the other websites. Whereas site one used header.phtml to call /src/cart_update.php, I did something different for another site (food service hoods). What I did was go to the foodservicehoods.com domain, even though they are just pointer files pointing to the signaturesupply.com folder, I created a manual /src folder and added a file cart_update.php and this allows header.phtml in the /food child theme to point to the /src/cart_update.php in the foodservicehoods.com domain. This is critical because you have to point to your domain when using the Jquery .load function. So that is how I was able to separate the functionality on the live food hood site and signaturesupply.com