Overriding Templates

It is possible to customize recommender layout or look and feel, while retaining most of the built-in functionality, simply by overriding default templates. Cartographer uses Handlebars (opens new window) for client-size templates.

In addition to overriding templates, it is possible to define new Handlebars helpers. See Optimizing Product Image Display (opens new window) section for a real life example.

Available Templates

TEMPLATE	PURPOSE
main	Main recommender shell
header	Custom content to be placed above other recommender content
footer	Custom footer content
product	Recommended product tile
productaddtocart	Product add to cart button
productimage	Product image container
productimagemedia	Product URL. See Optimizing Product Image Display section
productlink	Product detail page URL
productmatch	Indicator of recommendation fitness to user's answers to recommender questions
productname	Product name
productprice	Product pricing, including currency symbol
question	Question container
questiongroup	Question group (page) container
questiongroupafter v2	Holds content to be inserted after other page content
questiongroupbefore v2	Holds content to be inserted before any other page content
questiongroupmiddle v2	Holds content to be inserted after main page content, but prior to navigation bar
questionbreadcrumb v2	Renders single element of breadcrumbs bar
questionbreadcrumbs v2	Renders breadcrumbs bar
questiongroupnavigation	Renders page navigation bar
questiongroupnavigationafter v2	Holds content to be inserted after other page navigation content
questiongroupnavigationbefore v2	Holds content to be inserted before any other page navigation content
questiongrouptitle v2	Displays page title
questionfreetext	Free-text questions
questionmultiplechoice	General frame for multiple choice style questions
questionmultiplechoicebuttons	Renders multiple choice questions as buttons
questionmultiplechoicemultiselect	Renders multiple choice questions as a number of checkboxes
questionmultiplechoicedropdown	Renders multiple choice questions as a dropdown
questionmultiplechoicedropdownplaceholder	Placeholder text to be shown on dropdowns until user selects an option
questionmultiplechoiceslider	Renders multiple choice questions as value slider
questionslider	Renders slider type questions
recommendations	Product recommendations frame
recommendationsheader	Custom content to be placed above recommendations
recommendationsfooter	Custom content to be placed below recommendations
recommendationsgroup v2	Displays recommendations page content
recommendationsgroupfooter v2	Holds content to be inserted fatrother content on the results page
recommendationsgroupheader v2	Holds content to be inserted before other content on the results page
recommendationsgroupnavigation	Renders results page navigation bar
slidertick	Value button on slider bar

Examples

Linking to Product Detail Pages (PDP)

If recommendations are using basic product tile template that is included with Cartographer, one of the implementation steps is to enable correct PDP link generation. This is achieved by customizing productlink template as following (see example).

Generic product link template override example

 var recommender = new Drive.GuidedRecommender({
        // Override templates
        templates: {
            // Override product link template. product.externalId is available on the recommendation record and will contain master or child product ID.
            productlink: '/Product?pid={{product.externalId}}'
        }
    });

Use SFCC content functions to avoid hard-coding the URL and locale:

var recommender = new Drive.GuidedRecommender({
        // Override templates
        templates: {
            // Override product link template. product.externalId is available on the recommendation record and will contain master or child product ID.
            productlink: "$url('Product-Show', 'pid', '')${{product.externalId}}"
        }
    });

Use specific Magento URLs to avoid hard-coding the URL and locale:

 var recommender = new Drive.GuidedRecommender({
        // Override templates
        templates: {
            // Override product link template. product.externalId is available on the recommendation record and will contain master or child product ID.
            productlink: "/catalog/product/view/id/${{product.externalId}}"
        }
    });