From 61f0b5b2d2214597182915605cf0fb847d20114a Mon Sep 17 00:00:00 2001 From: soufiane Date: Fri, 16 Jan 2026 17:18:18 +0100 Subject: [PATCH] wip #7898 @7:00 --- .../fluidbook/cart/fluidbook.cart.kimplay.js | 102 ++++++++--- style/cart/kimplay.less | 172 ++++++++++++++---- 2 files changed, 217 insertions(+), 57 deletions(-) diff --git a/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js b/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js index 648d4998..ffc4a12c 100644 --- a/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js +++ b/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js @@ -11,11 +11,24 @@ FluidbookCartKimplay.prototype = { init: function () { var $this = this; this.items = this.fluidbook.cache.get('cart', {}); - $(document).on(this.fluidbook.input.clickEvent, '.sendRequest', function () { - $this.sendRequet(); + $(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; }); + $(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')] = { @@ -59,7 +72,11 @@ FluidbookCartKimplay.prototype = { }, removeFromCart: function (key) { - this.items.splice(key, 1); + if(typeof this.items === "object") { + delete this.items[key] + }else { + this.items.splice(key, 1); + } this.save(); }, @@ -134,8 +151,8 @@ FluidbookCartKimplay.prototype = { content += ''; content += ''; content += '' + this.fluidbook.l10n.__('ref') + ''; - content += '' + this.fluidbook.l10n.__('designation') + ''; - content += '' + this.fluidbook.l10n.__('quantité') + ''; + content += '' + this.fluidbook.l10n.__('designation') + ''; + content += '' + this.fluidbook.l10n.__('quantité') + ''; content += '' + this.fluidbook.l10n.__('commentaire') + ''; content += ''; content += ''; @@ -156,9 +173,9 @@ FluidbookCartKimplay.prototype = { } content += '' + i + ''; content += '' + dataByRef.name + ''; - content += '' + item.quantity + ''; + content += ''; content += '' + item.comment + ''; - content += '' + getSpriteIcon('interface-close') + ''; + content += '' + getSpriteIcon('interface-close') + ''; content += ''; }); content += ''; @@ -166,7 +183,7 @@ FluidbookCartKimplay.prototype = { content += '
'; content += '
'; content += '' + this.fluidbook.l10n.__('compléter ma sélection') + ''; - content += ''; + content += ''; content += '
'; content += '
'; @@ -176,7 +193,7 @@ FluidbookCartKimplay.prototype = { _endMenu: function (title, content, callback) { var view = '
'; - view += this.fluidbook.menu.getCaption(title); + view += this.fluidbook.menu.getCaption(title, 'small'); view += '
'; view += "" + content; view += '
'; @@ -211,27 +228,70 @@ FluidbookCartKimplay.prototype = { return parseInt(s); }, - sendCart: function() { + getContactForm: function() { let view = `
- ${this.fluidbook.menu.getCaption("", 'small')} + ${this.fluidbook.menu.getCaption("Mes coordonnées", 'small')}
-
-

${this.data[ref].name}

-
(réf. ${ref})
-
- Quantité souhaitée :
-
- Commentaire (facultatif) -
- + +
+ +
+ +
+ +
+ +
+ +
+ +
+ *Champs obligatoires +
+
+
+ ${this.fluidbook.l10n.__('compléter ma sélection')} + +
`; this.fluidbook.menu.openCustomView(view, 'cart-kimplay-sendcart'); }, + getConfirm: function () { + return `

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.

+ D’ici là nous restons joignables pour toute + question à l’adresse : contact@kimplay.com +

` + }, + + updateCartContent: function (html) { + $(".mview .content").html(html) + }, + + updateTitle: function (title = "Connexion") { + $("#mview-dialog-title").text(title) + }, + sendRequest: function() { - // + const $this = this; + $.ajax({ + url: $this.fluidbook.service.getBaseURL(true) + 'kimplay', + cache: false, + data: {products: $this.getItems()}, + method: 'post', + xhrFields: {withCredentials: true}, + dataType: 'json', + success: function () { + $this.updateTitle('Merci !') + $this.updateCartContent($this.getConfirm()) + $this.fluidbook.resize.resize(); + } + }); } }; \ No newline at end of file diff --git a/style/cart/kimplay.less b/style/cart/kimplay.less index 09c81412..7068072f 100644 --- a/style/cart/kimplay.less +++ b/style/cart/kimplay.less @@ -2,18 +2,51 @@ background-color: rgba(0, 255, 0, 0.5); } -.mview[data-menu="cart-kimplay-qty"], -#kimplaycart { - background-color: #fff; +.mview { + font-size: 12px; + background: #fff; color: #000; + text-transform: uppercase; + padding: 0 30px; .caption { - height: 30px; - padding: 0; + height: auto; + padding-left: 0; + padding-right: 0; + + h2 { + text-transform: uppercase; + } + + a.back { + background-color: #fff; + top: 13px; + right: 20px; + } } - .caption a.back { - background-color: #fff; + table { + font-size: 14px; + } + + .fonctions { + padding-top: 30px; + padding-right: 0; + font-size: 14px; + } + + input, textarea { + border: 2px solid #000; + margin-bottom: 20px; + padding: 2px; + font-size: 16px; + font-family: @font; + } + + input { + width: 70px; + background-color: #fff !important; + text-align: center; } button { @@ -28,12 +61,39 @@ font-weight: bold; cursor: pointer; } + + .fonctions a.completeSelection { + border: 2px solid #ad1057; + background-color: #fff; + } + + .sendRequest { + display: inline-block; + width: auto; + padding: 16px 25px; + height: 45px; + margin-left: 10px; + vertical-align: top; + } + + .confirm-content { + padding-bottom: 30px; + } } .mview[data-menu="cart-kimplay-qty"] { width: 605px; height: 364px; + .caption { + height: 30px; + padding: 0; + } + + .content { + display: flex; + } + .image { display: inline-block; vertical-align: middle; @@ -57,14 +117,6 @@ font-size: 16px; } - input, textarea { - border: 2px solid #000; - margin-bottom: 20px; - padding: 2px; - font-size: 16px; - font-family: @font; - } - textarea { min-width: 100%; width: 100%; @@ -74,17 +126,14 @@ min-height: 58px; padding: 5px; } - - input { - width: 70px; - background-color: #fff; - text-align: center; - } } } #kimplaycart { - padding: 0 30px; + + &table { + margin-left: 0; + } th { text-transform: uppercase; @@ -94,37 +143,88 @@ text-align: left; font-weight: 600; - &.quantite { + &.col-quantite { + width: 24%; + } + + &.col-quantite { text-align: center; + width: 21%; } } table td { padding-left: 0; padding-right: 0; + height: 80px; + + &.image { + display: flex; + justify-content: center; + } + + &.designation, + &.commentaire { + white-space: normal; + word-break: break-word; + } &.quantite { text-align: center; } + + &.delete { + width: 20px; + + a { + width: 20px; + background: red; + text-align: center; + height: 20px; + color: white; + display: flex; + justify-content: center; + align-items: center; + } + + svg { + width: 8px; + } + } } - img { - width: 100%; - max-width: 60px; + input { + margin-bottom: 0; } - .completeSelection { - border: 2px solid #ad1057; - background-color: #fff + img { + height: 100%; } +} - .sendRequest { - display: inline-block; - width: auto; - padding: 16px 25px; - height: 45px; - margin-left: 10px; - vertical-align: top; +#kimplay-sendcart { + + .form { + text-align: right; + padding: 30px; + + label { + margin-right: 5px; + position: relative; + top: 3px; + } + + input, textarea { + width: 320px; + text-align: left; + padding: 3px 10px; + vertical-align: top; + } + + textarea { + height: 80px; + resize: none; + } } } -- 2.39.5