ADDITIONAL PROPERTIES
After your website recommendations are on your website, you can use CSS, JavaScript, JQuery, or any other web coding practices to enable your recommendations to render and function however you would like.
Below are some optional features you can add to your recommendations. Availability of the attributes below are based on the data you are sending Listrak in your products file.
SKU
Usage: @Recommendation.Sku
Implementation: _ltk.Recommender.AddField("Sku");
Description
Usage: @Recommendation.Description
Implementation: _ltk.Recommender.AddField("Description");
Price
Usage: @Recommendation.Price
Implementation: _ltk.Recommender.AddField("Price");
SalePrice
Usage: @Recommendation.SalePrice
Implementation: _ltk.Recommender.AddField("SalePrice");
Brand
Usage: @Recommendation.Brand
Implementation: _ltk.Recommender.AddField("Brand");
Category
Usage: @Recommendation.Category
Implementation: _ltk.Recommender.AddField("Category");
Subcategory
Usage: @Recommendation.Subcategory
Implementation: _ltk.Recommender.AddField("Subcategory");
Onsale
Usage: @Recommendation.Onsale
Implementation: _ltk.Recommender.AddField("Onsale");
MSRP
Usage: @Recommendation.MSRP
Implementation: _ltk.Recommender.AddField("MSRP");
Size
Usage: @Recommendation.Size
Implementation: _ltk.Recommender.AddField("Size");
Gender
Usage: @Recommendation.Gender
Implementation: _ltk.Recommender.AddField("Gender");
Style
Usage: @Recommendation.Style
Implementation: _ltk.Recommender.AddField("Style");
Color
Usage: @Recommendation.Color
Implementation: _ltk.Recommender.AddField("Color");
SaleStartDate
Usage: @Recommendation.SaleStartDate
Implementation: _ltk.Recommender.AddField("SaleStartDate");
SaleEndDate
Usage: @Recommendation.SaleEndDate
Implementation: _ltk.Recommender.AddField("SaleEndDate");
QuantityOnHand
Usage: @Recommendation.QuantityOnHand
Implementation: _ltk.Recommender.AddField("QuantityOnHand");
InStock
Usage: @Recommendation.InStock
Implementation: _ltk.Recommender.AddField("InStock");
MasterSku
Usage: @Recommendation.MasterSku
Implementation: _ltk.Recommender.AddField("MasterSku");
Discontinued
Usage: @Recommendation.Discontinued
Implementation: _ltk.Recommender.AddField("Discontinued");
IsViewable
Usage: @Recommendation.IsViewable
Implementation: _ltk.Recommender.AddField("IsViewable");
Attributes
Usage: @Recommendation.Attributes
Implementation: _ltk.Recommender.AddField("Attributes");
Categories
Usage: @Recommendation.Categories
Implementation: _ltk.Recommender.AddField("Categories");
IsClearance
Usage: @Recommendation.IsClearance
Implementation: _ltk.Recommender.AddField("IsClearance");
IsOutlet
Usage: @Recommendation.IsOutlet
Implementation: _ltk.Recommender.AddField("IsOutlet");
ReviewUrl
Usage: @Recommendation.ReviewUrl
Implementation: _ltk.Recommender.AddField("ReviewUrl");
RatingCount
Usage: @Recommendation.RatingCount
Implementation: _ltk.Recommender.AddField("RatingCount");
Rating
Usage: @Recommendation.Rating
Implementation: _ltk.Recommender.AddField("Rating");
StarRating
Usage: @Recommendation.StarRating
Implementation: _ltk.Recommender.AddField("StarRating");
SalesLast7
Usage: @Recommendation.SalesLast7
Implementation: _ltk.Recommender.AddField("SalesLast7");
SalesLast30
Usage: @Recommendation.SalesLast30
Implementation: _ltk.Recommender.AddField("SalesLast30");
SalesLast90
Usage: @Recommendation.SalesLast90
Implementation: _ltk.Recommender.AddField("SalesLast90");
SalesLast365
Usage: @Recommendation.SalesLast365
Implementation: _ltk.Recommender.AddField("SalesLast365");
Meta1
Usage: @Recommendation.Meta1
Implementation: _ltk.Recommender.AddField("Meta1");
Meta2
Usage: @Recommendation.Meta2
Implementation: _ltk.Recommender.AddField("Meta2");
Meta3
Usage: @Recommendation.Meta3
Implementation: _ltk.Recommender.AddField("Meta3");
Meta4
Usage: @Recommendation.Meta4
Implementation: _ltk.Recommender.AddField("Meta4");
Meta5
Usage: @Recommendation.Meta5
Implementation: _ltk.Recommender.AddField("Meta5");
To implement additional properties, navigate to Async JavaScript, add the corresponding implementation tag from above to the code between the begin custom code and end custom code.
NOTE: This must go above the _ltk.Recommender.Render(); tag.
For example, to add description, add the following code:
<script type="text/javascript">
(function(d) { if (document.addEventListener) document.addEventListener('ltkAsyncListener', d);
else {e = document.documentElement; e.ltkAsyncProperty = 0; e.attachEvent('onpropertychange', function (e) {
if (e.propertyName == 'ltkAsyncProperty'){d();}});}})(function() {
/********** Begin Custom Code **********/
_ltk.Recommender.AddField("Description");
_ltk.Recommender.Render();
/********** End Custom Code **********/
});
</script>
Now the Description Field is available for use within the block of recommendations.
In this example, give the image a title tag with the description, which allows a description to be displayed when the hover product is hovered over.
Use the corresponding usage tag from above for the description. This code would look like the following:
<div data-ltk-merchandiseblock="[[YOUR MERCHANDISE BLOCK ID HERE]]">
<script type="text/html">
<a href="@(linkRoot + Recommendation.LinkUrl)">
<img src="@(imageRoot + Recommendation.ImageUrl)" title="@Recommendation.Description" width="100px" style="display:block" />
<strong>@Recommendation.Title</strong>
</a>
</script>
</div>
SKIP AND TAKE
If you have a merchandise block of 10 products, and you only want to pull the first 5 products of that merchandise block into your recommendations, you can use the data-ltk-take method within your merchandise block template.
<div data-ltk-merchandiseblock="[[YOUR MERCHANDISE BLOCK ID HERE]]" data-ltk-take="5">
<script type="text/html">
<a href="@(linkRoot + Recommendation.LinkUrl)">
<img src="@(imageRoot + Recommendation.ImageUrl)" title="@Recommendation.Description" width="100px" style="display:block" />
<strong>@Recommendation.Title</strong>
</a>
</script>
</div>
If you wanted to skip the first 5 products, and only pull the last 5 products, you could combine this with the skip function to skip the first 5 products and only take the last five.
<div data-ltk-merchandiseblock="[[YOUR MERCHANDISE BLOCK ID HERE]]" data-ltk-skip="5" data-ltk-take="5">
<script type="text/html">
<a href="@(linkRoot + Recommendation.LinkUrl)">
<img src="@(imageRoot + Recommendation.ImageUrl)" title="@Recommendation.Description" width="100px" style="display:block" />
<strong>@Recommendation.Title</strong>
</a>
</script>
</div>
NOTE: It is best practice to skip the first product as the first product in the list of returned products is the product the customer has viewed.
CREATING A TEMPLATE
If you would like to create a template of recommendations to use in various locations, instead of having to copy and paste the full merchandise block code each time, you could create a JavaScript template and simply reference that template.
To do so, you could create a script block, and place your entire merchandise contents that are within the script tags into your new template script block and simply call the template within the merchandise block using the @include() function.
<div data-ltk-merchandiseblock="[[YOUR MERCHANDISE BLOCK ID HERE]]">
<script type="text/html">
@include(recstemplate)
</script>
</div>
<script id="recstemplate" type="text/html">
<div>
<a href="@(linkRoot + Recommendation.LinkUrl)">
<img src="@(imageRoot + Recommendation.ImageUrl)" title="@Recommendation.Description" width="100px" style="display:block" />
<strong>@Recommendation.Title</strong>
</a>
</div>
</script>
ADDITIONAL METHODS
To collect or display additional data, you can use the following:
AddField()
As exampled above, this allows the @Recommendation object to pull the field for display/usage. This method can accept either a single value or a comma delimited list of values.
Example:_ltk.Recommender.AddField("Meta1");_ltk.Recommender.AddField("Description","Category");
AddSku()
Forces the recent activity of all viewers of a block to incorporate a specific SKU first, regardless of Activity type.
Example:_ltk.Recommender.AddSku("SKU12345");
SetData()
Forces the data for a given field to be set to the value provided, for all viewers.
Example:_ltk.Recommender.SetData("Category", "ASDF");
AddFilter()
Allows the ability to hook in to and manipulate recommendations after they're generated, but before they are rendered.
Example (stripping HTML from title in products being displayed):
_ltk.Recommender.AddFilter(function (recommendations,callback) { $(recommendations).each(function ()
{if (this.Title) this.Title =this.Title.replace(/\<.*?\>/g, "");
});
callback(recommendations);});
Render(function ())
Registers an event handler for when recommendations are rendered, allowing control of additional actions by including jQuery.
Example (Fade in the displayed recommendations):
_ltk.Recommender.Render(function () {
$(this).fadeIn(3000);
});
Render()
This method needs to be called after all other recommendations scripts.This will initiate the loading and displaying of the recommendations.
Example:_ltk.Recommender.Render();