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.