Last active
August 29, 2015 14:07
-
-
Save hkxnyc/475fe54bea28843ed3c7 to your computer and use it in GitHub Desktop.
an overlay that triggers when scroll hits bottom 10% of any page on the warbyparker.com site with option to close overlay
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function(){ | |
var cartTotal = 0, | |
cartQuantity = 0, | |
overlayPicture; | |
//initialize when scroll is 90% or over of the document height. | |
var Cart = { | |
init: function() { | |
$(window).scroll(function(){ | |
if ($(this).scrollTop() >= ($(document).height() - ($(this).height()))){ | |
$(window).off("scroll"); | |
Cart.get(); | |
//get method to fetch cart info when scroll hits 90% or more of doc height. | |
} | |
}); | |
}, | |
get: function() { | |
$.get('https://www.warbyparker.com/api/v1/cart').success(function(response) { | |
if(response.line_items){ | |
$.each(response.line_items, function(index, product) { | |
cartTotal += product.amount; | |
cartQuantity = response.line_items.length; | |
//overlay & background triggers only after the cart info has been fetched. | |
}); | |
} | |
Cart.createBackground(); | |
Cart.overlay(cartTotal, cartQuantity); | |
}); | |
}, | |
createBackground: function(){ | |
$('<div>', { | |
'id': 'background', | |
'css': { | |
'position': 'fixed', | |
'background-color': 'rgba(0, 0, 0)', | |
'width': '100%', | |
'height': '100%', | |
'top': '0', | |
'bottom': '0', | |
'left': '0', | |
'right': '0', | |
'opacity': '.5', | |
'z-index': '100', | |
'overflow': 'scroll' | |
} | |
}).appendTo('body'); | |
}, | |
overlay: function(total, quantity) { | |
$('<div>', { | |
'id': 'overlaycard', | |
'html': | |
"<br><br><br><img src='//s.warbyparker.com/images/logo.png?v=d11a25bbdb35ca05cf786660012497d0'><br><br><h2>You have " | |
+ (cartQuantity) + " items in your cart that total $" | |
+ (cartTotal/100).toFixed(2) | |
+". <br> Are you sure you would like to leave?</h2>" | |
+ "<a href='/checkout'><span class='checkout-button cart-button button'>Return to Checkout</span></a>", | |
'css': { | |
'position': 'fixed', | |
'width': '600px', | |
'height': '400px', | |
'margin-top': '-150px', | |
'margin-left': '-300px', | |
'text-align': 'center', | |
'left':'50%', | |
'top':'50%', | |
'background': 'white', | |
'z-index': '1000', | |
'border-radius' : '25px' | |
}, | |
}).appendTo('body'); | |
$('<div>', { | |
'id': 'remove', | |
'html': 'x', | |
'css':{ | |
'background-color':'white', | |
'color':'#00a9ff', | |
'margin': '15px 25px 35px 0px', | |
'padding':'2px', | |
'text-align':'top', | |
'width':'10px', | |
'float':'right', | |
}, | |
}).prependTo('#overlaycard'); | |
$("#remove").on("click", function(){ | |
$("#overlaycard").remove(); | |
$("#background").remove(); | |
}); | |
} | |
}; | |
Cart.init(); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment