Widget Implementation

Overview

All Stackla Widgets leverage a similar Embed Code structure, with variations in designs and content handled through a series of parameters.

This structure not only makes it easier for our clients to integrate with various Content Management Systems (CMS) platforms, but also means the same Widget can be used for multiple executions as well.

Detailed below are the step by step ways in which the dynamic display features of the Stackla Widget can be used for Commerce implementations.

Embed Code

All Stackla Widgets leverage a common embed code structure which can be broken into two components. The first component (included below) is the DIV container which defines where the Stackla Widget should be rendered on a webpage, as well includes the various parameters which defines what Widget and what Content is loaded.

<div class="stackla-widget" data-ct="" data-hash="{{widget-hash}}" data-id="{{widget-id}}" data-title="{{widget-title}}" data-ttl="60" style="width: 100%; overflow: hidden;"></div>

The second component is the Widget Javascript. This is the part of the Embed code which is consistent for every Widgets. For details how to store this Javascript file in Google Tag Manager, click here.

<script type="text/javascript">
(function (d, id) {
    var t, el = d.scripts[d.scripts.length - 1].previousElementSibling;
    if (el) el.dataset.initTimestamp = (new Date()).getTime();
    if (d.getElementById(id)) return;
    t = d.createElement('script');
    t.src = '//assetscdn.stackla.com/media/js/widget/fluid-embed.js';
    t.id = id;
    (d.getElementsByTagName('head')[0] || d.getElementsByTagName('body')[0]).appendChild(t);
}(document, 'stackla-widget-js'));
</script>

For the purpose of Commerce Implementations, we will be looking at what variables can be changed and the impact this has on the Widget display.

Return to Top

Dynamic Variables

All Stackla Widgets leverage a common embed code structure which can be broken into two components. The first component (included below) is the DIV container which defines where the Stackla Widget should be rendered on a webpage, as well includes the various parameters which defines what Widget and what Content is loaded.

  • data-id : Widget ID
  • data-hash : Widget Hash
  • data-filter : Defines the filter / segment of content to show
  • data-tags : Defines the tag(s) which need to be present for content to show
  • data-tags-grouped-as : Specifies the grouping logic for the Tags
  • data-tag-group : Defines Products for a specific locale
  • data-available-products-only : Defines whether to show Product information for unavailable products
  • data-ct : Apply a consistent click through URL to all Tiles
  • data-tile-id : Defines a specific Tile(s) to display

The variables data-id and data-hash allows for customers to define what Widget to display. Note: Only one of the variables, data-id and data-hash, needs to be defined.

The variable data-filter allows for customers to define what content to display within a Widget based upon a specific Filter ID. The IDs for all Filters can be found within the Stackla Admin User Interface under Curate > Filters.

The variable data-tags allows for customers to define what content to display within a Widget based upon the tag(s) that has been assigned to the content. Through this variable brands can define whether they wish to show content for a specific Product or a range of Products by simply adding their Stackla Tag ID or External Product ID/SKU. The following guide provides further information around how to dynamically specify what Products to display.

The variable data-tags-grouped-as allows for customers to define the grouping logic for the Tags they are dynamically refining by. The supported values for this variable are AND and OR with the Widget set to OR by default.

The variable data-tag-group allows for clients to define what Locale information should be displayed for a particular Widget. The possible values for this variable are defined as part of the Product Feed setup and only apply for customers who are importing more than one Product Feed. By default, Stackla will show the locale information for the first Product Feed imported.

The variable data-available-products-only allows for clients to decide whether Product Tag information should be shown for any Products which are currently out of stock. The supported values for this variable are true and false with the Widget set to false by default.

The variable data-tile-id allows for clients to define specific Tile(s) of content to display within a Widget. The following guide outlines how to dynamically specify what Tile to display in a Widget.

Return to Top