Full Page Caching - Configuration Full - AJAX hole punching

Configuration - Ajax hole punching

Back to User Guides

So you want AJAX Hole Punching? Full Page Caching gives it to you with ready to use javascript  and hole punching in the Index Controller. We make it easy. We grab all the information by default and save it into localStorage.

What is localStorage

LocalStorage is also known as HTML5 Web Storage. It stores data in your local browser. This has many advantages as it can speed up your site so you are not constantly grabbing the data from the server. We use localStorage with AJAX to overlay your data with the new data.

Warning: Programmers Only

“Full customization” is code “not intended for non-programmers.” If you’re not a programmer, or not interested in becoming one, this configuration option may not be for you. And if you are, let me tell you from experience that it may be an easier task for programmers familiar with the inner workings of Magento. Not saying that you won’t figure it out, but our experience has been that Full Page Caching full configuration can take an experienced Magento programmer a few hours to accomplish. It would be better for you to make the right decision about which configuration to use NOW, instead of hours and headaches later. On the other hand, don’t let me scare you. If you have some time to burn and want give it a try, feel free. Just don’t say I didn’t warn you if you can’t figure it out.

Enabling AJAX Hole Punching

The first thing you will need to do is enable Hole Punching on all of your pages. We already include the js files you will need (js/warp) in order to do the Hole Punching, but you will need to tell your page what function to run. We typically place this in your template/page/html/header.phtml file.

Javascript Adding Javascript to a template file

<script>document.onload = runPunch();</script>

We provide sample code inside the js/warp/warp.js file. Below, we explain what each piece does.

JS runEnabled() function (main function)

runEnabled();

runEnabled() will run every enabled hole punch from the backend

JS runLogOut() function (Top Links Hole Punch function)

var tlc = JSON.parse(localStorage.getItem('topLinksCss'));

This grabs the topLinksCss from the localStorage.

if(localStorage.getItem('loggedin') == 1) {
	runLogOut(tlc.loginlink, tlc.logoutlink, tlc.logoutcss);
}

This function is run if loggedin = 1 (1 for yes, 0 for no).

function runLogOut(loginlink, logoutlink, logoutcss) {
	jQuery(logoutcss).text('Log Out');
	jQuery('a[href$="' + loginlink + '"]').attr('href', logoutlink);
}

the jQuery above will find the login link and change it to the logout link.

This is the javascript portion. You can do this for each hole punch you want. The jQuery places the data where it needs to be so you need to be familiar with javascript and jQuery.

PHP HoleController.php

public function topLinks() {
	// get total items in cart
	$cart = Mage::helper('checkout/cart')->getQuote()->getData();
	$cartTotal = (int)$cart['items_qty'];
	// check if logged in
	if(Mage::helper('customer')->isLoggedIn() == 1){
   		$loggedin = 1;
    		$firstName = Mage::getSingleton('customer/session')->getCustomer()->getFirstname();
    		$lastName = Mage::getSingleton('customer/session')->getCustomer()->getLastname();
    		if(!$firstName || !$lastName){
        	$welcome = Mage::getStoreConfig('design/header/welcome');
    		} else {
        	$welcome = 'Welcome, ' . $firstName . ' ' . $lastName . '!';
    		}
	} else { 
		$welcome = Mage::getStoreConfig('design/header/welcome');
	}
	// This will grab all of the css info from backend
	$configTopLinks = Mage::getStoreConfig('punch/toplinks');
	return $newObject = array(
    		"cartTotal" => $cartTotal,
    		"welcome" => $welcome,
    		"loggedin" => $loggedin,
    		"topLinksCss" => $configTopLinks,
	);
}

If you understand all of this, then you should be fine to create an AJAX hole punch. Good luck!

	Get more information about the Full Page Caching Extension for Magento®. Find other Magento products at the CreativeMinds Magento Store.
	Let us know how we can Improve this Product Documentation Page. To open a Support Ticket visit our support center.