Implementing Dynamic Yield on Salesforce Commerce Cloud: Controllers

Paste this code snippet from line 382 in cartridge/templates/default/util/modules.isml to the parallel file in your code base.

<ismodule​ ​template=​"dynamicyield/callrender"
   name​="dynamicyield" attribute​="page_type" ​ ​/>         

Paste this code snippet from line 202 in cartridge/scripts/util/Resource.ds​ to the parallel file in your code base.

DYGetAPIProperties:​ ​
URLUtils.url('DynamicYield-GetAPIProperties').toString()

Paste this code snippet from line 35 in the cartridge/templates/default/components/footer/footer_UI.js​ file to the parallel file in your code base.

<script​ ​src="${URLUtils.staticURL('/js/dynamicyield.js')}"></script> <script> 
$(​ ​document​ ​).ready(function()​ ​{ 
$('#email-alert-signup​ ​button').on('click',function(e){ 
e.preventDefault(); var​ ​DYform​ ​=​ ​$(this).closest('form'); var​ ​email​ ​=​ ​$('#email-alert-address').val(); 
dynamicYield.callEvent('Newsletter​ ​Subscription',​ ​{email:​ ​email,​ ​DYform:​ ​DYform}); 
}); 
}); 
</script> 
<isif​ ​condition="${!empty(session.custom.DYnewSession)​ ​&& 
session.custom.DYnewSession=='true'}">
<script> 
$(​ ​document​ ​).ready(function()​ ​{ 
​ ​ ​ ​ ​dynamicYield.callEvent('Sync​ ​cart'); }); 
</script> 
</isif>

Copy the following code to the file as seen in the image below:

var​ ​quantity​ ​=​ ​$qty.val(); 
var​ ​productId​ ​=​ ​$form.find('input[name="pid"]').val(); 
dynamicYield.callEvent('setAddedItem',​ ​{productId:​ ​productId,​ ​quantity:​ ​quantity});

dynamicYield.callEvent('Add​ ​to​ ​Cart',​ ​{productId​​ :​ ​productId​,​ ​quantity​:​ ​quantity​}​); 

1. Copy the following code to the file as seen in the image below:

   

   <isdynamicyield​ ​page_type="OTHER"/>

2. Copy the following code to the file as seen in the image below:
   
   

   <script> 
   $(​ ​document​ ​).ready(function()​ ​{ dynamicYield.callEvent('Account'); 
   $('.add-to-cart').click(function(){ 
   var​ ​$line​ ​=​ ​$(this).closest('tr'); 
   $qty​ ​=​ ​$line.find('input[name="Quantity"]'); 
   if​ ​($qty.length​ ​===​ ​0​ ​||​ ​isNaN($qty.val())​ ​||​ ​parseInt($qty.val(),​ ​10)​ ​===​ ​0)​ ​{ $qty.val('1'); 
   } 
   var​ ​quantity​ ​=​ ​$qty.val(); 
   var​ ​productId​ ​=​ ​$line.find('.sku​ ​.value').text(); 
   dynamicYield.callEvent('setAddedItem',​ ​{productId:​ ​productId,​ ​quantity: 
   quantity}); 
   }); 
   }); 
   </script>
   

1. Copy the following code to the file as seen in the image below:

   

   <isdynamicyield​ ​page_type="CART"/>

2. Copy the following code to the file as seen in the image below:
   
   

   <script>
   $( document ).ready(function() {
    $("[name$='_deleteProduct']").click(function(e) {
   e.preventDefault();
   var thisName = $(this).attr('name');
   $(this).append('<input type="hidden" value="Remove" name="'+thisName+'">');
   var DYform = $(this).closest('form');
   var line = $(this).closest( "tr" );
   var quantity = line.find('.item-quantity input').val();
   var productId = line.find('.sku .value').text();
   dynamicYield.callEvent('setRemovedItem', {productId:
   productId, quantity: quantity, DYform: DYform});
   });
   
   $('.add-to-wishlist').click(function(e){
   e.preventDefault();
   var line = $(this).closest( "tr" );
   var DYhref = $(this).attr("href");
   var productId = line.find('.sku .value').text();
   dynamicYield.callEvent('Add to Wishlist', {productId: productId, DYhref: DYhref});
   });
   });
   </script>
   
   <isscript>
   var couponCatch = '';
   try {
   couponCatch = newCoupon;
   } catch(e){
   couponCatch = '';
   }
   </isscript>
   
   <isif condition="${!empty(newCoupon)}">
   <script>
   $( document ).ready(function() {
   dynamicYield.callEvent('Promo Code Entered', {code: '<isprint value="${newCoupon}" encoding="htmlsinglequote"/>'});
   });
   </script>
   </isif>
   
   <isif condition="${!empty(session.custom.DYaddedItem)}">
   <script>
   $( document ).ready(function() {
   dynamicYield.callEvent('Add to Cart');
   });
   </script></isif>
   
   <isif condition="${!empty(session.custom.DYremovedItem)}">
   <script>
   $( document ).ready(function() {
   dynamicYield.callEvent('Remove from Cart');
   });
   </script>
   </isif>

1. Copy the following code to the file as seen in the image below:

   

   data-swatchtype='{"type":​ ​"${attr.displayName}",​ ​"value":​ 
     ​"${attrValue.displayValue}"}'

1. Copy the following code to the file as seen in the image below:

   

   var​ ​swatchtype​ ​=​ ​$(this).data('swatchtype'); 
   dynamicYield.callEvent('Change​ ​Attribute',​ ​swatchtype);

2. Copy the following code to the file as seen in the image below:
   
   

   dynamicYield.callEvent('Change​ ​Attribute',​ ​{ 
   ​ ​ ​ ​ ​type:​ ​$(this).parent().parent().find('span').text().trim(), 
   ​ ​ ​ ​ ​value:​ ​$(this).find(':selected').text().trim() })
   

Copy the following code to the file as seen in the image below:

var​ ​urlParam​ ​=​ ​$(this).find('option:selected').val(); 
urlParam​ ​=​ ​urlParam.substring(urlParam.indexOf('srule=')+6); urlParam​ ​=​ ​urlParam.substring(0,​ ​urlParam.indexOf('&')); var​ ​srules​ ​=​ ​{ 
'best-matches':​ ​{sortBy:​ ​'Best​ ​Matches',​ ​sortOrder:​ ​'ASC'}, 
'price-low-to-high':​ ​{sortBy:​ ​'Price',​ ​sortOrder:​ ​'ASC'}, 
'price-high-to-low':​ ​{sortBy:​ ​'Price',​ ​sortOrder:​ ​'DESC'}, 
'product-name-ascending':​ ​{sortBy:​ ​'Product​ ​Name',​ ​sortOrder:​ ​'ASC'}, 
'product-name-descending':​ ​{sortBy:​ ​'Product​ ​Name',​ ​sortOrder:​ ​'DESC'}, 
'brand':​ ​{sortBy:​ ​'Brand',​ ​sortOrder:​ ​'ASC'}, 
'most-popular':​ ​{sortBy:​ ​'Most​ ​Popular',​ ​sortOrder:​ ​'ASC'}, 'top-sellers':​ ​{sortBy:​ ​'Top​ ​Sellers',​ ​sortOrder:​ ​'ASC'}
} 
var​ ​params​ ​=​ ​srules[urlParam]; 
dynamicYield.callEvent('Sort​ ​Items',​ ​params);

1. Copy the following code to the file as seen in the image below:

   

   <isdynamicyield​ ​page_type="OTHER"/>

2. Copy the following code to the file as seen in the image below:
   
   

   <script>
   $( document ).ready(function() {
   dynamicYield.callEvent('Purchase', {orderId: '<isprint value="${Order.orderNo}" encoding="htmlsinglequote"/>'});
   });
   </script>

1. Copy the following code to the file as seen in the image below:

   

   <isif​ ​condition="${(pdict.CurrentHttpParameterMap.cgid.submitted​ ​&& 
   pdict.CurrentHttpParameterMap.cgid.value​ ​!=​ ​'')}"> 
   <isdynamicyield​ ​page_type="CATEGORY"/> 
   <iselse> 
   <isdynamicyield​ ​page_type="OTHER"/> </isif>

2. Copy the following code to the file as seen in the image below:
   
   

   <script>
   $( document ).ready(function() {
   $(document).on('click','.refinement:not(.category-refinement) a',function(){
   if(!$(this).parent().hasClass('selected')){
   var data = $(this).data('filter');
   dynamicYield.callEvent('Filter Items', data);
   }
   });
   <isif condition="${!empty(searchPhrase)}">
   dynamicYield.callEvent('Keyword Search', {keywords: '<isprint value="${searchPhrase}" encoding="htmlsinglequote"/>'});
   </isif>
   
   $(document).on('click','.js-add-to-wishlist',function(e){
   e.preventDefault();
   var DYhref = $(this).attr("href");
   var productId = $(this).data('pid');
   dynamicYield.callEvent('Add to Wishlist', {productId: productId, DYhref: DYhref});
   });
   });
   </script>

1. Copy the following code to the file as seen in the image below:

   

   <isdynamicyield​ ​page_type="CATEGORY"/>

1. Copy the following code to the file as seen in the image below:

   

   <isdynamicyield​ ​page_type="OTHER"/>

2. Copy the following code to the file as seen in the image below:
   
   

   <script>
   $( document ).ready(function() {
   <isif condition="${!empty(pdict.ProductSearchResult.searchPhrase)}">
   dynamicYield.callEvent('Keyword Search', {keywords: '<isprint value="${pdict.ProductSearchResult.searchPhrase}" encoding="htmlsinglequote"/>'});
   </isif>
   });
   </script>
   

Use the example file in the cartridge to update the code in your code base. 

1. In line 54, replace

   <isdynamicyield​ ​page_type="OTHER"/>

   with

   <a​ ​data-filter='{"type":​ 
   ​"${RefinementValue.getID()}",​ ​"value":​ ​"${RefinementValue.getValue()}"}' 
   href="${pdict.ProductSearchResult.urlRefineCategory('Search-Show',​ 
   ​path.get(0).ID)}"> 

2. In lines​ ​105,​ ​111,​ and ​117, add this code ​for​ ​each​ ​<a>​ ​tag​:
   

   data-filter='{"type":​ ​"${RefinementValue.getID()}",​ ​"value":​ ​
   "${RefinementValue.getValue()}"}'

   For example, in line 105, update this code:

   <a​ ​id="${swatchID}" 
   href="${StringHelpers.unsanitizeOR(pdict.ProductSearchResult.urlRelaxAttributeValue('Search-Sh ow',RefinementValue.getID(),RefinementValue.getValue()))}" title="${Resource.msgf('global.refinement.selected.label','locale',null, RefinementDefinition.displayName,​ ​RefinementValue.getDisplayValue())}">

   to look like this:

   <a​ ​id="${swatchID}"​ ​data-filter='{"type":​ ​"${RefinementValue.getID()}",​ ​"value": 
   "${RefinementValue.getValue()}"}' 
   href="${StringHelpers.unsanitizeOR(pdict.ProductSearchResult.urlRelaxAttributeValue('Search-Sh ow',RefinementValue.getID(),RefinementValue.getValue()))}" title="${Resource.msgf('global.refinement.selected.label','locale',null, RefinementDefinition.displayName,​ ​RefinementValue.getDisplayValue())}">

3. In lines 173 and 180, add this code snippet to the <a> tag:

   data-filter='{"type":​ ​"${RefinementDefinition.getDisplayName()}",​ 
   ​"value": "${RefinementValue.getDisplayValue()}"}' code code

   For example:

   <a​ ​class="refinement-link"​ 
   ​title="${Resource.msg('global.pricerefinement.label.prefix','locale',null)} 
   ${RefinementValue.getDisplayValue()}"​ 
   data-filter='{"type":​"${RefinementDefinition.getDisplayName()}",​ 
   ​"value":​ ​"${RefinementValue.getDisplayValue()}"}' 
   href="${StringHelpers.unsanitizeOR(pdict.ProductSearchResult.urlRefinePrice('Search-Show',Refi nementValue.getValueFrom(),RefinementValue.getValueTo()))}"> 

Add the highlighted areas to the file:

<a​ ​class="button​ ​simple​ js-add-to-wishlist​​ 
"​ ​data-action="wishlist"​ data-pid="${pdict.Product.ID}"​ 
href="${URLUtils.https('Wishlist-Add',​ ​'pid',​ ​pdict.Product.ID,​ ​'source',​ ​'productdetail')}" 
title="${Resource.msg('global.addtowishlist.label','locale',null)}">${Resource.msg('global.addtowishlist','loc ale',null)}</a>cartridge/templates/default/account/wishlist/pt_wishlist.isml

1. Copy the following code to the file as seen in the image below:

   

   <isinclude​ ​template="util/modules"​ ​/> 
   <isdynamicyield​ ​page_type="PRODUCT"/>

2. Copy the following code to the pageContext call:

   productID:​ ​(pdict.Product.ID​ ​||​ ​''),

   For example:

   var​ ​pageContext​ ​=​ ​{ 
   title:​ ​(pdict.Product.name​ ​||​ ​'Product​ ​Detail'), 
   ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​productID:​ ​(pdict.Product.ID​ ​||​ ​''), type:​ ​'product', 
   ns:'product' 
   };
   

3. Copy the following code to the file as seen in the image below:

   

   <script> 
   $(​ ​document​ ​).ready(function()​ ​{ 
   $(document).on('click','.js-add-to-wishlist,​ ​a[data-action=wishlist]',function(e){ e.preventDefault(); 
   var​ ​DYhref​ ​=​ ​$(this).attr("href"); 
   var​ ​productId​ ​=​ ​$(this).data('pid')​ ​||​ ​window.pageContext.productID; 
   dynamicYield.callEvent('Add​ ​to​ ​Wishlist',​ ​{productId:​ ​productId,​ ​DYhref:​ ​DYhref}); 
   }); 
   }); 
   </script>

1. Copy the following code to the file as seen in the image below:

   

   <isdynamicyield​ ​page_type="OTHER"/>

2. Copy the following code to the file as seen in the image below:
   
   

   <script> 
   $(​ ​document​ ​).ready(function()​ ​{ 
   ​ ​ ​ ​ ​dynamicYield.callEvent('Account'); 
   }); 
   </script>
   

1. Copy the following code to the file as seen in the image below:

   

   <isdynamicyield​ ​page_type="OTHER"/>

2. Copy the following code to the file as seen in the image below:
   
   

   <script> 
   $(​ ​document​ ​).ready(function()​ ​{ 
   ​ ​ ​ ​ ​dynamicYield.callEvent('Account'); 
   }); 
   </script>
   

1. Copy the following code to the file as seen in the image below:

   

   <isset​ ​name="appliedCoupons"​ 
   ​value="${new​ ​dw.util.ArrayList()}"​ ​scope="page"​ ​/>

2. Copy the following code to the file as seen in the image below:
   
   

   <isset​ ​name="isAppliedCoupons"​ 
   ​value="${appliedCoupons.add(FormCoupon.object.couponCode)}" 
   scope="page"​ ​/>

3. Copy the following code to the file as seen in the image below:

   

   <isscript> var​ ​DYcoupons​ ​=​ ​[]; var​ ​newCoupon​ ​=​ ​''; 
   var​ ​appliedCoupons​ ​=​ ​appliedCoupons.toArray(); if(!empty(appliedCoupons)){ 
   //​ ​When​ ​at​ ​least​ ​one​ ​coupon​ ​was​ ​used 
   if(!empty(session.custom.DYcoupons)){ 
   //​ ​When​ ​at​ ​least​ ​one​ ​coupon​ ​was​ ​saved​ ​to​ ​our​ ​session 
   DYcoupons​ ​=​ ​session.custom.DYcoupons.split('|'); 
   
   if(​ ​DYcoupons.length​ ​<​ ​appliedCoupons.length​ ​){ //​ ​new​ ​coupon​ ​was​ ​used​ ​and​ ​need​ ​to​ ​find​ ​it for​ ​(var​ ​i​ ​in​ ​DYcoupons)​ ​{ if(DYcoupons[i]​ ​!=​ ​appliedCoupons[i]){ newCoupon​ ​=​ ​appliedCoupons[i]; break; 
   } 
   ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​} 
   ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​if(newCoupon==''){ 
   i++; 
   newCoupon​ ​=​ ​appliedCoupons[i]; 
   ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​} 
   }​ ​//​ ​else​ ​coupon​ ​was​ ​removed​ ​or​ ​not​ ​added 
   }​ ​else​ ​{ 
   //​ ​we​ ​didn't​ ​call​ ​our​ ​event​ ​yet 
   newCoupon​ ​=​ ​appliedCoupons[0]; 
   } 
   }
   session.custom.DYcoupons​ ​=​ ​appliedCoupons.join("|"); </isscript>

Copy the following code to the file as seen in the image below:

<script> setTimeout(function()​ ​{ 
$(document).ready(function()​ ​{ 
$('select').each(function(i,e)​ ​{ 
$(e).on('change',​ ​function(el)​ ​{ 
var​ ​$el​ ​=​ ​$(el.currentTarget).find(':selected'); dynamicYield.callEvent('Change​ ​Attribute', {type:​ ​$(el.currentTarget).parent().parent().find('span').text(),​ ​value:​ ​$el.text()}) 
}) 
}) 
}) 
},100) 
</script>

Copy the following code to the file as seen in the image below:

if (data.success) {
dynamicYield.callEvent('Promo Code Entered', {code: code, ajax: true});
if(data.baskettotal === 0){
window.location.assign(Urls.billing);
}}

Copy the following code to the file as seen in the image below:

<isdynamicyield​ ​page_type="HOMEPAGE"/>

1. cartridge/templates/default/content/pt_customerservice.isml line 18
2. cartridge/templates/default/content/content/pt_content.isml line 11
3. cartridge/templates/default/account/giftregistry/pt_giftregistry.isml line 24
4. cartridge/templates/default/account/orderhistory/orders.isml line 4

<isdynamicyield​ ​page_type="OTHER"/>