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(); 

Did this answer your question?