Recommendations Configuration
- Lance Bohrnell (Unlicensed)
- Stephanie Brudvik
This section covers how to configure and control the layout of the recommendations that will appear on your site.
Map Fields used for Recommendations
The first step is to ensure your fields in the workbench are mapped accordingly to Recommendation fields. These fields are used by the Recommendations engine to inject item data into the Recommendations layout.
http://dev.hawksearch.net/settings/fields/
The following Recs fields are available for mapping
Step 1: Place a Recommendation div on your dev site
You will want to begin by being able to see Recommendations on your site, so you can then revisit to modify the layout. To do this, you’ll need to place a Recommendations div on your site. This div is an empty div. Hawksearch JavaScript will populate this div with recommended items when the page is loaded.
To grab a Recommendations Widget in the workbench, go to Workbench >> Recommendations:
http://dev.hawksearch.net/settings/recommender/
Out of the box, Hawksearch installs some dummy widgets that you can use for your initial testing. Widgets are organized by the following page types:
Home Page
Product Pages
Shopping Cart Page
Landing Pages
Other.
We recommend using the dummy widget for the Product Page. Click the pencil icon next to the widget “Product Page”.
Use the Copy button to copy and paste the div onto your website. The Product Page dummy widget uses the More Like This strategy, which should work if event tracking is correctly installed.
TIP: Widgets are comprised of Recommendation strategies. There can be multiple strategies on a single widget. We recommend having fall back strategies so products are always displayed, especially in a scenario where there is not data for a recommendation i.e. a Recently Viewed strategy on the home page for a first time visitor. Typically the fallback strategy would be a featured item or best sellers.
Step 2: HTML Template & Configuration
Now that you can see Recommendations displaying on your site, you can revisit the workbench to modify the HTML and clean up styling. You have full control over the layout and styling via the HTML editor in the workbench. Also, there are configuration settings around the widget as well.
HTML Template
To edit the HTML Template, click the “Edit” button on the Edit Recommendation Widget screen.
When editing the HTML template the mustache rendering engine is used.
Fields available for use in the template can be viewed by hovering over the question mark icon.
The template layout is comprised of two parts:
The HTML that wraps all the items.
HTML that is repeated for every item. To define this repeated HTML, wrap it in the following tags: {{#items}} and {{/items}}
To output property with currency format please use {{$_prop_}}
To enable recommendation click tracking please include the following tag in the anchor html. This can be seen in the example below:
<a href="{{url}}" {{#tracking#}}>For boolean item properties some block conditions might be used.
{{#_bool_prop_}} {{/_bool_prop_}} – when value of property is true
{{^_bool_prop_}} {{/_bool_prop_}} – when value of property is false
You can see an example of the HTML template by looking at the dummy widget.
IMPORTANT!
When modifying a template layout, the following CSS classes are required.
The hawk CSS class “hawk-recommendations-list” should be on the html container that wraps all items.
The Hawk CSS class “hawk-recommendation-item” should be on the container that will wrap a single item.
Layout Configuration
Layouts are used when a new Recommendation widget is created. If you styled a preinstalled dummy widget, you can copy the template and paste into a new Layout to use on new widgets.
Layout Configuration is under Workbench >> Recommendations >> Layout
https://dev.hawksearch.net/settings/recommender/layout/