wip #7957 @9:00

diff --git a/js/libs/fluidbook/cart/fluidbook.cart.newheidi.js b/js/libs/fluidbook/cart/fluidbook.cart.newheidi.js
index b422bd9138d1b2eb63696515105f39d218b0dc29..e7559fa792bb816f61402bbd1e635c5661e9665c 100644 (file)
--- a/js/libs/fluidbook/cart/fluidbook.cart.newheidi.js
+++ b/js/libs/fluidbook/cart/fluidbook.cart.newheidi.js
@@ -4,6 +4,10 @@ function FluidbookCartNewHeidi(cart) {
     this.data = this.fluidbook.settings.basketReferences;
     this.showAddToCartTooltips = false;
     this.items = {};
+    this.formDataStorage = {};
+    this.totalHT = 0;
+    this.tva = 0;
+    this.totalTTC = 0;
     this.init();
 }
 
@@ -11,11 +15,13 @@ FluidbookCartNewHeidi.prototype = {
     init: function () {
         var $this = this;
         this.items = this.fluidbook.cache.get('cart', {});
+        this.formDataStorage = this.fluidbook.cache.get('formData', {});
+        this.updateTotals()
 
-        $(document).on(this.fluidbook.input.changeEvent, '#newheidicart input[name=qty]', function() {
+        $(document).on(this.fluidbook.input.inputEvent, '#newheidicart input[name=qty]', function() {
             let ref = $(this).data('ref')
-            $this.items['' + ref]['quantity'] = $(this).val();
-            $this.save();
+            $this.updateSubTotal(ref)
+            $this.updateTotals()
         })
 
         $(document).on(this.fluidbook.input.clickEvent, '#open-request', function () {
@@ -26,6 +32,25 @@ FluidbookCartNewHeidi.prototype = {
 
         $(document).on(this.fluidbook.input.clickEvent, '#send-request', function() {
             $this.sendRequest();
+        });
+
+        $(document).on(this.fluidbook.input.changeEvent, '#kimplay-sendcart-form input, #kimplay-sendcart-form textarea', function() {
+            $this.formDataStorage[$(this).attr('name')] = $(this).val()
+            $this.fluidbook.cache.set('formData', $this.formDataStorage);
+        });
+
+        $(document).on(this.fluidbook.input.clickEvent, '.quantity-control', function(e) {
+            let input = $(this).closest('.quantite').find('input'), ref = input.attr('data-ref')
+
+            if($(this).hasClass('decrease')) {
+                $this.removeQuantity(ref);
+            }else {
+                $this.addQuantity(ref);
+            }
+
+            input.val($this.items[ref].quantity)
+            $this.updateSubTotal(ref)
+            $this.updateTotals();
         })
     },
 
@@ -37,14 +62,12 @@ FluidbookCartNewHeidi.prototype = {
     },
 
     addToCart: function (ref) {
-        let quantity, comment;
+        let quantity;
 
         if (this.items[ref] === undefined) {
             quantity = 1;
-            comment = '';
         } else {
             quantity = this.items[ref].quantity;
-            comment = this.items[ref].comment;
         }
 
         this.items[ref] = {
@@ -54,9 +77,11 @@ FluidbookCartNewHeidi.prototype = {
             price: this.data[ref].price ?? '',
         };
 
-        this.fluidbook.menu.closeView();
+        this.updateSubTotal(ref)
+        this.updateTotals()
         this.save();
 
+        this.fluidbook.menu.closeView();
         this.fluidbook.menu.openView('cart');
 
         return true
@@ -115,8 +140,53 @@ FluidbookCartNewHeidi.prototype = {
         }
     },
 
+    updateSubTotal: function(ref) {
+        let row = $("#newheidicart").find('.row[data-ref='+ref+']')
+        let inputField = row.find('input[name=qty]')
+
+        let quantity = this.items['' + ref].quantity;
+        if(inputField.val() !== "") {
+            quantity = inputField.val();
+        }
+
+        if(inputField.length > 0) {
+            this.items['' + ref]['quantity'] = quantity;
+        }
+
+        this.save();
+
+        var subTotal = parseFloat(this.items['' + ref].price) * this.items['' + ref].quantity;
+
+        row.find('.subtotal-text').text(this.normalizePrice(subTotal.toFixed(2), false))
+    },
+
+    updateTotals: function() {
+
+        if(!this.getItems()) {
+            return false;
+        }
+
+        this.prices = Object.keys(this.getItems()).map((key) => parseFloat(this.getItems()[key].price) * parseFloat(this.getItems()[key].quantity));
+        this.totalHT = this.prices.reduce((acc,currentValue) => acc + currentValue, 0)
+        this.tva = this.totalHT * 20 / 100;
+        this.totalTTC = parseFloat(this.totalHT) + parseFloat(this.tva);
+
+        $('#total-ht').text(this.normalizePrice(this.totalHT.toFixed(2)))
+        $('#tva').text(this.normalizePrice(this.tva.toFixed(2)))
+        $('#total-ttc').text(this.normalizePrice(this.totalTTC.toFixed(2)))
+    },
+
+    removeQuantity: function(ref) {
+        this.items['' + ref]['quantity'] -= this.items['' + ref].quantity > 1 ? 1 : 0;
+        this.save();
+    },
+
+    addQuantity: function(ref) {
+        this.items['' + ref]['quantity'] = parseInt(this.items['' + ref].quantity) + 1;
+        this.save();
+    },
+
     updateIcon: function () {
-        console.log(this.getItemsNumbers());
         $(this.fluidbook).trigger('fluidbook.cart.updateIcon', {number: this.getItemsNumbers()});
     },
 
@@ -140,34 +210,50 @@ FluidbookCartNewHeidi.prototype = {
         var content = '<table id="newheidicarttable" class="cart-items" cellpadding="0" cellspacing="0">';
         content += '<thead>';
         content += '<tr>';
-        content += '<th></th>';
         content += '<th class="col-ref">' + this.fluidbook.l10n.__('réf') + '</th>';
         content += '<th class="col-designation">' + this.fluidbook.l10n.__('désignation') + '</th>';
-        content += '<th class="col-quantite">' + this.fluidbook.l10n.__('quantité') + '</th>';
-        content += '<th class="col-comment">' + this.fluidbook.l10n.__('commentaire') + '</th>';
+        content += '<th class="col-lot center">' + this.fluidbook.l10n.__('unités <br>par lot') + '</th>';
+        content += '<th class="col-price center">' + this.fluidbook.l10n.__('prix du lot <br>(eur ht)') + '</th>';
+        content += '<th class="col-quantite center">' + this.fluidbook.l10n.__('quantité <br>(lots)') + '</th>';
+        content += '<th class="col-subtotal center">' + this.fluidbook.l10n.__('sous-total <br>(eur ht)') + '</th>';
         content += '<th class="col-suppr"></th>';
         content += '</tr></thead>';
         content += '<tbody>';
+
         $.each(this.getItems(), function (i) {
             var item = $this.items[i];
             if (item === undefined || item === null) {
                 return;
             }
 
-            var dataByRef = $this.data[i]
-
-            content += '<tr>';
+            var subTotal = $this.normalizePrice((parseFloat(item.price) * parseFloat(item.quantity)).toFixed(2), false);
 
+            content += '<tr class="row" data-ref="' + i + '">';
             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>';
-            content += '<td class="commentaire"><span>' + item.comment + '</span></td>';
+            content += '<td class="center"><span>' + item.batch + '</span></td>';
+            content += '<td class="center"><span class="price-text">' + $this.normalizePrice(item.price.toFixed(2), false) + '</span></td>';
+            content += '<td class="quantite center"><button class="quantity-control decrease"></button><input type="text" name="qty" value="' + item.quantity + '" data-ref="' + i + '"><button class="quantity-control increase"></button></td>';
+            content += '<td class="center"><span class="subtotal-text">' + subTotal + '</span></td>';
             content += '<td class="delete"><a href="#" data-cart-delete="' + i + '">' + getSpriteIcon('interface-close') + '</a></td>';
             content += '</tr>';
         });
+
         content += '</tbody>';
         content += '</table>';
         content += '<div class="cart-footer">';
+        content += '<div class="resume">';
+        content += '<div class="shipping-text">';
+        content += '<h3>Frais de port</h3>';
+        content += '<p>France : Franco à partir de 700 € HT</p>';
+        content += '<p>Export : Les frais de port seront calculés en<br>fonction du montant de votre commande</p>';
+        content += '</div>';
+        content += '<div class="totals">';
+        content += '<p>TOTAL HT : <span id="total-ht">' + $this.normalizePrice(this.totalHT.toFixed(2)) + '</span></p>';
+        content += '<p>TVA 20% : <span id="tva">' + $this.normalizePrice(this.tva.toFixed(2)) + '</span></p>';
+        content += '<p>TOTAL TTC : <span id="total-ttc">' + $this.normalizePrice(this.totalTTC.toFixed(2)) + '</span></p>';
+        content += '</div>';
+        content += '</div>';
         content += '<div class="fonctions">';
         content += '<a href="#/closeview" class="completeSelection" role="button" aria-label="' + this.fluidbook.l10n.__('close') + '">' + this.fluidbook.l10n.__('compléter ma sélection') + '</a>';
         content += '<button class="sendRequest" id="open-request">' + this.fluidbook.l10n.__('envoyer ma demande') + '</button>';
@@ -177,7 +263,6 @@ FluidbookCartNewHeidi.prototype = {
         return content;
     },
 
-
     _endMenu: function (title, content, callback) {
         var view = '<div id="newheidicart">';
         view += this.fluidbook.menu.getCaption(title, 'small');
@@ -217,39 +302,51 @@ FluidbookCartNewHeidi.prototype = {
     },
 
     getContactForm: function() {
-        let view = `<div id="newheidi-sendcart">
+        let data = this.formDataStorage;
+        if(data.length > 0) {
+            data = {
+                'company':'',
+                'name':'',
+                'firstname':'',
+                'mail':'',
+                'phone':'',
+                'address':'',
+            }
+        }
+
+        let view = `<div id="kimplay-sendcart">
         ${this.fluidbook.menu.getCaption("Mes coordonnées", 'small')}
             <div class="content">
-                <form id="newheidi-sendcart-form">
+                <form id="kimplay-sendcart-form">
                     <div class="form-group">
                         <label for="company">Nom de l'entreprise*</label>
-                        <input type="text" id="company" name="company">
+                        <input type="text" id="company" name="company" value="${data.company ?? ''}">
                     </div>
                     <br>
                     <div class="form-group">
                         <label for="name">Nom*</label>
-                        <input type="text" name="name">
+                        <input type="text" name="name" value="${data.name ?? ''}">
                     </div><br>
                     <div class="form-group">
                         <label for="firstname">Prénom</label>
-                        <input type="text" name="firstname">
+                        <input type="text" name="firstname" value="${data.firstname ?? ''}">
                     </div>
                     <br>
                     <div class="form-group">
                         <label for="mail">Email*</label>
-                        <input type="email" name="mail">
+                        <input type="email" name="mail" value="${data.mail ?? ''}">
                     </div><br>
                     <div class="form-group">
                         <label for="phone">Téléphone*</label>
-                        <input type="text" name="phone">
+                        <input type="text" name="phone" value="${data.phone ?? ''}">
                     </div><br>
                     <div class="form-group">
                         <label for="address">Adresse</label>
-                        <input type="text" name="address">
+                        <input type="text" name="address" value="${data.address ?? ''}">
                     </div><br>
                     <div class="form-group textarea">
                         <label for="message">Message</label>
-                        <textarea name="message"></textarea>
+                        <textarea name="message">${data.message ?? ''}</textarea>
                     </div><br>
                     <span>*Champs obligatoires</span>
                 </form>
@@ -261,7 +358,8 @@ FluidbookCartNewHeidi.prototype = {
                 </div>
             </div>
         </div>`;
-        this.fluidbook.menu.openCustomView(view, 'cart-newheidi-sendcart');
+        this.fluidbook.menu.openCustomView(view, 'cart-kimplay-sendcart');
+        $(".mview .content").perfectScrollbar();
     },
 
     getConfirm: function () {
@@ -316,4 +414,8 @@ FluidbookCartNewHeidi.prototype = {
             $("#newheidi-sendcart input[name=" + k + "]")[0].placeholder = `${errors['errors'][k][0]}`
         }
     },
+
+    normalizePrice: function(number, unit = true) {
+        return number.toString().replace('.',',') + (unit ? " €" : "");
+    }
 };
\ No newline at end of file

diff --git a/js/libs/fluidbook/fluidbook.input.js b/js/libs/fluidbook/fluidbook.input.js
index 7c9ccc991b20abf568195133978ef9b95f21002c..0be72562d9e4d677c5a1453cf481b7161662003f 100644 (file)
--- a/js/libs/fluidbook/fluidbook.input.js
+++ b/js/libs/fluidbook/fluidbook.input.js
@@ -12,6 +12,7 @@ function FluidbookInput(fluidbook) {
     this.clickEvent = 'click';
     this.hoverEvent = 'mouseover';
     this.changeEvent = 'change';
+    this.inputEvent = 'input';
     this.init();
 }
 

diff --git a/style/cart/newheidi.less b/style/cart/newheidi.less
index d7573db04333a9836fcebfa19ea632894e26817c..9e230396ece60f8b195c8a324c6ac5b5e2ad9ea0 100644 (file)
--- a/style/cart/newheidi.less
+++ b/style/cart/newheidi.less
@@ -1,4 +1,5 @@
 @breakpoint: ~"(max-width: 1024px)";
+@font: 'Instrument Sans', 'Open-Sans', sans-serif;
 
 #menu_cart {
   width: max-content;
@@ -14,12 +15,12 @@
 
 .mview[data-menu="cart"],
 .mview[data-menu="cart-newheidi-sendcart"] {
-  font-size: 14px;
+  font-size: 13px;
   background: #fff;
   color: #000;
   text-transform: uppercase;
   padding: 0 30px;
-  font-family: 'InstrumentSans', 'Open-Sans', sans-serif;
+  font-family: @font;
   width: 100% !important;
 
   &[data-menu=cart-newheidi-qty] {
@@ -27,7 +28,7 @@
   }
 
   &[data-menu=cart] {
-    max-width: 1064px !important;
+    max-width: 1060px !important;
   }
 
   &[data-menu=cart-newheidi-sendcart] {
@@ -45,10 +46,6 @@
     }
   }
 
-  * {
-    letter-spacing: 1px;
-  }
-
   .caption {
     height: auto;
     padding: 30px 0;
@@ -75,7 +72,8 @@
   }
 
   .fonctions {
-    padding-top: 30px;
+    float: none;
+    padding-top: 60px;
     padding-right: 0;
     font-size: 14px;
     font-weight: bold;
@@ -91,6 +89,12 @@
     a {
       margin: 0
     }
+
+    .completeSelection,
+    .sendRequest {
+      width: 250px;
+      text-align: center;
+    }
   }
 
   input, textarea {
@@ -101,12 +105,13 @@
   }
 
   input {
-    width: 70px;
+    width: 65px;
+    height: 23px;
     text-align: center;
     background-color: #fff !important;
   }
 
-  button {
+  button:not(.quantity-control) {
     border: 0;
     background-color: #000;
     color: #fff;
@@ -114,10 +119,10 @@
     text-align: center;
     padding: 14px 0;
     display: block;
-    width: 100%;
+    width: max-content;
     font-weight: bold;
     cursor: pointer;
-    font-family: 'Metropolis', 'Open-Sans', sans-serif;
+    font-family: @font;
   }
 
   .fonctions a.completeSelection {
@@ -151,86 +156,6 @@
   position: initial;
 }
 
-.mview[data-menu="cart-newheidi-qty"] {
-  width: 605px;
-  min-height: 364px;
-  height: max-content;
-  padding-bottom: 30px;
-
-  .caption {
-    height: 50px;
-    padding: 0;
-    position: initial;
-
-    a.back.small {
-      top: 18px;
-      right: 4px;
-    }
-  }
-
-  .content {
-    display: flex;
-
-    @media @breakpoint {
-      flex-direction: column;
-      gap: 31px;
-    }
-  }
-
-  .image {
-    display: inline-block;
-    vertical-align: middle;
-    width: 245px;
-
-    @media @breakpoint {
-      width: 100%;
-    }
-
-    img {
-      max-width: 250px;
-      max-height: 300px;
-
-      @media @breakpoint {
-        max-width: 150px;
-        max-height: 200px;
-      }
-    }
-  }
-
-  .form {
-    width: 350px;
-    display: inline-block;
-    vertical-align: middle;
-    text-align: left;
-    text-transform: uppercase;
-    padding: 0 0 0 50px;
-
-    @media @breakpoint {
-      width: 100%;
-      padding: 0;
-    }
-
-    h3 {
-      font-size: 16px;
-    }
-
-    textarea {
-      min-width: 100%;
-      width: 100%;
-      max-width: 100%;
-      height: 58px;
-      max-height: 58px;
-      min-height: 58px;
-      padding: 5px;
-    }
-
-    label {
-      margin-bottom: 5px;
-      display: block;
-    }
-  }
-}
-
 .mview[data-menu="cart"] {
   #newheidicarttable {
     margin-left: 0;
@@ -260,74 +185,96 @@
 
     th {
       text-transform: uppercase;
-      padding: 20px 0;
+      padding: 16px 13px;
       background-color: #000;
       color: #fff;
       text-align: left;
       font-weight: 600;
       height: 60px;
+      font-size: 13px;
 
-      &.col-quantite {
+      &.center {
         text-align: center;
-        width: 21%;
       }
 
-      &.col-suppr {
-        width: 3%;
+      &.col-ref {
+        padding-left: 33px;
+        width: 15%;
+      }
+
+      &.col-lot {
+        width: 11%;
       }
 
       &.col-designation {
-        width: 20%;
+        width: 37%;
+      }
+
+      &.col-price {
+        width: 14%;
+      }
+
+      &.col-quantite {
+        width: 15%;
+      }
+
+      &.col-subtotal {
+        width: 15%;
       }
 
-      &.col-comment {
-        width: 32%;
+      &.col-suppr {
+        width: 0;
+        padding-right: 27px;
       }
     }
 
     td {
-      padding-left: 0;
-      padding-right: 0;
+      padding: 0 13px;
       height: 80px;
       text-transform: initial;
+      font-size: 13px;
 
-      &.image {
-        width: 130px;
-        padding-right: 20px;
-        padding-left: 20px;
+      &.center {
+        text-align: center;
       }
 
       &.reference,
-      &.designation,
-      &.commentaire {
+      &.designation {
         white-space: normal;
         word-break: break-word;
       }
 
-      &.quantite {
-        text-align: center;
+      &.reference {
+        padding-left: 33px;
       }
 
       &.commentaire,&.reference {
         padding-right: 20px;
       }
 
+      &.quantite {
+        position: relative;
+      }
+
       &.delete {
         width: 20px;
+        padding: 0;
 
         a {
-          width: 20px;
+          width: 22px;
+          height: 22px;
           background: #e30613;
           text-align: center;
-          height: 20px;
           color: white;
           display: flex;
           justify-content: center;
           align-items: center;
+          margin: 0 auto;
+          left: 0;
         }
 
         svg {
-          width: 8px;
+          width: 10px;
         }
       }
     }
@@ -335,12 +282,75 @@
 
   input {
     margin-bottom: 0;
+    font-size: 13px;
+    border-color: #999999;
+    border-width: .5px;
+  }
+
+  .quantity-control {
+    width: 23px;
+    height: 21px;
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 16px;
+    font-weight: bold;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: transparent;
+    cursor: pointer;
+
+    &.decrease {
+      left: 36px;
+      background-size: 5px 2px;
+      background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' id='Calque_2' viewBox='0 0 4.84 1.06'><g id='panier'><path d='M0,1.06V0h4.84v1.06H0Z'/></g></svg>");
+    }
+
+    &.increase {
+      right: 36px;
+      background-size: 8px 6px;
+      background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' id='Calque_2' viewBox='0 0 5.75 6.12'><g id='panier'><path d='M0,3.54v-.95h5.75v.95H0ZM2.39,6.12V0h.98v6.12h-.98Z'/></g></svg>");
+    }
+  }
+
+  .cart-footer {
+    padding-top: 40px;
+    margin-top: 25px;
+    border-top: 1px solid #999999;
+
+    p {
+      float: none;
+      font-size: 13px;
+      margin: 0;
+      width: auto;
+    }
   }
 
-  img {
-    height: 75px;
-    width: 100%;
-    object-fit: contain;
+  .resume {
+    display: flex;
+    justify-content: space-between;
+    padding-right: 40px;
+
+    .shipping-text {
+      line-height: 18px;
+
+      p {
+        text-transform: initial;
+      }
+    }
+
+    .totals {
+      line-height: 28px;
+      width: 200px;
+
+      p {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
   }
 }
 
@@ -453,11 +463,11 @@
   }
 
   [class^=ps__rail] {
-    background-color: #bce9e9;
+    background-color: rgba(0, 0, 0, 0.1);
   }
 
   [class^=ps__thumb] {
-    background-color: #7dd4e6;
+    background-color: #fff;
   }
 
   .ps__thumb-y {