This article covers an example application where a user can click a link to "save" a certain location as their "favorite" or preferred location.  This information can be sent to an eCommerce application for use in shipping, checkout or in-store pickup.

This involves some fairly advanced topics, and should be performed with the help of a Webmaster.

Disclaimers aside, we have a few challenges to overcome.

First, we will encounter an error when trying to transmit information regarding the user's location selection to the page on which the MetaLocator interface is deployed.  This is known as a "cross domain" restriction, meaning there is an embedded security precaution in all browsers that prevents script-based communication between two websites.

Secondly, we do not want to force the containing page to re-load, as the user might be in the middle of a product configuration, or other sensitive checkout process that we don't want to reset or interrupt.

Thirdly, the containing page needs to remember the user's selection, and ideally the MetaLocator interface should also know which location was selected.

To accomplish the above, we're going to use a technique called "JSONP", which allows a basic form of cross-domain communication.  In our example, we're going to set a cookie on the containing page's domain.  This cookie can then be later used during the checkout process.  The establishment of the cookie is the hard part, so we won't go into details about what to do with that cookie since it will vary greatly for each implementation.

The majority of the action occurs within the "Make this my store" link.  In our example, we're going to place the link in the Item Template, as shown here:

The code for this link has been added to the Interface's Item Template.  Here is the code we added:

<a href="javascript:void(0);" onclick="try{ jqLocator.ajax({ url: '{id}', dataType: 'jsonp' }); return false;} catch(e){}">Set As My Location</a> is the page on which our Interface is deployed.  In this scenario, that domain hosts a website that sells a product that is available for pickup at the locations in our MetaLocator database.

The link above passes the ID number of the MetaLocator location to a script called "setlocation.php" on via a JSONP AJAX request.  The setlocation.php script simply sets a cookie and displays the user's selection, without much fanfare.

The code for setlocation.php looks like this:

//check if the ID parameter was included, if so, set the cookie
if(@$_REQUEST[ > 0){
        setcookie("MyStoreID", (int)$_REQUEST['id'], time()+3600);
//in the case of the JSONP request for a callback, just ignore it
if(isset($_REQUEST['callback']) && strlen($_REQUEST['callback']) > 0){      
//If the user has selected a store, display it
if($_COOKIE['MyStoreID'] > 0){
        $id = (int)$_COOKIE['MyStoreID'];      
       echo '<h2>My Store is' . $id . '</h2>';

The above is just a proof of concept.  What you choose to do with the Location ID might be totally different for your application.

This video illustrates the above example.  Questions or comments?  Please reach out to the Help Desk.

Video Overview:

Did this answer your question?