From c4ad797009b6199a7535d8d670d39496d2c8252d Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 6 Apr 2022 18:05:11 +0200
Subject: [PATCH] wip #4259 @1

---
 images/symbols/cart-overlay.svg               |  4 ++
 .../fluidbook/cart/fluidbook.cart.thiriet.js  |  4 +-
 js/libs/fluidbook/fluidbook.cart.js           |  3 +-
 style/cart.less                               | 54 ++++++++++++-------
 4 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/images/symbols/cart-overlay.svg b/images/symbols/cart-overlay.svg
index 4d6ed28e..4088fa1a 100644
--- a/images/symbols/cart-overlay.svg
+++ b/images/symbols/cart-overlay.svg
@@ -18,4 +18,8 @@
 		S8.4,1,17.5,1S34,8.4,34,17.5S26.6,34,17.5,34z"/>
         <rect x="8.7" y="16.5" width="17.5" height="2"/>
     </symbol>
+    <symbol id="link-cart-info" viewBox="0 0 20 20">
+        <path d="M10,1.43c4.73,0,8.57,3.85,8.57,8.57s-3.85,8.57-8.57,8.57S1.43,14.73,1.43,10,5.27,1.43,10,1.43m0-1.43C4.48,0,0,4.48,0,10s4.48,10,10,10,10-4.48,10-10S15.52,0,10,0h0Z"/>
+        <path d="M9.27,5.67c-.19-.19-.29-.42-.29-.69s.1-.51,.29-.7,.44-.29,.73-.29,.54,.09,.73,.28c.19,.18,.29,.41,.29,.68s-.1,.52-.29,.71-.44,.29-.73,.29-.54-.09-.73-.28Zm-.02,1.89h1.51V15.88h-1.51V7.56Z"/>
+    </symbol>
 </svg>
diff --git a/js/libs/fluidbook/cart/fluidbook.cart.thiriet.js b/js/libs/fluidbook/cart/fluidbook.cart.thiriet.js
index b8f63c88..e9e2688f 100644
--- a/js/libs/fluidbook/cart/fluidbook.cart.thiriet.js
+++ b/js/libs/fluidbook/cart/fluidbook.cart.thiriet.js
@@ -28,8 +28,8 @@ FluidbookCartThiriet.prototype = {
             return false;
         });
 
-        $(document).on(this.fluidbook.input.clickEvent, '[data-cart-ref] .info', function () {
-            var ref = $(this).closest('[data-cart-ref]').data('cart-ref');
+        $(document).on(this.fluidbook.input.clickEvent, '[data-cart-ref].overlay', function () {
+            var ref = $(this).data('cart-ref');
             try {
                 infoProduct(ref);
             } catch (e) {
diff --git a/js/libs/fluidbook/fluidbook.cart.js b/js/libs/fluidbook/fluidbook.cart.js
index 74b0eb27..7e295077 100644
--- a/js/libs/fluidbook/fluidbook.cart.js
+++ b/js/libs/fluidbook/fluidbook.cart.js
@@ -78,13 +78,12 @@ FluidbookCart.prototype = {
 
         if (this.fluidbook.settings.cartLinkAppearance === 'overlay') {
             $('a[data-cart-ref]').each(function () {
-
                 var paddingTop = 0.5 * ($(this).outerHeight() - 100);
                 var paddingLeft = 0.5 * ($(this).outerWidth() - 250);
                 $(this).attr('data-tooltip', null).addClass('overlay').css({
                     paddingTop: paddingTop,
                     paddingLeft: paddingLeft
-                }).html('<div class="remove">' + getSpriteIcon('link-cart-remove') + getSpriteIcon('link-cart-remove-hover') + '</div><div class="add">' + getSpriteIcon('link-cart-add') + getSpriteIcon('link-cart-add-hover') + '</div>');
+                }).html('<div class="remove">' + getSpriteIcon('link-cart-remove') + getSpriteIcon('link-cart-remove-hover') + '</div><div class="add">' + getSpriteIcon('link-cart-add') + getSpriteIcon('link-cart-add-hover') + '</div><div class="infos">' + getSpriteIcon('link-cart-info')+'</div>');
             });
         }
     },
diff --git a/style/cart.less b/style/cart.less
index 832bc4b6..b30420d2 100644
--- a/style/cart.less
+++ b/style/cart.less
@@ -5,38 +5,52 @@ a[data-cart-ref] {
     color: #fff;
 
     div {
-      @w: 100px;
-      display: none;
-      position: relative;
-      width: @w;
-      height: @w;
+      &.infos {
+        @w: 50px;
+        width: @w;
+        height: @w;
+        position: absolute;
+        bottom: 50px;
+        right: 50px;
+        pointer-events: none;
+        display: none;
+      }
 
-      &:last-child {
+      @w: 100px;
+      &.add {
         margin-left: unit(@w*0.5, px);
       }
 
-      svg {
-        top: 0;
-        left: 0;
+      &.add, &.remove {
+        display: none;
+        position: relative;
         width: @w;
         height: @w;
-        overflow: visible;
-        position: absolute;
-        display: block;
 
-        &:first-child {
-          display: none;
-        }
-      }
 
-      &:hover {
         svg {
+          top: 0;
+          left: 0;
+          width: @w;
+          height: @w;
+          overflow: visible;
+          position: absolute;
+          display: block;
+
           &:first-child {
-            display: block;
+            display: none;
           }
+        }
 
-          &:last-child {
-            display: none;
+        &:hover {
+          svg {
+            &:first-child {
+              display: block;
+            }
+
+            &:last-child {
+              display: none;
+            }
           }
         }
       }
-- 
2.39.5