On SFRA

This document outlines adding the Nosto tagging using Storefront Reference Architecture (SFRA). You can find an example SFRA implementation here.

Path for files below are based on SFRA so you must make sure you are adding the code snippets into the relevant cartridge. Sample files below are present in int_nosto_sfra cartridge for comparison purpose.

htmlHead.isml

Adds the Nosto include script to all pages (html head).

Path: app_storefront_base/cartridge/templates/default/common/htmlHead.isml

<iscomment>NOSTO Script Tag</iscomment>
<isinclude template="nostoHeaderScript"/>

image

homePage.isml

Adds page type tagging to the home page / front page of a store.

Path: app_storefront_base/cartridge/templates/default/home/homePage.isml

<isscript>
    var nostoHelper = require('int_nosto/cartridge/scripts/helpers/nostoHelper').getNostoHelper();
</isscript>
<isprint value="${nostoHelper.getHomePageTypeTag()}" encoding="off"/>

image

cart.isml

Adds page type tagging to the cart page.

Path: app_storefront_base/cartridge/templates/default/cart/cart.isml

<isscript>
    var nostoHelper = require('int_nosto/cartridge/scripts/helpers/nostoHelper').getNostoHelper();
</isscript>
<isprint value="${nostoHelper.getCartPageTypeTag()}" encoding="off"/>

image

pageFooter.isml

Adds cart tagging to all pages.

Path: app_storefront_base/cartridge/templates/default/components/footer/pageFooter.isml

<isscript>
    var nostoHelper = require('int_nosto/cartridge/scripts/helpers/nostoHelper').getNostoHelper();
</isscript>
<isprint value="${nostoHelper.getCartTag()}" encoding="off"/>

image

productDetails.isml

Adds product tagging to product detail pages.

Path: `app_storefront_base/cartridge/templates/default/product/productDetails.isml``

<isscript>
    var nostoHelper = require('int_nosto/cartridge/scripts/helpers/nostoHelper').getNostoHelper();
</isscript>
<isprint value="${nostoHelper.getProductTags(pdict.product.id)}" encoding="off"/>

image

bundleDetails.isml

Adds product tagging to product bundle pages.

Path: app_storefront_base/cartridge/templates/default/product/bundleDetails.isml

<isscript>
    var nostoHelper = require('int_nosto/cartridge/scripts/helpers/nostoHelper').getNostoHelper();
</isscript>
<isprint value="${nostoHelper.getProductTags(pdict.product.id)}" encoding="off"/>

image

setDetails.isml

Adds product tagging to product set pages.

Path: app_storefront_base/cartridge/templates/default/product/setDetails.isml

<isscript>
    var nostoHelper = require('int_nosto/cartridge/scripts/helpers/nostoHelper').getNostoHelper();
</isscript>
<isprint value="${nostoHelper.getProductTags(pdict.product.id)}" encoding="off"/>

image

searchResults.isml

Adds category tagging to search results page.

Path: app_storefront_base/cartridge/templates/default/search/searchResults.isml

<isscript>
    var nostoHelper = require('int_nosto/cartridge/scripts/helpers/nostoHelper').getNostoHelper();
</isscript>
<isprint value="${nostoHelper.getCategoryTags(pdict.productSearch.category.id)}" encoding="off"/>

image

catLanding.isml

Adds category tagging into category pages.

Path: app_storefront_base/cartridge/templates/default/rendering/category/catLanding.isml

<isscript>
    var nostoHelper = require('int_nosto/cartridge/scripts/helpers/nostoHelper').getNostoHelper();
</isscript>
<isprint value="${nostoHelper.getCategoryTags(pdict.productSearch.category.id)}" encoding="off"/>

image

confirmation.isml

Adds order tagging to order confirmation page.

Path: app_storefront_base/cartridge/templates/default/checkout/confirmation/confirmation.isml

<isscript>
    var nostoHelper = require('int_nosto/cartridge/scripts/helpers/nostoHelper').getNostoHelper();
</isscript>
<isprint value="${nostoHelper.getOrderTags(pdict.order.orderNumber)}" encoding="off"/>

image

page.isml

Adds customer tagging to all pages.

Path: app_storefront_base/cartridge/templates/default/common/layout/page.isml

<isscript>
   var nostoHelper = require('int_nosto/cartridge/scripts/helpers/nostoHelper').getNostoHelper();
</isscript>
<isprint value="${nostoHelper.getCustomerTags()}" encoding="off"/>

image

checkout.isml

Adds customer tagging to checkout pages.

Path: app_storefront_base/cartridge/templates/default/common/layout/checkout.isml

<isscript>
    var nostoHelper = require('int_nosto/cartridge/scripts/helpers/nostoHelper').getNostoHelper();
</isscript>
<isprint value="${nostoHelper.getCustomerTags()}" encoding="off"/>

image