On January 9, 2018 we introduced a new Recommendation creation flow to include a new template type. The new recommendation widget template merges the former two step process – item and widget- into single template design. The upgrade supports the old widget formats however, new widgets can only be made using the new Recommendation Widget template.
This articles outlines the steps required to build a new recommendation widget template based an old Widget & Item Template design.
Step One: Create a New Recommendation Widget
- In three different tabs, open a new widget template, open the recommendation widget and the item widget you would like to copy into the new format. If you’re not sure which item template is connected to this template, click “Edit” to expand the widget settings form, under the ‘Recommendation Item Template’ you will see the Item template name.
- Give your new Widget a name, and select ‘Recommendation widget’ as your Template Type. Click Next.
Step Two: Copy/paste the Recommendation Widget into the new template and create a new variable
- Copy the HTML, CSS and JS from the existing widget template and paste into the corresponding tabs of the new template.
- In the HTML tab, remove the old ‘Item Variable’ from the div and close tag. In the example below, the variable is called ‘Number of Items’
- Create an opening tag and a closing tag of your recommendation inside this div. Call it “Recommendations.”
Step three: Copy/paste the Recommendation item into the new one
- In between the opening and closing tag of the newly created ‘recommendation’ tag, paste the item template’s HTML.
- Copy and paste the CSS and JS of the item widget into the corresponding tabs. Paste them right after the CSS and JS of the widget template that you had already pasted.
Step four: Configure all variables
Make sure all variables are configured and are tied to the corresponding column of the feed.
Step five: Set up your strategy
- In the variable tab, Select the strategy and number of items to be displayed
- Add any additional variables, such as title to the variable tab.
- Save your template.