wip #7898

diff --git a/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js b/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js
index ffc4a12cb857062ef982e3532795f24c395febbc..24c50e89b2b268e8551af4700f6f1bfff0e4d096 100644 (file)
--- a/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js
+++ b/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js
@@ -15,9 +15,7 @@ FluidbookCartKimplay.prototype = {
             let input = $(this).closest('#kimplaycart').find('[name=qty]');
             $.each(input, function (i, item) {
                 let ref = $(item).data('ref')
-                $this.items['' + ref] = {
-                    quantity: $(item).val(),
-                }
+                $this.items['' + ref]['quantity'] = $(item).val();
             })
             $this.fluidbook.menu.quickCloseView();
             $this.getContactForm();
@@ -32,6 +30,7 @@ FluidbookCartKimplay.prototype = {
         $(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()
             };
@@ -41,6 +40,13 @@ FluidbookCartKimplay.prototype = {
         });
     },
 
+    emptyCart: function () {
+        this.items = [];
+        this.updateCart();
+        this.save();
+        resize();
+    },
+
     addToCart: function (ref) {
         let quantity, comment;
 
@@ -54,20 +60,20 @@ FluidbookCartKimplay.prototype = {
 
         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>
-                                Quantité souhaitée :<br>
-                                <input type="text" name="qty" value="${quantity}"><br>
-                                Commentaire (facultatif)
-                                <textarea name="comment">${comment}</textarea><br>
-                                <button data-ref="${ref}">Ajouter à ma sélection</button>
-                            </div>
-                        </div>
-                    </div>`;
+            <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>
+                        <label>Commentaire (facultatif)</label>
+                        <textarea name="comment">${comment}</textarea><br>
+                        <button data-ref="${ref}">Ajouter à ma sélection</button>
+                    </div>
+                </div>
+            </div>`;
         this.fluidbook.menu.openCustomView(view, 'cart-kimplay-qty');
     },
 
@@ -150,8 +156,8 @@ FluidbookCartKimplay.prototype = {
         content += '<thead>';
         content += '<tr>';
         content += '<th></th>';
-        content += '<th>' + this.fluidbook.l10n.__('ref') + '</th>';
-        content += '<th class="col-designation">' + this.fluidbook.l10n.__('designation') + '</th>';
+        content += '<th>' + 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>' + this.fluidbook.l10n.__('commentaire') + '</th>';
         content += '<th></th>';
@@ -159,20 +165,23 @@ FluidbookCartKimplay.prototype = {
         content += '<tbody>';
         $.each(this.getItems(), function (i) {
             var item = $this.items[i];
-            if (item === undefined) {
+            if (item === undefined || item === null) {
                 return;
             }
 
             var dataByRef = $this.data[i]
 
             content += '<tr>';
+
             if (dataByRef.image) {
                 content += '<td class="image"><img src="' + dataByRef.image + '"/></td>';
-            }else {
+            }
+            else {
                 content += '<td></td>'
             }
+
             content += '<td class="reference"><span>' + i + '</span></td>';
-            content += '<td class="designation"><span>' + dataByRef.name + '</span></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="delete"><a href="#" data-cart-delete="' + i + '">' + getSpriteIcon('interface-close') + '</a></td>';
@@ -231,32 +240,32 @@ FluidbookCartKimplay.prototype = {
     getContactForm: function() {
         let view = `<div id="kimplay-sendcart">
         ${this.fluidbook.menu.getCaption("Mes coordonnées", 'small')}
-                        <div class="content">
-                            <div class="form">
-                                <label for="company">Nom de l'entreprise*</label>
-                                <input type="text" name="company"><br>
-                                <label for="name">Nom*</label>
-                                <input type="text" name="name"><br>
-                                <label for="firstname">Prénom</label>
-                                <input type="text" name="firstname"><br>
-                                <label for="mail">Email*</label>
-                                <input type="email" name="mail"><br>
-                                <label for="phone">Téléphone*</label>
-                                <input type="text" name="phone"><br>
-                                <label for="address">Adresse</label>
-                                <input type="text" name="address"><br>
-                                <label for="message">Message</label>
-                                <textarea name="message"></textarea><br>
-                                <span>*Champs obligatoires</span>
-                            </div>
-                            <div class="cart-footer">
-                                <div class="fonctions">
-                                  <a href="#/closeview" class="completeSelection" role="button" aria-label="${this.fluidbook.l10n.__('close')}">${this.fluidbook.l10n.__('compléter ma sélection')}</a>
-                                  <button class="sendRequest" id="send-request">${this.fluidbook.l10n.__('envoyer ma demande')}</button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>`;
+            <div class="content">
+                <form id="kimplay-sendcart-form">
+                    <label for="company">Nom de l'entreprise*</label>
+                    <input type="text" id="company" name="company"><br>
+                    <label for="name">Nom*</label>
+                    <input type="text" name="name"><br>
+                    <label for="firstname">Prénom</label>
+                    <input type="text" name="firstname"><br>
+                    <label for="mail">Email*</label>
+                    <input type="email" name="mail"><br>
+                    <label for="phone">Téléphone*</label>
+                    <input type="text" name="phone"><br>
+                    <label for="address">Adresse</label>
+                    <input type="text" name="address"><br>
+                    <label for="message">Message</label>
+                    <textarea name="message"></textarea><br>
+                    <span>*Champs obligatoires</span>
+                </form>
+                <div class="cart-footer">
+                    <div class="fonctions">
+                      <a href="#/closeview" class="completeSelection" role="button" aria-label="${this.fluidbook.l10n.__('close')}">${this.fluidbook.l10n.__('compléter ma sélection')}</a>
+                      <button class="sendRequest" id="send-request">${this.fluidbook.l10n.__('envoyer ma demande')}</button>
+                    </div>
+                </div>
+            </div>
+        </div>`;
         this.fluidbook.menu.openCustomView(view, 'cart-kimplay-sendcart');
     },
 
@@ -280,18 +289,36 @@ FluidbookCartKimplay.prototype = {
 
     sendRequest: function() {
         const $this = this;
+        const form = document.getElementById("kimplay-sendcart-form");
+        const formData = new FormData(form);
+        formData.append('cart_items', JSON.stringify($this.getItems()))
         $.ajax({
             url: $this.fluidbook.service.getBaseURL(true) + 'kimplay',
             cache: false,
-            data: {products: $this.getItems()},
+            data: formData,
+            processData: false,
+            contentType: false,
             method: 'post',
             xhrFields: {withCredentials: true},
-            dataType: 'json',
             success: function () {
+                $this.emptyCart();
                 $this.updateTitle('Merci !')
                 $this.updateCartContent($this.getConfirm())
                 $this.fluidbook.resize.resize();
-            }
+            },
+            error: function (xhr, status, error) {
+                let errorsMessage = JSON.parse(xhr.responseText);
+                $this.displayErrors(errorsMessage)
+            },
         });
-    }
+    },
+
+    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]}`
+        }
+    },
 };
\ No newline at end of file

diff --git a/style/cart/kimplay.less b/style/cart/kimplay.less
index 7068072fc9e20f03acb7ab2f423000eba262b0bb..14d4ae54d3353740cc1ddddf1dfb04a4671a3f93 100644 (file)
--- a/style/cart/kimplay.less
+++ b/style/cart/kimplay.less
@@ -3,25 +3,48 @@
 }
 
 .mview {
-  font-size: 12px;
+  font-size: 14px;
   background: #fff;
   color: #000;
   text-transform: uppercase;
   padding: 0 30px;
+  font-family: 'Metropolis', 'Open-Sans', sans-serif;
+  width: 100% !important;
+
+  &[data-menu=cart-kimplay-qty] {
+    max-width: 614px !important;
+  }
+
+  &[data-menu=cart] {
+    max-width: 1064px !important;
+  }
+
+  &[data-menu=cart-kimplay-sendcart] {
+    max-width: 680px !important;
+  }
+
+  * {
+    letter-spacing: 1px;
+  }
 
   .caption {
     height: auto;
-    padding-left: 0;
-    padding-right: 0;
+    padding: 30px 0;
+    position: relative;
 
     h2 {
       text-transform: uppercase;
+      font-size: 16px;
+      font-weight: bold;
     }
 
-    a.back {
+    a.back.small {
       background-color: #fff;
-      top: 13px;
-      right: 20px;
+      width: 32px;
+      height: 32px;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 0;
     }
   }
 
@@ -33,6 +56,7 @@
     padding-top: 30px;
     padding-right: 0;
     font-size: 14px;
+    font-weight: bold;
   }
 
   input, textarea {
@@ -45,8 +69,8 @@
 
   input {
     width: 70px;
-    background-color: #fff !important;
     text-align: center;
+    background-color: #fff !important;
   }
 
   button {
@@ -78,6 +102,10 @@
 
   .confirm-content {
     padding-bottom: 30px;
+    text-align: left;
+    text-transform: initial;
+    line-height: 20px;
+    max-width: 367px;
   }
 }
 
@@ -86,8 +114,14 @@
   height: 364px;
 
   .caption {
-    height: 30px;
+    height: 50px;
     padding: 0;
+    position: initial;
+
+    a.back {
+      top: 18px;
+      right: 4px;
+    }
   }
 
   .content {
@@ -111,7 +145,7 @@
     vertical-align: middle;
     text-align: left;
     text-transform: uppercase;
-    padding: 0 50px;
+    padding: 0 0 0 50px;
 
     h3 {
       font-size: 16px;
@@ -126,6 +160,11 @@
       min-height: 58px;
       padding: 5px;
     }
+
+    label {
+      margin-bottom: 5px;
+      display: block;
+    }
   }
 }
 
@@ -142,6 +181,7 @@
     color: #fff;
     text-align: left;
     font-weight: 600;
+    height: 60px;
 
     &.col-quantite {
       width: 24%;
@@ -157,10 +197,13 @@
     padding-left: 0;
     padding-right: 0;
     height: 80px;
+    text-transform: initial;
 
     &.image {
-      display: flex;
+      /*display: flex;
       justify-content: center;
+      align-items: center;*/
+      width: 130px;
     }
 
     &.designation,
@@ -198,27 +241,36 @@
   }
 
   img {
-    height: 100%;
+    height: 75px;
+    width: 100%;
+    object-fit: contain;
   }
 }
 
 #kimplay-sendcart {
+  width: 100%;
+  max-width: 680px;
 
-  .form {
+  form {
     text-align: right;
-    padding: 30px;
+    padding: 30px 0 0;
 
     label {
       margin-right: 5px;
       position: relative;
-      top: 3px;
+      top: 6px;
+
+      &.error {
+        color: red;
+      }
     }
 
     input, textarea {
       width: 320px;
       text-align: left;
-      padding: 3px 10px;
+      padding: 5px 10px;
       vertical-align: top;
+      font-size: 14px;
     }
 
     textarea {