Templates

The Template describes a rendering format - a visual layout for products on your webpage. We provide out-of-the box templates with layouts like carousel, tabbed carousel and grid. You can choose one of these and configure it to suit your website style and needs.

Templates are required to be configured if you choose the No Code integration mode, where our script will do the rendering. If you choose to access search & recommendations using APIs and render them yourself on your website you can skip this section.

We provide an easy-to-use visual editor to format and style templates. Login to the app and go to the Journey Manager section. Choose the Templates option available within the Assets section in the top menu. Choose the preset you want and start formatting.

Customize using Code

We provide options to customize the template style by adding custom CSS using our inbuilt editor. Using this feature you can take full control over the way the templates look.

We also allow you to provide additional logic on the templates for adding custom CTAs and tie them to your website programmatically. Eg: You can place an AddtoCart CTA on the template and tie it to your own website cart functionality.

Add Custom Styles

Use our CSS Code editor available within templates section and make any custom changes you would like to the CSS of the template. The default css is available in the left pane of the editor, which can be referred to and modified.

There are different parts of the templates like template title, product card, navigation icons,footer etc where we provide specific classes to override the preset styles and you can add your own styles.

The following custom classes are available to maintain scoping inside templates:

Platform	Class name
Desktop	desktop_template_preview_<template_id>
Mobile	mobile_template_preview_<template_id>

General Rules:

• Add the desktop_template_preview_<template_id> and mobile_template_preview_<template_id> for increasing scope and precedence

• Add important tag to override the existing styles provided by us (visibile in the left panel in the css code editor)

Here are the class names that you can use to add styles for each template type/component: |

Carousel

Carousel with Tabs

Grid

Product Card

Example 1 - Customize Styles for the title

.desktop_template_preview_59 .vue-module-heading {font-family: inherit !important;font-size: 22px !important;font-weight: 800 !important;color: #000000 !important;display: -ms-flexbox !important;display: flex !important;justify-content: center !important; padding: 10px 0px 10px 0px !important; border-bottom: 2px solid #000;margin-bottom: 10px; }

Example 2 - Style for disabling navigation icon

.desktop_template_preview_59 .vue-nav-disabled {cursor: not-allowed !important; border:none !important; background-color: #fff !important; opacity:0.3 !important;}

Example 3 - Customize popup template

.desktop_template_preview_59 .vue-popup-container { height: auto;margin: auto;max-height: 90%;max-width: 85%;justify-content: center;transition: width 0.5s, height 0.5s, margin 0.5s; background-color: white;top: 0;left: 0;right: 0;bottom: 0;-webkit-box-shadow: 2px 0px 21px -9px rgba(0, 0, 0, 0.75); -moz-box-shadow: 2px 0px 21px -9px rgba(0, 0, 0, 0.75); box-shadow: 2px 0px 21px -9px rgba(0, 0, 0, 0.75); z-index: 9999;z-index: 9999;}

Add Custom CTA

Custom CTA(call-to-action) is a way of having your own customized actions on the module that we render on your site. Typical examples could be to trigger actions like Add To Cart, Add To Wishlist etc.

You will have the provision in the VueX tool to write JavaScript code to create CTA on every module that you create. This Javascript code will be executed when the module is being rendered on your site, which enables users to attach custom events or create actions on the rendered widget.

This is available for every section of the template like Header, layout and footer.

In the code editor you will have two constants: placementInfo, entityInfo in scope so that you can use them to interact with our template/module.

placementInfo: This holds information about the CSS selectors (class) of elements that belong to that respective entity , so that you can anchor your custom CTA. Please check Reference section for more details.

entityInfo: This holds information about the respective entity (product details, tabs info, header name).

Reference

The sample structure of the contents placementInfo and entityInfo for various entities:

Layout(Product Card)

HTML structure for a single product card

<!-- HTML structure of single product card --><div class="vue-product-card">   <!-- pdCard -->   <div class="vue-product-card-image-wrapper">      <!-- pdCardImgWrapper --         >               <a href="#">               <img class="vue-product-card-image" > <!-- pdImg -->      </a>   </div>   <div class="vue-product-card-text-wrapper">      <!-- pdTextWrapper -->      <div  class="vue-product-card-text vue-product-title">         <!--            pdText.title -->      </div>      <div  class="vue-product-card-text vue-product-price">         <!-- pdText.            price -->      </div>      <div class="vue-product-card-text vue-product-size">         <!-- pdText.            size -->      </div>   </div></div>

placementInfo

// css selectors of elements in product cardconst {    pdCard,    pdCardImgWrapper,    pdImg,    pdTextWrapper,    pdText: { title, price, size, ...restOfPdText }  } = placementInfo;const pdCardElement = document.querySelector(pdCard);

entityInfo

const {  actual_price,  brand,  color,  discount_percent,  discounted_price,  image_link,  link,  msd_ontology,  price,  product_id,  size,  title} = entityInfo;console.log(price) // will the give price of the current product

Tabs

placementInfo

const {tabContainer, // Tabs container selector <String>tab // Tab label container selector <String>} = placementInfo;

entityInfo

const { tabName, // has the tab name <String> productList // has products list of that tab <Array of Objects> each object in the array has single product entityInfo structure} = entityInfo;

Header

placementInfo

 const { headerContainer } = placementInfo;

entityInfo

const {  headerName, // has title name <String>  tabs,// list of tab objects <Array of Objects> each object has structure of single tab entityInfo  isTabbed, // says whether it has tabs or not <Boolean>  productList // present only if isTabbed = false <Array of Objects> each object in the array has single product entityInfo structure} = entityInfo;

Footer

placementInfo

 const { footerContainer } = placementInfo;

entityInfo

const {  tabs,//present only if isTabbed = true. list of tab objects <Array of Objects> each object has structure of single tab entityInfo  isTabbed, // says whether it has tabs or not <Boolean>  productList // present only if isTabbed = false <Array of Objects> each object in the array has single product entityInfo structure} = entityInfo;

Example Code for Add To Cart Button

Below is a sample code to create an Add To Cart button and place it below the Product text wrapper on the product cards.

const { pdTextWrapper } = placementInfo;const { product_id } = entityInfo;const pdTextWrapperEle = document.querySelector(pdTextWrapper);const addToCartWrapper = document.createElement("div");addToCartWrapper.className = 'wrapper-add-to-cart';const addToCartBtn = document.createElement("button");addToCartBtn.innerText = `Add To Cart`;addToCartBtn.className = 'vue-add-to-cart';addToCartBtn.onclick = (e) => {    // make call to your APIs    fecth(`https://<insert your API for addToCart>/${product_id}`)    .then(() => {        console.log(`product:${product_id} is added to cart`);        addToCartBtn.innerText = 'Added';    });};addToCartWrapper.appendChild(addToCartBtn);pdTextWrapperEle.appendChild(addToCartWrapper);

This code will be executed 'N' times, N being the total number of products in the template. Both constants placementInfo and entityInfo data vary accordingly on every iteration over the items.

The carousel rendered with the Add to Cart CTA will look like the below image.