From 18b726f79ceeca5bafe42117c5e5aad47ac1e1fa Mon Sep 17 00:00:00 2001
From: Michael Danielczok <michael@pcsg.de>
Date: Mon, 15 Jul 2024 13:24:29 +0200
Subject: [PATCH] feat: improve simple checkout window
Related: pcsg/kunden/freemom/umsetzung#823
---
.../controls/SimpleCheckoutWindow.css | 43 ++++-----
bin/frontend/controls/SimpleCheckoutWindow.js | 89 +++++--------------
src/QUI/ERP/Order/SimpleCheckout/Basket.css | 11 +--
src/QUI/ERP/Order/SimpleCheckout/Checkout.css | 72 ++++++++++++++-
4 files changed, 117 insertions(+), 98 deletions(-)
diff --git a/bin/frontend/controls/SimpleCheckoutWindow.css b/bin/frontend/controls/SimpleCheckoutWindow.css
index 5b9d227..88e21f8 100644
--- a/bin/frontend/controls/SimpleCheckoutWindow.css
+++ b/bin/frontend/controls/SimpleCheckoutWindow.css
@@ -1,35 +1,36 @@
-@media screen and (min-width: 768px) {
- .SimpleCheckoutWindow .qui-window-popup-content,
- .SimpleCheckoutWindow .qui-window-popup-sheet-content {
- padding: 2rem;
- }
+.SimpleCheckoutWindow .qui-window-popup-content {
+ padding: 0
}
-.SimpleCheckoutWindow .SimpleCheckoutWindow-btn-cancel {
- cursor: pointer;
- color: inherit;
+.SimpleCheckoutWindow__btnClose {
+ position: fixed;
+ top: 0;
+ right: 0.5rem;
background: none;
+ color: inherit;
border: none;
- outline: none;
}
-.SimpleCheckoutWindow .SimpleCheckoutWindow-btn-close {
- float: right !important;
+/* order process */
+.SimpleCheckoutWindow__checkoutWrapper {
+ padding: 3rem 1rem 1rem;
}
-.SimpleCheckoutWindow .buttons-multiple {
- display: flex;
- float: none !important;
- justify-content: space-between;
- height: auto !important;
- padding-inline: 1rem;
-}
+@media screen and (min-width: 768px) {
+ .SimpleCheckoutWindow__checkoutWrapper {
+ overflow: auto;
+ height: 100%;
+ padding: 3rem 2rem 2rem;
+ }
-.SimpleCheckoutWindow .SimpleCheckoutWindow-btn-payToOrder {
- order: 1;
+ .SimpleCheckoutWindow__btnClose {
+ right: 1rem;
+ }
}
-/* order process */
.SimpleCheckoutWindow .quiqqer-simple-checkout {
--_sticky-positionTop: var(--sticky-positionTop, 0);
+
+ margin-inline: auto;
+ max-width: 1300px;
}
\ No newline at end of file
diff --git a/bin/frontend/controls/SimpleCheckoutWindow.js b/bin/frontend/controls/SimpleCheckoutWindow.js
index 1c8266c..a2317a8 100644
--- a/bin/frontend/controls/SimpleCheckoutWindow.js
+++ b/bin/frontend/controls/SimpleCheckoutWindow.js
@@ -24,20 +24,24 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
],
options: {
- 'class' : 'SimpleCheckoutWindow',
- closeButton: false
+ 'class': 'SimpleCheckoutWindow',
+ closeButton: true
},
initialize: function (options) {
this.setAttributes({
- maxHeight: 800,
- maxWidth : 1200
+ maxHeight: 10000, // workaround, qui popup
+ maxWidth : 10000, // does not support full screen
+ draggable: false,
+ resizable: false,
+ buttons: false,
+ closeButton: false,
+ title: false
});
this.parent(options);
this.$Checkout = null;
this.$PayToOrderBtn = null;
- this.$isOrdering = false;
this.addEvents({
onOpen: this.$onOpen
@@ -49,71 +53,32 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
return;
}
- this.$Buttons.addClass('buttons-multiple');
-
- this.$PayToOrderBtn = new QUIButton({
- 'class' : 'SimpleCheckoutWindow-btn-payToOrder',
- textimage: 'fas fa-shopping-cart',
- disabled : true,
- text : QUILocale.get('quiqqer/order', 'ordering.btn.pay.to.order'),
- title : QUILocale.get('quiqqer/order', 'ordering.btn.pay.to.order'),
- events : {
- onClick: () => {
- this.$PayToOrderBtn.disable();
-
- this.$Checkout.orderWithCosts().catch((e) => {
- this.$PayToOrderBtn.enable();
- });
- }
- }
- });
+ this.Loader.show();
+ this.getContent().set('html', '');
- const CancelBtn = new Element('button', {
- 'class': 'SimpleCheckoutWindow-btn-cancel',
- html : QUILocale.get('quiqqer/order-simple-checkout', 'SimpleCheckoutWindow.btn.cancel'),
- events : {
+ new Element('button', {
+ 'class': 'SimpleCheckoutWindow__btnClose',
+ html: '<i class="fa fa-times"></i>',
+ events: {
click: () => {
- this.fireEvent('cancel', [this]);
this.close();
}
}
- }).inject(this.$Buttons);
-
- this.addButton(this.$PayToOrderBtn);
+ }).inject(this.getContent());
- this.Loader.show();
- this.getContent().set('html', '');
+ const CheckoutWrapper = new Element('div', {
+ 'class': 'SimpleCheckoutWindow__checkoutWrapper',
+ }).inject(this.getContent());
this.$Checkout = new SimpleCheckout({
products : this.getAttribute('products'),
- showPayToOrderBtn: false,
+ showPayToOrderBtn: true,
events : {
onLoaded : () => {
this.Loader.hide();
},
- onOrderStart : () => {
- CancelBtn.disabled = true;
- this.$PayToOrderBtn.disable();
- },
onOrderSuccessful: () => {
- this.$Buttons.removeClass('buttons-multiple');
- CancelBtn.destroy();
- this.$PayToOrderBtn.destroy();
-
- this.addButton(new QUIButton({
- 'class' : 'SimpleCheckoutWindow-btn-close',
- textimage: 'fas fa-check',
- text : QUILocale.get('quiqqer/order-simple-checkout', 'SimpleCheckoutWindow.btn.continue'),
- title : QUILocale.get('quiqqer/order-simple-checkout', 'SimpleCheckoutWindow.btn.continue'),
- events : {
- onClick: () => {
- this.fireEvent('closeOrderSuccessful', [this]);
- this.close();
- }
- }
- }));
-
- this.getContent().scrollToTop = 0;
+ new Fx.Scroll(CheckoutWrapper).toTop();
},
onLoadedError : () => {
require([
@@ -131,19 +96,9 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
}
}).open();
});
- },
- onOrderValid : () => {
- if (this.$isOrdering) {
- return;
- }
-
- this.$PayToOrderBtn.enable();
- },
- onOrderInvalid : () => {
- this.$PayToOrderBtn.disable();
}
}
- }).inject(this.getContent());
+ }).inject(CheckoutWrapper);
}
});
});
diff --git a/src/QUI/ERP/Order/SimpleCheckout/Basket.css b/src/QUI/ERP/Order/SimpleCheckout/Basket.css
index 0f49eb3..eab6b0f 100644
--- a/src/QUI/ERP/Order/SimpleCheckout/Basket.css
+++ b/src/QUI/ERP/Order/SimpleCheckout/Basket.css
@@ -147,7 +147,7 @@ ul.articleData__fields {
/*******/
/* sum */
/*******/
-.articles-sum-container {
+:where(.quiqqer-simple-checkout) .articles-sum-container {
background-color: var(--_bg);
margin-top: 0.5rem;
border-radius: 0.5rem;
@@ -159,7 +159,7 @@ ul.articleData__fields {
float: none;
text-align: right;
margin-bottom: 0;
- font-size: 0.925rem;
+ font-size: 1rem;
}
.articles-sum tr {
@@ -167,15 +167,10 @@ ul.articleData__fields {
}
.articles-sum td {
- padding: 0;
+ padding: 2px;
border: none;
}
-.articles-sum-row-sum {
- font-weight: bold;
- font-size: 1.125rem;
-}
-
/****************************/
/* Simple basket for header */
/****************************/
diff --git a/src/QUI/ERP/Order/SimpleCheckout/Checkout.css b/src/QUI/ERP/Order/SimpleCheckout/Checkout.css
index 547122c..36d55a9 100644
--- a/src/QUI/ERP/Order/SimpleCheckout/Checkout.css
+++ b/src/QUI/ERP/Order/SimpleCheckout/Checkout.css
@@ -131,8 +131,9 @@
}
.quiqqer-simple-checkout-basket__pay > :where(.quiqqer-order-step-checkout-notice) label {
- display: block;
+ display: flex;
cursor: pointer;
+ align-items: baseline;
}
.quiqqer-simple-checkout-basket__pay :where(.quiqqer-order-step-checkout-notice label) {
@@ -206,4 +207,71 @@
grid-template-columns: auto max(25%, 150px) 1fr;
grid-template-areas: 'select icon text' '. . price';
}
-}
\ No newline at end of file
+}
+
+/*******/
+/* sum */
+/*******/
+:where(.quiqqer-simple-checkout) .quiqqer-order-control-order-total {
+ background-color: #f8f8f8;
+ margin-top: 0.5rem;
+ padding: 1rem;
+}
+
+:where(.quiqqer-simple-checkout) .quiqqer-order-control-order-information-orderData-table {
+ border: none;
+ float: none;
+ text-align: right;
+ margin-bottom: 0;
+ font-size: 1rem;
+}
+
+:where(.quiqqer-simple-checkout) .quiqqer-order-control-order-information-orderData-table tr {
+ border: none;
+}
+
+:where(.quiqqer-simple-checkout) .quiqqer-order-control-order-information-orderData-table td {
+ padding: 2px;
+ border: none;
+}
+
+:where(.quiqqer-simple-checkout) .articles-sum-row-sum,
+:where(.quiqqer-simple-checkout) .quiqqer-order-control-order-information-orderData-sum-title,
+:where(.quiqqer-simple-checkout) .quiqqer-order-control-order-information-orderData-value {
+ font-weight: bold;
+ font-size: 1.125rem;
+}
+
+/***************/
+/* Finish step */
+/***************/
+.quiqqer-simple-checkout .quiqqer-order-profile-orders-order-articles-article-articleNo {
+ font-size: 0.875rem;
+ opacity: 0.5;
+}
+
+.quiqqer-simple-checkout .quiqqer-order-step-finish .quiqqer-order-control-order {
+ display: flow-root;
+ margin-top: 2rem;
+}
+
+.quiqqer-simple-checkout .quiqqer-order-control-order-information,
+.quiqqer-simple-checkout .quiqqer-order-control-order-articles {
+ padding: 1rem;
+ width: 100%;
+ background: #f8f8f8;
+}
+
+.quiqqer-simple-checkout .quiqqer-order-control-order-articles article {
+ margin-bottom: 0.5rem;
+ width: 100%;
+ background: #fff;
+ padding: 1rem;
+ border-radius: 0.5rem;
+}
+
+.quiqqer-simple-checkout .quiqqer-order-profile-orders-order-articles-article-image {
+ max-height: 120px;
+ height: initial;
+}
+
--
GitLab