Magento 2.3 - Add Increment qty buttons in the minicart

Question

I try to add increments qty buttons to the minicart. I have add this code:

app/design/frontend/theme/name/Magento_Checkout/web/template/minicart/item/default.html

     <div class="details-qty qty">
            <label class="label" data-bind="i18n: 'Qty', attr: {
                   for: 'cart-item-'+item_id+'-qty'}"></label>
        <div class="qty-changer">
            <a href="javascript:void(0)" class="qtyminus"><i class="fas fa-chevron-left"></i></a>
            <input data-bind="attr: {
                   id: 'cart-item-'+item_id+'-qty',
                   'data-cart-item': item_id,
                   'data-item-qty': qty,
                   'data-cart-item-id': product_sku
                   }, value: qty"
                   type="number"
                   size="4"
                 class="input-text qty">

            <a href="javascript:void(0)" class="qtyplus"><i class="fas fa-chevron-right"></i></a>
        </div> 
            <button data-bind="attr: {
                   id: 'update-cart-item-'+item_id,
                   'data-cart-item': item_id,
                   title: $t('Update')
                   }"
                    class="update-cart-item"
                    style="display: none">
                <span data-bind="i18n: 'Update'"></span>
            </button>
        </div>
    </div>

And here is my javascript code:

require([
    'jquery'
], function ($) {
    $(document).ready(function(){
        
         /********************* Qty Holder **************************/
        $(document).on("click", ".qtyplus", function(e) {
            // Stop acting like a button
            e.preventDefault();
            // Get its current value
            var currentVal = parseInt($(this).parents('.qty-changer').find('input.input-text.qty').val());
            // If is not undefined
            if (!isNaN(currentVal)) {
                // Increment
                $(this).parents('.qty-changer').find('input.input-text.qty').val(currentVal + 1);
            } else {
                // Otherwise put a 0 there
                $(this).parents('.qty-changer').find('input.input-text.qty').val(1);
            }
        });
        // This button will decrement the value till 0
        $(document).on("click", ".qtyminus", function(e) {
            // Stop acting like a button
            e.preventDefault();
            // Get the field name
            fieldName = $(this).attr('field');
            // Get its current value
            var currentVal = parseInt($(this).parents('.qty-changer').find('input.input-text.qty').val());
            // If it isn't undefined or its greater than 0
            if (!isNaN(currentVal) && currentVal > 1) {
                // Decrement one
                $(this).parents('.qty-changer').find('input.input-text.qty').val(currentVal - 1);
            } else {
                // Otherwise put a 0 there
                $(this).parents('.qty-changer').find('input.input-text.qty').val(1);
            }
        }); 
        
        
        $(".qtyplus").unbind('click').click(function(){
            if($(this).parent().parent().children(".control").children("input.input-text.qty").is(':enabled')){
                $(this).parent().parent().children(".control").children("input.input-text.qty").val((+$(this).parent().parent().children(".control").children("input.input-text.qty").val() + 1) || 0);
                $(this).parent().parent().children(".control").children("input.input-text.qty").trigger('change');
                $(this).focus();
            }
        });
        $(".qtyminus").unbind('click').click(function(){
            if($(this).parent().parent().children(".control").children("input.input-text.qty").is(':enabled')){
                $(this).parent().parent().children(".control").children("input.input-text.qty").val(($(this).parent().parent().children(".control").children("input.input-text.qty").val() - 1 > 0) ? ($(this).parent().parent().children(".control").children("input.input-text.qty").val() - 1) : 0);
                $(this).parent().parent().children(".control").children("input.input-text.qty").trigger('change');
                $(this).focus();
            }
        });
    });
});

The code is work but when press the plus or minus I don't see that "Update" button. How I can call that update action in my code. So I need when I press on - Button for example to see the "Update" button.

Thank you in advance

Answer 1

Please check this code app/code/Magento/Checkout/view/frontend/web/js/sidebar.js::111

you can use in your code mage.sidebar._showItemButton($(event.target))

Hope you know how to inject it to your script properly.