Nov 13, 2024
SmartSite Code: SmartCommerce Product Locator
While driving online purchases is always your primary goal there will be times where you need to show your website visitors where they can purchase your products in local stores. To assist with this SmartCommerce offers a Product Locator solution that you can embed on your website which enables visibility for local product availability and online conversion in the same interface. The SmartCommerce Product Locator is illustrated below:
You can embed a product locator on your website by carving out a space where the locator displays and following these simple steps:
- Create the product locator to define the products you would like to include, retailers you would like to display, and the display options to be used
- Instrument your website to display the product locator
- Place the SmartCommerce Product Locator HTML on your page where you want the locator to be embedded and displayed
Create the Product Locator Definition
Product Locator Definitions are created by the SmartCommerce operations team. To get one created you simply request one from your SmartCommerce client success representative providing the following information:
| Information | Description |
| Products | The products for which the product locator renders local retailers. You have three different ways to select your products:Include All Products (Recommended): This option simply includes any products you have in your SmartCommerce Product Catalog at any given time.Include Only Specific Products: This option allows you to start from scratch and opt products in to your locator in one of two ways:Manually, by providing UPC or SmartCommerce Master product ID for each product to be includedBy Attribute, by providing the the category, product family, or any other potential attribute relevant to your product catalog to include all relevant products in your locatorInclude All, but Exclude Some: This option allows you to start with a full catalog and opt products out of your locator in one of two ways: Manually, by providing UPC or SmartCommerce Master product ID for each product to be excludedBy Attribute, by providing the the category, product family, or any other potential attribute relevant to your product catalog to exclude relevant products from your locator Note that the Product Locator initially renders with retailers for a single default product which you can define. The locator UI allows the consumer to look at retailers for the product or switch products using filters you can define. In addition to selecting products for your locator, please also include:Desired Attribute Filters: The Product Locator can be configured with up to 3 custom configured attribute filters to help consumers find their products. For beverages as an example, the first attribute filter may be “Product Family” and the second may be “Flavor” with the final filter including the actual product sizeDefault Product: The desired default product to be displayed to all users upon first page load by providing UPC or SmartCommerce Master product ID |
| Retailers | The retailers you want shown in the Product Locator. Note that your implementation is defined with all of the possible retailers for every solution. We need to know the exact subset of stores from your implementation that you would like shown in your locator. |
| Display Options | The Product Locator has been built to maximize accessibility and contrast and comes with a standard default colorset to do so. Customizations in the Recommended section below carry low risk to contrast issues, while those in the Optional section require careful selection and application of color choice. You can customize the look & feel of your locator at any time by providing the following hex codes or preferences:Recommended:Button Style – choose from rectangle, rounded rectangle, or pill button shapeButton ColorButton HoverButton Text ColorHyperlink ColorRetailer Results BackgroundOptional:Title Text Color – includes product name and retailer namesBody Text Color – includes price, size, and address on retailer tilesLocator Background Color – includes the frame of the Locator and retailer tilesRetailer Pill Color – sets the inactive color for retailer sort pillsRetailer Pill Text Color – sets the inactive retailer pill text color |
Upon completion of the product locator definition you will be provided with the following information:
| Artifact | Description |
| Product Locator HTML Widget Code | The HTML <div> code snippet to place on your web page where you want your Product Locator to be displayed. |
Instrument Your Website to Display the Product Locator
To instrument your website to display a Product Locator on your page, insert the SmartCart javascript file at the bottom of the body of your page (Required)
SmartCart Javascript File (Required)
The SmartCart javascript (JS) file is the actual code that renders the locator. This must be placed at the bottom of the body of your webpage. The exact text for the SmartCart JS file is shown in the table below:
| Application Instance (AI) | JS Reference |
| North America (NA) | <script type=”text/javascript” src=”https://ss.click2cart.com/assets/js/smartcart_min.js”></script> |
| Europe (EU) | <script type=”text/javascript” src=”https://eu-ss.click2cart.com/assets/js/smartcart_min.js”></script> |
The SmartCart javascript file can be implemented one page at a time or can be part of your web page templates. Also note you can use the un-minimized version of the SmartCart javascript file by removing the “_min” suffix from the name. This is useful during the beginning of the implementation in case for some reason an issue comes up and troubleshooting is needed.
Implement Product Locator on your Website Page
You are now ready to implement your Product Locator on your website page(s). To implement a locator, you simply copy the Product Locator HTML Widget Code provided by your Client Success Representative and place it in your web page where you want it to render. You can do this a single page at a time or as part of your web page templates. Some notes follow:
- The Product Locator code is a div that contains parameters used by the SmartCart javascript to properly render the locator. An example is shown below:
- By default, the locator will expand to fill 100% of the parent div container. You can optionally use style=”height:80vh;” in the locator div to reduce the height of the locator, in this example 80%.
- When your page loads, the SmartCart javascript looks for all Product Locator code located within the body of your page. For each entry of locator code found, the SmartCart javascript calls the SmartCommerce API to get the cart and WTB backup options for the product represented by the locator.
After completing these steps your Product Locator will load with the rest of your web page and is ready for consumers.