Skip to content
Matt Zimmermann edited this page Apr 1, 2015 · 2 revisions

../css/forms.css

Replace:

.inline-labeling textarea {
	display: inline-block;
	vertical-align: middle;
	width: 65%;
}

With:

.inline-labeling textarea {
	display: inline-block;
	vertical-align: middle;
	width: 63%;
}

../css/pages.css

Replace:

.ctgy .mfp-iframe,
.product-information--body {
	background: #fff;
	min-height: 40rem;
}

With:

.ctgy .mfp-iframe,
.srch .mfp-iframe,
.product-information--body {
	background: #fff;
	min-height: 40rem;
}

Replace:

.basket-contents {
	padding: 0.75rem 0 0.75rem 0.75rem;
}

With:

.basket-contents,
.order-contents {
	padding: 0.75rem 0 0.75rem 0.75rem;
}

Replace:

@media screen and (min-width: 768px) {
	.invc .navigation-set,
	.ordl .navigation-set,
	.ocst .navigation-set,
	.ous1 .navigation-set,
	.ousm .navigation-set,
	.uatm .navigation-set,
	.uatr .navigation-set,
	.osel .navigation-set,
	.opay .navigation-set {
		height: 0;
		visibility: hidden;
	}
}
.ordl .mobile-navigation-bar,
.ocst .mobile-navigation-bar,
.ous1 .mobile-navigation-bar,
.ousm .mobile-navigation-bar,
.uatm .mobile-navigation-bar,
.uatr .mobile-navigation-bar,
.osel .mobile-navigation-bar,
.opay .mobile-navigation-bar {
	display: none;
}
.ordl .pre-header nav ul:last-child li,
.ocst .pre-header nav ul:last-child li,
.ous1 .pre-header nav ul:last-child li,
.ousm .pre-header nav ul:last-child li,
.uatm .pre-header nav ul:last-child li,
.uatr .pre-header nav ul:last-child li,
.osel .pre-header nav ul:last-child li,
.opay .pre-header nav ul:last-child li {
	display: none;
	visibility: hidden;
}

With:

@media screen and (min-width: 768px) {
	.invc .horizontal-mega-menu,
	.ordl .horizontal-mega-menu,
	.ocst .horizontal-mega-menu,
	.ous1 .horizontal-mega-menu,
	.ousm .horizontal-mega-menu,
	.uatm .horizontal-mega-menu,
	.uatr .horizontal-mega-menu,
	.osel .horizontal-mega-menu,
	.opay .horizontal-mega-menu {
		height: 0;
		visibility: hidden;
	}
}
.invc .mobile-navigation-bar,
.ordl .mobile-navigation-bar,
.ocst .mobile-navigation-bar,
.ous1 .mobile-navigation-bar,
.ousm .mobile-navigation-bar,
.uatm .mobile-navigation-bar,
.uatr .mobile-navigation-bar,
.osel .mobile-navigation-bar,
.opay .mobile-navigation-bar {
	display: none;
}
.invc .pre-header nav ul:last-child li,
.ordl .pre-header nav ul:last-child li,
.ocst .pre-header nav ul:last-child li,
.ous1 .pre-header nav ul:last-child li,
.ousm .pre-header nav ul:last-child li,
.uatm .pre-header nav ul:last-child li,
.uatr .pre-header nav ul:last-child li,
.osel .pre-header nav ul:last-child li,
.opay .pre-header nav ul:last-child li {
	display: none;
	visibility: hidden;
}

Replace:

.update-record label {
	width: auto;
}

With:

.update-record label {
	font-size: 0.75rem;
	width: auto;
}

../css/structure.css

Replace:

.mini-basket-container {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .3);
	float: none;
	position: absolute;
	top: -35rem;
	right: 0;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	z-index: 1001;
}

With:

.mini-basket-container {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .3);
	float: none;
	position: absolute;
	top: -40rem;
	right: 0;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	z-index: 1001;
}

../js/plugins.js

Replace:

// ---- Mobile Navigation Functions ---- //
	(function(f){if(Array.prototype.forEach){var b=document.body;f=document.querySelector("#js-site-overlay");var g=document.querySelectorAll(".toggle-slide-top"),h=document.querySelectorAll(".toggle-slide-right"),a=document.querySelectorAll(".toggle-slide-bottom"),c=document.querySelectorAll(".toggle-slide-left");document.querySelector(".mobile-menu-top");document.querySelector(".mobile-menu-right");document.querySelector(".mobile-menu-bottom");document.querySelector(".mobile-menu-left");var d;[].slice.call(g).forEach(function(a, c){a.addEventListener("click",function(e){e.stopPropagation();e.preventDefault();e.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-top-open";d="mobile-menu-active mobile-menu-top-open"})});[].slice.call(h).forEach(function(a,c){a.addEventListener("click",function(e){e.stopPropagation();e.preventDefault();e.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-right-open";d="mobile-menu-active mobile-menu-right-open"})});[].slice.call(a).forEach(function(a, c){a.addEventListener("click",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-bottom-open";d="mobile-menu-active mobile-menu-bottom-open"})});[].slice.call(c).forEach(function(a,c){a.addEventListener("click",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-left-open";d="mobile-menu-active mobile-menu-left-open"})});f.addEventListener("click",function(a){a.stopPropagation(); a.preventDefault();a.stopImmediatePropagation();b.className=b.className.replace(" "+d,"").replace(d,"");d=""});[].slice.call(document.querySelectorAll(".close-mobile-menu")).forEach(function(a,c){a.addEventListener("click",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();b.className=b.className.replace(" "+d,"").replace(d,"");d=""})})}})(window); function mobileNavigation(){function f(){768>=$(window).innerWidth()?0==$("#js-mobile-navigation ul").length&&(g.show(),$(b).append(h),$("#js-mobile-navigation ul li span").each(function(){if("0"!=$(this).next().length){$(this).addClass("parent");var a=$(this).children("a").text();$(this).parent("li").append('<span data-name="'+a+'" data-rt-icon="&#x64;" class="next"></span>')}})):0==$("#js-navigation-bar ul").length&&(g.hide(),$("#js-mobile-navigation").find($(".clone").remove()),$("#js-navigation-bar").append(h.removeClass("hide")), $(".next").remove())}var b=$("#js-mobile-navigation"),g=$("#js-mobile-menu-button"),h=$("#js-navigation-set");$(window).on("load resize",function(){f()});b.on("click","span.next",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();$(this).siblings("span").closest("ul").addClass("hide");$parent=$(this).text();$new=$(this).prev("ul").clone().addClass("clone").appendTo(b);a=$(this).attr("data-name");$('<li><span class="back"><a>&#9668; Back</a></span></li>').prependTo($new); if($(".navigation-trail").length)c=$(this).parent("li").siblings(".navigation-trail").clone(),$(c).children("span").append(" / "+a),c.prependTo($new);else{var c=$('<li class="navigation-trail"><span>Home</span></li>').prependTo($new);$(c).children("span").append(" / "+a)}});b.on("click","span.back",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();$(this).closest("ul").prev("ul").removeClass("hide");breadcrumb=$("a.root").text();last=breadcrumb.substr(breadcrumb.lastIndexOf(" / ")+ 1);$old=$(this).closest("ul");$old.remove();$("a.root").html(function(a,b){return b.replace(last,"")})})}mobileNavigation=new mobileNavigation;

With:

// ---- Mobile Navigation Functions ---- //
	(function(f){if(Array.prototype.forEach){var b=document.body;f=document.querySelector("#js-site-overlay");var g=document.querySelectorAll(".toggle-slide-top"),h=document.querySelectorAll(".toggle-slide-right"),a=document.querySelectorAll(".toggle-slide-bottom"),c=document.querySelectorAll(".toggle-slide-left");document.querySelector(".mobile-menu-top");document.querySelector(".mobile-menu-right");document.querySelector(".mobile-menu-bottom");document.querySelector(".mobile-menu-left");var d;[].slice.call(g).forEach(function(a, c){a.addEventListener("click",function(e){e.stopPropagation();e.preventDefault();e.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-top-open";d="mobile-menu-active mobile-menu-top-open"})});[].slice.call(h).forEach(function(a,c){a.addEventListener("click",function(e){e.stopPropagation();e.preventDefault();e.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-right-open";d="mobile-menu-active mobile-menu-right-open"})});[].slice.call(a).forEach(function(a, c){a.addEventListener("click",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-bottom-open";d="mobile-menu-active mobile-menu-bottom-open"})});[].slice.call(c).forEach(function(a,c){a.addEventListener("click",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-left-open";d="mobile-menu-active mobile-menu-left-open"})});f.addEventListener("click",function(a){a.stopPropagation(); a.preventDefault();a.stopImmediatePropagation();b.className=b.className.replace(" "+d,"").replace(d,"");d=""});[].slice.call(document.querySelectorAll(".close-mobile-menu")).forEach(function(a,c){a.addEventListener("click",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();b.className=b.className.replace(" "+d,"").replace(d,"");d=""})})}})(window); function mobileNavigation(){function f(){960>=$(window).innerWidth()?0==$("#js-mobile-navigation ul").length&&(g.show(),$(b).append(h),$("#js-mobile-navigation ul li span").each(function(){if("0"!=$(this).next().length){$(this).addClass("parent");var a=$(this).children("a").text();$(this).parent("li").append('<span data-name="'+a+'" data-rt-icon="&#x64;" class="next"></span>')}})):0==$("#js-navigation-bar ul").length&&(g.hide(),$("#js-mobile-navigation").find($(".clone").remove()),$("#js-navigation-bar").append(h.removeClass("hide")), $(".next").remove())}var b=$("#js-mobile-navigation"),g=$("#js-mobile-menu-button"),h=$("#js-navigation-set");$(window).on("load resize",function(){f()});b.on("click","span.next",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();$(this).siblings("span").closest("ul").addClass("hide");$parent=$(this).text();$new=$(this).prev("ul").clone().addClass("clone").appendTo(b);a=$(this).attr("data-name");$('<li><span class="back"><a>&#9668; Back</a></span></li>').prependTo($new); if($(".navigation-trail").length)c=$(this).parent("li").siblings(".navigation-trail").clone(),$(c).children("span").append(" / "+a),c.prependTo($new);else{var c=$('<li class="navigation-trail"><span>Home</span></li>').prependTo($new);$(c).children("span").append(" / "+a)}});b.on("click","span.back",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();$(this).closest("ul").prev("ul").removeClass("hide");breadcrumb=$("a.root").text();last=breadcrumb.substr(breadcrumb.lastIndexOf(" / ")+ 1);$old=$(this).closest("ul");$old.remove();$("a.root").html(function(a,b){return b.replace(last,"")})})}mobileNavigation=new mobileNavigation;

Replace:

// ---- Mini-Basket Functions ---- //
	$.fn.isOnScreen=function(){var a=$(window),b=a.scrollTop(),d=a.scrollLeft(),e,c=this.offset();e=d+a.width();a=b+a.height();c.right=c.left+this.outerWidth();c.bottom=c.top+this.outerHeight();return!(e<c.left||d>c.right||a<c.top||b>c.bottom)};
	function MiniBasket(){var a=$("#js-mini-basket, #js-mobile-basket-button, #js-mobile-footer-basket"),b=$("#js-mini-basket-container"),d=$("body");a&&b&&($(a).on("click",function(a){b.addClass("open");0!=d.scrollTop&&$("html, body").animate({scrollTop: '0px'}, 400);a.preventDefault()}),d.on("click","#js-continue-shopping",function(a){a.preventDefault();b.removeClass("open")}),d.on("click",function(){b.hasClass("open")&&b.isOnScreen()&&b.removeClass("open")}),b.removeClass("open"))}var minibasket=new MiniBasket;

With:

// ---- Mini-Basket Functions ---- //
	$.fn.isOnScreen=function(){var a=$(window),b=a.scrollTop(),d=a.scrollLeft(),e,c=this.offset();e=d+a.width();a=b+a.height();c.right=c.left+this.outerWidth();c.bottom=c.top+this.outerHeight();return!(e<c.left||d>c.right||a<c.top||b>c.bottom)};
	function MiniBasket(){var a=$("#js-mini-basket, #js-mobile-basket-button, #js-mobile-footer-basket"),b=$("#js-mini-basket-container"),d=$("body");a&&b&&($(a).on("click",function(a){b.toggleClass("open");0!=d.scrollTop&&$("html, body").animate({scrollTop: '0px'}, 400);a.preventDefault()}),d.on("click","#js-continue-shopping",function(a){a.preventDefault();b.removeClass("open")}),d.on("click",function(){b.hasClass("open")&&b.isOnScreen()&&window.matchMedia&&b.removeClass("open")}),b.removeClass("open"))}var minibasket=new MiniBasket;

../js/scripts.js

Replace:

// ---- Open Product Image Gallery ---- //
productGallery: function (trigger) {
	trigger.on('click', function (e) {
		var startAt = $(this).attr('data-index');
		
		e.preventDefault();
		if (gallery.length > 0) {
			$.magnificPopup.open({
				callbacks: {
					open: function () {
						//$.magnificPopup.instance.goTo(startAt);
					}
				},
				gallery: {
					enabled: true
				},
				items: gallery,
				type: 'image'
			});
		}
		else {
			$.magnificPopup.open({
				items: {
					src: $('#js-main-image').attr('data-image')
				},
				type: 'image'
			});
		};
	});
},

With:

// ---- Open Product Image Gallery ---- //
productGallery: function (trigger) {
	trigger.on('click', function (e) {
		var startAt = Number($(this).attr('data-index'));
		
		e.preventDefault();
		if (gallery.length > 0) {
			$.magnificPopup.open({
				callbacks: {
					open: function () {
						$.magnificPopup.instance.goTo(startAt);
					}
				},
				gallery: {
					enabled: true
				},
				items: gallery,
				type: 'image'
			});
		}
		else {
			$.magnificPopup.open({
				items: {
					src: $('#js-main-image').attr('data-image')
				},
				type: 'image'
			});
		};
	});
},

Replace:

// ---- Open Product Image Gallery ---- //
cornerstoneUX.sharedFunctions.productGallery($('#js-main-image-zoom'));

var thumbnails = document.getElementById('js-thumbnails');

for (var i = 0; i < thumbnails.children.length; i++) {
	(function (index) {
		thumbnails.children[i].onclick = function () {
			document.getElementById('js-main-image-zoom').setAttribute('data-index', index);
		}
	})(i);
};

$.ajax({
	cache: true,
	crossDomain: true,
	dataType: 'script',
	url: '../js/jquery.slick.min.js'
}).done(function () {
	$('#js-thumbnails').slick({
		draggable: false,
		slide: 'img',
		slidesToScroll: 4,
		slidesToShow: 4,
		responsive: [
			{
				breakpoint: 1040,
				settings: {
					slidesToScroll: 3,
					slidesToShow: 3
				}
			},
			{
				breakpoint: 608,
				settings: {
					slidesToScroll: 2,
					slidesToShow: 2
				}
			}
		]
	});
});

With:

// ---- Open Product Image Gallery ---- //
cornerstoneUX.sharedFunctions.productGallery($('#js-main-image-zoom'));

var mainImageZoom = $('#js-main-image-zoom'),
	thumbnails = $('#js-thumbnails');
	
thumbnails.on('click', 'div', function () {
	var thumbnailIndex = $(this).attr('data-index');
	mainImageZoom.attr('data-index', thumbnailIndex);
});

$.ajax({
	cache: true,
	crossDomain: true,
	dataType: 'script',
	url: '../js/jquery.slick.min.js'
}).done(function () {
	$('#js-thumbnails').slick({
		draggable: false,
		slide: 'img',
		slidesToScroll: 4,
		slidesToShow: 4,
		responsive: [
			{
				breakpoint: 1040,
				settings: {
					slidesToScroll: 3,
					slidesToShow: 3
				}
			},
			{
				breakpoint: 608,
				settings: {
					slidesToScroll: 2,
					slidesToShow: 2
				}
			}
		]
	});
});

Replace:

// ---- Update Display When Attribute Machine Fires ---- //
MivaEvents.SubscribeToEvent('variant_changed', function () {
	gallery.length = 0;
	outOfStock ();
	selectedSwatch ();
});

With:

// ---- Update Display When Attribute Machine Fires ---- //
MivaEvents.SubscribeToEvent('variant_changed', function () {
	gallery.length = 0;
	mainImageZoom.attr('data-index', 0);
	thumbnailIndex = 0;
	outOfStock ();
	selectedSwatch ();
});
Clone this wiki locally