Skip to main content

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 this and configure to suit your website style and need.

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 Journey Manager section. Choose Templates option available within Assets section in the top menu. Choose the preset you want and start fomatting.

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:

PlatformClass name
Desktopdesktop_template_preview_<template_id>
Mobilemobile_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 DOM

Carousel with tabs#

Carousel with Tabs DOM

Grid#

Grid DOM

Product card#

Product Card DOM

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 contants 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 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.