1

I am trying to update the value of the qty in the shopping cart page with a Knockout on click, but it seems to revert the value to it's original state.

This is the script for the button :

<td class="col qty" data-th="<?php echo $block->escapeHtml(__('Qty')); ?>">
        <div class="field qty">
            <script type="text/x-magento-init">
                {
                   "*": {
                           "Magento_Ui/js/core/app": {
                               "components": {
                                   "qty_change<?= $_item->getId() ?>": {
                                       "component":
                                       "Brancom_QuantityIncrementer/js/view/product/view/qty_change_cart",
                                       "qtyId": "<?= $_item->getId() ?>",
                                       "elmUrl": "<?=  $block->getUrl('checkout/cart/updatePost') ?>"
                                   }
                               }
                           }
                   }
                }
            </script>

            <label class="label" for="qty-<?php /* @escapeNotVerified */ echo $_item->getId() ?>">
                <span><?php /* @escapeNotVerified */
                        echo __('Qty') ?></span>
            </label>

            <div class="control" data-bind="scope: 'qty_change<?= $_item->getId() ?>'">

                <button class="remove-button" data-bind="click: decreaseQty"
                        id="dec-<?php /* @escapeNotVerified */ echo $_item->getId() ?>">-</button>
                <input value="<?= $block->getQty() ?>"
                       type="number"
                       name="qty"
                       id="qty-<?php /* @escapeNotVerified */ echo $_item->getId() ?>"
                       maxlength="12"
                       title="<?php echo __('Qty') ?>"
                       class="input-text qty"
                       data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                       readonly
                />
                <button class="add-button" data-bind="click: increaseQty"
                        id="add-<?php /* @escapeNotVerified */ echo $_item->getId() ?>">+</button>
            </div>
        </div>
    </td>

The code above is being repeated so every single one has a different scope. by clicking on the Remove or add button the data-binded element gets fired. which in return calls a function in this uiComponent:

define([
'ko',
'uiComponent',
'jquery',
'Magento_Checkout/js/model/cart/totals-processor/default',
'Magento_Customer/js/customer-data',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/shipping-rate-processor/new-address',
'Magento_Checkout/js/model/shipping-rate-processor/customer-address',
'Magento_Checkout/js/model/shipping-rate-registry',
'Magento_Checkout/js/action/get-totals'
], function (ko, Component, $, defaultTotal, customerData, quote, 
defaultProcessor, customerAddressProcessor,
         rateRegistry, getTotalsAction) {
'use strict';
return Component.extend({
    initialize: function (config) {
        //initialize parent Component
        this._super();
        this.qtyId = config.qtyId;
        this.elmUrl = config.elmUrl;
    },
    decreaseQty: function () {
        var newQty = parseInt($('#qty-' + this.qtyId).val()) - 1;
        if (newQty < 1) {
            newQty = 1;
        }
        $('#qty-' + this.qtyId()).val(newQty);
        console.log('#qty-' + this.qtyId);

        this.updateQty();
    },
    increaseQty: function () {
        var newQty = parseInt($('#qty-' + this.qtyId).val()) + 1;
        $('#qty-' + this.qtyId).val(newQty);

        this.updateQty();
    },

    updateQty: function () {
        var form = $('form#form-validate');
        var url = this.elmUrl;
        $.ajax({
            url: url,
            type: "POST",
            data: form.serialize(),
            showLoader: true,
            cache: false,
            success: function (res) {
                var parsedResponse = $.parseHTML(res);
                var result = $(parsedResponse).find("#form-validate");
                var sections = ['cart'];
                $("#form-validate").replaceWith(result);
                // The mini cart reloading
                customerData.reload(sections, true);

                // The totals summary block reloading
                var deferred = $.Deferred();
                getTotalsAction([], deferred);
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                console.log(err.Message);
            }
        });

        return true;

        }
    });
});

But by pressing on the button this happens:

enter image description here

And on the second click it gives a this console error and keeps trying to load:

modal.js:340 Uncaught TypeError: this.modal.zIndex is not a function

And I don't get why it tries to open a modal.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.