From 5fe32b4412bc5c1c5dd6cb1f549d366609abbe25 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 2 Mar 2021 17:22:43 +0100
Subject: [PATCH] wait #4320 @1.5

---
 .../cart/fluidbook.cart.grandvision.js        | 11 ++++--
 style/cart/grandvision.less                   | 38 ++++++++++++++-----
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js b/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js
index 587ad28a..b47cc048 100644
--- a/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js
+++ b/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js
@@ -247,6 +247,9 @@ FluidbookCartGrandVision.prototype = {
         this.fluidbook.menu.viewWrap(res, 'cart-grandvision-selection', 'data-max-width="1100" data-min-width="1100"');
 
         $("#grandvision-selection select").each(function () {
+            if ($this.filters[$(this).attr('name')] === undefined) {
+                return;
+            }
             var allValues = $this.filters[$(this).attr('name')].values;
             $this.filters[$(this).attr('name')].multiselect = $(this).multiSelect({
                 'noneText': $(this).data('label'),
@@ -399,8 +402,8 @@ FluidbookCartGrandVision.prototype = {
         }
 
         selection = '<div class="item" data-ref="' + item + '" data-brand="' + data.BRAND + '" data-category="' + data.Category + '" data-gender="' + data.Gender + '" data-material="' + data.Material + '">';
-        selection += '<div class="img" style="background-image: url(\'data/commerce/' + item + '-front.jpg\');">';
-        selection += '</div>';
+        selection += '<div class="img" style="background-image: url(\'data/commerce/' + item + '-front.jpg\');"></div>';
+        selection += '<div class="img-angle" style="background-image: url(\'data/commerce/' + item + '-angle.jpg\');"></div>';
         selection += '<div class="infos"><h3>' + data['Model Code'] + '</h3>';
         selection += '<p>' + infos.join(' | ') + '</p></div>';
         selection += '<div class="infos-box">' + item + ' | ' + data['Colour Description'] + '</div>';
@@ -478,7 +481,7 @@ FluidbookCartGrandVision.prototype = {
         var res = '<div class="box">';
         res += '<h3>' + b.name + '</h3>';
         res += '<div class="slots override-delete" id="grandvision-selection-slots">';
-        for (var i = 0; i < 10; i++) {
+        for (var i = 0; i < 16; i++) {
             var v = b.refs[i];
             if (v === undefined || v === null) {
                 res += this.slotHTML;
@@ -615,7 +618,7 @@ FluidbookCartGrandVision.prototype = {
                     refs.push($(this).data('ref'));
                 }
             });
-            $this.boxes[$this.boxIndex] = {name: $(this).find('h3').eq(0).text(), refs: refs.slice(0, 10)};
+            $this.boxes[$this.boxIndex] = {name: $(this).find('h3').eq(0).text(), refs: refs.slice(0, 16)};
         });
 
         this.fluidbook.cache.set('boxes', this.boxes);
diff --git a/style/cart/grandvision.less b/style/cart/grandvision.less
index 6b8d909e..e710cb9b 100644
--- a/style/cart/grandvision.less
+++ b/style/cart/grandvision.less
@@ -1,4 +1,4 @@
-#iconList .svg-icon{
+#iconList .svg-icon {
   margin: 0 13px !important;
 }
 
@@ -22,16 +22,20 @@
     .dragging-box-item();
   }
 
-  .img {
+  .img, .img-angle {
     position: absolute;
     top: 0;
     left: 0;
     width: 200px;
-    height: 70px;
+    height: 83px;
     background-position: 50% 50%;
     background-size: cover;
   }
 
+  .img-angle {
+    display: none;
+  }
+
   h3, .infos {
     display: none;
   }
@@ -43,7 +47,7 @@
     margin-top: 5px;
     width: 100%;
     position: absolute;
-    bottom: 2px;
+    bottom: -9px;
     left: 0;
   }
 }
@@ -322,7 +326,7 @@
         margin-top: 17px;
 
         h3 {
-          margin-bottom: 15px;
+          margin-bottom: 0px;
         }
 
         .slots {
@@ -342,7 +346,7 @@
             padding: 15px;
             white-space: normal;
 
-            p{
+            p {
               display: none;
             }
 
@@ -359,7 +363,7 @@
             textarea {
               font-family: @font;
               text-align: center;
-              color:#000;
+              color: #000;
               font-size: 15px;
               border: 0;
               width: 100%;
@@ -371,6 +375,15 @@
           .item {
             position: relative;
             .common-box-item();
+
+            .img-angle {
+              display: block;
+            }
+
+            .img {
+              display: none;
+            }
+
           }
 
           .slot {
@@ -587,9 +600,11 @@
 
       .text {
         padding: 0.25cm;
-        textarea{
+
+        textarea {
           display: none;
         }
+
         p {
           display: block;
           border: 0;
@@ -599,7 +614,7 @@
           resize: none;
           width: 100%;
           height: 100%;
-          color:#000;
+          color: #000;
           background-color: #fff;
         }
       }
@@ -609,8 +624,11 @@
       }
 
       .item {
-
         .img {
+          display: none;
+        }
+
+        .img-angle {
           width: @w;
           height: unit(@w*0.35, cm);
           background-position: 50% 50%;
-- 
2.39.5