From 45eefd0bdcda5514ee8a522d433d838e8ece0f05 Mon Sep 17 00:00:00 2001 From: soufiane Date: Mon, 19 Jan 2026 12:50:06 +0100 Subject: [PATCH] wip #7898 --- .../fluidbook/cart/fluidbook.cart.kimplay.js | 131 +++++++++++------- style/cart/kimplay.less | 82 +++++++++-- 2 files changed, 146 insertions(+), 67 deletions(-) diff --git a/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js b/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js index ffc4a12c..24c50e89 100644 --- 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 = `
${this.fluidbook.menu.getCaption("", 'small')} -
-
-
-

${this.data[ref].name}

-
(réf. ${ref})
-
- Quantité souhaitée :
-
- Commentaire (facultatif) -
- -
-
-
`; +
+
+
+

${this.data[ref].name}

+
(réf. ${ref})
+
+ +
+ +
+ +
+
+ `; this.fluidbook.menu.openCustomView(view, 'cart-kimplay-qty'); }, @@ -150,8 +156,8 @@ FluidbookCartKimplay.prototype = { content += ''; content += ''; content += ''; - content += '' + this.fluidbook.l10n.__('ref') + ''; - content += '' + this.fluidbook.l10n.__('designation') + ''; + content += '' + this.fluidbook.l10n.__('réf') + ''; + content += '' + this.fluidbook.l10n.__('désignation') + ''; content += '' + this.fluidbook.l10n.__('quantité') + ''; content += '' + this.fluidbook.l10n.__('commentaire') + ''; content += ''; @@ -159,20 +165,23 @@ FluidbookCartKimplay.prototype = { content += ''; $.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 += ''; + if (dataByRef.image) { content += ''; - }else { + } + else { content += '' } + content += '' + i + ''; - content += '' + dataByRef.name + ''; + content += '' + item.name + ''; content += ''; content += '' + item.comment + ''; content += '' + getSpriteIcon('interface-close') + ''; @@ -231,32 +240,32 @@ FluidbookCartKimplay.prototype = { getContactForm: function() { let view = `
${this.fluidbook.menu.getCaption("Mes coordonnées", 'small')} -
-
- -
- -
- -
- -
- -
- -
- -
- *Champs obligatoires -
-
-
- ${this.fluidbook.l10n.__('compléter ma sélection')} - -
-
-
-
`; +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ *Champs obligatoires +
+
+
+ ${this.fluidbook.l10n.__('compléter ma sélection')} + +
+
+
+ `; 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 7068072f..14d4ae54 100644 --- 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 { -- 2.39.5