wip #7957 @3:00

diff --git a/js/libs/fluidbook/cart/fluidbook.cart.newheidi.js b/js/libs/fluidbook/cart/fluidbook.cart.newheidi.js
index d0aad3cc2072e2463c0a72b0c19c0caa7a9bc6e0..b422bd9138d1b2eb63696515105f39d218b0dc29 100644 (file)
--- a/js/libs/fluidbook/cart/fluidbook.cart.newheidi.js
+++ b/js/libs/fluidbook/cart/fluidbook.cart.newheidi.js
@@ -12,7 +12,7 @@ FluidbookCartNewHeidi.prototype = {
         var $this = this;
         this.items = this.fluidbook.cache.get('cart', {});
 
-        $(document).on(this.fluidbook.input.changeEvent, '#kimplaycart input[name=qty]', function() {
+        $(document).on(this.fluidbook.input.changeEvent, '#newheidicart input[name=qty]', function() {
             let ref = $(this).data('ref')
             $this.items['' + ref]['quantity'] = $(this).val();
             $this.save();
@@ -27,19 +27,6 @@ FluidbookCartNewHeidi.prototype = {
         $(document).on(this.fluidbook.input.clickEvent, '#send-request', function() {
             $this.sendRequest();
         })
-
-        $(document).on(this.fluidbook.input.clickEvent, '#kimplay-additem button', function () {
-            let form = $(this).closest('#kimplay-additem');
-            $this.items[''+$(this).data('ref')] = {
-                name: $(form).find('h3').text(),
-                quantity: $(form).find('[name=qty]').val(),
-                comment: $(form).find('[name=comment]').val()
-            };
-
-            $this.fluidbook.tooltip.displayTooltipDuring($this.fluidbook.l10n.__("the item has been added to your cart"), 2500);
-            $this.fluidbook.menu.closeView();
-            $this.save();
-        });
     },
 
     emptyCart: function () {
@@ -60,23 +47,19 @@ FluidbookCartNewHeidi.prototype = {
             comment = this.items[ref].comment;
         }
 
-        let view = `<div id="kimplay-additem">
-        ${this.fluidbook.menu.getCaption("", 'small')}
-            <div class="content">
-                <div class="image"><img src="${this.data[ref].image}" /></div>
-                    <div class="form">
-                        <h3>${this.data[ref].name}</h3>
-                        <div>(réf. ${ref})</div>
-                        <br>
-                        <label>Quantité souhaitée :</label>
-                        <input type="text" name="qty" value="${quantity}"><br><br><br>
-                        <label>Commentaire (facultatif)</label>
-                        <textarea name="comment">${comment}</textarea><br><br><br>
-                        <button data-ref="${ref}">Ajouter à ma sélection</button>
-                    </div>
-                </div>
-            </div>`;
-        this.fluidbook.menu.openCustomView(view, 'cart-kimplay-qty');
+        this.items[ref] = {
+            name: this.data[ref].name,
+            quantity: quantity,
+            batch: this.data[ref].batch ?? '',
+            price: this.data[ref].price ?? '',
+        };
+
+        this.fluidbook.menu.closeView();
+        this.save();
+
+        this.fluidbook.menu.openView('cart');
+
+        return true
     },
 
     removeFromCart: function (key) {
@@ -127,8 +110,8 @@ FluidbookCartNewHeidi.prototype = {
     },
 
     updateCart: function () {
-        if ($('#kimplaycart').length > 0) {
-            $('#kimplaycart .content').html(this.getCartContent());
+        if ($('#newheidicart').length > 0) {
+            $('#newheidicart .content').html(this.getCartContent());
         }
     },
 
@@ -154,7 +137,7 @@ FluidbookCartNewHeidi.prototype = {
         }
 
         var $this = this;
-        var content = '<table id="kimplaycarttable" class="cart-items" cellpadding="0" cellspacing="0">';
+        var content = '<table id="newheidicarttable" class="cart-items" cellpadding="0" cellspacing="0">';
         content += '<thead>';
         content += '<tr>';
         content += '<th></th>';
@@ -175,13 +158,6 @@ FluidbookCartNewHeidi.prototype = {
 
             content += '<tr>';
 
-            if (dataByRef.image) {
-                content += '<td class="image"><img src="' + dataByRef.image + '"/></td>';
-            }
-            else {
-                content += '<td></td>';
-            }
-
             content += '<td class="reference">' + i + '</td>';
             content += '<td class="designation"><span>' + item.name + '</span></td>';
             content += '<td class="quantite"><input type="text" name="qty" value="' + item.quantity + '" data-ref="' + i + '"></td>';
@@ -203,13 +179,14 @@ FluidbookCartNewHeidi.prototype = {
 
 
     _endMenu: function (title, content, callback) {
-        var view = '<div id="kimplaycart">';
+        var view = '<div id="newheidicart">';
         view += this.fluidbook.menu.getCaption(title, 'small');
         view += '<div class="content">';
         view += "" + content;
         view += '</div>';
         view += '</div>';
         this.fluidbook.menu.viewWrap(view, 'cart');
+        $("#wrap-newheidicart").perfectScrollbar();
         callback();
     },
 
@@ -240,10 +217,10 @@ FluidbookCartNewHeidi.prototype = {
     },
 
     getContactForm: function() {
-        let view = `<div id="kimplay-sendcart">
+        let view = `<div id="newheidi-sendcart">
         ${this.fluidbook.menu.getCaption("Mes coordonnées", 'small')}
             <div class="content">
-                <form id="kimplay-sendcart-form">
+                <form id="newheidi-sendcart-form">
                     <div class="form-group">
                         <label for="company">Nom de l'entreprise*</label>
                         <input type="text" id="company" name="company">
@@ -284,7 +261,7 @@ FluidbookCartNewHeidi.prototype = {
                 </div>
             </div>
         </div>`;
-        this.fluidbook.menu.openCustomView(view, 'cart-kimplay-sendcart');
+        this.fluidbook.menu.openCustomView(view, 'cart-newheidi-sendcart');
     },
 
     getConfirm: function () {
@@ -306,11 +283,11 @@ FluidbookCartNewHeidi.prototype = {
 
     sendRequest: function() {
         const $this = this;
-        const form = document.getElementById("kimplay-sendcart-form");
+        const form = document.getElementById("newheidi-sendcart-form");
         const formData = new FormData(form);
         formData.append('cart_items', JSON.stringify($this.getItems()))
         $.ajax({
-            url: $this.fluidbook.service.getBaseURL(true) + 'kimplay',
+            url: $this.fluidbook.service.getBaseURL(true) + 'newheidi',
             cache: false,
             data: formData,
             processData: false,
@@ -322,7 +299,7 @@ FluidbookCartNewHeidi.prototype = {
                 $this.updateTitle('Merci !')
                 $this.updateCartContent($this.getConfirm())
                 $this.fluidbook.resize.resize();
-                $("[data-menu=kimplay-sendcart], #kimplay-sendcart").addClass("confirm")
+                $("[data-menu=newheidi-sendcart], #newheidi-sendcart").addClass("confirm")
             },
             error: function (xhr, status, error) {
                 let errorsMessage = JSON.parse(xhr.responseText);
@@ -334,9 +311,9 @@ FluidbookCartNewHeidi.prototype = {
     displayErrors: function (errors) {
         $(".error").removeClass("error")
         for (let k in errors['errors']) {
-            $("#kimplay-sendcart input[name=" + k + "]").val("")
-            $("#kimplay-sendcart label[for=" + k + "]").addClass('error')
-            $("#kimplay-sendcart input[name=" + k + "]")[0].placeholder = `${errors['errors'][k][0]}`
+            $("#newheidi-sendcart input[name=" + k + "]").val("")
+            $("#newheidi-sendcart label[for=" + k + "]").addClass('error')
+            $("#newheidi-sendcart input[name=" + k + "]")[0].placeholder = `${errors['errors'][k][0]}`
         }
     },
 };
\ No newline at end of file

diff --git a/js/libs/fluidbook/fluidbook.cart.js b/js/libs/fluidbook/fluidbook.cart.js
index c5f5291bff159edf2e3dd6411396826ef096ecac..bd48237b5ce68b523875370ba4cdaabd7a312aca 100644 (file)
--- a/js/libs/fluidbook/fluidbook.cart.js
+++ b/js/libs/fluidbook/fluidbook.cart.js
@@ -269,6 +269,8 @@ FluidbookCart.prototype = {
                 return new FluidbookCartBastideResahGuest(this);
             case 'Kimplay':
                 return new FluidbookCartKimplay(this);
+            case 'NewHeidi':
+                return new FluidbookCartNewHeidi(this);
             default:
                 return null;
         }

diff --git a/style/cart/newheidi.less b/style/cart/newheidi.less
index ab56342d83ce56d066ef87f045f5a139738486ce..d7573db04333a9836fcebfa19ea632894e26817c 100644 (file)
--- a/style/cart/newheidi.less
+++ b/style/cart/newheidi.less
@@ -1,17 +1,28 @@
+@breakpoint: ~"(max-width: 1024px)";
+
+#menu_cart {
+  width: max-content;
+
+  .menu-item-title {
+    margin-right: 0;
+  }
+}
+
 .link a.active[data-cart-ref] {
   background-color: rgba(0, 255, 0, 0.5);
 }
 
-.mview {
+.mview[data-menu="cart"],
+.mview[data-menu="cart-newheidi-sendcart"] {
   font-size: 14px;
   background: #fff;
   color: #000;
   text-transform: uppercase;
   padding: 0 30px;
-  font-family: 'Metropolis', 'Open-Sans', sans-serif;
+  font-family: 'InstrumentSans', 'Open-Sans', sans-serif;
   width: 100% !important;
 
-  &[data-menu=cart-kimplay-qty] {
+  &[data-menu=cart-newheidi-qty] {
     max-width: 614px !important;
   }
 
@@ -19,10 +30,17 @@
     max-width: 1064px !important;
   }
 
-  &[data-menu=cart-kimplay-sendcart] {
+  &[data-menu=cart-newheidi-sendcart] {
     max-width: 680px !important;
+    min-width: 680px !important;
+
+    @media @breakpoint {
+      max-width: 1024px !important;
+    }
+
     &.confirm {
       max-width: max-content !important;
+      min-width: auto !important;
       padding: 41px 50px;
     }
   }
@@ -63,6 +81,16 @@
     font-weight: bold;
     display: flex;
     justify-content: flex-end;
+    gap: 10px;
+
+    @media @breakpoint {
+      flex-direction: column;
+      padding-left: 0;
+    }
+
+    a {
+      margin: 0
+    }
   }
 
   input, textarea {
@@ -80,7 +108,7 @@
 
   button {
     border: 0;
-    background-color: #ad1057;
+    background-color: #000;
     color: #fff;
     text-transform: uppercase;
     text-align: center;
@@ -93,9 +121,9 @@
   }
 
   .fonctions a.completeSelection {
-    border: 2px solid #ad1057;
+    border: 2px solid #000;
     background-color: #fff;
-    color: #ad1057;
+    color: #000;
   }
 
   .sendRequest {
@@ -103,7 +131,6 @@
     width: auto;
     padding: 16px 25px;
     height: 45px;
-    margin-left: 10px;
     vertical-align: top;
   }
 
@@ -113,19 +140,29 @@
     text-transform: initial;
     line-height: 20px;
     max-width: 367px;
+
+    @media @breakpoint {
+      max-width: 100%;
+    }
   }
 }
 
-.mview[data-menu="cart-kimplay-qty"] {
+[data-menu="cart"].fs .cart-footer {
+  position: initial;
+}
+
+.mview[data-menu="cart-newheidi-qty"] {
   width: 605px;
-  height: 364px;
+  min-height: 364px;
+  height: max-content;
+  padding-bottom: 30px;
 
   .caption {
     height: 50px;
     padding: 0;
     position: initial;
 
-    a.back {
+    a.back.small {
       top: 18px;
       right: 4px;
     }
@@ -133,6 +170,11 @@
 
   .content {
     display: flex;
+
+    @media @breakpoint {
+      flex-direction: column;
+      gap: 31px;
+    }
   }
 
   .image {
@@ -140,9 +182,18 @@
     vertical-align: middle;
     width: 245px;
 
+    @media @breakpoint {
+      width: 100%;
+    }
+
     img {
       max-width: 250px;
       max-height: 300px;
+
+      @media @breakpoint {
+        max-width: 150px;
+        max-height: 200px;
+      }
     }
   }
 
@@ -154,6 +205,11 @@
     text-transform: uppercase;
     padding: 0 0 0 50px;
 
+    @media @breakpoint {
+      width: 100%;
+      padding: 0;
+    }
+
     h3 {
       font-size: 16px;
     }
@@ -175,23 +231,37 @@
   }
 }
 
-#kimplaycart {
-
-  .caption a.back.small {
-    right: -10px;
+.mview[data-menu="cart"] {
+  #newheidicarttable {
+    margin-left: 0;
   }
 
-  &table {
-    margin-left: 0;
+  #wrap-newheidicart {
+    overflow-x: auto;
+    position: relative;
+
+    .ps__rail-x {
+      opacity: 1;
+
+      @media @breakpoint {
+        display: block;
+      }
+    }
+
+    .ps__thumb-x {
+      height: 5px;
+      bottom: 0;
+    }
   }
 
   table {
     table-layout: fixed;
+    min-width: 800px;
 
     th {
       text-transform: uppercase;
       padding: 20px 0;
-      background-color: #ad1057;
+      background-color: #000;
       color: #fff;
       text-align: left;
       font-weight: 600;
@@ -223,6 +293,8 @@
 
       &.image {
         width: 130px;
+        padding-right: 20px;
+        padding-left: 20px;
       }
 
       &.reference,
@@ -272,17 +344,23 @@
   }
 }
 
-#kimplay-sendcart {
-  width: 100%;
-  max-width: 680px;
+#newheidi-sendcart {
 
-  .caption a.back {
-    right: -10px;
+  .caption {
+
+    a.back.small {
+      right: 20px;
+    }
   }
 
   form {
     text-align: right;
     padding: 30px 0 0;
+    overflow: visible;
+
+    @media @breakpoint {
+      text-align: left;
+    }
 
     label {
 
@@ -300,6 +378,11 @@
       justify-content: flex-end;
       gap: 10px;
 
+      @media @breakpoint {
+        align-items: flex-start;
+        flex-direction: column;
+      }
+
       &.textarea {
         align-items: flex-start;
 
@@ -311,10 +394,14 @@
     }
 
     input, textarea {
-      width: 320px;
+      width: 380px;
       text-align: left;
       padding: 5px 10px;
       font-size: 14px;
+
+      @media @breakpoint {
+        width: 100%;
+      }
     }
 
     textarea {
@@ -336,13 +423,55 @@
   }
 }
 
+.mview[data-menu="cart"],
+.mview[data-menu="cart-newheidi-sendcart"] {
+  padding: 0;
+
+  .caption {
+    padding-right: 30px;
+    padding-left: 30px;
+
+    a.back.small {
+      right: 25px;
+    }
+  }
+
+  .content {
+    padding: 0 30px;
+  }
+
+  .ps__rail-x {
+    display: none;
+    width: 5px;
+    height: 5px;
+  }
+
+  .ps__rail-y,
+  .ps__thumb-y {
+    width: 5px;
+    opacity: 1;
+  }
+
+  [class^=ps__rail] {
+    background-color: #bce9e9;
+  }
+
+  [class^=ps__thumb] {
+    background-color: #7dd4e6;
+  }
+
+  .ps__thumb-y {
+    right: 0;
+  }
+}
+
 div.link[data-action="basket"] {
   position: relative;
 
   span.number {
     position: absolute;
-    background-color: #e30613;
-    color: #fff;
+    background-color: #dee59a;
+    color: #000000;
     text-align: center;
     right: -10px;
     bottom: -10px;