Skip to content
Code-Schnipsel Gruppen Projekte
Commit 18b726f7 erstellt von Michael Danielczok's avatar Michael Danielczok
Dateien durchsuchen

feat: improve simple checkout window 

Related: pcsg/kunden/freemom/umsetzung#823
Übergeordneter 98afdf7c
No related branches found
No related tags found
2 Merge Requests!20feat(SimpleCheckoutWindow): design improved,!19feat(SimpleCheckoutWindow): design improved
Dieser Commit ist Teil des Merge Request !19. Hier erstellte Kommentare werden im Kontext dieses Merge Request erstellt.
Leerzeichenänderungen ausblenden
Inline Nebeneinander
bin/frontend/controls/SimpleCheckoutWindow.css
+ 22
− 21
Zeige Datei @ 18b726f7
@media screen and (min-width: 768px) { .SimpleCheckoutWindow .qui-window-popup-content {
.SimpleCheckoutWindow .qui-window-popup-content, padding: 0
.SimpleCheckoutWindow .qui-window-popup-sheet-content {
padding: 2rem;
}
} }
.SimpleCheckoutWindow .SimpleCheckoutWindow-btn-cancel { .SimpleCheckoutWindow__btnClose {
cursor: pointer; position: fixed;
color: inherit; top: 0;
right: 0.5rem;
background: none; background: none;
color: inherit;
border: none; border: none;
outline: none;
} }
.SimpleCheckoutWindow .SimpleCheckoutWindow-btn-close { /* order process */
float: right !important; .SimpleCheckoutWindow__checkoutWrapper {
padding: 3rem 1rem 1rem;
} }
.SimpleCheckoutWindow .buttons-multiple { @media screen and (min-width: 768px) {
display: flex; .SimpleCheckoutWindow__checkoutWrapper {
float: none !important; overflow: auto;
justify-content: space-between; height: 100%;
height: auto !important; padding: 3rem 2rem 2rem;
padding-inline: 1rem; }
}
.SimpleCheckoutWindow .SimpleCheckoutWindow-btn-payToOrder { .SimpleCheckoutWindow__btnClose {
order: 1; right: 1rem;
}
} }
/* order process */
.SimpleCheckoutWindow .quiqqer-simple-checkout { .SimpleCheckoutWindow .quiqqer-simple-checkout {
--_sticky-positionTop: var(--sticky-positionTop, 0); --_sticky-positionTop: var(--sticky-positionTop, 0);
margin-inline: auto;
max-width: 1300px;
} }
\ No newline at end of file
bin/frontend/controls/SimpleCheckoutWindow.js
+ 22
− 67
Zeige Datei @ 18b726f7
...@@ -24,20 +24,24 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -24,20 +24,24 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
], ],
options: { options: {
'class' : 'SimpleCheckoutWindow', 'class': 'SimpleCheckoutWindow',
closeButton: false closeButton: true
}, },
initialize: function (options) { initialize: function (options) {
this.setAttributes({ this.setAttributes({
maxHeight: 800, maxHeight: 10000, // workaround, qui popup
maxWidth : 1200 maxWidth : 10000, // does not support full screen
draggable: false,
resizable: false,
buttons: false,
closeButton: false,
title: false
}); });
this.parent(options); this.parent(options);
this.$Checkout = null; this.$Checkout = null;
this.$PayToOrderBtn = null; this.$PayToOrderBtn = null;
this.$isOrdering = false;
this.addEvents({ this.addEvents({
onOpen: this.$onOpen onOpen: this.$onOpen
...@@ -49,71 +53,32 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -49,71 +53,32 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
return; return;
} }
this.$Buttons.addClass('buttons-multiple'); this.Loader.show();
this.getContent().set('html', '');
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();
});
}
}
});
const CancelBtn = new Element('button', { new Element('button', {
'class': 'SimpleCheckoutWindow-btn-cancel', 'class': 'SimpleCheckoutWindow__btnClose',
html : QUILocale.get('quiqqer/order-simple-checkout', 'SimpleCheckoutWindow.btn.cancel'), html: '<i class="fa fa-times"></i>',
events : { events: {
click: () => { click: () => {
this.fireEvent('cancel', [this]);
this.close(); this.close();
} }
} }
}).inject(this.$Buttons); }).inject(this.getContent());
this.addButton(this.$PayToOrderBtn);
this.Loader.show(); const CheckoutWrapper = new Element('div', {
this.getContent().set('html', ''); 'class': 'SimpleCheckoutWindow__checkoutWrapper',
}).inject(this.getContent());
this.$Checkout = new SimpleCheckout({ this.$Checkout = new SimpleCheckout({
products : this.getAttribute('products'), products : this.getAttribute('products'),
showPayToOrderBtn: false, showPayToOrderBtn: true,
events : { events : {
onLoaded : () => { onLoaded : () => {
this.Loader.hide(); this.Loader.hide();
}, },
onOrderStart : () => {
CancelBtn.disabled = true;
this.$PayToOrderBtn.disable();
},
onOrderSuccessful: () => { onOrderSuccessful: () => {
this.$Buttons.removeClass('buttons-multiple'); new Fx.Scroll(CheckoutWrapper).toTop();
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;
}, },
onLoadedError : () => { onLoadedError : () => {
require([ require([
...@@ -131,19 +96,9 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -131,19 +96,9 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
} }
}).open(); }).open();
}); });
},
onOrderValid : () => {
if (this.$isOrdering) {
return;
}
this.$PayToOrderBtn.enable();
},
onOrderInvalid : () => {
this.$PayToOrderBtn.disable();
} }
} }
}).inject(this.getContent()); }).inject(CheckoutWrapper);
} }
}); });
}); });
src/QUI/ERP/Order/SimpleCheckout/Basket.css
+ 3
− 8
Zeige Datei @ 18b726f7
...@@ -147,7 +147,7 @@ ul.articleData__fields { ...@@ -147,7 +147,7 @@ ul.articleData__fields {
/*******/ /*******/
/* sum */ /* sum */
/*******/ /*******/
.articles-sum-container { :where(.quiqqer-simple-checkout) .articles-sum-container {
background-color: var(--_bg); background-color: var(--_bg);
margin-top: 0.5rem; margin-top: 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
...@@ -159,7 +159,7 @@ ul.articleData__fields { ...@@ -159,7 +159,7 @@ ul.articleData__fields {
float: none; float: none;
text-align: right; text-align: right;
margin-bottom: 0; margin-bottom: 0;
font-size: 0.925rem; font-size: 1rem;
} }
.articles-sum tr { .articles-sum tr {
...@@ -167,15 +167,10 @@ ul.articleData__fields { ...@@ -167,15 +167,10 @@ ul.articleData__fields {
} }
.articles-sum td { .articles-sum td {
padding: 0; padding: 2px;
border: none; border: none;
} }
.articles-sum-row-sum {
font-weight: bold;
font-size: 1.125rem;
}
/****************************/ /****************************/
/* Simple basket for header */ /* Simple basket for header */
/****************************/ /****************************/
......
src/QUI/ERP/Order/SimpleCheckout/Checkout.css
+ 70
− 2
Zeige Datei @ 18b726f7
...@@ -131,8 +131,9 @@ ...@@ -131,8 +131,9 @@
} }
.quiqqer-simple-checkout-basket__pay > :where(.quiqqer-order-step-checkout-notice) label { .quiqqer-simple-checkout-basket__pay > :where(.quiqqer-order-step-checkout-notice) label {
display: block; display: flex;
cursor: pointer; cursor: pointer;
align-items: baseline;
} }
.quiqqer-simple-checkout-basket__pay :where(.quiqqer-order-step-checkout-notice label) { .quiqqer-simple-checkout-basket__pay :where(.quiqqer-order-step-checkout-notice label) {
...@@ -206,4 +207,71 @@ ...@@ -206,4 +207,71 @@
grid-template-columns: auto max(25%, 150px) 1fr; grid-template-columns: auto max(25%, 150px) 1fr;
grid-template-areas: 'select icon text' '. . price'; 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;
}
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren

PCSG & QUIQQER support and DEV System - GitLab