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

feat: show errors direclty under the input 

Improve error handling for coupon code input.
Added a catch block to handle errors when adding a coupon code to the basket.
The error message is now displayed directly under the input field, providing a better user experience.

Related: #20
Übergeordneter 2b857d4f
No related branches found
No related tags found
1 Merge Request!20feat: show errors direclty under the input
Pipeline #15844 fehlgeschlagen mit Phase
Phase:
    in 2 Minuten und 53 Sekunden
    Leerzeichenänderungen ausblenden
    Inline Nebeneinander
    ajax/frontend/redeem.php
    + 65
    − 36
    Zeige Datei @ dcd11476
    <?php
    /**
    * This file contains package_quiqqer_coupons_ajax_delete
    * This file contains package_quiqqer_coupons_ajax_frontend_redeem
    */
    use QUI\ERP\Coupons\Handler;
    ......@@ -13,6 +13,15 @@
    * @param int $id - CouponCode ID
    * @return bool - success
    */
    /**
    * Redeem a CouponCode
    * @param string $code - coupon code
    * @param string $orderHash - Order hash
    *
    * @throws QUI\Exception
    * @throws QUI\ERP\Coupons\CouponCodeException
    */
    QUI::$Ajax->registerFunction(
    'package_quiqqer_coupons_ajax_frontend_redeem',
    function ($code, $orderHash) {
    ......@@ -23,20 +32,25 @@ function ($code, $orderHash) {
    } catch (QUI\ERP\Coupons\CouponCodeException $Exception) {
    QUI\System\Log::writeDebugException($Exception);
    QUI::getMessagesHandler()->addError($Exception->getMessage());
    return false;
    // QUI::getMessagesHandler()->addError($Exception->getMessage());
    throw $Exception;
    // return false;
    } catch (Exception $Exception) {
    QUI\System\Log::writeException($Exception);
    QUI::getMessagesHandler()->addError(
    QUI::getLocale()->get(
    'quiqqer/coupons',
    'message.ajax.general_error'
    )
    );
    throw new QUI\Exception([
    'quiqqer/coupons',
    'message.ajax.general_error'
    ]);
    return false;
    // QUI::getMessagesHandler()->addError(
    // QUI::getLocale()->get(
    // 'quiqqer/coupons',
    // 'message.ajax.general_error'
    // )
    // );
    // return false;
    }
    $Order = QUI\ERP\Order\Handler::getInstance()->getOrderByHash($orderHash);
    ......@@ -49,40 +63,55 @@ function ($code, $orderHash) {
    foreach ($discounts as $Discount) {
    if (!DiscountEvents::isDiscountUsableWithQuantity($Discount, $productCount)) {
    QUI::getMessagesHandler()->addError(
    QUI::getLocale()->get(
    'quiqqer/coupons',
    'exception.CouponCode.discounts_invalid'
    )
    );
    return false;
    throw new QUI\Exception([
    'quiqqer/coupons',
    'exception.CouponCode.discounts_invalid'
    ]);
    // QUI::getMessagesHandler()->addError(
    // QUI::getLocale()->get(
    // 'quiqqer/coupons',
    // 'exception.CouponCode.discounts_invalid'
    // )
    // );
    //
    // return false;
    }
    if ($Discount->getAttribute('scope') === QUI\ERP\Discount\Handler::DISCOUNT_SCOPE_GRAND_TOTAL) {
    if (!DiscountEvents::isDiscountUsableWithPurchaseValue($Discount, $sum)) {
    QUI::getMessagesHandler()->addError(
    QUI::getLocale()->get(
    'quiqqer/coupons',
    'exception.CouponCode.discounts_invalid'
    )
    );
    return false;
    throw new QUI\Exception([
    'quiqqer/coupons',
    'exception.CouponCode.discounts_invalid'
    ]);
    // QUI::getMessagesHandler()->addError(
    // QUI::getLocale()->get(
    // 'quiqqer/coupons',
    // 'exception.CouponCode.discounts_invalid'
    // )
    // );
    //
    // return false;
    }
    continue;
    }
    if (!DiscountEvents::isDiscountUsableWithPurchaseValue($Discount, $subSum)) {
    QUI::getMessagesHandler()->addError(
    QUI::getLocale()->get(
    'quiqqer/coupons',
    'exception.CouponCode.discounts_invalid'
    )
    );
    return false;
    throw new QUI\Exception([
    'quiqqer/coupons',
    'exception.CouponCode.discounts_invalid'
    ]);
    // QUI::getMessagesHandler()->addError(
    // QUI::getLocale()->get(
    // 'quiqqer/coupons',
    // 'exception.CouponCode.discounts_invalid'
    // )
    // );
    //
    // return false;
    }
    }
    ......@@ -105,7 +134,7 @@ function ($code, $orderHash) {
    $CouponCode->addToOrder($Order);
    }
    return true;
    // return true;
    },
    ['code', 'orderHash']
    );
    bin/frontend/controls/CouponCodeInput.css
    + 18
    − 1
    Zeige Datei @ dcd11476
    .quiqqer-coupons-couponcodeinput {
    --_qui-error-text-color: var(--qui-error-text-color, red);
    --_qui-error-input-border-color: var(--qui-error-input-border-color, red);
    container-type: inline-size;
    }
    ......@@ -14,13 +16,28 @@
    }
    .quiqqer-coupons-couponcodeinput-input {
    min-width: min(250px, 100cqi);
    min-width: min(200px, 100cqi);
    }
    .quiqqer-coupons-remove {
    margin-left: 1rem;
    }
    /* error handling */
    input.quiqqer-coupons-couponcodeinput-input[data-invalid] {
    border-color: var(--_qui-error-input-border-color)
    }
    .quiqqer-coupons-couponcodeinput__errorMsg:not([data-show]) {
    display: none;
    }
    :where(.quiqqer-coupons-couponcodeinput__errorMsg[data-show]) {
    font-size: 0.875rem;
    color: var(--_qui-error-text-color);
    margin-top: 0.25rem;
    }
    /**
    * Simple Checkout
    */
    ......
    bin/frontend/controls/CouponCodeInput.html
    + 4
    − 2
    Zeige Datei @ dcd11476
    ......@@ -4,11 +4,13 @@
    </label>
    <div class="quiqqer-coupons-couponcodeinput__inputGroup">
    <input class="quiqqer-coupons-couponcodeinput-input"
    type="text" name="code-input" id="code-input" data-name="code-input"
    type="text" name="code-input" id="code-input" data-ref="code-input"
    placeholder="{{labelInputPlaceholder}}"
    autocomplete="off"
    />
    <button class="quiqqer-coupons-couponcodeinput-btn btn btn-success" data-name="submit-coupon-code">
    <button class="quiqqer-coupons-couponcodeinput-btn btn btn-success" data-ref="submit-coupon-code">
    {{submitBtnText}}
    </button>
    </div>
    <div class="quiqqer-coupons-couponcodeinput__errorMsg" data-ref="errorMsg"></div>
    </div>
    \ No newline at end of file
    bin/frontend/controls/CouponCodeInput.js
    + 121
    − 21
    Zeige Datei @ dcd11476
    ......@@ -31,16 +31,19 @@ define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [
    Type: 'package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput',
    Binds: [
    '$submit'
    '$submit',
    'handleError'
    ],
    initialize: function(options) {
    this.parent(options);
    this.$Input = null;
    this.$ErrorMsgContainer = null;
    this.Loader = new QUILoader();
    this.$running = false;
    this.addEvents({
    onInject: this.$onInject
    });
    ......@@ -65,17 +68,42 @@ define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [
    submitBtnText: QUILocale.get(lg, lgPrefix + 'submitBtnText')
    }));
    this.$ErrorMsgContainer = this.$Elm.querySelector('[data-ref="errorMsg"]');
    this.Loader.inject(this.$Elm);
    this.$Input = this.$Elm.getElement('input[data-name="code-input"]');
    this.$Input = this.$Elm.getElement('[data-ref="code-input"]');
    let timeoutId = null;
    let previousValue = '';
    let currentValue = '';
    const keyUpFunc = function(event ){
    currentValue = self.$Input.value.trim();
    this.$Input.addEvent('keyup', function(event) {
    if (event.code === 13) {
    clearTimeout(timeoutId);
    previousValue = currentValue;
    self.$submit();
    } else {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
    if (
    (currentValue !== previousValue || currentValue === '') &&
    self.$ErrorMsgContainer.getAttribute('data-show')
    ) {
    self.hideErrorMessage();
    self.resetInvalidInput();
    }
    previousValue = currentValue;
    }, 400);
    }
    });
    };
    this.$Input.addEvent('keyup', keyUpFunc);
    this.$Elm.getElement('[data-name="submit-coupon-code"]').addEvent('click', function(event) {
    this.$Elm.getElement('[data-ref="submit-coupon-code"]').addEvent('click', function(event) {
    event.stop();
    self.$submit();
    });
    ......@@ -153,12 +181,7 @@ define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [
    this.$running = false;
    this.Loader.hide();
    }).catch((err) => {
    console.error(err);
    this.$running = false;
    this.Loader.hide();
    });
    }).catch(self.handleError);
    }, {
    'package': 'quiqqer/order-simple-checkout',
    orderHash: orderHash
    ......@@ -184,7 +207,7 @@ define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [
    'package': 'quiqqer/order'
    });
    });
    });
    }).catch(self.handleError);
    }, {
    'package': 'quiqqer/order'
    });
    ......@@ -196,19 +219,33 @@ define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [
    OrderProcess.Loader.show();
    // OrderProcess.getOrder().then(function(orderHash) {
    // return CouponCodes.addCouponCodeToBasket(code, orderHash);
    // }).then(function(redeemed) {
    // self.$running = false;
    //
    // if (redeemed === false) {
    // OrderProcess.Loader.hide();
    // self.Loader.hide();
    // return;
    // }
    //
    // self.$addCouponCodeToSession(code).then(function() {
    // OrderProcess.reload();
    // });
    // });
    OrderProcess.getOrder().then(function(orderHash) {
    return CouponCodes.addCouponCodeToBasket(code, orderHash);
    }).then(function(redeemed) {
    self.$running = false;
    CouponCodes.addCouponCodeToBasket(code, orderHash).then(() => {
    self.$running = false;
    if (redeemed === false) {
    self.$addCouponCodeToSession(code).then(function() {
    OrderProcess.reload();
    });
    }).catch((err) => {
    OrderProcess.Loader.hide();
    self.Loader.hide();
    return;
    }
    self.$addCouponCodeToSession(code).then(function() {
    OrderProcess.reload();
    self.handleError(err);
    });
    });
    },
    ......@@ -285,6 +322,69 @@ define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [
    });
    });
    });
    },
    /**
    * Show error message container
    * @param msg
    */
    showErrorMessage: function( msg) {
    if (!msg) {
    console.log("no error message provided");
    return;
    }
    if (!this.$ErrorMsgContainer) {
    return;
    }
    this.$ErrorMsgContainer.set('html', msg);
    this.$ErrorMsgContainer.setAttribute('data-show', '1');
    },
    /**
    * Hide error message container
    */
    hideErrorMessage: function() {
    if (!this.$ErrorMsgContainer) {
    return;
    }
    this.$ErrorMsgContainer.removeAttribute('data-show');
    },
    /**
    * Set data-invalid attribute to the input
    */
    highlightInvalidInput: function() {
    this.$Input.setAttribute('data-invalid', '1');
    },
    /**
    * Remove data-invalid attribute from the input
    */
    resetInvalidInput: function() {
    this.$Input.removeAttribute('data-invalid');
    },
    /**
    * Handle error message (show error message and highlight invalid input)
    *
    * @param err
    */
    handleError: function(err) {
    console.error(err);
    if (err.options !== undefined && err.options.message) {
    const msg = err.options.message;
    this.showErrorMessage(msg);
    this.highlightInvalidInput();
    }
    this.$running = false;
    this.Loader.hide();
    }
    });
    });
    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