From: Vincent Vanwaelscappel Date: Fri, 4 Nov 2022 12:55:09 +0000 (+0100) Subject: wip #5535 @4 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=9259c6ecf0e6f1cbaad782e0c29092f85b9a16f6;p=fluidbook-html5.git wip #5535 @4 --- diff --git a/_index.html b/_index.html index 78f21d51..f8597a22 100644 --- a/_index.html +++ b/_index.html @@ -19,7 +19,7 @@ } body, html { - background-color: # ; + background-color: #; width: 100%; height: 100%; } diff --git a/js/libs/fluidbook/cart/fluidbook.cart.puma-se.js b/js/libs/fluidbook/cart/fluidbook.cart.puma-se.js new file mode 100644 index 00000000..86538364 --- /dev/null +++ b/js/libs/fluidbook/cart/fluidbook.cart.puma-se.js @@ -0,0 +1,522 @@ +function FluidbookCartPumaSE(cart) { + var $this = this; + this.cart = cart; + this.fluidbook = this.cart.fluidbook; + this.data = this.fluidbook.settings.basketReferences; + this.exportFileName = ''; + this.init(); +} + +FluidbookCartPumaSE.prototype = { + init: function () { + var $this = this; + this.items = this.fluidbook.cache.get('cart', []); + $(document).on(this.fluidbook.input.clickEvent, '.exportCartPDF', function () { + $this.chooseFileName(function () { + $this.exportPDF(); + }); + return false; + }); + + $(document).on(this.fluidbook.input.clickEvent, '.exportCartXLS', function () { + try { + $this.chooseFileName(function () { + $this.exportXLS(); + }); + } catch (err) { + console.log(err); + } + return false; + }); + $(document).on(this.fluidbook.input.clickEvent, '.exportEANXLS', function () { + try { + $this.chooseFileName(function () { + $this.exportEANXLS(); + }); + } catch (err) { + console.log(err); + } + return false; + }); + + $(document).on(this.fluidbook.input.clickEvent, '.emptyCart', function () { + $.confirm({ + backgroundDismiss: true, + title: 'Empty my cart', + content: 'Are you sure you want to empty your cart?', + buttons: { + confirm: { + text: 'Confirm', btnClass: 'btn-ok', action: function () { + $this.emptyCart(); + }, + }, cancel: function () { + + }, + } + }); + return false; + }); + }, + + emptyCart: function () { + this.items = []; + this.updateCart(); + this.save(); + resize(); + }, + + addToCart: function (ref, quantity) { + if (this.getItems().indexOf(ref) === -1) { + this.items.push(ref); + this.save(); + return this.fluidbook.l10n.__("the item has been added to your cart"); + } else { + this.removeFromCartByRef(ref); + return this.fluidbook.l10n.__("the item has been removed from your cart"); + } + }, + + removeFromCartByRef: function (ref) { + var key = this.items.indexOf(ref); + if (key >= 0) { + this.removeFromCart(key) + } + }, + + removeFromCart: function (key) { + if (key >= 0) { + this.items.splice(key, 1); + this.save(); + } + }, + + save: function () { + this.fluidbook.cache.set('cart', this.getItems()); + this.fluidbook.cart.updateLinks(); + }, + + getItemsReferences: function () { + return this.getItems(); + }, + + getItemsNumbers: function () { + return this.getItems().length; + }, + + getAllQuantities: function () { + return this.getItemsNumbers(); + }, + + updateCart: function () { + if ($('#pumacart').length > 0) { + $('#pumacart .content').html(this.getCartContent()); + } + }, + + updateIcon: function () { + $(this.fluidbook).trigger('fluidbook.cart.updateIcon', {number: this.getItemsNumbers()}); + }, + + openMenu: function (p1, p2, callback) { + this.fluidbook.menu.quickCloseView(); + return this.openCart(p2, callback); + }, + + openCart: function (p2, callback) { + this._endMenu('my cart', this.getCartContent(), function () { + callback(); + }); + }, + + getXLSColumns: function () { + return [ + {key: 'Image', label: 'IMAGE', type: 'image', format: '@', width: 7}, + {key: 'Reference', label: 'REFERENCE', type: 'reference', format: '@', width: 5}, + {key: 'Catégorie', label: 'RBU', type: 'text', format: '@', width: 8}, + {key: 'Sexe', label: 'GENDER', type: 'text', format: '@', width: 5}, + {key: 'Ligne', label: 'LINE', type: 'text', format: '@', width: 3}, + {key: 'Désignation', label: 'NAME', type: 'text', format: '@', width: 15}, + {key: 'Coloris', label: 'COLOUR', type: 'text', format: '@', width: 5}, + {key: 'Tailles', label: 'SIZES', type: 'size', format: '@', width: 5}, + {key: 'MATERIAL', label: 'MATERIAL', type: 'text', format: '@', width: 10}, + {key: 'UPPER', label: 'UPPER', type: 'text', format: '@', width: 5}, + {key: 'MIDSOLE', label: 'MIDSOLE', type: 'text', format: '@', width: 5}, + {key: 'OUTSOLE', label: '', type: 'text', format: '@', width: 5}, + {key: 'ISD', label: 'ISD', type: 'text', format: '@', width: 3}, + {key: 'RRP CI', label: 'RRP CI', type: 'price', format: '# ##0.00 €;-# ##0.00 €', width: 3}, + {key: 'RRP IT', label: 'RRP IT', type: 'price', format: '# ##0.00 €;-# ##0.00 €', width: 3}, + {key: 'RRP IB', label: 'RRP IB', type: 'price', format: '# ##0.00 €;-# ##0.00 €', width: 3}, + {key: 'WSP IT', label: 'WSP IT', type: 'text', format: '# ##0.00 €;-# ##0.00 €', width: 3}, + {key: 'WSP IB', label: 'WSP IB', type: 'text', format: '# ##0.00 €;-# ##0.00 €', width: 3}, + {key: 'REF', label: 'REF', type: 'text', format: '@', width: 5}, + ]; + }, + + getHTMLColumns: function () { + return [ + {key: 'Reference', label: 'REF', cls: '', type: 'reference'}, { + key: 'Image', + label: 'Image', + cls: 'noprint', + type: 'image' + }, {key: 'Désignation', label: 'NAME', cls: '', type: 'text'}, { + key: 'Ligne', + label: 'LINE', + cls: '', + type: 'text' + }, {key: 'Catégorie', label: 'RBU', cls: '', type: 'text'}, { + key: 'RRP IB', + label: 'RRP IB', + cls: '', + type: 'price' + }, {key: 'RRP IT', label: 'RRP IT', cls: '', type: 'price'}, { + key: 'RRP CI', + label: 'RRP CI', + cls: '', + type: 'price' + }, {key: 'Tailles', label: 'Size', cls: '', type: 'size'}, { + key: 'ISD', + label: 'ISD', + cls: '', + type: 'text' + }, { + key: 'Image', + label: 'Image', + cls: 'onlyprint', + type: 'image' + }] + }, + + getPDFColumns: function () { + + }, + + getItems: function () { + var res = []; + var $this = this; + $(this.items).each(function (i, ref) { + if ($this.data[ref] !== undefined && $this.data[ref] !== null) { + res.push(ref); + } + }); + return res; + }, + + getCartContent: function () { + if (this.getItemsNumbers() == 0) { + return '
' + this.fluidbook.l10n.__('your cart is empty') + '
'; + } + + var $this = this; + var columns = this.getHTMLColumns(); + var head = ''; + $.each(columns, function (k, v) { + head += '' + v.label + ''; + }); + head += ''; + head += ''; + + var content = ''; + content += head; + content += ''; + $.each(this.getItems(), function (i, ref) { + if (i % 12 === 0 && i > 0) { + content += ''; + } else { + content += ''; + } + $.each(columns, function (k, v) { + var value = $this.data[ref][v.key]; + if (v.type === 'reference') { + value = ref; + } else if (v.type === 'price') { + value = $this.formatPrice(value, '€'); + } else if (v.type === 'image') { + if ($this.data[ref] && $this.data[ref]['zoom_image']) { + value = ''; + } else { + value = '-'; + } + } else if (v.type === 'size') { + value = value.replace(/,/g, ', '); + } + if (value == undefined || value == null || value == 'null' || value == 'undefined') { + value = '-'; + } + content += ''; + }); + content += ''; + content += ''; + }); + content += ''; + content += '
' + value + '' + getSpriteIcon('interface-close') + '
'; + content += '
'; + var ean = ''; + if (this.fluidbook.settings.eanReferences) { + ean = 'EAN Export (XLS)'; + } + content += '
Empty my cartExport (PDF)Export (XLS)' + ean + '
'; + content += '
'; + + return content; + }, + + + exportPDF: function () { + + var element = $('#pumacarttable').get(0); + var options = { + margin: 15, + filename: this.getExportFileName() + '.pdf', + image: {type: 'jpeg', quality: 0.98}, + html2canvas: {dpi: 150, scale: 2, letterRendering: true}, + jsPDF: {unit: 'mm', format: 'A4', orientation: 'landscape'} + }; + $(element).addClass('print') + html2pdf().set(options).from(element).save().then(function () { + $(element).removeClass('print'); + }); + + setTimeout(function () { + $(element).removeClass('print'); + }, 2000); + }, + + getExportFileName: function () { + if (this.exportFileName !== '') { + return this.exportFileName; + } + var date = new Date(); + return this.fluidbook.settings.title + ' - ' + this.formatDate(date); + }, + + formatDate: function (date) { + var d = new Date(date), month = '' + (d.getMonth() + 1), day = '' + d.getDate(), year = d.getFullYear(); + + if (month.length < 2) month = '0' + month; + if (day.length < 2) day = '0' + day; + + return [year, month, day].join('-'); + }, + + getEANColumns: function () { + return [ + {key: 'Reference', label: 'Reference', type: 'reference', format: '@', width: 4}, + {key: 'SeasonDescription', label: 'SeasonDescription', type: 'text', format: '@', width: 5}, + {key: 'Rbu', label: 'Rbu', type: 'text', format: '@', width: 8}, + {key: 'Family', label: 'Family', type: 'text', format: '@', width: 5}, + {key: 'Article', label: 'Article', type: 'text', format: '@', width: 5}, + {key: 'ModelId', label: 'ModelId', type: 'text', format: '@', width: 3}, + {key: 'ColorId', label: 'ColorId', type: 'text', format: '@', width: 3}, + {key: 'BeginSeasonCode', label: 'BeginSeasonCode', type: 'text', format: '@', width: 5}, + {key: 'EndSeasonCode', label: 'EndSeasonCode', type: 'text', format: '@', width: 5}, + {key: 'SizeDescription', label: 'SizeDescription', type: 'text', format: '@', width: 5}, + {key: 'EAN13', label: 'EAN13', type: 'text', format: '@', width: 5}, + {key: 'Units', label: 'Units', type: 'units', format: '@', width: 2}, + ]; + }, + + exportEANXLS: function () { + var $this = this; + const workbook = new ExcelJS.Workbook(); + const sheet = workbook.addWorksheet(this.fluidbook.settings.title); + sheet.views = [{state: 'frozen', xSplit: 0, ySplit: 1, topLeftCell: 'A2', activeCell: 'A2'}]; + sheet.properties.defaultRowHeight = 15; + var columnsLabels = this.getEANColumns(); + var columns = []; + + $.each(columnsLabels, function (k, v) { + columns.push({ + header: v.label, + key: v.key, + numFmt: v.format, + style: {numFmt: v.format, alignment: {vertical: 'middle', horizontal: 'left', wrapText: true}}, + width: v.width * 4, + }); + }); + + sheet.columns = columns; + + $.each(this.getItems(), function (i, ref) { + $.each($this.fluidbook.settings.eanReferences, function (k, v) { + if (v.Reference === ref) { + var row = {}; + $.each(columnsLabels, function (kk, vv) { + if (vv.type === 'units') { + row[vv.key] = 1; + } else if (vv.type === 'reference') { + row[vv.key] = v[vv.key].replace(/\s+/g, '-'); + } else { + row[vv.key] = v[vv.key]; + } + }); + sheet.addRow(row); + } + }); + }); + $.each(columnsLabels, function (k, v) { + sheet.getColumn(k + 1).numFmt = v.format; + }); + + workbook.xlsx.writeBuffer().then(function (data) { + var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}); + const url = window.URL.createObjectURL(blob); + const anchor = document.createElement('a'); + anchor.href = url; + anchor.download = $this.getExportFileName() + '.xlsx'; + anchor.click(); + window.URL.revokeObjectURL(url); + }); + }, + + chooseFileName: function (callback) { + var $this = this; + $.confirm({ + title: 'Name your file', + content: '' + '
' + '
' + '' + '
' + '
', + buttons: { + formSubmit: { + text: 'Submit', btnClass: 'btn-ok', action: function () { + $this.exportFileName = this.$content.find('.name').val(); + callback(); + } + }, cancel: function () { + //close + }, + }, + onContentReady: function () { + // bind to events + var jc = this; + this.$content.find('form').on('submit', function (e) { + // if the user submits the form by pressing enter in the field. + e.preventDefault(); + jc.$$formSubmit.trigger('click'); // reference the button and click it + }); + } + }); + }, + + exportXLS: function () { + var $this = this; + const workbook = new ExcelJS.Workbook(); + const sheet = workbook.addWorksheet(this.fluidbook.settings.title); + sheet.views = [{state: 'frozen', xSplit: 0, ySplit: 1, topLeftCell: 'A2', activeCell: 'A2'}]; + sheet.properties.defaultRowHeight = 15; + var columnsLabels = this.getXLSColumns(); + var columns = []; + + $.each(columnsLabels, function (k, v) { + columns.push({ + header: v.label, + key: v.key, + numFmt: v.format, + style: {numFmt: v.format, alignment: {vertical: 'middle', horizontal: 'left', wrapText: true}}, + width: v.width * 4 + }); + }); + + sheet.columns = columns; + $.each(this.getItems(), function (i, ref) { + var row = {}; + $.each(columnsLabels, function (k, v) { + var val = $this.data[ref][v.key]; + if (v.type === 'price') { + val = $this.normalizePrice(val); + } else if (v.type === 'reference') { + val = ref; + } + row[v.key] = val; + }); + var r = sheet.addRow(row); + r.height = Math.round(150 / $this.data[ref]['zoom_image_ratio']); + }); + $.each(columnsLabels, function (k, v) { + sheet.getColumn(k + 1).numFmt = v.format; + }); + // + $.each(this.getItems(), function (i, ref) { + var img = workbook.addImage({ + base64: 'data:image/jpeg;base64,' + $this.data[ref]['zoom_url'], extension: 'jpeg', + }); + sheet.addImage(img, {tl: {col: 0, row: i + 1}, br: {col: 1, row: i + 2}, editAs: 'twoCell'}); + }); + + workbook.xlsx.writeBuffer().then(function (data) { + var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}); + const url = window.URL.createObjectURL(blob); + const anchor = document.createElement('a'); + anchor.href = url; + anchor.download = $this.getExportFileName() + '.xlsx'; + anchor.click(); + window.URL.revokeObjectURL(url); + }); + }, + + normalizePrice: function (price) { + if (price === undefined || price === null) { + return 0; + } + if (typeof price !== 'number') { + price = price.replace(/[\$\€]+/g, ''); + price = parseFloat(price); + } + return price; + }, + + formatPrice: function (price, suffix) { + if (price === undefined || price === null) { + return ''; + } + + price = this.normalizePrice(price); + + if (suffix == undefined) { + suffix = ''; + } + + var res = price.toLocaleString("fr-FR", { + style: "currency", currency: "EUR", minimumFractionDigits: 2, maximumFractionDigits: 2 + }); + if (res.indexOf(suffix) === -1) { + res += ' ' + suffix; + } + return res; + }, + + _endMenu: function (title, content, callback) { + var view = '
'; + view += this.fluidbook.menu.getCaption(title); + view += '
'; + view += "" + content; + view += '
'; + view += '
'; + this.fluidbook.menu.viewWrap(view, 'cart'); + callback(); + }, + + getMenuWidth: function () { + return 1200; + }, + + parseFloat: function (s) { + if (typeof s === 'number') { + return s; + } + if (s === undefined || s === null || s === '') { + return 0; + } + s = s.replace(/\s/g, ''); + return parseFloat(s); + }, + + parseInt: function (s) { + if (typeof s === 'number') { + return Math.round(s); + } + if (s === undefined || s === null || s === '') { + return 0; + } + s = s.replace(/\s/g, ''); + return parseInt(s); + }, +}; \ No newline at end of file diff --git a/js/libs/fluidbook/fluidbook.cart.js b/js/libs/fluidbook/fluidbook.cart.js index b3b3f834..815cb674 100644 --- a/js/libs/fluidbook/fluidbook.cart.js +++ b/js/libs/fluidbook/fluidbook.cart.js @@ -88,7 +88,7 @@ FluidbookCart.prototype = { c.push('no-minus'); haveMinus = false; } - }catch (e){ + } catch (e) { } var size = 2; @@ -137,6 +137,7 @@ FluidbookCart.prototype = { }); } }, + getMenuWidth: function () { try { return this.instance.getMenuWidth(); @@ -145,6 +146,7 @@ FluidbookCart.prototype = { } return 1024; }, + getSavedData: function () { return this.fluidbook.cache.get('cart', {}) }, @@ -159,6 +161,8 @@ FluidbookCart.prototype = { return new FluidbookCartMopec(this); case 'Puma': return new FluidbookCartPuma(this); + case 'Puma-SE': + return new FluidbookCartPumaSE(this); case 'MIF': return new FluidbookCartMIF(this); case 'GrandPavois': diff --git a/style/cart/puma-se.less b/style/cart/puma-se.less new file mode 100644 index 00000000..03b0059a --- /dev/null +++ b/style/cart/puma-se.less @@ -0,0 +1,154 @@ +#pumacart { + .caption { + margin-top: 10px; + text-transform: uppercase; + } + + .exportCartXLS { + .msie & { + display: none; + } + } + + .emptyCart { + float: left; + margin-left: 30px; + border: 1px solid @menu-button-background; + color: @menu-button-background; + background-color: transparent; + } +} + +[data-type="7"] { + svg { + pointer-events: none; + } + + .on { + visibility: hidden; + } + + .off { + visibility: visible; + } + + &.active { + .off { + visibility: hidden; + } + + .on { + visibility: visible; + } + } +} + + +#pumacarttable { + [data-cart-delete] { + color: #fff; + background-color: @menu-button-background; + padding: 5px 6px 7px 6px; + width: 23px; + height: 23px; + display: block; + position: relative; + left: 20px; + } + + + padding: 0; + border-collapse: collapse; + margin: 20px 30px 40px; + width: ~"calc(100% - 60px)"; + max-width: none; + + &.xls { + [data-type="image"] { + display: none; + } + } + + &.print { + margin: 0; + font-size: 8px; + width: 100%; + + tr.break { + page-break-after: always; + } + + td, th { + vertical-align: top; + padding: 1px; + + &.onlyprint { + display: table-cell; + } + + &.noprint { + display: none; + } + + &:last-child { + display: none; + } + } + + [data-cart-delete] { + display: none; + } + } + + td, th { + padding: 20px 0 20px 30px; + font-size: 11px; + text-align: center; + + &.onlyprint { + display: none; + } + + &.noprint { + display: table-cell; + } + + span { + display: block; + max-width: 120px; + white-space: normal; + margin: 0 auto; + } + + img { + max-width: 80px; + } + + &:last-child { + padding-right: 30px; + padding-left: 0px; + } + } + + thead { + th { + text-transform: uppercase; + color: #fff; + background-color: @menu-button-background; + font-weight: normal; + } + } + + tbody { + td { + border-top: 1px solid #000; + } + + tr { + background-color: #fff; + color: #000 + + } + + } +} \ No newline at end of file