“Pop-up” Product Widget Implementation Guide

Overview

This guide provides an outline of best practices for implementing Destini’s Product Widgets using a “Pop-Up” Modal. The typical user journey would include a consumer seeing a “Buy Now” or “Buy Online” type of call-to-action button within a product page, and once clicked they would see a widget modal overlay the webpage. Alternatively, if you do not want your widget to display within a pop-up modal, you can also configure it to immediately load and display within your webpage.

Example Modal Integration

Option 1: Using your own global modal scripting
If you have already built and styled a “modal” interface that is in use elsewhere in your website, we encourage you to leverage that same function to also launch your Destini Product Widgets. Your custom modal needs to have an empty <div> with the ID of "destinidiv".

Now you can skip steps 2-4, as outlined below, and proceed directly to “Step 5”

Option 2: Using Destini’s Bootstrap-powered modal
If you do not already have modal scripting configured within your website, below you will find directions for installing the necessary scripts to support launching a responsive modal within any webpage. Please note, these directions presume your website will use jQuery and Bootstrap to trigger the modal. If you already are using jQuery and Bootstrap, the items listed below as “possibly optional” can likely be skipped, as these scripts may already be included within your website. If your website cannot support jQuery and Bootstrap, or you have alternatives in-place for these, you will have to apply a variation of these directions. These directions should primarily serve as a reference point, and we strongly encourage you to adapt them as needed to accommodate the needs of your particular website.

STEP 1: Embed scripting right before the closing tag:

Required item to include within your <head>:

<script src="//destinilocators.com/[CLIENT NAME]/pdpwidget/install/"></script>

*Note that you will replace [CLIENT NAME] with your client account name.

STEP 2: If not already found within your website, include the following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Step 3: Stylize your Modal

Suggested Styling for the "HYBRID" template
If you are using the “Hybrid” template for your widget(s), the following styles are recommended for providing an ideal maximum width while still being responsive for smaller screens. While the Hybrid template is fully responsive, it was optimized for display at 840px by 780px (width / height).

.modal {padding-top:5%}
#widget-modal .modal-body {text-align:center; width:100%; max-width:840px; min-width:300px;height:auto;margin-left:auto; margin-right:auto;max-height:780px!important;padding:0px;}
#widget-modal .close { position:relative; margin-right:-30px; color:#fff; margin-top:-30px; font-size:40px }
#destinidiv {background:#fff;width:100%; overflow-y:auto;}

Suggested Styling for the "TABS" template
If you are using the “Tabs” template for your widget(s), this interface accommodates a smaller footprint and we recommend the following styles for an ideal responsive display. While the Tabs template is fully responsive, it was optimized for display at 750px by 780px (width / height).:

.modal {padding-top:5%}
#widget-modal .modal-body {text-align:center; width:100%; max-width:600px; min-width:300px;height:auto;margin-left:auto; margin-right:auto;max-height:550px!important;padding:0px;}
#widget-modal .close { position:relative; margin-right:-30px; color:#fff; margin-top:-30px; font-size:40px }
#destinidiv {background:#fff;width:100%; overflow-y:auto;}

STEP 4: Insert right after opening tag:

<div id="widget-modal" class="modal fade" role="dialog">
<div class="modal-body" >
      <button type="button" class="close" data-dismiss="modal">&times;</button>
<div id="destinidiv" src=""></div>
</div>
</div>

STEP 5: Insert before </body> tag:

<script>

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

STEP 6: Insert into each “Buy Now” <a> tag or <button>:

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

For each widget, you will insert your unique “ASSC” string for the value of "data-destini-association"

Example:

<button type="button" class="btn btn-info btn-lg buynow"
data-toggle="modal" data-target="#widget-modal" data-destini-container="destinidiv"
data-destini-association="strawberry_yogurt">Buy Now</button>

Please note, your "ASSC" value is set during the process of creating a widget within your Destini CMS. This can be entered as any alphanumeric value.

STEP 7: BODY and HTML tag styling:

This is possibly not required, but we have found helps with widgets presented in modals on mobile browsers. If you test the widget and modal on your page via mobile, and there are issues with scrolling the widget and/or displaying the entire widget correctly, adding this before </head> this may correct the issue:

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

Click here for more information on creating a new widget.