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