ab-helpers.js

/**
 * Polls for an HTML element until DOM ready
 *
 * @param {String} selector - Any valid jQuery selector
 * @param {Function} callback - A callback function to run once the selected element has been found
 * @param {Number} [interval=50] - Integer representing the polling interval in milliseconds
 */
export function when(selector, callback, interval = 50) {
  if(typeof $ === 'undefined' && typeof jQuery === 'function') {
    $ = jQuery;
  }
  const $element = $(selector);

  if ($element.length) return callback($element);
  else if (document.readyState === 'complete') return;
  else return setTimeout(function() {
    when(selector, callback, interval);
  });
}
/**
 * Tracks an experiment metric - Clerhead to fill out function body later
 * @see Optimization Metrics portion of Test Plan - https://goo.gl/JhviW5
 *
 * @param {String} category - metric category
 * @param {String} event - metric event
 * @param {String} [label] - Optional metric label
 */
export function track(category, event, label) {
  console.log('CLEARHEAD OPTIMIZATION METRIC:');
  console.log('\tcategory:', category);
  console.log('\tevent:', event);
  console.log('\tlabel:', label);
}

categoryMap.js

export function categoryMap() {
  return {
    home: {
      url: 'https://www.freshdirect.com/index.jsp',
      children: [],
    },
    fresh: {
      url: 'javascript:void(0)',
      children: [
        { name:'fruit', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=fru&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product&trk=gnav' },
        { name:'vegetables', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=veg&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product&trk=gnav' },
        { name:'dairy', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=dai&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product&trk=gnav' },
        { name:'butcher-shop', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=mea&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product&trk=gnav' },
        { name:'seafood', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=sea&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product&trk=gnav' },
        { name:'deli', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=del&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product' },
        { name:'cheese-shop', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=che&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product' },
        { name:'bakery^-pastry-&-sweets', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=bky&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product&trk=gnav' },
        { name:'catering', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=local&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product' },
        { name:'flowers', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=local&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product' },
        { name:'fresh-coffee', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=gro_coffe_ground&pageSize=30&all=false&activePage=1&sortBy=Sort_PopularityUp&orderAsc=true&activeTab=product&pfg_pan=clearall' },
        { name:'local-farms', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=local&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product' },
      ],
    },
    grocery: {
      url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=supergro&pageSize=30&all=true&activePage=1&sortBy=null&orderAsc=false&activeTab=product&trk=gnav',
      children: [
        {name: 'beer',url:'https://www.freshdirect.com/browse.jsp?pageType=browse&id=beer&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product&trk=gnav'},
        {name: 'beverages', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=bev&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product'},
        {name: 'frozen',url:'https://www.freshdirect.com/browse.jsp?pageType=browse&id=fro&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product&trk=gnav'},
        {name: 'snacks',url:'https://www.freshdirect.com/browse.jsp?pageType=browse&id=gro_snack&pageSize=30&all=true&activePage=1&sortBy=Sort_PopularityUp&orderAsc=true&activeTab=product'},
        {name: 'nuts-&-dried-fruit',url:'https://www.freshdirect.com/browse.jsp?pageType=browse&id=gro_dfnt&pageSize=30&all=true&activePage=1&sortBy=Sort_PopularityUp&orderAsc=true&activeTab=product'},
        {name: 'breakfast-&-cereal',url:'https://www.freshdirect.com/browse.jsp?pageType=browse&id=gro_cerea&pageSize=30&all=true&activePage=1&sortBy=Sort_PopularityUp&orderAsc=true&activeTab=product'},
        {name: 'pasta-&-sauce',url:'https://www.freshdirect.com/browse.jsp?pageType=browse&id=gro_pasta&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product'},
        {name: 'rice^-beans^-&-grains',url:'https://www.freshdirect.com/browse.jsp?pageType=browse&id=gro_rice&pageSize=30&all=true&activePage=1&sortBy=Sort_PopularityUp&orderAsc=true&activeTab=product'},
        {name: 'baking-needs',url:'https://www.freshdirect.com/browse.jsp?pageType=browse&id=gro_bakin&pageSize=30&all=true&activePage=1&sortBy=Sort_PopularityUp&orderAsc=true&activeTab=product'},
        {name: 'condiments-&-sauces',url:'https://www.freshdirect.com/browse.jsp?pageType=browse&id=gro_condi&pageSize=30&all=true&activePage=1&sortBy=Sort_PopularityUp&orderAsc=true&activeTab=product'},
        {name: 'canned',url:'https://www.freshdirect.com/browse.jsp?pageType=browse&id=gro_canne&pageSize=30&all=true&activePage=1&sortBy=Sort_PopularityUp&orderAsc=true&activeTab=product'},
        {name: 'bread-&-bakery',url:'https://www.freshdirect.com/browse.jsp?pageType=browse&id=gro_baker_bread&pageSize=30&all=false&activePage=1&sortBy=Sort_PopularityUp&orderAsc=true&activeTab=product&pfg_pan=clearall'},
        {name: 'laundry^-paper^-cleaning',url:'https://www.freshdirect.com/browse.jsp?pageType=browse&id=hhd&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product'},
        {name: 'health-&-wellness',url:'https://www.freshdirect.com/browse.jsp?pageType=browse&id=hba&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product'},
      ],
    },
    meals: {
      url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=meals&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product&trk=gnav',
      children: [
        {name: 'dinner', url: 'javascript:void(0)'},
        {name: 'lunch', url: 'javascript:void(0)'},
        {name: 'breakfast', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=meals_breakfast&pageSize=30&all=true&activePage=1&sortBy=Sort_PopularityUp&orderAsc=true&activeTab=product'},
        {name: 'sides', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=meals_sides&pageSize=30&all=true&activePage=1&sortBy=Sort_PopularityUp&orderAsc=true&activeTab=product'},
        {name: 'salads', url: 'javascript:void(0)'},
        {name: 'soup-and-chilli', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=meals_soup&pageSize=30&all=true&activePage=1&sortBy=Sort_PopularityUp&orderAsc=true&activeTab=product'},
        {name: 'dips-&-salsa', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=meals_salsa&pageSize=30&all=true&activePage=1&sortBy=Sort_PopularityUp&orderAsc=true&activeTab=product'},
        {name: 'new-products', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=meals_new&pageSize=30&all=false&activePage=1&sortBy=Sort_PopularityUp&orderAsc=true&activeTab=product'},
      ],
    },
    wine_amp_spirits: {
      url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=fdw&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product&trk=gnav',
      children: [
        {name: 'wine', url: 'javascript:void(0)'},
        {name: 'spirits', url: 'javascript:void(0)'},
      ],
    },
    deals: {
      url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=deals&pageSize=30&all=false&activePage=1&sortBy=null&orderAsc=false&activeTab=product',
      children: [
        {name: 'fresh-deals', url: 'javascript:void(0);'},
        {name: 'deals-for-me ', url: 'javascript:void(0);'},
      ],
    },
    featured: {
      url: 'javascript:void(0)',
      children: [
        {name: 'staff-picks', url: 'javascript:void(0)'},
        {name: 'featured-partners', url: 'javascript:void(0)'},
        {name: 'seasonal-favorites', url: 'https://www.freshdirect.com/browse.jsp?pageType=browse&id=top_rated&pageSize=30&all=true&activePage=1&sortBy=Sort_PopularityUp&orderAsc=true&activeTab=product'},
        {name: 'butcher\'s-best', url: 'javascript:void(0)'},
      ],
    },
    my_store: {
      url: 'javascript:void(0)',
      children: [
        {name: 'my-past-items', url: 'https://www.freshdirect.com/quickshop/qs_past_orders.jsp#%7B%22timeFrame%22%3A%22timeFrameAll%22%2C%22sortId%22%3A%22freq%22%2C%22searchTerm%22%3Anull%2C%22tabType%22%3A%22PAST_ORDERS%22%7D'},
        {name: 'my-favorites', url: 'https://www.freshdirect.com/quickshop/qs_top_items.jsp#%7B%22timeFrame%22%3A%22timeFrameAll%22%2C%22sortId%22%3A%22freq%22%2C%22searchTerm%22%3Anull%2C%22tabType%22%3A%22TOP_ITEMS%22%7D'},
        {name: 'my-orders', url: 'https://www.freshdirect.com/your_account/order_history.jsp'},
        {name: 'deals-for-me', url: 'javascript:void(0)'},
        {name: 'recommended-for-me', url: 'javascript:void(0)'},
        {name: 'express-shop', url: 'javascript:void(0)'},
      ],
    },
  }
}

gulpfile.js

var gulp = require('gulp');
var sequence = require('gulp-sequence');
var del = require('del');
var eslint = require('gulp-eslint');
var through = require('through2');
var babelify = require('babelify');
var browserify = require('browserify');
var sassify = require('sassify');
var stringify = require('stringify');

gulp.task('lint', function () {
  return gulp.src('src/**/*.js')
    .pipe(eslint())
    .pipe(eslint.format());
});

gulp.task('clean', function () {
  del(['./dist/**/*']);
});

var forceDirective = '/* _optimizely_evaluate=force */\n';
var begOptimizely = ';(function($) {';
var safeDirective = '\n/* _optimizely_evaluate=safe */';
var endOptimizely = '})(window.optimizely.$);';

gulp.task('browserify', function () {
  return gulp.src('./src/variations/*.js')
    .pipe(through.obj(function (file, enc, next) {
      browserify(file.path)
      .transform(babelify, { presets: ['es2015'] })
      .transform(stringify(['.html']))
      .transform(sassify, {
        'auto-inject': true, // Inject css directly in the code
        base64Encode: false, // Use base64 to inject css
        sourceMap: false // Add source map to the code
      })
      .bundle(function (err, res) {
        file.contents = res;
        next(null, file);
      });
    }))
    .pipe(through.obj(function (file, enc, next) {
      // get string of buffer contents
      var contents = file.contents.toString();

      file.contents = new Buffer(forceDirective + contents + safeDirective);
      next(null, file);
    }))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('optimizely', function () {
  return gulp.src('./src/variations/*.js')
    .pipe(through.obj(function (file, enc, next) {
      browserify(file.path)
      .transform(babelify, { presets: ['es2015'] })
      .transform(stringify(['.html']))
      .transform(sassify, {
        'auto-inject': true, // Inject css directly in the code
        base64Encode: false, // Use base64 to inject css
        sourceMap: false // Add source map to the code
      })
      .bundle(function (err, res) {
        file.contents = res;
        next(null, file);
      });
    }))
    .pipe(through.obj(function (file, enc, next) {
      // get string of buffer contents
      var contents = file.contents.toString();

      file.contents = new Buffer(forceDirective + begOptimizely + contents + endOptimizely + safeDirective);
      next(null, file);
    }))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('default', sequence(['clean', 'lint'], 'optimizely'));
gulp.task('prod', sequence(['clean', 'lint'], 'browserify'));

navTemplate.html

<li class="top-item {{lcCatName}}-top-nav" data-id="{{lcCatName}}" aria-haspopup="true" aria-labelledby="globalnav-popup-body-{{lcCatName}}" tabindex="0">
  <span class="top-item-link">
    <a href="{{link}}">{{catName}}</a>
    </span>
    {{childLinks}}
  </li>

v1.js

import {when, track} from '../services/ab-helpers.js';
import {categoryMap} from '../services/category-map.js';
import styles from '../styles/variations.scss';
import topNavTemplate from '../views/navTemplate.html';

let catMap = categoryMap();

const experimentCategory = 'exp-44.0-nav-test-frictionless';


(($) => {
  // Add exp and variation classes to html
  $('html').addClass('exp-44 v1');

  // Append any styles for this variation
  $('head').append('<style id="exp-03-v1-styles">' + styles + '</script>');

  when('body', ($body) => {
    // store reference to top level navigation
    const $topNav = $('.top-nav-items');
    // remove top level links
    $topNav.html('');
    for(let i in catMap) {
      let categoryName = i;
      categoryName = categoryName.replace(/_/g, ' ').replace('amp', '&');
      let catNavTemplate = topNavTemplate;
      let topLevelCategory = catMap[i];


      catNavTemplate = catNavTemplate.replace('{{catName}}', categoryName);
      catNavTemplate = catNavTemplate.replace('{{link}}', topLevelCategory.url);
      catNavTemplate = catNavTemplate.replace(/{{lcCatName}}/g, i);

      if(topLevelCategory.children.length > 0) {
        let childLinks = '<ul>'
        for(let i = 0; i < topLevelCategory.children.length; i++) {
          const child = topLevelCategory.children[i];
          let childName = child.name
                          // dashes to spaces
                          .replace(/-/g, ' ')
                          // ^ to commas
                          .replace(/\^/g, ',')
                          // capitalize words
                          .replace(/\b\w/g, l => l.toUpperCase());
          let childLink = `<li><a href="${child.url}">${childName}</a></li>`;
          childLinks += childLink;
        }
        childLinks += '</ul>';
        catNavTemplate = catNavTemplate.replace('{{childLinks}}', childLinks);
      } else {
        catNavTemplate = catNavTemplate.replace('{{childLinks}}', '');
      }
      $topNav.append(catNavTemplate);

    }
  });
})(jQuery);

function trackTopLevelNav() {
}

function trackBottomLevelNav() {
}

function trackCreateAccount() {
}

variations.scss

$navTextColor: #7d7d7d;
$navTextColorHover: #dbefd8;

.exp-44 {
  .top-nav-items {
    & > li {
      &:first-child {
        width:90px;
      }
      width:120px;
      text-align:center;
      position:relative;
      & > span {
        & > a {
          &:hover {
            background-color:#6AAA6D;
            color: $navTextColorHover;
          }
        }
      }
      ul {
        display:none;
        background-color:#fff;
        width: 100%;
        position: absolute;
        line-height:1.5em;

        & > li {
          & a {
            display:block;
            color: $navTextColor;
            text-transform:none;
            text-align:left;
          }
        }

        &::before {
          content: '';
          width:0;
          height:0;
          position: absolute;
          top:-5px;
          left:45%;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-bottom: 5px solid #fff;
        }
      }
      &:hover {
        ul {
          display:block;
        }
      }
    }
  }
}