From bfa1a7a3d5023d5998ededcb5d6d7929a0fb8c2e Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Sun, 21 Feb 2021 12:12:33 +0100 Subject: [PATCH] wait #4284 @3 --- .../cart/fluidbook.cart.grandvision.js | 174 +++++++++++++++++- js/libs/fluidbook/fluidbook.cart.js | 4 + js/libs/fluidbook/fluidbook.menu.js | 11 +- style/cart/grandvision.less | 123 +++++++++++++ 4 files changed, 306 insertions(+), 6 deletions(-) diff --git a/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js b/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js index 6bb6ca04..d2b05ea7 100644 --- a/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js +++ b/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js @@ -8,16 +8,184 @@ function FluidbookCartGrandVision(cart) { FluidbookCartGrandVision.prototype = { init: function () { + var $this = this; + this.items = this.fluidbook.cache.get('cart', []); + $(document).on('click', '.grandvision-slideshow .next', function () { + $this.nextSlide(); + return false; + }); + + $(document).on('click', '.grandvision-slideshow .prev', function () { + $this.prevSlide(); + return false; + }); + + $(document).on('click', '.grandvision-slideshow .dots a', function () { + var diff = $(this).data('i') - $this.currentSlide; + if (diff !== 0) { + $this.gotoSlide($(this).data('i'), diff>=1?1:-1); + } + return false; + }); }, - openMenu: function (p1, p2) { + openMenu: function (p1, p2, cb) { if (p1 === 'details') { - return this.openDetails(p2); + return this.openDetails(p2, cb); + } + }, + + getProductData: function (ref) { + var res = this.fluidbook.settings.basketReferences[ref]; + if (res === undefined || res === undefined) { + return false; + } + return res; + }, + + openDetails(reference, callback) { + var data = this.getProductData(reference); + if (!data) { + this.fluidbook.tooltip.displayTooltip('No product matches this EAN'); + return false; + } + + var res = '
'; + res += this.fluidbook.menu.getCaption('', true); + res += '
'; + res += '
' + res += '

' + data['Model Code'] + '

'; + res += '
    '; + res += '
  • Brand: ' + data.BRAND + '
    • '; + res += '
  • Category: ' + data.Category + '
    • '; + res += '
  • Color: ' + data['Color Code'] + ' ' + data['Colour Description'] + '
    • '; + if (data.Gender !== '') { + res += '
  • Gender: ' + data.Gender + '
    • '; + } + res += '
  • EAN: ' + reference + '
    • '; + res += '
'; + res += '' + getSpriteIcon("external-extra-icon-burger") + ' Add to my selection'; + res += '
'; + res += this.getProductSlideshow(reference, data); + res += '
'; + res += '
'; + + this.fluidbook.menu.viewWrap(res, 'cart-grandvision-details', 'data-max-width="810" data-min-width="810"'); + + if (callback !== undefined) { + callback(); + } + }, + + getProductSlideshow: function (ref, data) { + var slides = ''; + this.nbslides = 0; + this.currentSlide = 0; + this.transitioning = false; + var o=1; + if (data.front) { + slides += '
'; + this.nbslides++; + o=0; + } + if (data.angle) { + slides += '
'; + this.nbslides++; + o=0; + } + if (data['360']) { + slides += '
'; + this.nbslides++; + o=0; } + if (this.nbslides === 0) { + return ''; + } + var res = '
'; + res += '
'; + res += slides; + res += '
'; + if (this.nbslides >= 2) { + res += ''; + res += ''; + res += ''; + } + res += '
'; + return res; + }, + + gotoSlide: function (i, dir) { + if(this.transitioning){ + return; + } + this.transitioning=true; + var $this = this; + this.nextSlideIndex = this.normalizeSlide(i); + var t = 0.6; + var w = 360; + TweenMax.to($('.grandvision-slideshow .slide:eq(' + this.currentSlide + ')'), t, {left: w * dir*-1, opacity: 0}); + TweenMax.fromTo($('.grandvision-slideshow .slide:eq(' + this.nextSlideIndex + ')'), t, {left: w * dir , opacity: 0}, { + left: 0, + opacity: 1, + onComplete: function () { + $this.endTransition(); + } + }); + }, + + endTransition: function () { + this.transitioning = false; + this.currentSlide = this.nextSlideIndex; + $('.grandvision-slideshow .dots a').removeClass('active'); + $('.grandvision-slideshow .dots a:eq('+this.currentSlide+')').addClass('active'); + }, + + normalizeSlide: function (i) { + return (i + this.nbslides) % this.nbslides; + }, + nextSlide: function () { + this.gotoSlide(this.currentSlide + 1, 1); + }, + + prevSlide: function () { + this.gotoSlide(this.currentSlide - 1, -1); }, - openDetails(reference) { + addToCart: function (ref, quantity) { + if (this.items.indexOf(ref) === -1) { + this.items.push(ref); + this.save(); + } + return true; + }, + + removeFromCart: function (key) { + this.items.splice(key, 1); + this.save(); + }, + + save: function () { + this.fluidbook.cache.set('cart', this.getItems()); + this.fluidbook.cart.updateLinks(); + }, + getItems: function () { + var res = []; + var $this = this; + $(this.items).each(function (i, ref) { + if ($this.data[ref] !== undefined && $this.data[ref] !== null) { + res.push(ref); + } + }); + return res; }, }; \ No newline at end of file diff --git a/js/libs/fluidbook/fluidbook.cart.js b/js/libs/fluidbook/fluidbook.cart.js index e7ba9132..1435c1ff 100644 --- a/js/libs/fluidbook/fluidbook.cart.js +++ b/js/libs/fluidbook/fluidbook.cart.js @@ -29,6 +29,7 @@ FluidbookCart.prototype = { } var ref = $(this).data('cart-ref'); + console.log(ref); $this.fluidbook.stats.track(15, $this.fluidbook.currentPage, ref); var tooltipStyle = ''; @@ -42,6 +43,9 @@ FluidbookCart.prototype = { tooltip = $this.fluidbook.l10n.__("the item has been added to your cart"); } $this.fluidbook.tooltip.displayTooltip(tooltip, tooltipStyle); + setTimeout(function(){ + $this.fluidbook.tooltip.hideTooltip(); + },5000) return false; }); diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js index 776c7b8a..7fbd6782 100644 --- a/js/libs/fluidbook/fluidbook.menu.js +++ b/js/libs/fluidbook/fluidbook.menu.js @@ -660,6 +660,7 @@ FluidbookMenu.prototype = { if (m.data('max-width')) { maxWidth = m.data('max-width'); } + var minWidth = 0; switch (m.data('menu')) { case 'chapters': @@ -958,10 +959,14 @@ FluidbookMenu.prototype = { } break; default: - if (m.data('maxwidth') !== null) { - maxWidth = parseInt(m.data('maxwidth')); + if (m.data('max-width') !== null) { + maxWidth = parseInt(m.data('max-width')); } - w = Math.min(w, maxWidth); + if (m.data('min-width') !== null) { + minWidth = parseInt(m.data('min-width')); + } + w = Math.min(Math.max(minWidth, w), maxWidth); + break; } diff --git a/style/cart/grandvision.less b/style/cart/grandvision.less index e69de29b..4e8f8169 100644 --- a/style/cart/grandvision.less +++ b/style/cart/grandvision.less @@ -0,0 +1,123 @@ +#grandvision-details { + @bleu: #2459a9; + background-color: #fff; + max-width: 810px; + width: 810px; + height: 360px; + + .caption { + height: 0; + padding: 0; + } + + .content { + padding: 60px; + text-align: left; + color: #000; + + .grandvision-details-infos { + width: 250px; + display: inline-block; + + h2 { + font-size: 16px; + margin-bottom: 40px; + } + + ul { + list-style-type: none; + font-size: 14px; + } + + a { + display: inline-block; + color: #fff; + background-color: @bleu; + padding: 3px 14px 7px 10px; + text-transform: uppercase; + font-size: 14px; + white-space: nowrap; + margin-top: 40px; + + svg { + position: relative; + top: 4px; + height: 20px; + margin-right: 6px; + } + } + } + + .grandvision-slideshow { + display: inline-block; + width: 360px; + position: relative; + vertical-align: top; + top: 16px; + left: 57px; + + .slides { + position: absolute; + top: 0px; + left: 0px; + width: 360px; + max-width: 360px; + height:202px; + max-height: 202px; + overflow: hidden; + + .slide { + position: absolute; + left: 0px; + top: 0px; + + img, video { + + display: block; + width: 360px; + height: auto; + } + } + } + + .dots { + position: absolute; + top:210px; + left:40%; + + a { + display: block; + float: left; + width: 10px; + height: 10px; + background-color: #ccc; + margin: 0 10px; + border-radius: 50%; + border:2px solid #fff; + + &:hover, &.active { + border-color: @bleu; + background-color: @bleu; + } + } + } + + .prev, .next { + display: block; + width: 16px; + height: 32px; + color: @bleu; + position: absolute; + top: 86px; + } + + .prev { + left: -36px; + } + + .next { + left: 380px; + } + } + } +} \ No newline at end of file -- 2.39.5