Skip to main content
Tweeted twitter.com/StackMagento/status/1207133617169870849
deleted 61 characters in body
Source Link
Ebin Manuval
  • 283
  • 1
  • 4
  • 17
.......
<td class="col qty" data-th="<?= $block->escapeHtml(__('Qty')) ?>">
    <div class="field qty">
        <label class="label" for="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty">
            <span><?= /* @escapeNotVerified */ __('Qty') ?></span>
        </label>
        <div class="control qty">
            <button data-bind="click: decreaseQty"><button>-</button>
            <input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
                   name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
                   data-cart-item-id="<?= /* @escapeNotVerified */ $_item->getSku() ?>"
                   value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
                   type="number"
                   size="4"
                   title="<?= $block->escapeHtml(__('Qty')) ?>"
                   class="input-text qty"
                   data-validate="{required:true,'validate-greater-than-zero':true}"
                   data-role="cart-item-qty"/>
            <button data-bind="click: increaseQty">+<>+</button>
        </div>
    </div>
</td>
......
.......
<td class="col qty" data-th="<?= $block->escapeHtml(__('Qty')) ?>">
    <div class="field qty">
        <label class="label" for="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty">
            <span><?= /* @escapeNotVerified */ __('Qty') ?></span>
        </label>
        <div class="control qty">
            <button data-bind="click: decreaseQty">-</button>
            <input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
                   name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
                   data-cart-item-id="<?= /* @escapeNotVerified */ $_item->getSku() ?>"
                   value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
                   type="number"
                   size="4"
                   title="<?= $block->escapeHtml(__('Qty')) ?>"
                   class="input-text qty"
                   data-validate="{required:true,'validate-greater-than-zero':true}"
                   data-role="cart-item-qty"/>
            <button data-bind="click: increaseQty">+</button>
        </div>
    </div>
</td>
......
.......
<td class="col qty" data-th="<?= $block->escapeHtml(__('Qty')) ?>">
    <div class="field qty">
        <label class="label" for="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty">
            <span><?= /* @escapeNotVerified */ __('Qty') ?></span>
        </label>
        <div class="control qty">
            <button>-</button>
            <input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
                   name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
                   data-cart-item-id="<?= /* @escapeNotVerified */ $_item->getSku() ?>"
                   value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
                   type="number"
                   size="4"
                   title="<?= $block->escapeHtml(__('Qty')) ?>"
                   class="input-text qty"
                   data-validate="{required:true,'validate-greater-than-zero':true}"
                   data-role="cart-item-qty"/>
            <button >+</button>
        </div>
    </div>
</td>
......
Source Link
Ebin Manuval
  • 283
  • 1
  • 4
  • 17

Adding quantity increment button in cart and mini cart

I need to add a quantity increment button in cart page and mini cart popup like this.

[![enter image description here][1]][1]

I added the button but I can't assign the functionality.
This is what I did app/code/Amsi/UserManagement/view/frontend/layout/checkout_cart_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock  name="checkout.cart.form">
            <block class="Magento\Framework\View\Element\RendererList" name="checkout.cart.item.renderers.override" as="renderer.list.custom"/>
            <arguments>
                <argument name="renderer_list_name" xsi:type="string">checkout.cart.item.renderers.override</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

app/code/Amsi/UserManagement/view/frontend/layout/checkout_cart_item_renderers.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.cart.item.renderers.override">
            <block class="Magento\Checkout\Block\Cart\Item\Renderer" as="default" template="Amsi_UserManagement::cart/item/default.phtml" />

            <block class="Magento\Checkout\Block\Cart\Item\Renderer" as="simple" template="Amsi_UserManagement::cart/item/default.phtml" />
        </referenceBlock>
    </body>
</page>

app/code/Amsi/UserManagement/view/frontend/templates/cart/item/default.phtml

.......
<td class="col qty" data-th="<?= $block->escapeHtml(__('Qty')) ?>">
    <div class="field qty">
        <label class="label" for="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty">
            <span><?= /* @escapeNotVerified */ __('Qty') ?></span>
        </label>
        <div class="control qty">
            <button data-bind="click: decreaseQty">-</button>
            <input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
                   name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
                   data-cart-item-id="<?= /* @escapeNotVerified */ $_item->getSku() ?>"
                   value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
                   type="number"
                   size="4"
                   title="<?= $block->escapeHtml(__('Qty')) ?>"
                   class="input-text qty"
                   data-validate="{required:true,'validate-greater-than-zero':true}"
                   data-role="cart-item-qty"/>
            <button data-bind="click: increaseQty">+</button>
        </div>
    </div>
</td>
......

How can i assign functionality to increment and decrements buttons ? [1]: https://i.sstatic.net/meUfu.png