This use case presents cross-sell recommendations based on the customer's most recently purchased product. The section displays the last purchased item (or items) together with complementary product recommendations from different categories. Recommended products are grouped into categories and presented as tabs. This allows users to browse complementary items by switching between category views instead of scrolling through a single list. The goal is to make post-purchase recommendations easier to explore while maintaining contextual relevance to the last transaction. The setup is based on three elements: - an aggregate identifying the most recently purchased product, - a product catalog to retrieve product attributes and display information, - cross-sell recommendation models generating complementary items for each purchased product.
Quantity in stock
## Prerequisites --- - Implement a [tracking code](/developers/web/installation-and-configuration) on your website or application. - Implement [transaction events](/developers/web/transactions-sdk) with product details. - Configure the [AI recommendation engine](/docs/settings/configuration/ai-engine-configuration/engine-configuration-for-recommendations) with a cross-sell model enabled. - Maintain an updated product [catalog/feed](/docs/ai-hub/recommendations-v2/item-feed-requirements). To display purchased products and recommendations correctly: - Remember to have **category** attribute in the catalog. - Verify that the product catalog contains identifiers consistent with transaction events. - Confirm that product attributes such as name, image, price, and category are available. - Make sure the feed is regularly updated. This enables proper rendering of both the purchased product and recommended items. ## Process --- 1. Create [an aggregate](/use-cases/cross-sell-with-tabs#create-an-aggregate). 2. Create [cross sell recommendation](/use-cases/cross-sell-with-tabs#create-cross-sell-recommendation). 3. Create [dynamic content campaign](/use-cases/cross-sell-with-tabs#create-dynamic-content-campaign). ## Create an aggregate --- In the first part of the process, identify the most recently seen product for each customer, creating an aggregate. This aggregate will be used later as context for recommendations. 1. Go to **Behavioral Data Hub > Live Aggregates > Create aggregate**. 2. Select **Profile aggregate**. 3. Enter a name, for example `Last seend products`. 4. Set **Analyze profiles by** to **Last Multi**. 5. Set up the size as **3 items**. 5. Select the **page.visit** event. 6. As the event parameter, select the product identifier (for example `product:reatiler_part_no`). 7. Click **+ and where** and choose the parameter which cointains product identifier (for example `product:reatiler_part_no`). 8. As the operator set up Boolean: **is true.** 7. Set the date range to **Lifetime**. 8. Save the aggregate.
Quantity in stock
## Create cross sell recommendation --- Next, configure a recommendation model that returns cross-sell products. 1. Go to AI Hub icon **AI Hub > (AI Recommendations) Models > Add recommendation**. 2. Enter the name of the recommendation (it is only visible on the list of recommendations). 3. In the **Type & Items Feed** section, click **Define**. 4. From the **Items Feed** dropdown list, select an item feed. 5. In the **Type** section, choose the **Cross-sell** recommendation type. 6. Confirm the settings by clicking **Apply**. 7. In the **Items** section, click **Define**. 2. Define the minimum and maximum number of items that will be recommended to the customer in each slot - here it will be from 8 to 20 items. 3. Define [Static filters](/docs/ai-hub/recommendations-v2/creating-recommendation-campaign#static-filters). 4. In our case, in the **Static filter** section, click **Define filter**. 5. Select **Visual Builder**. 6. Click **Select value**. 5. Choose **category**. 6. As an operator, choose **is defined**. 4. Confirm by clicking **Apply**.
Quantity in stock
7. In the **Slots and items ordering** section, click **Define**. 2. Choose the option **Arrange items ignoring slots and their order**. 4. Confirm by clicking **Apply**. 8. Optionally, you can define the **Boosting** factors and settings in the **Additional settings** sections. 9. In the **Additional settings** section, choose **Exclude already bought products**. If your company sells replenishable products, you can set exclusion for specific number of days, for example, exclude products bought not later than 30 days ago. 9. In the right upper corner, click **Save**. 10. Copy the recommendation ID from its URL to use it in [dynamic content campaign](#create-dynamic-content-campaign). ## Create dynamic content campaign --- In this part of the process create the dynamic content witha carousel with tabs, presenting cross-sell products from each category, which might be bought with the one of the 3 last seen products by the customer. 1. Go to **Experience Hub > Dynamic content > Create new**. 2. Enter the name of the dynamic content. 3. Choose the **Insert Object** type. 4. In the **Audience** section, select **Everyone**. ### Define content 1. In the **Content** section click **Create message** and choose the code editor. 2. You can use this basic code presented below to define the basic assumptions and dependencies in JavaScript so that dynamic content works correctly. You can use a basic HTML code, but **remember to replace the ID of [the aggregate from the previous step](#create-an-aggregate) as well as the ID of the [AI recommendation](#create-cross-sell-recommendation).** You can style this campaign according to your own business needs. HTML section details: - Get last boght products - Get recommendations for each of the last bought products - For each last bought product: get info about product from catalog - Group products for each recommendation by categories (lowest level) - Build tabs - the first is active by default - Display recommended products - Add styles controlling the tabs
Check the HTML code
<!-- 1. Get last boght products --> {% set lastBoughtProducts = []%} {% aggregate 245aa662-d642-352e-acef-18198604ac13 %} {%- for item in aggregate_result -%} {% do lastBoughtProducts.append(item)%} {%- endfor -%} {% endaggregate %} <!-- 2. Get recommendations for each of the last bpugt products --> {% set productsWithCrossSell = [] %} {%- for p in lastBoughtProducts -%} {% set itemContext = []%} {% do itemContext.append(p)%} {% recommendations3 campaignId=VR6SOFcDEbAg itemsIds=itemContext %} {% set prodObj = { "id": p, "crossSell": recommended_products3 }%} {%do productsWithCrossSell.append(prodObj)%} {% endrecommendations3 %} {%- endfor -%} <div class="cross-sell-wrapper unique-identifier"> <div class="left-carousel-wrapper"> <!-- 3. For each last bought product: get info about product from catalog --> <div class="snrs-left-carousel-header">Last bought</div> <div class="left-carousel my-main-carousel"> {% for product in productsWithCrossSell %} {% set key = product.id %} {% catalogitemv2.store-1(key) allowEmpty=true %} {% set object = catalog_result %} {% set name = object.name %} {% set img = object.image %} <div class="carousel-item" data-product-id="{{ product.id }}"> <img src="{{img}}""> <!-- <p class="snrs-prod-title">{{name}}</p> --> </div> {% endcatalogitemv2 %} {% endfor %} </div> </div> <div class="right-tabs-wrapper"> <!-- 4. Group products form each reco by categories (lowest level) --> {% for product in productsWithCrossSell %} {% set prodCategories = [] %} {% set categoryGroups = [] %} {% for p in product.crossSell %} {% set category = p.category|split(">")|last %} {% if prodCategories is not containing category %} {% do prodCategories.append(category) %} {% endif %} {% endfor %} {% for category in prodCategories %} {% set prodsArray = [] %} {% for p in product.crossSell %} {% set cat = p.category|split(">")|last %} {% if category == cat %} {# {% do prodsArray.append(p.itemId) %}#} {% do prodsArray.append(p) %} {% endif %} {% endfor %} {% set categoryWithProds = { "category": category, "products": prodsArray } %} {% do categoryGroups.append(categoryWithProds) %} {% endfor %} <!-- 5. Build tabs - the first is active by default --> <div class="product-tabs" data-product-id="{{ product.id }}"> {% set rangeMax = categoryGroups|length + 1%} {% for i in range(1, rangeMax) %} <input type="radio" name="tab-{{ product.id }}" id="tab-{{ product.id }}-{{ i }}" {% if i == 1 %}checked{% endif %}> {% endfor %} <div class="tab-labels"> {% for catGroup in categoryGroups %} {% set i = loop.index %} <label for="tab-{{ product.id }}-{{ i }}" class="tab-label">{{ catGroup.category }}</label> {% endfor %} </div> <!-- 6. Display reco products --> <div class="tab-contents"> {% for catGroup in categoryGroups %} {% set i = loop.index %} <div class="tab-content"> <div class="products-carousel"> {#{% for itemId in catGroup.products %} <div class="cross-sell-item"> Produkt ID: {{ itemId }} </div> {% endfor %}#} {% for p in catGroup.products %} <a href="{{p.productUrl}}" class="cross-sell-item"> <img src="{{p.image}}"> <p class="snrs-prod-title">{{p.name}}</p> <p class="snrs-prod-price">${{p.price}}</p> </a> {% endfor %} </div> </div> {% endfor %} </div> </div> <!-- 7. Styles controlling the tabs --> <style> {% for product in productsWithCrossSell %} {% set prodCategories = [] %} {% for p in product.crossSell %} {% set category = p.category|split(">")|last %} {% if prodCategories is not containing category %} {% do prodCategories.append(category) %} {% endif %} {% endfor %} {% set rangeMax = categoryGroups|length + 1%} {% for i in range(1, rangeMax) %} #tab-{{ product.id }}-{{ i }}:checked ~ .tab-labels .tab-label:nth-of-type({{ i }}), #tab-{{ product.id }}-{{ i }}:checked ~ .tab-contents .tab-content:nth-of-type({{ i }}) { display: block; } {% endfor %} {% endfor %} </style> {% endfor %} </div> </div> {% endfor %}
JS section details: - Add carousel library - Build carousel for products based on the aggregate result - Sync tabs with carousels - Init recomendation carousels
Check the JS code
(function(){ 'use strict'; // 1. Add carousel library var tns=function(){function e(){for(var e,t,n,i=arguments[0]||{},a=1,r=arguments.length;a<r;a++)if(null!==(e=arguments[a]))for(t in e)n=e[t],i!==n&&void 0!==n&&(i[t]=n);return i}function t(e){return["true","false"].indexOf(e)>=0?JSON.parse(e):e}function n(e,t,n){return n&&localStorage.setItem(e,t),t}function i(){var e=window.tnsId;return window.tnsId=e?e+1:1,"tns"+window.tnsId}function a(){var e=document,t=e.body;return t||(t=e.createElement("body"),t.fake=!0),t}function r(e){var t="";return e.fake&&(t=P.style.overflow,e.style.background="",e.style.overflow=P.style.overflow="hidden",P.appendChild(e)),t}function o(e,t){e.fake&&(e.remove(),P.style.overflow=t,P.offsetHeight)}function s(e){var t=document.createElement("style");return e&&t.setAttribute("media",e),document.querySelector("head").appendChild(t),t.sheet?t.sheet:t.styleSheet}function l(e,t,n,i){"insertRule"in e?e.insertRule(t+"{"+n+"}",i):e.addRule(t,n,i)}function c(e){return("insertRule"in e?e.cssRules:e.rules).length}function u(e,t){return Math.atan2(e,t)*(180/Math.PI)}function f(e,t){var n=!1,i=Math.abs(90-Math.abs(e));return i>=90-t?n="horizontal":i<=t&&(n="vertical"),n}function d(e,t){return e.className.indexOf(t)>=0}function v(e,t){d(e,t)||(e.className+=" "+t)}function h(e,t){d(e,t)&&(e.className=e.className.replace(t,""))}function p(e,t){return e.hasAttribute(t)}function m(e,t){return e.getAttribute(t)}function y(e){return void 0!==e.item}function g(e,t){if(e=y(e)||e instanceof Array?e:[e],"[object Object]"===Object.prototype.toString.call(t))for(var n=e.length;n--;)for(var i in t)e[n].setAttribute(i,t[i])}function b(e,t){e=y(e)||e instanceof Array?e:[e],t=t instanceof Array?t:[t];for(var n=t.length,i=e.length;i--;)for(var a=n;a--;)e[i].removeAttribute(t[a])}function x(e){e.style.cssText=""}function T(e){p(e,"hidden")||g(e,{hidden:""})}function E(e){p(e,"hidden")&&b(e,"hidden")}function C(e){return e.offsetWidth>0&&e.offsetHeight>0}function w(e){return"boolean"==typeof e.complete?e.complete:"number"==typeof e.naturalWidth?0!==e.naturalWidth:void 0}function N(e){for(var t=document.createElement("fakeelement"),n=(e.length,0);n<e.length;n++){var i=e[n];if(void 0!==t.style[i])return i}return!1}function O(e,t){var n=!1;return/^Webkit/.test(e)?n="webkit"+t+"End":/^O/.test(e)?n="o"+t+"End":e&&(n=t.toLowerCase()+"end"),n}function D(e,t){for(var n in t){var i=("touchstart"===n||"touchmove"===n)&&W;e.addEventListener(n,t[n],i)}}function k(e,t){for(var n in t){var i=["touchstart","touchmove"].indexOf(n)>=0&&W;e.removeEventListener(n,t[n],i)}}function A(){return{topics:{},on:function(e,t){this.topics[e]=this.topics[e]||[],this.topics[e].push(t)},off:function(e,t){if(this.topics[e])for(var n=0;n<this.topics[e].length;n++)if(this.topics[e][n]===t){this.topics[e].splice(n,1);break}},emit:function(e,t){this.topics[e]&&this.topics[e].forEach(function(e){e(t)})}}}function M(e,t,n,i,a,r,o){function s(){r-=l,u+=f,e.style[t]=n+u+c+i,r>0?setTimeout(s,l):o()}var l=Math.min(r,10),c=a.indexOf("%")>=0?"%":"px",a=a.replace(c,""),u=Number(e.style[t].replace(n,"").replace(i,"").replace(c,"")),f=(a-u)/r*l;setTimeout(s,l)}Object.keys||(Object.keys=function(e){var t=[];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.push(n);return t}),function(){"use strict";"remove"in Element.prototype||(Element.prototype.remove=function(){this.parentNode&&this.parentNode.removeChild(this)})}();var P=document.documentElement,I=!1;try{var S=Object.defineProperty({},"passive",{get:function(){I=!0}});window.addEventListener("test",null,S)}catch(e){}var W=!!I&&{passive:!0},H=navigator.userAgent,L=!0,z={};try{z=localStorage,z.tnsApp&&z.tnsApp!==H&&["tC","tSP","tMQ","tTf","tTDu","tTDe","tADu","tADe","tTE","tAE"].forEach(function(e){z.removeItem(e)}),z.tnsApp=H}catch(e){L=!1}localStorage||(z={});var B=document,R=window,j={ENTER:13,SPACE:32,PAGEUP:33,PAGEDOWN:34,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40},q=t(z.tC)||n("tC",function(){var e=document,t=a(),n=r(t),i=e.createElement("div"),s=!1;t.appendChild(i);try{for(var l,c=["calc(10px)","-moz-calc(10px)","-webkit-calc(10px)"],u=0;u<3;u++)if(l=c[u],i.style.width=l,10===i.offsetWidth){s=l.replace("(10px)","");break}}catch(e){}return t.fake?o(t,n):i.remove(),s}(),L),G=t(z.tSP)||n("tSP",function(){var e,t,n=document,i=a(),s=r(i),l=n.createElement("div"),c=n.createElement("div");return l.style.cssText="width: 10px",c.style.cssText="float: left; width: 5.5px; height: 10px;",e=c.cloneNode(!0),l.appendChild(c),l.appendChild(e),i.appendChild(l),t=c.offsetTop!==e.offsetTop,i.fake?o(i,s):l.remove(),t}(),L),F=t(z.tMQ)||n("tMQ",function(){var e,t=document,n=a(),i=r(n),s=t.createElement("div"),l=t.createElement("style"),c="@media all and (min-width:1px){.tns-mq-test{position:absolute}}";return l.type="text/css",s.className="tns-mq-test",n.appendChild(l),n.appendChild(s),l.styleSheet?l.styleSheet.cssText=c:l.appendChild(t.createTextNode(c)),e=window.getComputedStyle?window.getComputedStyle(s).position:s.currentStyle.position,n.fake?o(n,i):s.remove(),"absolute"===e}(),L),U=t(z.tTf)||n("tTf",N(["transform","WebkitTransform","MozTransform","msTransform","OTransform"]),L),X=t(z.tTDu)||n("tTDu",N(["transitionDuration","WebkitTransitionDuration","MozTransitionDuration","OTransitionDuration"]),L),V=t(z.tTDe)||n("tTDe",N(["transitionDelay","WebkitTransitionDelay","MozTransitionDelay","OTransitionDelay"]),L),Y=t(z.tADu)||n("tADu",N(["animationDuration","WebkitAnimationDuration","MozAnimationDuration","OAnimationDuration"]),L),K=t(z.tADe)||n("tADe",N(["animationDelay","WebkitAnimationDelay","MozAnimationDelay","OAnimationDelay"]),L),Q=t(z.tTE)||n("tTE",O(X,"Transition"),L),J=t(z.tAE)||n("tAE",O(Y,"Animation"),L);F||(G=!1);var Z=function(t){function n(){return R.innerWidth||B.documentElement.clientWidth||B.body.clientWidth}function a(e){var t;do{t=e.clientWidth,e=e.parentNode}while(!t);return t}function r(e){var n=t[e];return!n&&gt&&yt.indexOf(e)>=0&&gt.forEach(function(t){mt[t][e]&&(n=!0)}),n}function o(e,n){n=n?n:xt;var i,a={slideBy:"page",edgePadding:!1,autoHeight:!0};if(!tt&&e in a)i=a[e];else if("items"===e&&o("fixedWidth"))i=Math.floor(pt/(o("fixedWidth")+o("gutter")));else if("autoHeight"===e&&"outer"===kt)i=!0;else if(i=t[e],gt&&yt.indexOf(e)>=0)for(var r=0,s=gt.length;r<s;r++){var l=gt[r];if(!(n>=l))break;e in mt[l]&&(i=mt[l][e])}return"slideBy"===e&&"page"===i&&(i=o("items")),i}function y(e){return q?q+"("+100*e+"% / "+qt+")":100*e/qt+"%"}function N(e,t,n){var i="";if(e){var a=e;t&&(a+=t),i=n?"margin: 0px "+(pt%(n+t)+t)/2+"px":lt?"margin: 0 "+e+"px 0 "+a+"px;":"padding: "+a+"px 0 "+e+"px 0;"}else if(t&&!n){var r="-"+t+"px",o=lt?r+" 0 0":"0 "+r+" 0";i="margin: 0 "+o+";"}return i}function O(e,t,n){return e?(e+t)*qt+"px":q?q+"("+100*qt+"% / "+n+")":100*qt/n+"%"}function P(e,t,n){var i="";if(lt){if(i="width:",e)i+=e+t+"px";else{var a=tt?qt:n;i+=q?q+"(100% / "+a+")":100/a+"%"}i+=ln+";"}return i}function I(e){var t="";if(e!==!1){t=(lt?"padding-":"margin-")+(lt?"right":"bottom")+": "+e+"px;"}return t}function S(e){e=e||R.event,clearTimeout(Ct),Ct=setTimeout(function(){if(st){var t=n();xt!==t&&(xt=t,W(),"outer"===kt&&en.emit("outerResized",Qe(e)))}},100)}function W(){var e=bt,t=Kt,n=Ot,i=sn;if(pt=a(ct),ot=a(ut),gt&&H(),e!==bt||Pt){var r=It,s=Lt,u=Pt,f=Mt,d=At,v=rn;if(Ot=o("items"),Dt=o("slideBy"),rn=o("disable"),sn=!!rn||!!on&&ht<=Ot,Ot!==n&&(Zt=qt-Ot,si()),rn!==v&&$(rn),sn!==i&&(sn&&(Kt=tt?jt:0),L()),e!==bt&&(St=o("speed"),Mt=o("edgePadding"),At=o("gutter"),Pt=o("fixedWidth"),rn||Pt===u||pe(),(Lt=o("autoHeight"))!==s&&(Lt||(ut.style.height=""))),It=!sn&&o("arrowKeys"),It!==r&&(It?D(B,vn):k(B,vn)),mn){var h=Dn,p=kn;Dn=!sn&&o("controls"),kn=o("controlsText"),Dn!==h&&(Dn?E(An):T(An)),kn!==p&&(Cn.innerHTML=kn[0],wn.innerHTML=kn[1])}if(yn){var m=Pn;Pn=!sn&&o("nav"),Pn!==m&&(Pn?(E(In),Ke()):T(In))}if(xn){var y=ti;ti=!sn&&o("touch"),ti!==y&&tt&&(ti?D(ft,hn):k(ft,hn))}if(Tn){var g=ri;ri=!sn&&o("mouseDrag"),ri!==g&&tt&&(ri?D(ft,pn):k(ft,pn))}if(bn){var b=Un,x=Kn,C=Jn,w=Yn;if(sn?Un=Kn=Jn=!1:(Un=o("autoplay"),Un?(Kn=o("autoplayHoverPause"),Jn=o("autoplayResetOnVisibility")):Kn=Jn=!1),Yn=o("autoplayText"),Xn=o("autoplayTimeout"),Un!==b&&(Un?(Qn&&E(Qn),jn||Gn||De()):(Qn&&T(Qn),jn&&ke())),Kn!==x&&(Kn?D(ft,fn):k(ft,fn)),Jn!==C&&(Jn?D(B,dn):k(B,dn)),Qn&&Yn!==w){var A=Un?1:0,M=Qn.innerHTML,S=M.length-w[A].length;M.substring(S)===w[A]&&(Qn.innerHTML=M.substring(0,S)+Yn[A])}}if(!F){if(sn||Mt===f&&At===d||(ut.style.cssText=N(Mt,At,Pt)),tt&&lt&&(Pt!==u||At!==d||Ot!==n)&&(ft.style.width=O(Pt,At,Ot)),lt&&(Ot!==n||At!==d||Pt!=u)){var W=P(Pt,At,Ot)+I(At);zt.removeRule(c(zt)-1),l(zt,"#"+an+" > .tns-item",W,c(zt))}Pt||Kt!==t||ye(0)}Kt!==t&&(en.emit("indexChanged",Qe()),ye(0),Qt=Kt),Ot!==n&&(ne(),se(),ee(),navigator.msMaxTouchPoints&&re())}lt||rn||(ae(),Ve(),pe()),z(!0),ee()}function H(){bt=0,gt.forEach(function(e,t){xt>=e&&(bt=t+1)})}function L(){var e="tns-transparent";if(sn){if(!Nt){if(Mt&&(ut.style.margin="0px"),jt)for(var t=jt;t--;)tt&&v(vt[t],e),v(vt[qt-t-1],e);Nt=!0}}else if(Nt){if(Mt&&!Pt&&F&&(ut.style.margin=""),jt)for(var t=jt;t--;)tt&&h(vt[t],e),h(vt[qt-t-1],e);Nt=!1}}function z(e){Pt&&Mt&&(sn||pt<=Pt+At?"0px"!==ut.style.margin&&(ut.style.margin="0px"):e&&(ut.style.cssText=N(Mt,At,Pt)))}function $(e){var t=vt.length;if(e){if(zt.disabled=!0,ft.className=ft.className.replace(nn.substring(1),""),x(ft),Ht)for(var n=jt;n--;)tt&&T(vt[n]),T(vt[t-n-1]);if(lt&&tt||x(ut),!tt)for(var i=Kt,a=Kt+ht;i<a;i++){var r=vt[i];x(r),h(r,nt),h(r,rt)}}else{if(zt.disabled=!1,ft.className+=nn,lt||ae(),pe(),Ht)for(var n=jt;n--;)tt&&E(vt[n]),E(vt[t-n-1]);if(!tt)for(var i=Kt,a=Kt+ht;i<a;i++){var r=vt[i],o=i<Kt+Ot?nt:rt;r.style.left=100*(i-Kt)/Ot+"%",v(r,o)}}}function _(){if(Bt&&!rn){var e=Kt,t=Kt+Ot;for(Mt&&(e-=1,t+=1);e<t;e++)[].forEach.call(vt[e].querySelectorAll(".tns-lazy-img"),function(e){var t={};t[Q]=function(e){e.stopPropagation()},D(e,t),d(e,"loaded")||(e.src=m(e,"data-src"),v(e,"loaded"))})}}function ee(){if(Lt&&!rn){for(var e=[],t=Kt,n=Kt+Ot;t<n;t++)[].forEach.call(vt[t].querySelectorAll("img"),function(t){e.push(t)});0===e.length?ie():te(e)}}function te(e){e.forEach(function(t,n){w(t)&&e.splice(n,1)}),0===e.length?ie():setTimeout(function(){te(e)},16)}function ne(){_(),oe(),de(),Ke(),le()}function ie(){for(var e,t=[],n=Kt,i=Kt+Ot;n<i;n++)t.push(vt[n].offsetHeight);e=Math.max.apply(null,t),ut.style.height!==e&&(X&&ve(St),ut.style.height=e+"px")}function ae(){Et=[0];for(var e,t=vt[0].getBoundingClientRect().top,n=1;n<qt;n++)e=vt[n].getBoundingClientRect().top,Et.push(e-t)}function re(){ct.style.msScrollSnapPointsX="snapInterval(0%, "+100/Ot+"%)"}function oe(){for(var e=Kt+Math.min(ht,Ot),t=qt;t--;){var n=vt[t];t>=Kt&&t<e?p(n,"tabindex")&&(g(n,{"aria-hidden":"false"}),b(n,["tabindex"]),v(n,En)):(p(n,"tabindex")||g(n,{"aria-hidden":"true",tabindex:"-1"}),d(n,En)&&h(n,En))}}function se(){if(!tt){for(var e=Kt+Math.min(ht,Ot),t=qt;t--;){var n=vt[t];t>=Kt&&t<e?(v(n,"tns-moving"),n.style.left=100*(t-Kt)/Ot+"%",v(n,nt),h(n,rt)):n.style.left&&(n.style.left="",v(n,rt),h(n,nt)),h(n,it)}setTimeout(function(){[].forEach.call(vt,function(e){h(e,"tns-moving")})},300)}}function le(){if(Pn&&(Ln=Hn!==-1?Hn:Kt%ht,Hn=-1,Ln!==zn)){var e=Mn[zn],t=Mn[Ln];g(e,{tabindex:"-1","aria-selected":"false"}),g(t,{tabindex:"0","aria-selected":"true"}),h(e,Bn),v(t,Bn)}}function ce(e){return"button"===e.nodeName.toLowerCase()}function ue(e){return"true"===e.getAttribute("aria-disabled")}function fe(e,t,n){e?t.disabled=n:t.setAttribute("aria-disabled",n.toString())}function de(){if(Dn&&!Wt&&!Ht){var e=Nn?Cn.disabled:ue(Cn),t=On?wn.disabled:ue(wn),n=Kt===Jt,i=!Wt&&Kt===Zt;n&&!e&&fe(Nn,Cn,!0),!n&&e&&fe(Nn,Cn,!1),i&&!t&&fe(On,wn,!0),!i&&t&&fe(On,wn,!1)}}function ve(e,t){e=e?e/1e3+"s":"",t=t||ft,t.style[X]=e,tt||(t.style[Y]=e),lt||(ut.style[X]=e)}function he(){var e;if(lt)if(Pt)e=-(Pt+At)*Kt+"px";else{var t=U?qt:Ot;e=100*-Kt/t+"%"}else e=-Et[Kt]+"px";return e}function pe(e){e||(e=he()),ft.style[Ut]=Xt+e+Vt}function me(e,t,n,i){for(var a=e,r=e+Ot;a<r;a++){var o=vt[a];i||(o.style.left=100*(a-Kt)/Ot+"%"),X&&ve(St,o),at&&V&&(o.style[V]=o.style[K]=at*(a-e)/1e3+"s"),h(o,t),v(o,n),i&&Rt.push(o)}}function ye(e,t){isNaN(e)&&(e=St),jn&&!C(ft)&&(e=0),X&&ve(e),li(e,t)}function ge(e,t){Ft&&si(),(Kt!==Qt||t)&&(en.emit("indexChanged",Qe()),en.emit("transitionStart",Qe()),jn&&e&&["click","keydown"].indexOf(e.type)>=0&&ke(),$t=!0,ye())}function be(e){return e.toLowerCase().replace(/-/g,"")}function xe(e){if(tt||$t){if(en.emit("transitionEnd",Qe(e)),!tt&&Rt.length>0)for(var t=0;t<Ot;t++){var n=Rt[t];n.style.left="",X&&ve(0,n),at&&V&&(n.style[V]=n.style[K]=""),h(n,it),v(n,rt)}if(!e||!tt&&e.target.parentNode===ft||e.target===ft&&be(e.propertyName)===be(Ut)){if(!Ft){var i=Kt;si(),Kt!==i&&(en.emit("indexChanged",Qe()),X&&ve(0),pe())}ee(),"inner"===kt&&en.emit("innerLoaded",Qe()),$t=!1,zn=Ln,Qt=Kt}}}function Te(e,t){if(!sn)if("prev"===e)Ee(t,-1);else if("next"===e)Ee(t,1);else if(!$t){var n=Kt%ht,i=0;if(n<0&&(n+=ht),"first"===e)i=-n;else if("last"===e)i=ht-Ot-n;else if("number"!=typeof e&&(e=parseInt(e)),!isNaN(e)){var a=e%ht;a<0&&(a+=ht),i=a-n}Kt+=i,Kt%ht!=Qt%ht&&ge(t)}}function Ee(e,t){if(!$t){var n;if(!t){e=e||R.event;for(var i=e.target||e.srcElement;i!==An&&[Cn,wn].indexOf(i)<0;)i=i.parentNode;var a=[Cn,wn].indexOf(i);a>=0&&(n=!0,t=0===a?-1:1)}if(Wt){if(Kt===Jt&&t===-1)return void Te("last",e);if(Kt===Zt&&1===t)return void Te(0,e)}t&&(Kt+=Dt*t,ge(n||e&&"keydown"===e.type?e:null))}}function Ce(e){if(!$t){e=e||R.event;for(var t,n=e.target||e.srcElement;n!==In&&!p(n,"data-nav");)n=n.parentNode;p(n,"data-nav")&&(t=Hn=[].indexOf.call(Mn,n),Te(t,e))}}function we(){Rn=setInterval(function(){Ee(null,Vn)},Xn),jn=!0}function Ne(){clearInterval(Rn),jn=!1}function Oe(e,t){g(Qn,{"data-action":e}),Qn.innerHTML=Zn[0]+e+Zn[1]+t}function De(){we(),Qn&&Oe("stop",Yn[1])}function ke(){Ne(),Qn&&Oe("start",Yn[0])}function Ae(){Un&&!jn&&(De(),Gn=!1)}function Me(){jn&&(ke(),Gn=!0)}function Pe(){jn?(ke(),Gn=!0):(De(),Gn=!1)}function Ie(){B.hidden?jn&&(Ne(),Fn=!0):Fn&&(we(),Fn=!1)}function Se(){jn&&(Ne(),qn=!0)}function We(){qn&&(we(),qn=!1)}function He(e){switch(e=e||R.event,e.keyCode){case j.LEFT:Ee(e,-1);break;case j.RIGHT:Ee(e,1)}}function Le(e){switch(e=e||R.event,e.keyCode){case j.LEFT:case j.UP:case j.PAGEUP:Cn.disabled||Ee(e,-1);break;case j.RIGHT:case j.DOWN:case j.PAGEDOWN:wn.disabled||Ee(e,1);break;case j.HOME:Te(0,e);break;case j.END:Te(ht-1,e)}}function ze(e){e.focus()}function Be(e){function n(e){return t.navContainer?e:Sn[e]}var i=B.activeElement;if(p(i,"data-nav")){e=e||R.event;var a=e.keyCode,r=[].indexOf.call(Mn,i),o=Sn.length,s=Sn.indexOf(r);switch(t.navContainer&&(o=ht,s=r),a){case j.LEFT:case j.PAGEUP:s>0&&ze(Mn[n(s-1)]);break;case j.UP:case j.HOME:s>0&&ze(Mn[n(0)]);break;case j.RIGHT:case j.PAGEDOWN:s<o-1&&ze(Mn[n(s+1)]);break;case j.DOWN:case j.END:s<o-1&&ze(Mn[n(o-1)]);break;case j.ENTER:case j.SPACE:Hn=r,Te(r,e)}}}function Re(){ye(0,ft.scrollLeft()),Qt=Kt}function je(e){return e.target||e.srcElement}function qe(e){return e.type.indexOf("touch")>=0}function Ge(e){e.preventDefault?e.preventDefault():e.returnValue=!1}function Fe(e){if(ai=0,wt=!1,ni=ii=null,!$t){e=e||R.event;var t;qe(e)?(t=e.changedTouches[0],en.emit("touchStart",Qe(e))):(t=e,Ge(e),en.emit("dragStart",Qe(e))),ni=parseInt(t.clientX),ii=parseInt(t.clientY),$n=parseFloat(ft.style[Ut].replace(Xt,"").replace(Vt,""))}}function Ue(e){if(!$t&&null!==ni){e=e||R.event;var n;if(qe(e)?n=e.changedTouches[0]:(n=e,Ge(e)),_n=parseInt(n.clientX)-ni,ei=parseInt(n.clientY)-ii,0===ai&&(ai=f(u(ei,_n),15)===t.axis),ai){qe(e)?en.emit("touchMove",Qe(e)):(oi||(oi=!0),en.emit("dragMove",Qe(e))),wt||(wt=!0);var i=$n;if(lt)if(Pt)i+=_n,i+="px";else{var a=U?_n*Ot*100/(ot*qt):100*_n/ot;i+=a,i+="%"}else i+=ei,i+="px";U&&ve(0),ft.style[Ut]=Xt+i+Vt}}}function Xe(e){if(!$t&&wt){e=e||R.event;var t;qe(e)?(t=e.changedTouches[0],en.emit("touchEnd",Qe(e))):(t=e,en.emit("dragEnd",Qe(e))),_n=parseInt(t.clientX)-ni,ei=parseInt(t.clientY)-ii;var n=Boolean(lt?_n:ei);if(ai=0,wt=!1,ni=ii=null,lt){var i=-_n*Ot/ot;i=_n>0?Math.floor(i):Math.ceil(i),Kt+=i}else{var a=-($n+ei);if(a<=0)Kt=Jt;else if(a>=Et[Et.length-1])Kt=Zt;else{var r=0;do{r++,Kt=ei<0?r+1:r}while(r<qt&&a>=Et[r+1])}}if(ge(e,n),oi){oi=!1;var o=je(e);D(o,{click:function e(t){Ge(t),k(o,{click:e})}})}}}function Ve(){ut.style.height=Et[Kt+Ot]-Et[Kt]+"px"}function Ye(){Sn=[];for(var e=Kt%ht%Ot;e<ht;)!Ht&&e+Ot>ht&&(e=ht-Ot),Sn.push(e),e+=Ot;(Ht&&Sn.length*Ot<ht||!Ht&&Sn[0]>0)&&Sn.unshift(0)}function Ke(){Pn&&!gn&&(Ye(),Sn!==Wn&&([].forEach.call(Mn,function(e,t){Sn.indexOf(t)<0?T(e):E(e)}),Wn=Sn))}function Qe(e){return{container:ft,slideItems:vt,navContainer:In,navItems:Mn,controlsContainer:An,hasControls:mn,prevButton:Cn,nextButton:wn,items:Ot,slideBy:Dt,cloneCount:jt,slideCount:ht,slideCountNew:qt,index:Kt,indexCached:Qt,navCurrentIndex:Ln,navCurrentIndexCached:zn,visibleNavIndexes:Sn,visibleNavIndexesCached:Wn,event:e||{}}}t=e({container:B.querySelector(".slider"),mode:"carousel",axis:"horizontal",items:1,gutter:0,edgePadding:0,fixedWidth:!1,slideBy:1,controls:!0,controlsText:["prev","next"],controlsContainer:!1,nav:!0,navContainer:!1,navAsThumbnails:!1,arrowKeys:!1,speed:300,autoplay:!1,autoplayTimeout:5e3,autoplayDirection:"forward",autoplayText:["start","stop"],autoplayHoverPause:!1,autoplayButton:!1,autoplayButtonOutput:!0,autoplayResetOnVisibility:!0,loop:!0,rewind:!1,autoHeight:!1,responsive:!1,lazyload:!1,touch:!0,mouseDrag:!1,nested:!1,freezable:!0,onInit:!1},t||{}),["container","controlsContainer","navContainer","autoplayButton"].forEach(function(e){"string"==typeof t[e]&&(t[e]=B.querySelector(t[e]))});var Je=R.console&&"function"==typeof R.console.warn;if(!t.container||!t.container.nodeName)return void(Je&&console.warn("Can't find container element."));if(t.container.children.length<2)return void(Je&&console.warn("Slides less than 2."));if(t.responsive){var Ze={},$e=t.responsive;for(var _e in $e){var et=$e[_e];Ze[_e]="number"==typeof et?{items:et}:et}t.responsive=Ze,Ze=null,0 in t.responsive&&(t=e(t,t.responsive[0]),delete t.responsive[0])}var tt="carousel"===t.mode;if(!tt){t.axis="horizontal",t.rewind=!1,t.loop=!0,t.edgePadding=!1;var nt="tns-fadeIn",it="tns-fadeOut",at=!1,rt=t.animateNormal||"tns-normal";Q&&J&&(nt=t.animateIn||nt,it=t.animateOut||it,at=t.animateDelay||at)}var ot,st,lt="horizontal"===t.axis,ct=B.createElement("div"),ut=B.createElement("div"),ft=t.container,dt=ft.parentNode,vt=ft.children,ht=vt.length,pt=a(dt),mt=t.responsive,yt=[],gt=!1,bt=0,xt=n();if(mt){gt=Object.keys(mt).map(function(e){return parseInt(e)}).sort(function(e,t){return e-t}),gt.forEach(function(e){yt=yt.concat(Object.keys(mt[e]))});var Tt=[];yt.forEach(function(e){Tt.indexOf(e)<0&&Tt.push(e)}),yt=Tt,H()}var Et,Ct,wt,Nt,Ot=o("items"),Dt="page"===o("slideBy")?Ot:o("slideBy"),kt=t.nested,At=o("gutter"),Mt=o("edgePadding"),Pt=o("fixedWidth"),It=o("arrowKeys"),St=o("speed"),Wt=t.rewind,Ht=!Wt&&t.loop,Lt=o("autoHeight"),zt=s(),Bt=t.lazyload,Rt=[],jt=Ht?2*ht:0,qt=tt?ht+2*jt:ht+jt,Gt=!(!Pt||Ht||Mt),Ft=!tt||!Ht,Ut=lt?"left":"top",Xt="",Vt="",Yt=o("startIndex"),Kt=Yt?function(e){return e%=ht,e<0&&(e+=ht),e=Math.min(e,qt-Ot)}(Yt):tt?jt:0,Qt=Kt,Jt=0,Zt=qt-Ot,$t=!1,_t=t.onInit,en=new A,tn=ft.id,nn=" tns-slider tns-"+t.mode,an=ft.id||i(),rn=o("disable"),on=t.freezable,sn=!!rn||!!on&&ht<=Ot,ln="inner"===kt?" !important":"",cn={click:Ee,keydown:Le},un={click:Ce,keydown:Be},fn={mouseover:Se,mouseout:We},dn={visibilitychange:Ie},vn={keydown:He},hn={touchstart:Fe,touchmove:Ue,touchend:Xe,touchcancel:Xe},pn={mousedown:Fe,mousemove:Ue,mouseup:Xe,mouseleave:Xe},mn=r("controls"),yn=r("nav"),gn=t.navAsThumbnails,bn=r("autoplay"),xn=r("touch"),Tn=r("mouseDrag"),En="tns-slide-active";if(mn)var Cn,wn,Nn,On,Dn=o("controls"),kn=o("controlsText"),An=t.controlsContainer;if(yn)var Mn,Pn=o("nav"),In=t.navContainer,Sn=[],Wn=Sn,Hn=-1,Ln=Kt%ht,zn=Ln,Bn="tns-nav-active";if(bn)var Rn,jn,qn,Gn,Fn,Un=o("autoplay"),Xn=o("autoplayTimeout"),Vn="forward"===t.autoplayDirection?1:-1,Yn=o("autoplayText"),Kn=o("autoplayHoverPause"),Qn=t.autoplayButton,Jn=o("autoplayResetOnVisibility"),Zn=["<span class='tns-visually-hidden'>"," animation</span>"];if(xn)var $n,_n,ei,ti=o("touch"),ni=null,ii=null,ai=0;if(Tn)var ri=o("mouseDrag"),oi=!1;sn&&(Dn=Pn=ti=ri=It=Un=Kn=Jn=!1),U&&(Ut=U,Xt="translate",Xt+=lt?"X(":"Y(",Vt=")"),function(){ct.appendChild(ut),dt.insertBefore(ct,ft),ut.appendChild(ft),ot=a(ut);var e="tns-outer",n="tns-inner",i=r("gutter");if(tt?lt&&(r("edgePadding")||i&&!t.fixedWidth)?e+=" tns-ovh":n+=" tns-ovh":i&&(e+=" tns-ovh"),ct.className=e,ut.className=n,ut.id=an+"-iw",Lt&&(ut.className+=" tns-ah",ut.style[X]=St/1e3+"s"),""===ft.id&&(ft.id=an),nn+=G?" tns-subpixel":" tns-no-subpixel",nn+=q?" tns-calc":" tns-no-calc",tt&&(nn+=" tns-"+t.axis),ft.className+=nn,tt&&Q){var s={};s[Q]=xe,D(ft,s)}e=n=null;for(var u=0;u<ht;u++){var f=vt[u];f.id||(f.id=an+"-item"+u),v(f,"tns-item"),!tt&&rt&&v(f,rt),g(f,{"aria-hidden":"true",tabindex:"-1"})}if(Ht||Mt){for(var d=B.createDocumentFragment(),p=B.createDocumentFragment(),m=jt;m--;){var x=m%ht,E=vt[x].cloneNode(!0);if(b(E,"id"),p.insertBefore(E,p.firstChild),tt){var C=vt[ht-1-x].cloneNode(!0);b(C,"id"),d.appendChild(C)}}ft.insertBefore(d,ft.firstChild),ft.appendChild(p),vt=ft.children}for(var w=Kt,k=Kt+Math.min(ht,Ot);w<k;w++){var f=vt[w];g(f,{"aria-hidden":"false"}),b(f,["tabindex"]),v(f,En),tt||(f.style.left=100*(w-Kt)/Ot+"%",v(f,nt),h(f,rt))}if(tt&&lt&&(G?(l(zt,"#"+an+" > .tns-item","font-size:"+R.getComputedStyle(vt[0]).fontSize+";",c(zt)),l(zt,"#"+an,"font-size:0;",c(zt))):[].forEach.call(vt,function(e,t){e.style.marginLeft=y(t)})),F){var A=N(t.edgePadding,t.gutter,t.fixedWidth);l(zt,"#"+an+"-iw",A,c(zt)),tt&&lt&&(A="width:"+O(t.fixedWidth,t.gutter,t.items),l(zt,"#"+an,A,c(zt))),(lt||t.gutter)&&(A=P(t.fixedWidth,t.gutter,t.items)+I(t.gutter),l(zt,"#"+an+" > .tns-item",A,c(zt)))}else if(ut.style.cssText=N(Mt,At,Pt),tt&&lt&&(ft.style.width=O(Pt,At,Ot)),lt||At){var A=P(Pt,At,Ot)+I(At);l(zt,"#"+an+" > .tns-item",A,c(zt))}if(lt||rn||(ae(),Ve()),mt&&F&&gt.forEach(function(e){var t=mt[e],n="",i="",a="",s="",l=o("items",e),c=o("fixedWidth",e),u=o("edgePadding",e),f=o("gutter",e);("edgePadding"in t||"gutter"in t)&&(i="#"+an+"-iw{"+N(u,f,c)+"}"),tt&&lt&&("fixedWidth"in t||"gutter"in t||"items"in t)&&(a="#"+an+"{width:"+O(c,f,l)+"}"),("fixedWidth"in t||r("fixedWidth")&&"gutter"in t||!tt&&"items"in t)&&(s+=P(c,f,l)),"gutter"in t&&(s+=I(f)),s.length>0&&(s="#"+an+" > .tns-item{"+s+"}"),n=i+a+s,n.length>0&&zt.insertRule("@media (min-width: "+e/16+"em) {"+n+"}",zt.cssRules.length)}),tt&&!rn&&pe(),navigator.msMaxTouchPoints&&(v(ct,"ms-touch"),D(ct,{scroll:Re}),re()),yn){var M=tt?jt:0;if(In)g(In,{"aria-label":"Carousel Pagination"}),Mn=In.children,[].forEach.call(Mn,function(e,t){g(e,{"data-nav":t,tabindex:"-1","aria-selected":"false","aria-controls":vt[M+t].id})});else{for(var H="",j=gn?"":" hidden",w=0;w<ht;w++)H+='<button data-nav="'+w+'" tabindex="-1" aria-selected="false" aria-controls="'+vt[M+w].id+j+'" type="button"></button>';H='<div class="tns-nav" aria-label="Carousel Pagination">'+H+"</div>",ct.insertAdjacentHTML("afterbegin",H),In=ct.querySelector(".tns-nav"),Mn=In.children}if(Ke(),X){var U=X.substring(0,X.length-18).toLowerCase(),A="transition: all "+St/1e3+"s";U&&(A="-"+U+"-"+A),l(zt,"[aria-controls^="+an+"-item]",A,c(zt))}g(Mn[Ln],{tabindex:"0","aria-selected":"true"}),v(Mn[Ln],Bn),D(In,un),Pn||T(In)}if(bn){var V=Un?"stop":"start";Qn?g(Qn,{"data-action":V}):t.autoplayButtonOutput&&(ut.insertAdjacentHTML("beforebegin",'<button data-action="'+V+'" type="button">'+Zn[0]+V+Zn[1]+Yn[0]+"</button>"),Qn=ct.querySelector("[data-action]")),Qn&&D(Qn,{click:Pe}),Un?(De(),Kn&&D(ft,fn),Jn&&D(ft,dn)):Qn&&T(Qn)}mn&&(An?(Cn=An.children[0],wn=An.children[1],g(An,{"aria-label":"Carousel Navigation",tabindex:"0"}),g(Cn,{"data-controls":"prev"}),g(wn,{"data-controls":"next"}),g(An.children,{"aria-controls":an,tabindex:"-1"})):(ct.insertAdjacentHTML("afterbegin",'<div class="tns-controls" aria-label="Carousel Navigation" tabindex="0"><button data-controls="prev" tabindex="-1" aria-controls="'+an+'" type="button">'+kn[0]+'</button><button data-controls="next" tabindex="-1" aria-controls="'+an+'" type="button">'+kn[1]+"</button></div>"),An=ct.querySelector(".tns-controls"),Cn=An.children[0],wn=An.children[1]),Nn=ce(Cn),On=ce(wn),de(),D(An,cn),Dn||T(An)),ti&&D(ft,hn),ri&&D(ft,pn),It&&D(B,vn),"inner"===kt?en.on("outerResized",function(){W(),en.emit("innerLoaded",Qe())}):(D(R,{resize:S}),"outer"===kt&&en.on("innerLoaded",ee)),_(),ee(),L(),z(),en.on("indexChanged",ne),"function"==typeof _t&&_t(Qe()),"inner"===kt&&en.emit("innerLoaded",Qe()),rn&&$(!0),st=!0}();var si=function(){return Ht?function(){var e=Jt,t=Zt;if(tt)if(e+=Dt,t-=Dt,Mt)e+=1,t-=1;else if(Pt){var n=At?At:0;pt%(Pt+n)>n&&(t-=1)}if(Kt>t)for(;Kt>=e+ht;)Kt-=ht;else if(Kt<e)for(;Kt<=t-ht;)Kt+=ht}:function(){Kt=Math.max(Jt,Math.min(Zt,Kt))}}(),li=function(){return tt?function(e,t){t||(t=he()),Gt&&Kt===Zt&&(t=-((Pt+At)*qt-ot)+"px"),X||!e?(pe(t),e&&C(ft)||xe()):M(ft,Ut,Xt,Vt,t,St,xe),lt||Ve()}:function(e){Rt=[];var t={};t[Q]=t[J]=xe,k(vt[Qt],t),D(vt[Kt],t),me(Qt,nt,it,!0),me(Kt,rt,nt),Q&&J&&e||xe()}}();return{getInfo:Qe,events:en,goTo:Te,play:Ae,pause:Me,isOn:st,rebuild:function(){return Z(t)},destroy:function(){if(k(R,{resize:S}),k(B,vn),zt.disabled=!0,Ht)for(var e=jt;e--;)tt&&vt[0].remove(),vt[vt.length-1].remove();var n=["tns-item",En];tt||(n=n.concat("tns-normal",nt));for(var i=ht;i--;){var a=vt[i];a.id.indexOf(an+"-item")>=0&&(a.id=""),n.forEach(function(e){h(a,e)})}if(b(vt,["style","aria-hidden","tabindex"]),vt=an=ht=qt=jt=null,Dn&&(k(An,cn),t.controlsContainer&&(b(An,["aria-label","tabindex"]),b(An.children,["aria-controls","aria-disabled","tabindex"])),An=Cn=wn=null),Pn&&(k(In,un),t.navContainer&&(b(In,["aria-label"]),b(Mn,["aria-selected","aria-controls","tabindex"])),In=Mn=null),Un&&(clearInterval(Rn),Qn&&k(Qn,{click:Pe}),k(ft,fn),k(ft,dn),t.autoplayButton&&b(Qn,["data-action"])),ft.id=tn||"",ft.className=ft.className.replace(nn,""),x(ft),tt&&Q){var r={};r[Q]=xe,k(ft,r)}k(ft,hn),k(ft,pn),dt.insertBefore(ft,ct),ct.remove(),ct=ut=ft=Kt=Qt=Ot=Dt=Ln=zn=mn=Sn=Wn=this.getInfo=this.events=this.goTo=this.play=this.pause=this.destroy=null,this.isOn=st=!1}}};return Z}(); // 2. Build carousel for products from aggregate const sliderMain = tns({ container: '.unique-identifier .my-main-carousel', items: 1, slideBy: 1, controls: true, nav: false, gutter: 10 }); // 3. Synch tabs with carousels function updateTabs(info) { let index, activeSlide; // Update slider for more than 1 product if (info && info.slideItems && info.slideItems.length) { index = info.index; activeSlide = info.slideItems[index]; } else { // Fallback for single product activeSlide = document.querySelector('.unique-identifier .glider-slide[data-product-id]'); } if (activeSlide) { const productId = activeSlide.getAttribute('data-product-id'); const productTabsAll = document.querySelectorAll('.unique-identifier .product-tabs'); const productTabsEl = document.querySelector(`.unique-identifier .product-tabs[data-product-id="${productId}"]`); productTabsAll.forEach(tab => tab.style.display = "none"); if (productTabsEl) { productTabsEl.style.display = "flex"; } } } updateTabs(sliderMain?.getInfo?.()); if (sliderMain?.events?.on) { sliderMain.events.on('indexChanged', updateTabs); } // 4. Init recomendation carousels document.querySelectorAll('.unique-identifier .products-carousel').forEach((carousel, index) => { tns({ container: carousel, items: 3, slideBy: 1, controls: true, center: false, nav: false, gutter: 10, loop: false, responsive: { 0: { items: 2 }, 768: { items: 4 } } }); }); })()
### Schedule the message and configure display settings --- As the final part of the process, you need to set the schedule, display settings configuration, capping, priority of the message among other in-app messages. 1. In the **Schedule** section: 1. Click **Define**. 2. Choose **Run immediately** option. 3. Click **Apply**. 2. In the **Display settings** section: 1. Click **Define**. 2. Define the **Delay display** as **0** and **Priority index** as **1**. 5. Click **Apply**. 3. Optionally, you can define the UTM parameters in the **UTM & URL parameters** section. Otherwise, click **Skip step**. 4. Optionally, you can add the custom parameters in the **Additional parameters** section. Otherwise, click **Skip step**. 3. To start your campaign, click **Activate**. ## Check the use case set up on the Synerise Demo workspace --- In our Synerise Demo workspace you can check the configuration of the: - [Aggregate](https://app.synerise.com/analytics-v2/aggregates/245aa662-d642-352e-acef-18198604ac13) - [AI Recommendation](https://app.synerise.com/ai-v2/recommendations/VR6SOFcDEbAg) - [Dynamic content](https://app.synerise.com/campaigns/dynamic-content/preview/281259da-85a4-43fc-8e1c-c025652656b0) If you’re our partner or client, you already have automatic access to the **Synerise Demo workspace (1590)**, where you can explore all the configured elements of this use case and copy them to your workspace. If you’re not a partner or client yet, we encourage you to fill out the contact [form](https://demo.synerise.com/request) to schedule a meeting with our representatives. They’ll be happy to show you how our demo works and discuss how you can apply this use case in your business. ## Read more --- - [Aggregates](/docs/analytics/aggregates) - [Dynamic content](/docs/campaign/dynamiccontent) - [Recommendations](/docs/ai-hub/recommendations-v2)