dylanvalade

PUMA Digital and eCommerce Case Studies and Public Comments

Concious Leadership (Emotional Intelligence)

• Erik Larson: Leadership Training, Coaching and Team Facilitation
• This is the secret weapon of working together with high performance and personal joy. Remember, your competition is outside of your organization :)

Headless Content Management and Digital Asset Management

• Sanity CMS and PUMA eCommerce
• Sanity Case Study
• Formidable Case Study: Scaling PUMA eCom Across the Globe

dylanvalade

<!-- Cross Domain Analytics Provided by Google Support -->

<!--
  1. Log into Analytics and go to Admin > (Property Column) Tracking Info > Referral Exclusion List 
  2. Add each linked domain to the list, which says that these are not referrals - they are continutations of the same visit
-->

<!-- Primary Domain Tracking Script (e.g. hayowentha.org) -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

dylanvalade

<!-- WWF's Facebook Code for Ad Audience Targeting -->
<script type="text/javascript">
var fb_param = {};
fb_param.pixel_id = '60063372118';
fb_param.value = '0.00';
(function(){
  var fpw = document.createElement('script');
  fpw.async = true;
  fpw.src = '//connect.facebook.net/en_US/fp.js';
  var ref = document.getElementsByTagName('script')[0];

dylanvalade

<script>

// Use isogram attribute naming convention from Google
(function(i,s,o,g,r,a,m){
	i['causedropObject']=r;
	i[r]=i[r] || function(){
	(i[r].q=i[r].q||[]).push(arguments)},
	i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];
	a.async=1;

dylanvalade

/* CSS */

html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;

dylanvalade

// Make all iframes responsive
// Handle video embeds with aspect ratio
// Input: void
// Return: void
// Dependencies: jQuery
// Call responsiveIframes() in $( document ).ready() or $( window ).load after any DOM manipulation
function responsiveIframes () {
	
	// Handle iframes
	if( $('iframe').length ) {

dylanvalade

/* Enable Bootstrap Hover Drop Downs */
.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

dylanvalade

<!-- Force older Internet Explorer to avoid compatibility mode -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Include HTML5 Shiv and Respond.js to IE 8 and earlier
  https://github.com/aFarkas/html5shiv/blob/master/dist/html5shiv.min.js
  https://github.com/scottjehl/Respond/blob/master/dest/respond.min.js  -->
  
<!-- Include after bootstrap.js 
  HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- Updated to use CDN -->

dylanvalade

/* 
For jQuery.lazy https://github.com/eisbehr-/jquery.lazy

You MUST have a src value on the img for lazy loading to run even if the preloader.gif doesn't exist
Do not leave that src attribute blank:
<img class="load" data-src="path_to/lazy-loaded-image.jpg" src="path_to/preloader.gif" />

In my ajax callback:
loadImages('img.load');

dylanvalade

/*

  Include this after bootstrap.css
  
  Add a class of 'col-xs-offset-*' and 
  if you want to disable the offset at a larger size add in 'col-*-offset-0'
  
  Examples:
  All display sizes (xs,sm,md,lg) have an offset of 1
  <div class="col-xs-11 col-xs-offset-1 col-sm-3">