Building a Recommendation Template Based on an Old format

Follow

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

  1. 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.
    rec_widget_step1_1.png
  2. Give your new Widget a name, and select ‘Recommendation widget’ as your Template Type. Click Next.
    rec_widget_step1_2.png


Step Two: Copy/paste the Recommendation Widget into the new template and create a new variable

  1. Copy the HTML, CSS and JS from the existing widget template and paste into the corresponding tabs of the new template.
  2. 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’rec_widget_step2_2.png
  3. Create an opening tag and a closing tag of your recommendation inside this div. Call it “Recommendations.”
    rec_widget_step2_3.png


Step three: Copy/paste the Recommendation item into the new one

  1. In between the opening and closing tag of the newly created ‘recommendation’ tag, paste the item template’s HTML.
    rec_widget_step3.png
  2. 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.

rec_widget_step4.png


Step five: Set up your strategy

  1. In the variable tab, Select the strategy and number of items to be displayed
    rec_widget_step5.png
  2. Add any additional variables, such as title to the variable tab.
  3. Save your template.