0.README.md

Hello Whistle Devs,

We ran these three experiments in Optimizely, and found that the produced good results. These experiments covered a variety of changes related to promotional offers.

The three experiments packaged here were named:

• WSL-16 | HP Promo Popup
• WSL-15 | $20-off Promo (HP Banner)
• WSL-14 | $20-off Promo (HP, PDP, Accessories, Cart)

WSL-16 Adds a popup promotion to the homepage. The promo looks like this.

WSL-15 Adds a promotional banner across the top of the HP (homepage). It looks like this.

WSL-14 Augments the price of the whistle product across multiple pages, subtracting a $20 discount and displaying a promotional code. It adds things like this.

Code samples below describe what we did to create these experiments.

Note to developers: Some of this code uses some basic ECMAScript 2015 features. Your final code may or may not make use of these features. Namely, we use Template Literals and Arrow Functions.

Please note: This code was created to run a lean, cost effective experiment. This should be used as a starting point to accelerate your efforts, not as something to directly copy/paste and deploy without running this through your standard production styleguide and QA processes.

We are happy to answer whatever questions you might have along the way!

~ jeff@crometrics.com

1.Homepage.js

//This code is intended to run on the "Home" page: http://www.whistle.com/

/*************************
 * WSL-14 Site Promotion *
 *************************/
var promocode = 'GET20';

// var discount = 0.25, discount_label = discount*100 + '%';
var discount = 20.00, discount_label = '$' + discount;
var calc_discount = (price) => price-discount; //dollar based

$.fn.wsl14modWhistleButton = function(){
  if (this.length){
    this.html(whistle_button_label);
  }
  return this;
};

$.fn.wsl14modHomepageHeader = function(){
  if (this.length){
    let label = `Buy now and get ${discount_label} off. Limited time offer.`;
    $('a.button.orange', this).wsl14modWhistleButton().parent().before(`<div class="offer-label">${label}</div>`);
    this.addClass(`wsl14-wrap`);
  }
};

//On the homepage:
$('.page-block-header.index .wrap').wsl14modHomepageHeader();
//HP buttons:
$('.info-section.animation-section .button').wsl14modWhistleButton();
$('.info-section.activity .button').wsl14modWhistleButton();


/********************
 * WSL-15 HP Banner *
 ********************/

$("html").addClass("wsl15 wsl15-1");

//Add class for selector
$("header.show-popup").addClass("has-super-header");

// Add banner
$("nav.header-slider").after("<a href=\"http://shop.whistle.com/products/whistle-gps-pet-tracker\"><div class=\"super-header white\"><p><strong><span class=\"mobile-hide\">Hot Deal! </span>Get $20 off Whistle GPS Pet Tracker<br> using code GET20</strong> <span class=\"header button orange\">GET OFFER NOW</span></p></div></a>");
$('.store-nav').removeClass('store-nav').addClass('app-nav');


/****************
 * WSL-16 Popup *
 ****************/

import modal_html from './modal.html'; 
//modal_html IS THE CONTENTS OF 7.modal.html
//this html should be embeded into the page.

$(document).ready(function(){
  var delay = 3000;
  
  var $modal = $(modal_html).appendTo($('body')),
      $backdrop = $('div.modal');

  setTimeout(function(){
    $modal.fadeIn(),//$(".popup.promo")
    $backdrop.fadeIn();//$('div.modal')
  }, delay);

});

2.Accessories.js

//This code is intended to run on the "Accessories" page: http://shop.whistle.com/pages/accessories

/*************************
 * WSL-14 Site Promotion *
 *************************/
var promocode = 'GET20';

// var discount = 0.25, discount_label = discount*100 + '%';
var discount = 20.00, discount_label = '$' + discount;
var calc_discount = (price) => price-discount; //dollar based

$.fn.wsl14modAccessoriesPrice = function(){
  if (this.length){
    let label = `Get ${discount_label} off when you buy now with promocode <span>${promocode}</span>.`;
    this.prev().before(`<div class="offer-label">${label}</div>`);
    this.parent().addClass(`wsl14-accessory`);
  }
};

//On the accessories page:
$('#add-item-6939812353').wsl14modAccessoriesPrice();

3.Cart.js

//This code is intended to run on the "Cart" page: http://shop.whistle.com/cart

/*************************
 * WSL-14 Site Promotion *
 *************************/
var promocode = 'GET20';

// var discount = 0.25, discount_label = discount*100 + '%';
var discount = 20.00, discount_label = '$' + discount;
var calc_discount = (price) => price-discount; //dollar based

$.fn.wsl14modCartProduct = function(){
  if (this.length){
    let label = `${discount_label} off each with promocode <span>${promocode}</span>.`;
    this.siblings('.price_total').after(`<div class="offer-label">${label}</div>`);
    this.parent().addClass(`wsl14-cart-product`);
  }
};
$.fn.wsl14modCartTotal = function(){
  if (this.length){
    let label = `Get ${discount_label} off any Whistle GPS Pet Tracker when you enter promocode <span>${promocode}</span> at Checkout.`;
    this.after(`<div class="offer-label">${label}</div>`);
    this.parent().addClass(`wsl14-cart-total`);
  }
};

//NOTICE: The cart page has changed, these selectors probably no longer work, and should be updated to use the new markup:
$('#6939812353.plus').wsl14modCartProduct(); //Whistle GPS Pet Tracker - Additional Tracker
$('#6939741441.plus').wsl14modCartProduct(); //Whistle GPS Pet Tracker - Complete Kit
$('.subtotal .subtotal_amount').wsl14modCartTotal();

4.Shop.js

//This code is intended to run on the "Shop" home page: http://shop.whistle.com/

/*************************
 * WSL-14 Site Promotion *
 *************************/
var promocode = 'GET20';

// var discount = 0.25, discount_label = discount*100 + '%';
var discount = 20.00, discount_label = '$' + discount;
var calc_discount = (price) => price-discount; //dollar based

$.fn.wsl14modShop = function(){
  if (this.length){
    let label = `Buy now and get ${discount_label} off. Limited time offer.`;
    this.before(`<div class="offer-label">${label}</div>`);
    this.parent().addClass(`wsl14-shop`);
  }
};

$('.shop-home .featured-item .button').wsl14modShop();

5.Checkout.js

//This code is intended to run on the "Checkout" page: https://checkout.shopify.com/[...]

/*************************
 * WSL-14 Site Promotion *
 *************************/
var promocode = 'GET20';

// var discount = 0.25, discount_label = discount*100 + '%';
var discount = 20.00, discount_label = '$' + discount;
var calc_discount = (price) => price-discount; //dollar based

$.fn.wsl14modCheckout = function(){
  if (this.length){
    let label = `Enter the promocode <span>${promocode}</span> below to get ${discount_label} off any Whistle GPS Pet Tracker. Limited time offer.`;
    this.prepend(`<div class="offer-label">${label}</div>`);
    this.parent().addClass(`wsl14-checkout`);
  }
};

//Notice: We developed this code as part of WSL-14, but I think it never ended up being deployed to the checkout page.
$('.order-summary__section.order-summary__section--discount').wsl14modCheckout();

6.styles.scss

//This file contains the CSS markup for all three tests.

//These are SCSS variables which represent colors used by the site.
$green: #A1DC00;
$gray: #323335;
$light-gray: #727375;
$orange: #f59e00;

/*************************
 * WSL-14 Site Promotion *
 *************************/

.wsl14-wrap{
  max-width: 400px !important;

  a.button.orange{
    padding-left: 16px;
    padding-right: 16px;
  }
  .button-wrap{
    min-width: 184px !important;
  }
  .offer-label{
    color: white;//$green;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 18px;
  }
}
.wsl14-info {
  position: relative;
  .discount{
    margin-top: 2px !important;
    color: red !important;
  }
  .offer-label{
    width: 55%;
    position: absolute;
    right: 0;
    margin-top: -85px;
    // margin-top: -205px;
    padding: 10px;
    border-radius: 2px;
    background: $green;
    color: white;
    font-size: .9em;

    &:before{
      content: '';
      display: block;
      position: absolute;
      left: -10px;
      top: 50%;
      margin-top: -10px;
      //left arrow:
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;

      border-right:10px solid $green;

    }

    @media (max-width:720px){
      position: static;
      margin: 10px auto;
      &:before{
        display: none;
      }
    }
  }
}//info

//accessories page
.wsl14-accessory{
  $promo-height: 50px;
  min-height: 110px + $promo-height !important;

  &.active{
    min-height: 110px + $promo-height + 50px !important;
  }

  .offer-label{
    height: $promo-height;
    margin: 0;
    font-size: 14px;
    color: $green;
    font-weight: bold;
    // span{
    //   color: $light-gray;
    // }
  }
}

//cart page
.wsl14-cart-product{
  .offer-label{
    color: $green;
    font-weight: bold;
    margin: 10px 0;
    // span{
    //   color: $light-gray;
    // }
  }
}//cart-product

//cart page
.wsl14-cart-total{
  .offer-label{
    background: $green;
    color: white;
    font-weight: bold;
    margin: 10px 0;
    padding: 20px;
    border-radius: 4px;
    line-height: 1.3em;
    font-size: 14px;

    span{
      color: $gray;
    }
  }
}

//checkout
.wsl14-checkout{
  .offer-label{
    background: $green;
    color: white;
    font-weight: bold;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 1.5em;

    span{
      color: $gray;
      font-size: 1.1em;
      letter-spacing: -.06ex;
    }
  }
}//cart-total

//checkout
.wsl14-shop{
  .offer-label{
    color: $green;
    font-weight: bold;
    margin: 10px 0;
  }
}//cart-total



/********************
 * WSL-15 HP Banner *
 ********************/

.wsl15-1 header.has-super-header div.super-header {background-color: #A1DC00; }
.wsl15-1 header.has-super-header div.super-header p {color: #fff;}
.wsl15-1 header.has-super-header div.super-header p span.button {background: #f59e00; color: #fff !important; border-radius: 3px; font-weight: bold; font-size: 14px;}

@media screen and (max-width: 720px) {  
  .wsl15 header.has-super-header {top: 0 !important; }    
  .wsl15 header.has-super-header  div.super-header {height: 75px; }  
  .wsl15 header.has-super-header  div.super-header p {padding-top: 8px;line-height: 30px; }
  .wsl15 header.has-super-header  div.super-header p br {display: block; }  
  .wsl15 header.has-super-header  div.super-header p span.mobile-hide {display: none;}
  .wsl15 header.has-super-header  div.super-header p span.limited {color: #333333 !important;        font-size: .75em; font-weight: 400; }
  .wsl15 header.has-super-header  div.super-header p span.button {padding: 5px 10px; }
  .wsl15-1 header.has-super-header .content > .left-align, 
  .wsl15-1 header.has-super-header .content > .header-hamburger {top: 80px; }
  .wsl15-1 header.fixed-on-scroll .content > .left-align, 
  .wsl15-1 header.fixed-on-scroll .content > .header-hamburger {top: 4px; } 
  
  /* moves dog further down */
  .wsl15-1.wsl-12-1 .page-block-header.index {
    background-position: center 50px;
  }


}

@media screen and (min-width: 721px) { 

  .wsl15 header.has-super-header div.super-header br {display: none;}
  /* shows HOT DEAL */
  .wsl15 header.has-super-header  div.super-header p span.mobile-hide {display: inline; color: #fff !important;}
  .wsl15 header.has-super-header div.super-header span.limited {color: #f59e00 !important; font-weight: 400; font-size: 14px; text-transform: uppercase;}
  .wsl15 header.has-super-header div.super-header span.button {    padding: 5px 15px;    margin-left: 10px; } 
     /* moves dog further down */
  .wsl15-1.wsl-12-1 .page-block-header.index {
    background-position: center 0;
  }
}


/****************
 * WSL-16 Popup *
 ****************/

.popup.promo{
  padding: 0;
  img{
    width: 100%;
    height: auto;
  }
}

7.modal.html

<!-- This file contains the markup used to generate the popup for WSL-16 -->
<div class="popup promo wsl-16" style="display: none;">
    <div class="wrapper">
        <a href="http://shop.whistle.com/products/whistle-gps-pet-tracker" class="wsl-promo-modal-link">
          <img src="//cdn.optimizely.com/img/201252808/f56478138dca49c292b1b6176387a972.jpg" width="1280" height="720">
        </a>
    </div>
</div>