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 one of a couple built-in functions. One method sets a cookie on the host domain, and the other triggers an event on the document.body. Both can be used to receive the user's choice, and are interchangeable depending on which approach best suits your use case. In this article we will demonstrate both.
We won't go into extensive details about what to do with that cookie or event data since it will vary greatly for each implementation.
The first step is to 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 Link field added to the "List", as shown here:
The code for this link has been added to a field template. We'll show both the cookie and the event example.
Setting a cookie on the host domain
In this example, we'll update the field template to include a call to this function:
sendParentIFRAMEMessage('ml-set-cookie', {cookieName: 'ml-set-cookie-test', cookieValue: 'i-am-cross-domain',cookieDays:30});
A complete example is shown below:
<a data-conversion="LinkField" href="http://www.metalocator.com" aria-label="http://www.metalocator.com" target="_blank" data-toggle="tooltip" data-placement="top" onclick="sendParentIFRAMEMessage('ml-set-cookie', {cookieName: 'ml-set-cookie-test', cookieValue: 'i-am-cross-domain',cookieDays:30});" title="" class="ml_link ml_link ml_link_pretty " data-handled-conversion="1" data-original-title="Visit our Website"><i class=" "></i><span>metalocator.com</span></a>
You can even pass data in the cookie value itself by inserting template placeholders:
sendParentIFRAMEMessage('ml-set-cookie', {cookieName: 'ml-set-cookie-test', cookieValue: 'user-clicked-record-id-{{id}}',cookieDays:30});
This will set a cookie on the host domain, with the value as provided in the cookieValue parameter.
Triggering a JavaScript event
Similar to the above example, instead of using the ml-set-cookie method, we can also call the ml-iframe-message method.
sendParentIFRAMEMessage('ml-iframe-message','user-clicked-record-id-{{id}}'});
On the host page, configure a listener for this same event:
document.body.addEventListener('ml-iframe-message', (e) => { console.log('Event received from IFRAME:', e.detail);
});
This example produces:
Event received from IFRAME: user-clicked-record-id-96984
From there the payload will be inside of e.detail, exactly as provided in the call and can be handled as needed for your use case.
Questions or comments? Please reach out to the Help Desk, however; please note that the help desk doesn't provide programming support