Product template

product-tile product-tile

Product template is the base for using Owlcure Web Personalizer. You should create the template to look as similar as possible, like the product in the product listing. Web personalizer use this template to switch static product listings for personalized ones. It is usually used for homepage recommendations, related products on the product detail page, up-sell products in cart popups, etc. You can create multiple templates in the Owlcure App. When you are creating a new personalized web layer, you can choose which template to use.


Templates are creating in twig template system. The template should design one product tile. You can use all the construction from the twig, like if-else conditions, for cycles, creating variables, etc. In the template, you can use this dataset:

{ "item" : { "item_id": "123001", "title": "Owlcure T-shirt", "href": "https://owlcure.com/shirts/123", "image_src": "https://owlcure.com/images/shirt-123", "category_path": "Clothes | Men | T-shirts", "category_path_multi": [ "Clothes | Men | T-shirts", "Special offers | Daily deals" ], "manufacturer": "Adidas", "price": "19.90$", "price_origin": "29.90$", "inventory_quantity": 14, "price_compare": 19.90, "price_origin_compare": 29.90, "tags": ["Best sell"], "params": { "SIZE": "M", "MATERIAL": "Cotton" } }, "item_order":2 }

In the variable item.tags, you will find array of tags, which you have specified in the product's feed as product parameter with PARAM_NAME: WEB.

Example of the product template:

<div class="item col-4 col-6--tablet col-12--mobile"> <a href="{{ item.href }}" oa-panel-event="click" oa-panel-action="product-click" oa-product-id="{{ item.item_id }}" > <img class="item-img" src="{{ item.image_src }}" alt="{{ item.title }}" /> <div class="item-tags"> {% for tag in item.tags %} {% if tag == 'New' %} <div class="item-tag item-tag--new"></div> {% elseif tag == 'Gift' %} <div class="item-tag item-tag--gift"></div> {% endif %} {% endfor %} </div> </a> <a href="{{ item.href }}" oa-panel-event="click" oa-panel-action="product-click" oa-product-id="{{ item.item_id }}" > <div class="item-title">{{ item.title }}</div> </a> {% if item.price_origin_compare is not empty and item.price_origin_compare != 0 and item.price_origin_compare != item.price_compare %} <div class="item-price-origin">{{ item.price_origin }}</div> <div class="item-price">{{ item.price }}</div> {% else %} <div class="item-price">{{ item.price }}</div> {% endif %} {% if item.inventory_quantity is not empty and item.inventory_quantity > 0 %} <div class="item-in-stock">In stock</div> {% else %} <div class="item-sold-out">Sold out</div> {% endif %} <a class="btn btn-add-to-cart" data-product-id="{{ item.item_id }}" oa-panel-event="click" oa-panel-action="product-cart" oa-product-id="{{ item.item_id }}" > Add to cart </a> {% if item_order % 3 == 2 %} <div class="item-clear"></div> {% endif %} </div>

Important Notice

As you see, all hrefs in template should be marked with attributes oa-panel-event with value click, oa-panel-action with value product-click for href to product detail page, or product-cart for href which adds item into cart. The last atributte should be oa-product-id with value {{ item.item_id }}. These attributes can be used on all clickable elements. They are necessary for working with Owlcure Analytics and evaluating of web layer's performance.

If the product template needs to run some javascript code (for example, for carousels), you can add a javascript code snippet when creating the new personalized web layer. The snippet is called right after the web layer is rendered into your website.