Skip to content
Code-Schnipsel Gruppen Projekte
Commit 1da68344 erstellt von Patrick Müller's avatar Patrick Müller
Dateien durchsuchen

refactor(SimpleCheckoutWindow): style and UX

Übergeordneter 11bf29b5
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/SimpleCheckout.js
+ 97
− 63
Zeige Datei @ 1da68344
/**
* @event onOrderValid [this] - Fires as soon as all order requirements are met
* @event onOrderInvalid [this] - Fires if the order requirements are not met
* @event onOrderStart [this] - Fires as soon as the order starts to execute
* @event onOrderSuccessfull [this] - Fires if the order was successfully executed
*/
define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleCheckout', [ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleCheckout', [
'qui/QUI', 'qui/QUI',
...@@ -6,13 +12,13 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -6,13 +12,13 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
'qui/utils/Form', 'qui/utils/Form',
'Ajax' 'Ajax'
], function(QUI, QUIControl, QUILoader, QUIFormUtils, QUIAjax) { ], function (QUI, QUIControl, QUILoader, QUIFormUtils, QUIAjax) {
'use strict'; 'use strict';
return new Class({ return new Class({
Extends: QUIControl, Extends: QUIControl,
Type: 'package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleCheckout', Type : 'package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleCheckout',
Binds: [ Binds: [
'update', 'update',
...@@ -21,18 +27,20 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -21,18 +27,20 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
], ],
options: { options: {
orderHash: false, orderHash : false,
loadHashFromUrl: false loadHashFromUrl : false,
showPayToOrderBtn: true,
}, },
initialize: function(options) { initialize: function (options) {
this.parent(options); this.parent(options);
this.$Delivery = null; this.$Delivery = null;
this.$Billing = null; this.$Billing = null;
this.$Shipping = null; this.$Shipping = null;
this.$Payment = null; this.$Payment = null;
this.Loader = null; this.Loader = null;
this.$PayToOrderBtn = null;
this.addEvents({ this.addEvents({
onImport: this.$onImport, onImport: this.$onImport,
...@@ -48,7 +56,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -48,7 +56,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
} }
}, },
$onImport: function() { $onImport: function () {
this.Loader = new QUILoader().inject(this.getElm()); this.Loader = new QUILoader().inject(this.getElm());
this.$setAnchor(); this.$setAnchor();
...@@ -64,8 +72,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -64,8 +72,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
], (LoginWindow) => { ], (LoginWindow) => {
new LoginWindow({ new LoginWindow({
redirect: false, redirect: false,
reload: false, reload : false,
events: { events : {
onSuccess: () => { onSuccess: () => {
window.location.reload(); window.location.reload();
} }
...@@ -79,8 +87,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -79,8 +87,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
if (LoginNode) { if (LoginNode) {
require(['package/quiqqer/frontend-users/bin/frontend/controls/login/Login'], (Login) => { require(['package/quiqqer/frontend-users/bin/frontend/controls/login/Login'], (Login) => {
new Login({ new Login({
redirect: false, redirect : false,
reload: false, reload : false,
onSuccess: () => { onSuccess: () => {
this.getElm().setStyle('minHeight', this.getElm().getSize().y); this.getElm().setStyle('minHeight', this.getElm().getSize().y);
this.Loader.show(); this.Loader.show();
...@@ -119,7 +127,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -119,7 +127,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
return this.$loadGUI(); return this.$loadGUI();
}).then(() => { }).then(() => {
// Terms of Service // Terms of Service
this.getElm().getElements('a[data-project]').addEvent('click', function(e) { this.getElm().getElements('a[data-project]').addEvent('click', function (e) {
let Target = e.target; let Target = e.target;
if (Target.nodeName !== 'A') { if (Target.nodeName !== 'A') {
...@@ -132,12 +140,12 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -132,12 +140,12 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
e.stop(); e.stop();
require(['package/quiqqer/controls/bin/site/Window'], function(Win) { require(['package/quiqqer/controls/bin/site/Window'], function (Win) {
new Win({ new Win({
showTitle: true, showTitle: true,
project: Target.get('data-project'), project : Target.get('data-project'),
lang: Target.get('data-lang'), lang : Target.get('data-lang'),
id: Target.get('data-id') id : Target.get('data-id')
}).open(); }).open();
}); });
}); });
...@@ -154,7 +162,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -154,7 +162,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
}); });
}, },
$onInject: function() { $onInject: function () {
this.$loadProducts().then(() => { this.$loadProducts().then(() => {
return this.$loadCheckout(); return this.$loadCheckout();
}).catch((err) => { }).catch((err) => {
...@@ -180,13 +188,13 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -180,13 +188,13 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
}); });
}, },
$loadOrder: function() { $loadOrder: function () {
if (this.getAttribute('orderHash')) { if (this.getAttribute('orderHash')) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
QUIAjax.post('package_quiqqer_order-simple-checkout_ajax_frontend_getOrder', resolve, { QUIAjax.post('package_quiqqer_order-simple-checkout_ajax_frontend_getOrder', resolve, {
'package': 'quiqqer/order-simple-checkout', 'package': 'quiqqer/order-simple-checkout',
orderHash: this.getAttribute('orderHash'), orderHash: this.getAttribute('orderHash'),
onError: reject onError : reject
}); });
}); });
} }
...@@ -194,7 +202,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -194,7 +202,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
return Promise.resolve(); return Promise.resolve();
}, },
$loadGUI: function() { $loadGUI: function () {
const hideLoader = () => { const hideLoader = () => {
this.Loader.hide(); this.Loader.hide();
}; };
...@@ -221,8 +229,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -221,8 +229,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
}).then((instances) => { }).then((instances) => {
this.$Delivery = instances[0]; this.$Delivery = instances[0];
this.$Shipping = instances[1]; this.$Shipping = instances[1];
this.$Payment = instances[2]; this.$Payment = instances[2];
this.$Billing = instances[3]; this.$Billing = instances[3];
if (!this.$Delivery && !this.$Shipping && !this.$Payment && !this.$Billing) { if (!this.$Delivery && !this.$Shipping && !this.$Payment && !this.$Billing) {
this.Loader.hide(); this.Loader.hide();
...@@ -230,9 +238,13 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -230,9 +238,13 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
} }
this.$Delivery.setAttribute('Checkout', this); this.$Delivery.setAttribute('Checkout', this);
this.$Shipping.setAttribute('Checkout', this); if (this.$Shipping) {
this.$Shipping.setAttribute('Checkout', this);
}
this.$Payment.setAttribute('Checkout', this); this.$Payment.setAttribute('Checkout', this);
this.$Billing.setAttribute('Checkout', this); if (this.$Billing) {
this.$Billing.setAttribute('Checkout', this);
}
this.$Payment.addEvent('refreshBegin', showLoader); this.$Payment.addEvent('refreshBegin', showLoader);
this.$Payment.addEvent('refreshEnd', hideLoader); this.$Payment.addEvent('refreshEnd', hideLoader);
...@@ -266,15 +278,24 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -266,15 +278,24 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
this.update().then(hideLoader); this.update().then(hideLoader);
}); });
this.$Billing.addEvent('change', () => { if (this.$Billing) {
this.Loader.show(); this.$Billing.addEvent('change', () => {
this.update().then(hideLoader); this.Loader.show();
}); this.update().then(hideLoader);
});
}
this.getElm().getElement('[name="pay"]').addEvent('click', (e) => { this.$PayToOrderBtn = this.getElm().getElement('[name="pay"]');
e.stop();
this.orderWithCosts(); if (this.getAttribute('showPayToOrderBtn')) {
}); this.$PayToOrderBtn.addEvent('click', (e) => {
e.stop();
this.orderWithCosts();
});
} else {
this.$PayToOrderBtn.destroy();
this.$PayToOrderBtn = null;
}
this.$setSpacingOnMobile(); this.$setSpacingOnMobile();
...@@ -286,7 +307,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -286,7 +307,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
}); });
}, },
$loadPayment: function() { $loadPayment: function () {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
QUIAjax.post( QUIAjax.post(
'package_quiqqer_order-simple-checkout_ajax_frontend_getPaymentStep', 'package_quiqqer_order-simple-checkout_ajax_frontend_getPaymentStep',
...@@ -313,8 +334,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -313,8 +334,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
if (typeof Container.scrollIntoView === 'function') { if (typeof Container.scrollIntoView === 'function') {
Container.scrollIntoView({ Container.scrollIntoView({
behavior: 'smooth', behavior: 'smooth',
block: 'center', block : 'center',
inline: 'start' inline : 'start'
}); });
} }
...@@ -328,7 +349,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -328,7 +349,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
{ {
'package': 'quiqqer/order-simple-checkout', 'package': 'quiqqer/order-simple-checkout',
orderHash: this.getAttribute('orderHash'), orderHash: this.getAttribute('orderHash'),
onError: reject onError : reject
} }
); );
}); });
...@@ -336,7 +357,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -336,7 +357,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
}, },
$loadProducts: function() { $loadProducts: function () {
if (this.getAttribute('products') && !this.getAttribute('orderHash')) { if (this.getAttribute('products') && !this.getAttribute('orderHash')) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
QUIAjax.post( QUIAjax.post(
...@@ -348,8 +369,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -348,8 +369,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
}, },
{ {
'package': 'quiqqer/order-simple-checkout', 'package': 'quiqqer/order-simple-checkout',
products: JSON.encode(this.getAttribute('products')), products : JSON.encode(this.getAttribute('products')),
onError: reject onError : reject
} }
); );
}); });
...@@ -358,7 +379,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -358,7 +379,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
return Promise.resolve(); return Promise.resolve();
}, },
$loadCheckout: function() { $loadCheckout: function () {
this.$setAnchor(); this.$setAnchor();
return new Promise((resolve) => { return new Promise((resolve) => {
...@@ -388,13 +409,13 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -388,13 +409,13 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
}); });
}, },
setCurrency: function(currency) { setCurrency: function (currency) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
QUIAjax.post('package_quiqqer_order-simple-checkout_ajax_frontend_setCurrency', resolve, { QUIAjax.post('package_quiqqer_order-simple-checkout_ajax_frontend_setCurrency', resolve, {
'package': 'quiqqer/order-simple-checkout', 'package': 'quiqqer/order-simple-checkout',
currency: currency, currency : currency,
orderHash: this.getAttribute('orderHash'), orderHash: this.getAttribute('orderHash'),
onError: reject onError : reject
}); });
}).then(() => { }).then(() => {
return this.$refreshBasket(); return this.$refreshBasket();
...@@ -408,10 +429,13 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -408,10 +429,13 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
}); });
}, },
orderWithCosts: function() { /**
* @return {Promise<void>}
*/
orderWithCosts: function () {
this.Loader.show(); this.Loader.show();
this.update().then(() => { return this.update().then(() => {
this.Loader.show(); this.Loader.show();
const Terms = this.getElm().getElement('[name="termsAndConditions"]'); const Terms = this.getElm().getElement('[name="termsAndConditions"]');
...@@ -431,6 +455,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -431,6 +455,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
return; return;
} }
this.fireEvent('orderStart', [this]);
// execute order // execute order
QUIAjax.post('package_quiqqer_order-simple-checkout_ajax_frontend_orderWithCosts', (result) => { QUIAjax.post('package_quiqqer_order-simple-checkout_ajax_frontend_orderWithCosts', (result) => {
const Container = this.getElm().getElement('.quiqqer-simple-checkout-container'); const Container = this.getElm().getElement('.quiqqer-simple-checkout-container');
...@@ -459,10 +485,12 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -459,10 +485,12 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
if (typeof Container.scrollIntoView === 'function') { if (typeof Container.scrollIntoView === 'function') {
Container.scrollIntoView({ Container.scrollIntoView({
behavior: 'smooth', behavior: 'smooth',
block: 'center', block : 'center',
inline: 'start' inline : 'start'
}); });
} }
this.fireEvent('orderSuccessful', [this]);
} }
}); });
}); });
...@@ -471,7 +499,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -471,7 +499,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
}, { }, {
'package': 'quiqqer/order-simple-checkout', 'package': 'quiqqer/order-simple-checkout',
orderHash: this.getAttribute('orderHash'), orderHash: this.getAttribute('orderHash'),
onError: (err) => { onError : (err) => {
if (typeof err.getMessage === 'function') { if (typeof err.getMessage === 'function') {
this.$showError(err.getMessage()); this.$showError(err.getMessage());
this.Loader.hide(); this.Loader.hide();
...@@ -485,7 +513,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -485,7 +513,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
}); });
}, },
$getControl: function(Node) { $getControl: function (Node) {
return new Promise((resolve) => { return new Promise((resolve) => {
if (!Node || !Node.get('data-qui')) { if (!Node || !Node.get('data-qui')) {
return resolve(null); return resolve(null);
...@@ -510,7 +538,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -510,7 +538,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
}); });
}, },
$setAnchor: function() { $setAnchor: function () {
if (!this.getAttribute('loadHashFromUrl')) { if (!this.getAttribute('loadHashFromUrl')) {
return; return;
} }
...@@ -522,7 +550,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -522,7 +550,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
window.location.hash = this.getAttribute('orderHash'); window.location.hash = this.getAttribute('orderHash');
}, },
$refreshBasket: function() { $refreshBasket: function () {
this.Loader.show(); this.Loader.show();
return new Promise((resolve) => { return new Promise((resolve) => {
...@@ -540,7 +568,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -540,7 +568,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
}); });
}, },
$showError: function(message) { $showError: function (message) {
// @todo michael -> schönere error message // @todo michael -> schönere error message
QUI.getMessageHandler().then((MH) => { QUI.getMessageHandler().then((MH) => {
MH.addError(message); MH.addError(message);
...@@ -549,18 +577,24 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -549,18 +577,24 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
console.error(message); console.error(message);
}, },
update: function() { update: function () {
const PayButton = this.getElm().getElement('[name="pay"]');
return new Promise((resolve) => { return new Promise((resolve) => {
const orderData = QUIFormUtils.getFormData(this.getElm().getElement('form')); const orderData = QUIFormUtils.getFormData(this.getElm().getElement('form'));
QUIAjax.post('package_quiqqer_order-simple-checkout_ajax_frontend_update', (isValid) => { QUIAjax.post('package_quiqqer_order-simple-checkout_ajax_frontend_update', (isValid) => {
PayButton.disabled = !isValid; if (isValid) {
this.fireEvent('orderValid', [this]);
} else {
this.fireEvent('orderInvalid', [this]);
}
if (this.$PayToOrderBtn) {
this.$PayToOrderBtn.disabled = !isValid;
}
const Delivery = this.getElm().getElement('.quiqqer-simple-checkout-data-delivery'); const Delivery = this.getElm().getElement('.quiqqer-simple-checkout-data-delivery');
const Shipping = this.getElm().getElement('.quiqqer-simple-checkout-data-shipping'); const Shipping = this.getElm().getElement('.quiqqer-simple-checkout-data-shipping');
const Payment = this.getElm().getElement('.quiqqer-simple-checkout-data-payment'); const Payment = this.getElm().getElement('.quiqqer-simple-checkout-data-payment');
if (!isValid) { if (!isValid) {
QUIAjax.get('package_quiqqer_order-simple-checkout_ajax_frontend_validate', (missing) => { QUIAjax.get('package_quiqqer_order-simple-checkout_ajax_frontend_validate', (missing) => {
...@@ -611,7 +645,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -611,7 +645,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
'package': 'quiqqer/order-simple-checkout', 'package': 'quiqqer/order-simple-checkout',
orderData: JSON.encode(orderData), orderData: JSON.encode(orderData),
orderHash: this.getAttribute('orderHash'), orderHash: this.getAttribute('orderHash'),
onError: (err) => { onError : (err) => {
if (typeof err.getMessage === 'function') { if (typeof err.getMessage === 'function') {
this.$showError(err.getMessage()); this.$showError(err.getMessage());
this.Loader.hide(); this.Loader.hide();
...@@ -631,7 +665,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -631,7 +665,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
* Calculate needed margin on mobile. * Calculate needed margin on mobile.
* Not pretty solution, needs to be reworked. * Not pretty solution, needs to be reworked.
*/ */
$setSpacingOnMobile: function() { $setSpacingOnMobile: function () {
if (QUI.getBodySize().x >= 768) { if (QUI.getBodySize().x >= 768) {
return; return;
} }
......
bin/frontend/controls/SimpleCheckoutWindow.css 0 → 100644
+ 19
− 0
Zeige Datei @ 1da68344
.SimpleCheckoutWindow .SimpleCheckoutWindow-btn-cancel {
color: grey;
cursor: pointer;
font-size: 12px;
}
.SimpleCheckoutWindow .SimpleCheckoutWindow-btn-close {
float: right !important;
}
.SimpleCheckoutWindow .buttons-multiple {
display: flex;
float: none !important;
justify-content: space-between;
}
.SimpleCheckoutWindow .SimpleCheckoutWindow-btn-payToOrder {
order: 1;
}
\ No newline at end of file
bin/frontend/controls/SimpleCheckoutWindow.js
+ 86
− 11
Zeige Datei @ 1da68344
...@@ -2,50 +2,116 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -2,50 +2,116 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
'qui/QUI', 'qui/QUI',
'qui/controls/windows/Popup', 'qui/controls/windows/Popup',
'package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleCheckout' 'qui/controls/buttons/Button',
'Locale',
'package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleCheckout',
'css!package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleCheckoutWindow.css',
], function(QUI, QUIWindow, SimpleCheckout) { ], function (QUI, QUIWindow, QUIButton, QUILocale, SimpleCheckout) {
'use strict'; 'use strict';
return new Class({ return new Class({
Extends: QUIWindow, Extends: QUIWindow,
Type: 'package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleCheckoutWindow', Type : 'package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleCheckoutWindow',
Binds: [ Binds: [
'$onOpen' '$onOpen'
], ],
initialize: function(options) { options: {
'class' : 'SimpleCheckoutWindow',
closeButton: false
},
initialize: function (options) {
this.setAttributes({ this.setAttributes({
maxHeight: 800, maxHeight: 800,
maxWidth: 1200 maxWidth : 1200
}); });
this.parent(options); this.parent(options);
this.$Checkout = null; this.$Checkout = null;
this.$PayToOrderBtn = null;
this.$isOrdering = false;
this.addEvents({ this.addEvents({
onOpen: this.$onOpen onOpen: this.$onOpen
}); });
}, },
$onOpen: function() { $onOpen: function () {
if (this.$Checkout) { if (this.$Checkout) {
return; 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();
});
}
}
});
const CancelBtn = new Element('span', {
'class': 'SimpleCheckoutWindow-btn-cancel',
html : QUILocale.get('quiqqer/order-simple-checkout', 'SimpleCheckoutWindow.btn.cancel'),
events : {
click: () => {
this.close();
}
}
}).inject(this.$Buttons);
this.addButton(this.$PayToOrderBtn);
this.Loader.show(); this.Loader.show();
this.getContent().set('html', ''); this.getContent().set('html', '');
this.getContent().setStyle('padding', 0); this.getContent().setStyle('padding', 0);
this.$Checkout = new SimpleCheckout({ this.$Checkout = new SimpleCheckout({
products: this.getAttribute('products'), products : this.getAttribute('products'),
events: { showPayToOrderBtn: false,
onLoaded: () => { events : {
onLoaded : () => {
this.Loader.hide(); this.Loader.hide();
}, },
onLoadedError: () => { 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;
},
onLoadedError : () => {
require([ require([
'package/quiqqer/frontend-users/bin/frontend/controls/login/Window' 'package/quiqqer/frontend-users/bin/frontend/controls/login/Window'
], (LoginWindow) => { ], (LoginWindow) => {
...@@ -61,7 +127,16 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko ...@@ -61,7 +127,16 @@ 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(this.getContent());
......
locale.xml
+ 11
− 0
Zeige Datei @ 1da68344
...@@ -69,4 +69,15 @@ ...@@ -69,4 +69,15 @@
</groups> </groups>
<groups name="quiqqer/order-simple-checkout" datatype="js">
<locale name="SimpleCheckoutWindow.btn.continue">
<de><![CDATA[Weiter]]></de>
<en><![CDATA[Continue]]></en>
</locale>
<locale name="SimpleCheckoutWindow.btn.cancel">
<de><![CDATA[Abbrechen]]></de>
<en><![CDATA[Cancel]]></en>
</locale>
</groups>
</locales> </locales>
\ No newline at end of file
src/QUI/ERP/Order/SimpleCheckout/Checkout.html
+ 4
− 0
Zeige Datei @ 1da68344
...@@ -61,12 +61,14 @@ ...@@ -61,12 +61,14 @@
{$Delivery->create()} {$Delivery->create()}
</div> </div>
{if $Shipping}
<div class="quiqqer-simple-checkout-data-shipping simpleCheckout-details-section"> <div class="quiqqer-simple-checkout-data-shipping simpleCheckout-details-section">
<h2 class="simpleCheckoutCard-subheader"> <h2 class="simpleCheckoutCard-subheader">
{locale group="quiqqer/shipping" var="ordering.step.title.Shipping"} {locale group="quiqqer/shipping" var="ordering.step.title.Shipping"}
</h2> </h2>
{$Shipping->create()} {$Shipping->create()}
</div> </div>
{/if}
<div class="quiqqer-simple-checkout-data-payment simpleCheckout-details-section"> <div class="quiqqer-simple-checkout-data-payment simpleCheckout-details-section">
<h2 class="simpleCheckoutCard-subheader"> <h2 class="simpleCheckoutCard-subheader">
...@@ -75,12 +77,14 @@ ...@@ -75,12 +77,14 @@
{$Payment->create()} {$Payment->create()}
</div> </div>
{if $BillingAddress}
<div class="quiqqer-simple-checkout-data-billing simpleCheckout-details-section"> <div class="quiqqer-simple-checkout-data-billing simpleCheckout-details-section">
<h2 class="simpleCheckoutCard-subheader"> <h2 class="simpleCheckoutCard-subheader">
{locale group="quiqqer/order-simple-checkout" var="ordering.step.title.Billing"} {locale group="quiqqer/order-simple-checkout" var="ordering.step.title.Billing"}
</h2> </h2>
{$BillingAddress->create()} {$BillingAddress->create()}
</div> </div>
{/if}
<div class="quiqqer-simple-checkout-data-pay"> <div class="quiqqer-simple-checkout-data-pay">
<div class="quiqqer-order-step-checkout-notice"> <div class="quiqqer-order-step-checkout-notice">
......
src/QUI/ERP/Order/SimpleCheckout/Checkout.php
+ 4
− 2
Zeige Datei @ 1da68344
...@@ -97,14 +97,16 @@ public function getBody(): string ...@@ -97,14 +97,16 @@ public function getBody(): string
$BasketForHeader = new Basket($this); $BasketForHeader = new Basket($this);
$BasketForHeader->setAttribute('basketForHeader', true); $BasketForHeader->setAttribute('basketForHeader', true);
$isShippingInstalled = QUI::getPackageManager()->isInstalled('quiqqer/shipping');
$Engine->assign([ $Engine->assign([
'Order' => $this->getOrder(), 'Order' => $this->getOrder(),
'Basket' => new Basket($this), 'Basket' => new Basket($this),
'BasketForHeader' => $BasketForHeader, 'BasketForHeader' => $BasketForHeader,
'User' => $this->getUser(), 'User' => $this->getUser(),
'Delivery' => new CheckoutDelivery($this), 'Delivery' => new CheckoutDelivery($this),
'BillingAddress' => new CheckoutBillingAddress($this), 'BillingAddress' => $isShippingInstalled ? new CheckoutBillingAddress($this) : false,
'Shipping' => new CheckoutShipping($this), 'Shipping' => $isShippingInstalled ? new CheckoutShipping($this) : false,
'Payment' => new CheckoutPayment($this), 'Payment' => new CheckoutPayment($this),
'termsAndConditions' => $termsAndConditions 'termsAndConditions' => $termsAndConditions
]); ]);
......
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