From 3708ba8bb1856bb012c3e5f73b0c5fa1f0556dca Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Tue, 20 Jan 2026 11:33:13 +0100
Subject: [PATCH] wip #7898 @5:00

---
 .../fluidbook/cart/fluidbook.cart.kimplay.js  |  74 +++++----
 js/libs/fluidbook/fluidbook.input.js          |   1 +
 style/cart/kimplay.less                       | 140 +++++++++++-------
 3 files changed, 134 insertions(+), 81 deletions(-)

diff --git a/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js b/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js
index b104ff21..d37a7ee3 100644
--- a/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js
+++ b/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js
@@ -12,15 +12,15 @@ FluidbookCartKimplay.prototype = {
         var $this = this;
         this.items = this.fluidbook.cache.get('cart', {});
 
+        $(document).on(this.fluidbook.input.changeEvent, '#kimplaycart input[name=qty]', function() {
+            let ref = $(this).data('ref')
+            $this.items['' + ref]['quantity'] = $(this).val();
+            $this.save();
+        })
+
         $(document).on(this.fluidbook.input.clickEvent, '#open-request', function () {
-            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.fluidbook.menu.quickCloseView();
             $this.getContactForm();
-            $this.save();
             return false;
         });
 
@@ -158,11 +158,11 @@ FluidbookCartKimplay.prototype = {
         content += '<thead>';
         content += '<tr>';
         content += '<th></th>';
-        content += '<th>' + this.fluidbook.l10n.__('réf') + '</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>' + this.fluidbook.l10n.__('commentaire') + '</th>';
-        content += '<th></th>';
+        content += '<th class="col-comment">' + this.fluidbook.l10n.__('commentaire') + '</th>';
+        content += '<th class="col-suppr"></th>';
         content += '</tr></thead>';
         content += '<tbody>';
         $.each(this.getItems(), function (i) {
@@ -179,10 +179,10 @@ FluidbookCartKimplay.prototype = {
                 content += '<td class="image"><img src="' + dataByRef.image + '"/></td>';
             }
             else {
-                content += '<td></td>'
+                content += '<td></td>';
             }
 
-            content += '<td class="reference"><span>' + i + '</span></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>';
             content += '<td class="commentaire"><span>' + item.comment + '</span></td>';
@@ -244,20 +244,36 @@ FluidbookCartKimplay.prototype = {
         ${this.fluidbook.menu.getCaption("Mes coordonnées", 'small')}
             <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>
+                    <div class="form-group">
+                        <label for="company">Nom de l'entreprise*</label>
+                        <input type="text" id="company" name="company">
+                    </div>
+                    <br>
+                    <div class="form-group">
+                        <label for="name">Nom*</label>
+                        <input type="text" name="name">
+                    </div><br>
+                    <div class="form-group">
+                        <label for="firstname">Prénom</label>
+                        <input type="text" name="firstname">
+                    </div>
+                    <br>
+                    <div class="form-group">
+                        <label for="mail">Email*</label>
+                        <input type="email" name="mail">
+                    </div><br>
+                    <div class="form-group">
+                        <label for="phone">Téléphone*</label>
+                        <input type="text" name="phone">
+                    </div><br>
+                    <div class="form-group">
+                        <label for="address">Adresse</label>
+                        <input type="text" name="address">
+                    </div><br>
+                    <div class="form-group textarea">
+                        <label for="message">Message</label>
+                        <textarea name="message"></textarea>
+                    </div><br>
                     <span>*Champs obligatoires</span>
                 </form>
                 <div class="cart-footer">
@@ -273,11 +289,10 @@ FluidbookCartKimplay.prototype = {
 
     getConfirm: function () {
         return `<p class="confirm-content">Votre demande a bien été transmise.
-            Une copie de votre sélection va vous être
-            adressée par email. Notre équipe commerciale
-            reviendra vers vous dans les 72h.<br><br>
+            Une copie de votre sélection va vous être adressée par email par l'équipe commerciale.
+            <br><br>
             D’ici là nous restons joignables pour toute
-            question à l’adresse : <a href="mailto:contact@kimplay.com">contact@kimplay.com</a>
+            question à l’adresse : <a href="mailto:info@cofalu.com">info@cofalu.com</a>
         </p>`
     },
 
@@ -307,6 +322,7 @@ FluidbookCartKimplay.prototype = {
                 $this.updateTitle('Merci !')
                 $this.updateCartContent($this.getConfirm())
                 $this.fluidbook.resize.resize();
+                $(".confirm-content").css("max-width","max-content !important")
             },
             error: function (xhr, status, error) {
                 let errorsMessage = JSON.parse(xhr.responseText);
diff --git a/js/libs/fluidbook/fluidbook.input.js b/js/libs/fluidbook/fluidbook.input.js
index 32eaa81f..7c9ccc99 100644
--- a/js/libs/fluidbook/fluidbook.input.js
+++ b/js/libs/fluidbook/fluidbook.input.js
@@ -11,6 +11,7 @@ function FluidbookInput(fluidbook) {
     this.forceKeyboard = false;
     this.clickEvent = 'click';
     this.hoverEvent = 'mouseover';
+    this.changeEvent = 'change';
     this.init();
 }
 
diff --git a/style/cart/kimplay.less b/style/cart/kimplay.less
index b5dc19b2..f74c5161 100644
--- a/style/cart/kimplay.less
+++ b/style/cart/kimplay.less
@@ -57,11 +57,12 @@
     padding-right: 0;
     font-size: 14px;
     font-weight: bold;
+    display: flex;
+    justify-content: flex-end;
   }
 
   input, textarea {
     border: 2px solid #000;
-    margin-bottom: 20px;
     padding: 2px;
     font-size: 16px;
     font-family: @font;
@@ -84,11 +85,13 @@
     width: 100%;
     font-weight: bold;
     cursor: pointer;
+    font-family: 'Metropolis', 'Open-Sans', sans-serif;
   }
 
   .fonctions a.completeSelection {
     border: 2px solid #ad1057;
     background-color: #fff;
+    color: #ad1057;
   }
 
   .sendRequest {
@@ -178,64 +181,78 @@
     margin-left: 0;
   }
 
-  th {
-    text-transform: uppercase;
-    padding: 20px 0;
-    background-color: #ad1057;
-    color: #fff;
-    text-align: left;
-    font-weight: 600;
-    height: 60px;
+  table {
+    table-layout: fixed;
 
-    &.col-quantite {
-      width: 24%;
-    }
+    th {
+      text-transform: uppercase;
+      padding: 20px 0;
+      background-color: #ad1057;
+      color: #fff;
+      text-align: left;
+      font-weight: 600;
+      height: 60px;
 
-    &.col-quantite {
-      text-align: center;
-      width: 21%;
-    }
-  }
+      &.col-quantite {
+        text-align: center;
+        width: 21%;
+      }
 
-  table td {
-    padding-left: 0;
-    padding-right: 0;
-    height: 80px;
-    text-transform: initial;
+      &.col-suppr {
+        width: 3%;
+      }
 
-    &.image {
-      /*display: flex;
-      justify-content: center;
-      align-items: center;*/
-      width: 130px;
-    }
+      &.col-designation {
+        width: 20%;
+      }
 
-    &.designation,
-    &.commentaire {
-      white-space: normal;
-      word-break: break-word;
+      &.col-comment {
+        width: 32%;
+      }
     }
 
-    &.quantite {
-      text-align: center;
-    }
+    td {
+      padding-left: 0;
+      padding-right: 0;
+      height: 80px;
+      text-transform: initial;
 
-    &.delete {
-      width: 20px;
+      &.image {
+        width: 130px;
+      }
 
-      a {
-        width: 20px;
-        background: red;
+      &.reference,
+      &.designation,
+      &.commentaire {
+        white-space: normal;
+        word-break: break-word;
+      }
+
+      &.quantite {
         text-align: center;
-        height: 20px;
-        color: white;
-        display: flex;
-        justify-content: center;
-        align-items: center;
       }
 
-      svg {
-        width: 8px;
+      &.commentaire,&.reference {
+        padding-right: 20px;
+      }
+
+      &.delete {
+        width: 20px;
+
+        a {
+          width: 20px;
+          background: #e30613;
+          text-align: center;
+          height: 20px;
+          color: white;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        svg {
+          width: 8px;
+        }
       }
     }
   }
@@ -255,17 +272,37 @@
   width: 100%;
   max-width: 680px;
 
+  .caption a.back {
+    right: -10px;
+  }
+
   form {
     text-align: right;
     padding: 30px 0 0;
 
     label {
-      margin-right: 5px;
-      position: relative;
-      top: 6px;
 
       &.error {
-        color: red;
+        color: #e30613;
+        & + input::placeholder {
+          color: #e30613;
+        }
+      }
+    }
+
+    .form-group {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 10px;
+
+      &.textarea {
+        align-items: flex-start;
+
+        label {
+          position: relative;
+          top: 6px;
+        }
       }
     }
 
@@ -273,7 +310,6 @@
       width: 320px;
       text-align: left;
       padding: 5px 10px;
-      vertical-align: top;
       font-size: 14px;
     }
 
-- 
2.39.5