Directing a potential customer to the right retail location for a given product can be challenging if a retailer company has products for sale in multiple locations. When the inventory varies by location, the picture can become even more confusing.
In this article we are exploring the product finder features of MetaLocator. This article focuses on integrating the product pages of an eCommerce with a product finder that shows where that product can be purchased. It presumes that an Interface has already been set up and data imported according to the product finder instructions.
With MetaLocator, product page integration can be done in a few different ways. Firstly, provide "Where to Buy" links from your product page that direct the user to a product finder pre-filtered for that product. Secondly, display the nearest locations directly on the product page. Thirdly, combine both ideas and show the nearest locations, while providing a link where the user can refine or change the automatically presented results.
Where to Buy Links
Creating a link that dynamically connects to an existing product finder is quite straightforward with MetaLocator. From a product page, build a link to the page on which the product finder was deployed as follows:
<a href="http://www.yourwebsite.com/where-you-deployed-the-store-locator?ml___sku[products]=393&ml___task=search_zip">Where To Buy</a>
Notice that the product SKU is in the URL. You will likely need to leverage PHP, .NET or another server-side language to dynamically insert this unique product id. Once created, this link can appear as shown here:
Once the user clicks that link, the product finder will be pre-filtered to show only locations that stock that particular product.
The user can then take action to get directions, call or click a location-specific link as needed.
Displaying Nearest Locations Automatically
It is not always desirable to direct the user away from the product landing page, especially if the product is available online, or in-store. In this case, MetaLocator can create a short list of automatically-detected nearby results that carry only the requested product.
For this task we will create an separate interface that has a few important changes:
- Layout Settings: Set "Show a Map" to "No" and expand the directory width to 100%
- Geolocation Settings: Turn on Auto Find.
- Form Settings: Remove all search options
When previewing the interface with the options set correctly, it should appear as follows
This is ready for deploying to our product page, though we need to make some modifications to the code to ensure that it is dynamically filtered by the SKU.
First, obtain the IFRAME code for the interface.
Then, in your eCommerce product landing page alter the link to contain the product filter, similarly to what was done with the Where To Buy strategy above.
<iframe src="https://code.metalocator.com/index.php?option=com_locator&view=directory&layout=combined&framed=1&tmpl=component&sku[products]=393&Itemid=XXXXX" width="100%" height="500" frameborder="0" scrolling="no"></iframe>
The height, width and Itemid of your implementation may differ. The code above creates this layout in our example.
Shown here, we have positioned the search results next to the product photo.
This allows the customer a clear view of nearby locations that specifically carry the product requested while maintaining a clear call to action for "Add To Cart".
These instructions hopefully outline a clear path to a tight integration between a hosted product finder and an existing eCommerce platform.