Accessing your customer's trolley to build responsive pages

Every page that includes an eComponent can read the contents of the customers trollley, their login status, and so on, even when the page contains just an invisible "Track" compoinent.

This infortmation gives you insight into a visitor's position on the sales path, and allows you to build 'dynamic pages' that deliver customised content accordingly. Such content will typically encourage the the visitor to take a particular action next, be it to buy useful add-ons, or to complete payment.

You can, for example:

• Upsell to visitors depending on the contents of their trolley (e.g. offer dmConnect12 customers one set of add-ons, and dmSwitchboard12 customers another).
• Display different content depending on whether the visitor is logged in, encouraging them to take the next step on the path to completing payment (e.g. 'Login or Register', or 'Complete Checkout').

Shopping Status data is included in the Track result

The contents of the user’s trolley and their login status is made available client-side in a Javascript global called dmShopStatus. This is available by DOMReady, and allows the site designer to check what’s in the user’s trolley and whether they are logged into dmShop, allowing tailored page content to be delivered.

All of dmClub's sales sites include a secret page that shows the contents of dmShopStatus - go to /shopping-status
e.g. http://dmclub.dmswitchboard12.com/shopping-status
Try refreshing this page in one window, while you shop on the same site in another, to see how dmShopStatus changes during a typical session.

Javascript exposes dmShopStatus

dmShopStatus is a Javascript global with the following structure (example console.dir output from FireBug).

Example code using dmShopStatus

What it does

• The example code fills a DIV on the page with the number of items in the trolley, then lists each one, by calling the report() function (written for the purpose of this example) on DOMReady.

• Note that the report function must be called after the document’s DomReady event has fired (as before this the document’s DOM is not available for manipulation via javascript).

Script output (example)

HTML

Somewhere in the body put:

<div id="answer" style="border: 1px red solid; padding: 10px;"></div>

Javascript

The highlights demonstrate reading data from dmShopStatus.

function report()
{
        var area = DML.DOM.$('answer');
        var p = document.createElement('p');
        var t = document.createTextNode('Number of items in the trolley: ' +
        dmShopStatus.qnt_items);
        p.appendChild(t);
        area.appendChild(p);
        var p = document.createElement('p');
        for (var i = 0; i < dmShopStatus.qnt_items; i++)
        {
            var ti = dmShopStatus.items[i]; // ti is short for trolley item
            var t = document.createTextNode('Item ' + (i+1) + ' is : ' + (ti.type == 'Num' ?
                    ti.number_formatted : ti.trolley_text));
            var b = document.createElement('br');
            p.appendChild(t);
            p.appendChild(b);
        }
        area.appendChild(p);
    }

Triggering the report() function

The report function can be called as soon as the DOM is ready by be manipulated (onDomReady).

e.g. if you were using JQuery you could write:

$(document).ready(function() { report(); }  );

If you were using raw javascript you could write the following (runs onLoad rather than onDomReady).

if (window.addEventListener)
{
        window.addEventListener('load', report, true); // W3C
}
else if (window.attachEvent)
{
        window.attachEvent('onload', report); // IE  - Quirks Mode
}
else
{
        window.onload = report;
}