8

How can you add a Qty filed to the the add to cart form on the category listings page.

With the Luma theme the user only has the option to add one product to cart at a time from the product listings page:

enter image description here

Is there a way I can edit the form in my theme at: app/design/frontend/Holy/mytheme/Magento_Catalog/templates/product/list.phtml

<form data-role="tocart-form" action="<?php /* @escapeNotVerified */ echo $postParams['action']; ?>" method="post">
    <input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $postParams['data']['product']; ?>">
    <input type="hidden" name="<?php /* @escapeNotVerified */ echo Action::PARAM_NAME_URL_ENCODED; ?>" value="<?php /* @escapeNotVerified */ echo $postParams['data'][Action::PARAM_NAME_URL_ENCODED]; ?>">
    <?php echo $block->getBlockHtml('formkey')?>
    <button type="submit"
            title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>"
            class="action tocart primary">
        <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
    </button>
</form>

For now it would work even if I could just do this for simple products.

3 Answers 3

20

On this form just add below code

<input type="number"
name="qty"
id="qty"
maxlength="12"
value="<?php /* @escapeNotVerified */ echo '1' ?>"
title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="input-text qty" />

and check what is happen :)

7
  • wow, that was much easier than I expected. Thanks! By chance do you know how to add the same for the related products on the product details page? In app/design/frontend/Holy/mytheme/Magento_Catalog/templates/product/list/items.phtml
    – Holly
    Apr 13, 2017 at 17:30
  • I have not been able to update cart with this line present in the phtml Jul 27, 2017 at 15:38
  • Do you now how can i programatically update the value of input Jul 27, 2017 at 17:29
  • @Amit Bera can you please help me on this magento.stackexchange.com/questions/201931/…
    – amith lal
    Nov 17, 2017 at 9:19
  • Do you know how can I add Qty in add to cart form on configurable Product Listings Page in Magento 2.3
    – kiran
    May 16, 2019 at 18:56
1
in the form of add to cart just add this code 

<?php echo $block->getBlockHtml('formkey')?>
<input type="number"
                       name="qty"
                       id="qty"
                       maxlength="12"
                       value="<?php /* @escapeNotVerified */ echo $block->getProductDefaultQty() * 1 ?>"
                       title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="input-text qty form-control"
                       data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                       />
<button type="submit" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>" class="action btn-add-cart tocart">
<i class="fa fa-shopping-cart"></i>
<span class="text"><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
</button>
1
  • $block->getProductDefaultQty() & $block->getQuantityValidators() does not work on list page, otherwise this should be better answer. Oct 28, 2022 at 1:47
0
<script type="text/javascript"> require(['jquery'], function($){
    $(document).ready(function(){
        $('.product-item').each(function(){
            var min = parseInt($(this).find('.qty').attr('min'));
            var max = parseInt($(this).find('.qty').attr('max'));
            var step = parseInt($(this).find('.qty').attr('step'));
            var input = $(this).find('.qty');

            // Add decrement button
            $(this).find('.qty-controller').prepend('<button class="decrement" type="button">-</button>');

            // Add increment button
            $(this).find('.qty-controller').append('<button class="increment" type="button">+</button>');

            // Decrement quantity
            $(this).on('click', '.decrement', function(){
                var value = parseInt(input.val()) - step;
                value = value < min ? min : value;
                input.val(value);
            });

            // Increment quantity
            $(this).on('click', '.increment', function(){
                var value = parseInt(input.val()) + step;
                value = value > max ? max : value;
                input.val(value);
            });
        });
    }); }); </script>

Script JS Add to Bottom of List or include in XML

<div class="qty-controller">
                                <input type="number"
                                name="qty"
                                id="qty"
                                maxlength="12"
                                min="1"
                                max="10000"
                                step="1"
                                value="<?php /* @escapeNotVerified */ echo '1' ?>"
                                title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="input-text qty" />
                                <input type="hidden"
                                name="product"
                                value="<?= /* @noEscape */ $postParams['data']['product'] ?>">
                                <input type="hidden"
                                name="<?= /* @noEscape */ Action::PARAM_NAME_URL_ENCODED ?>"
                                value="<?=
                                /* @noEscape */ $postParams['data'][Action::PARAM_NAME_URL_ENCODED]
                            ?>">
                        </div>

Add this within the form action

Your Answer

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

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