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 (the "host" page). 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 host 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 host 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 host page's domain to retain the value of the user's store choice. This cookie can then be later used during the checkout process. You may choose to store the value in another mechanism, instead of a cookie, depending on your server-side requirements.
We won't go into extensive details about what to do with that cookie since it will vary greatly for each implementation.
In this article we will create a link on each result card, labelled "Make this my store".
The majority of the action occurs within the "Make this my store" link. In our example, we're going to place the link in a custom "Text" field added to the "List", as shown here:
The code for this link has been added to a field template. Here is the code we added:
<a class="btn btn-primary" href="javascript:void(0);" onclick="try{ jqLocator.ajax({ url: 'https://example.com/setlocation.php?id={{id}}', dataType: 'jsonp' }); return false;} catch(e){}">Set As My Location</a>
Added as shown below:
example.com is the domain on which our Interface is deployed. In this example 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 example.com via a JSONP AJAX request. The example setlocation.php script below simply sets a cookie and displays the user's selection, without much fanfare.
The code for setlocation.php looks like this:
<?php
//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){
die();
}
//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.
Questions or comments? Please reach out to the Help Desk, however; please note that the help desk doesn't provide programming support