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

feat: checkout form validation

Übergeordneter 67a2bc50
Keine zugehörigen Branchen gefunden
Keine zugehörigen Tags gefunden
2 Merge Requests!20feat(SimpleCheckoutWindow): design improved,!19feat(SimpleCheckoutWindow): design improved
Pipeline-Nr. 10706 mit Warnungen bestanden
Phase: test
Leerzeichenänderungen ausblenden
Inline Nebeneinander
bin/frontend/controls/SimpleCheckout.js
+ 38
− 26
Zeige Datei @ b7efe92a
......@@ -32,20 +32,22 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
],
options: {
orderHash : false,
loadHashFromUrl : false,
showPayToOrderBtn: true,
orderHash : false,
loadHashFromUrl : false,
showPayToOrderBtn : true,
showOrderSuccessInfo: true
},
initialize: function (options) {
this.parent(options);
this.$Delivery = null;
this.$Billing = null;
this.$Shipping = null;
this.$Payment = null;
this.Loader = null;
this.$PayToOrderBtn = null;
this.$Form = null;
this.$Delivery = null;
this.$Billing = null;
this.$Shipping = null;
this.$Payment = null;
this.Loader = null;
this.$PayToOrderBtn = null;
this.ScrollToPaymentBtn = null;
this.showAllProductsBtn = null;
......@@ -65,13 +67,17 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
},
$onImport: function () {
this.Loader = new QUILoader().inject(this.getElm());
const Elm = this.getElm();
this.Loader = new QUILoader().inject(Elm);
this.$setAnchor();
if (parseInt(this.getElm().get('data-qui-load-hash-from-url')) === 1) {
this.setAttribute('loadHashFromUrl', true);
}
this.$Form = Elm.getElement('form');
this.getElm().getElements('a.log-in').addEvent('click', (e) => {
e.stop();
......@@ -303,7 +309,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
this.$PayToOrderBtn = null;
}
this.ScrollToPaymentBtn = this.getElm().querySelector('.quiqqer-simple-checkout__scrollToPaymentBtn');
this.ScrollToPaymentBtn = this.getElm().querySelector('.quiqqer-simple-checkout__scrollToPaymentBtn');
if (this.ScrollToPaymentBtn) {
this.ScrollToPaymentBtn.addEvent('click', this.scrollToPayment);
......@@ -325,9 +331,9 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
const Container = this.getElm().getElement('.quiqqer-simple-checkout-container');
// for the OrderProcess.js
if (this.getElm().getElement('form')) {
this.getElm().getElement('form').set('data-order-hash', result.orderHash);
this.getElm().getElement('form').set('data-products-count', result.productCount);
if (this.$Form) {
this.$Form.set('data-order-hash', result.orderHash);
this.$Form.set('data-products-count', result.productCount);
}
moofx(Container).animate({
......@@ -445,6 +451,10 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
this.Loader.show();
return this.update().then(() => {
if (!this.$Form.reportValidity()) {
return;
}
this.Loader.show();
const Terms = this.getElm().getElement('[name="termsAndConditions"]');
......@@ -478,6 +488,12 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
this.getElm().getElement('form').set('data-products-count', result.productCount);
}
this.fireEvent('orderSuccessful', [this]);
if (!this.getAttribute('showOrderSuccessInfo')) {
return;
}
moofx(Container).animate({
opacity: 0
}, {
......@@ -499,7 +515,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
});
}
this.fireEvent('orderSuccessful', [this]);
this.fireEvent('showOrderSuccessInfo', [this]);
}
});
});
......@@ -603,10 +619,6 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
this.fireEvent('orderInvalid', [this]);
}
if (this.$PayToOrderBtn) {
this.$PayToOrderBtn.disabled = !isValid;
}
const Delivery = this.getElm().getElement('.quiqqer-simple-checkout-data-delivery');
const Shipping = this.getElm().getElement('.quiqqer-simple-checkout-data-shipping');
const Payment = this.getElm().getElement('.quiqqer-simple-checkout-data-payment');
......@@ -684,9 +696,9 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
toggleAllProducts: function (event) {
event.stop();
const Elm = this.getElm();
const HiddenList = Elm.querySelector('.articleList__hidden'),
InnerContainer = Elm.querySelector('.articleList__hiddenInner');
const Elm = this.getElm();
const HiddenList = Elm.querySelector('.articleList__hidden'),
InnerContainer = Elm.querySelector('.articleList__hiddenInner');
if (!HiddenList || !InnerContainer) {
return;
......@@ -716,7 +728,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
*/
showHiddenArticles: function (ListNode, InnerNode) {
moofx(ListNode).animate({
height: InnerNode.offsetHeight,
height : InnerNode.offsetHeight,
opacity: 1
}, {
callback: () => {
......@@ -732,7 +744,7 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
*/
hideHiddenArticles: function (ListNode) {
moofx(ListNode).animate({
height: 0,
height : 0,
opacity: 0
});
},
......@@ -746,8 +758,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
scrollToPayment: function (event) {
event.stop();
const Elm = this.getElm();
const SumNode = Elm.querySelector('.articles-sum-container');
const Elm = this.getElm();
const SumNode = Elm.querySelector('.articles-sum-container');
const RequiredField = Elm.querySelector('.quiqqer-simple-checkout-require');
if (RequiredField) {
......
bin/frontend/controls/SimpleCheckoutPayment.js
+ 7
− 2
Zeige Datei @ b7efe92a
......@@ -29,8 +29,13 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
},
$registerEvents: function() {
this.getElm().getElements('[type="radio"]').addEvent('change', this.$onChange);
this.getElm().getElements('[type="radio"]').forEach((Node) => {
const Elm = this.getElm();
const PaymentOptionElms = Elm.getElements('[name="payment"]');
PaymentOptionElms.addEvent('change', this.$onChange);
PaymentOptionElms.forEach((Node) => {
Node.required = true;
Node.getParent('.quiqqer-order-step-payments-list-entry').addEvent('click', (e) => {
let Target = e.target;
......
bin/frontend/controls/SimpleCheckoutWindow.js
+ 20
− 13
Zeige Datei @ b7efe92a
/**
* @event onCancel [this] - Fires if the users cancels the order process
* @event onCloseOrderSuccessful [this] - Fires if the user closes the checkout window after a successful order
* @event showOrderSuccessInfo [SimpleCheckoutControl, this] - Fires if last step of successful order is shown
*/
define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleCheckoutWindow', [
......@@ -24,19 +25,20 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
],
options: {
'class': 'SimpleCheckoutWindow',
closeButton: true
'class' : 'SimpleCheckoutWindow',
closeButton : true,
showOrderSuccessInfo: true
},
initialize: function (options) {
this.setAttributes({
maxHeight: 10000, // workaround, qui popup
maxWidth : 10000, // does not support full screen
draggable: false,
resizable: false,
buttons: false,
maxHeight : 10000, // workaround, qui popup
maxWidth : 10000, // does not support full screen
draggable : false,
resizable : false,
buttons : false,
closeButton: false,
title: false
title : false
});
this.parent(options);
......@@ -58,8 +60,8 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
new Element('button', {
'class': 'SimpleCheckoutWindow__btnClose',
html: '<i class="fa fa-times"></i>',
events: {
html : '<i class="fa fa-times"></i>',
events : {
click: () => {
this.close();
}
......@@ -71,14 +73,19 @@ define('package/quiqqer/order-simple-checkout/bin/frontend/controls/SimpleChecko
}).inject(this.getContent());
this.$Checkout = new SimpleCheckout({
products : this.getAttribute('products'),
showPayToOrderBtn: true,
events : {
products : this.getAttribute('products'),
showPayToOrderBtn : true,
showOrderSuccessInfo: this.getAttribute('showOrderSuccessInfo'),
events : {
onLoaded : () => {
this.Loader.hide();
},
onOrderSuccessful: () => {
new Fx.Scroll(CheckoutWrapper).toTop();
this.fireEvent('orderSuccessful', [this]);
},
onShowOrderSuccessInfo: (SimpleCheckoutControl) => {
this.fireEvent('showOrderSuccessInfo', [SimpleCheckoutControl, this]);
},
onLoadedError : () => {
require([
......
src/QUI/ERP/Order/SimpleCheckout/Checkout.html
+ 1
− 1
Zeige Datei @ b7efe92a
......@@ -108,7 +108,7 @@
</label>
</div>
<button name="pay" disabled class="btn btn-primary btn-lg btn-large">
<button name="pay" class="btn btn-primary btn-lg btn-large">
{locale group="quiqqer/order" var="ordering.btn.pay.to.order"}
</button>
</div>
......
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