0

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.