A product finder helps customers identify where to purchase a given product, both online and in-store. They are commonly launched by clicking a "Where to Buy" button on product detail page as shown below. They can also include a product drop-down as part of the search to allow users to choose a product.
Clicking that button launches the product finder. When the product finder is launched, the button passes it the SKU, language and other parameters to ensure the resulting interface displays the proper results.
The locator can display both online and in-store results based on the Where to Buy button that was clicked:
Creating a product finder in MetaLocator is a matter of the following steps:
Creating a product finder Interface
This article discusses the 3rd topic, creating the Interface. In this document we will create a product finder using the Interface Builder. Presuming your data is ready as described in step 1 above, start by creating a new Interface, under Interfaces > New. Choose Store Locator, then Rich Media layout. Other templates will function similarly, these are simply the options we chose for this tutorial.
Without any changes, the locator will display only locations that stock the requested SKU when launched from a Where to Buy button. Common customizations include:
Displaying the selected product name, image and/or price
Displaying a Buy Online tab
Adding a product search to the search form
Adding dynamic eCommerce links to the location results
Displaying all products available at each location
Adding a product search to the search form
Under search settings, click Add field. Choose SKU from the list.
Update the label to Products, or your desired label:
Adding dynamic eCommerce links to the location results
When presenting a Buy Online or similar link in the results, you may want to dynamically include the SKU in the link. In this example, we have added a button to the results and styled it with an icon and an outline.
The link is dynamically updated to include the selected product, as shown below by creating a custom template, and setting the link to the value of the skuproducts attribute of the ml_formstate. For more information on creating custom field templates, click here.
Displaying all products available at each location
As described in the data import tutorial, create a "Related Table" field in the locations table for "Products at this Location". Then, add the field to the results as shown:
Edit the template as shown to control how each product is displayed.
The results are displayed as shown below. This can be added to the Details pane as well so that it displays well with larger product lists.
