Skip to content
Code-Schnipsel Gruppen Projekte
Commit 996daeaa erstellt von Henning Leutz's avatar Henning Leutz :martial_arts_uniform:
Dateien durchsuchen

feat: checkout form validation 



(cherry picked from commit b7efe92a)

Co-authored-by: default avatarPatrick Müller <p.mueller@pcsg.de>
Übergeordneter 2ddb6d8f
No related branches found
No related tags found
2 Merge Requests!22refactor(SimpleCheckoutWindow): style and UX,!21refactor(SimpleCheckoutWindow): style and UX
Pipeline #11194 bestanden mit Phase
Phase:
    in 2 Minuten und 8 Sekunden
    Leerzeichenänderungen ausblenden
    Inline Nebeneinander
    bin/frontend/controls/SimpleCheckout.js
    + 38
    − 26
    Zeige Datei @ 996daeaa
    ......@@ -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 @ 996daeaa
    ......@@ -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 @ 996daeaa
    /**
    * @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 @ 996daeaa
    ......@@ -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