Dynamic Widget Integration Option

Overview

As an alternative to creating a widget for each product or group of products you want featured within a widget, we offer a way to create one "placeholder" widget template with default styling, which can then dynamically load in one more products. Using this dynamic setup option allows you to have dozens or hundreds of different widgets without needing to use our widget set-up tool for each one. Instead, your website will need to insert one or more product IDs into the request URL sent to Destini, which in turn will allow our system to generate your widget "on the fly."

Setting Up the Placeholder Widget

Please first setup your global styles (if not done already) and create a new widget per the instructions on How to Create Widgets, For this placeholder widget, select any product for the widget in order to be able to complete the set-up steps (the product in this case will not matter, and will not be displayed). When naming and identifying the widget, title it and enter an association ID that will serve to remind you later what the purpose is for the widget (e.g. "Dynamic Widget Template" as the title, "dynamic" as the Association ID).

Implementation

IMPORTANT: Please first familiarize yourself with either of our widget implementation instructions before proceeding:

Installing a Dynamic Widget is almost identical to how you would install a widget either inline or within a pop-up / modal. One additional variable is added, called APO (Alternate Product Override).

For an inline widget, the scripting for the bottom of the page has a small addition. The updated complete script:

<script>
 $(document).ready(function() {
  destini.init("destinidiv");
  destini.loadWidget("ASSOCIATIONID","APO");
  }
</script>

APO would be the comma-delimited string of one or more product IDs that you want to populate the Dynamic Widget with.

For a modal / pop-up widget, the scripting for the bottom of the page also has a similar small addition:

<script>

    $('.buynow').click(function() {
        var containerId = $(this).attr('data-destini-container');
        var associationId = $(this).attr('data-destini-association');
        var APO = $(this).attr('data-destini-apo');
        destini.init(containerId);
        destini.loadWidget(associationId, APO);
    });
</script>

Additionally, the Buy Now button has a small addition as well:

class=”buynow"
data-toggle="modal"
data-target="#widget-modal"
data-destini-container="destinidiv"
data-destini-association="######"
data-destini-apo="######"

Again, APO would be the comma-delimited string of one or more product IDs that you want to populate the Dynamic Widget with.

- - -

For a demonstration of Dynamic Widgets, and to review the HTML source to see our instructions in-action, please visit our Dynamic Widgets Demo Page

Overview

Setting Up the Placeholder Widget

Implementation

Comments