1

I want to add increment and decrement buttons for quantity on catalog page without refreshing the page
Pease help!

2 Answers 2

0
create a block
<?php
namespace Vendor\Module\Block\Product;

class ProductsList extends \Magento\CatalogWidget\Block\Product\ProductsList
{

}
Then add preference in di.xml file as follows
<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="Magento\CatalogWidget\Block\Product\ProductsList" type="Vendor\Module\Block\Product\ProductsList" />
</config>
"Then add in templates folder as product/widget/content/grid.phtml"
<?php
use Magento\Framework\App\Action\Action;
/** @var \Magento\CatalogWidget\Block\Product\ProductsList $block */
$helper = $this->helper('vendor\module\Helper\Data');
// var_dump($helper->getDropDownCategory());
// var_dump($helper->getCurrentCategory()); ?>
<?php $helper = $this->helper('vendor\module\Helper\Data'); ?>
<?php if ($exist = ($block->getProductCollection() && $block->getProductCollection()->getSize())) : ?>
    <?php
    $type = 'widget-product-grid';
    $mode = 'grid';
    $image = 'new_products_content_widget_grid';
    $items = $block->getProductCollection()->getItems();

    $showWishlist = true;
    $showCompare = true;
    $showCart = true;
    $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
    $description = false;
    ?>
    <div class="block widget block-products-list <?= $mode ?>">
        <?php if ($block->getTitle()) : ?>
            <div class="block-title">
                <strong><?= $block->escapeHtml(__($block->getTitle())) ?></strong>
            </div>
        <?php endif ?>
        <div class="block-content">
            <?= '<!-- ' . $image . '-->' ?>
            <div class="products-<?= $mode ?> <?= $mode ?>">
                <ol class="product-items <?= $type ?>">
                    <?php $iterator = 1; ?>
                    <?php foreach ($items as $_item) : ?>
                        <?= ($iterator++ == 1) ? '<li class="product-item">' : '</li><li class="product-item">' ?>
                        <div class="product-item-info">
                            <a href="<?= $block->escapeUrl($block->getProductUrl($_item)) ?>" class="product-item-photo">
                                <?= $block->getImage($_item, $image)->toHtml() ?>
                            </a>
                            <div class="product-item-details">
                                <strong class="product-item-name">
                                    <a title="<?= $block->escapeHtml($_item->getName()) ?>"
                                       href="<?= $block->escapeUrl($block->getProductUrl($_item)) ?>"
                                       class="product-item-link">
                                        <?= $block->escapeHtml($_item->getName()) ?>
                                    </a>
                                </strong>
                                <?php if ($templateType) : ?>
                                    <?= $block->getReviewsSummaryHtml($_item, $templateType) ?>
                                <?php endif; ?>
                                <?= $block->getProductPriceHtml($_item, $type) ?>
                                <?= $block->getProductDetailsHtml($_item) ?>
                                <?php if ($showWishlist || $showCompare || $showCart) : ?>
                                    <div class="product-item-inner">
                                        <div class="product-item-actions">
                                            <?php if($showCart) : ?>
                                            <?php if($helper->isEnabled()):?>                
                                            <?php if(($helper->pageType()) && ($helper->productType($_item->getId())) ):?>
                                            <?php if(in_array($helper->getCurrentCategory(), $helper->getDropDownCategory()) ):?>
                                            <div class="box-tocart">
                                            <div class="fieldset">
                                            <?php $id = $_item->getId(); ?>
                                                <?php //if ($block->shouldRenderQuantity()): ?>
                                                <div class="field qty">
                                                    <label class="label" for="qty"><span><?php echo __('Qty') ?></span></label>
                                                    <div class="control">
                                                    <span class="minus"><button type="button" style="background-color:#<?= $helper->buttonColor();?>;color:#<?= $helper->signColor();?>;" onclick="
                                                    var result = document.getElementById('<?= $id ?>');
                                                    var qty = result.value;
                                                    if( !isNaN( qty ) && qty > 1 ) result.value--;
                                                    return false;">-</button>
                                                    </span>
                                                    <input type="number"
                                                            name="qty"
                                                            id="<?= $id ?>"
                                                            value="<?php echo $block->getProductDefaultQty() * 1 ?>"
                                                            title="<?php echo __('Qty') ?>"
                                                            class="input-text qty"
                                                            data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                                                            readonly/>
                                                    <span class="plus"><button type="button" style="background-color:#<?= $helper->buttonColor();?>;color:#<?= $helper->signColor();?>;" onclick="
                                                    var result = document.getElementById('<?= $id ?>');
                                                    var qty = result.value;
                                                    if( !isNaN( qty )) result.value++;
                                                    return false;">+</button>
                                                    </span>
                                                    </div>
                                                </div>
                                                </div>
                                                </div>
                                                <?php //endif; ?>
                                                <?php endif; ?>
                                                <?php endif; ?>
                                                <?php endif; ?>
                                                <div class="actions-primary">
                                                    <?php if ($_item->isSaleable()) : ?>
                                                        <?php $postParams = $block->getAddToCartPostParams($_item); ?>
                                                        <form data-role="tocart-form" data-product-sku="<?= $block->escapeHtml($_item->getSku()) ?>" action="<?= $block->escapeUrl($postParams['action']) ?>" method="post">
                                                            <input type="hidden" name="product" value="<?= $block->escapeHtmlAttr($postParams['data']['product']) ?>">
                                                            <input type="hidden" name="<?= Action::PARAM_NAME_URL_ENCODED ?>" value="<?= $postParams['data'][Action::PARAM_NAME_URL_ENCODED] ?>">
                                                            <?= $block->getBlockHtml('formkey') ?>
                                                            <button type="submit"
                                                                    title="<?= $block->escapeHtml(__('Add to Cart')) ?>"
                                                                    class="action tocart primary">
                                                                <span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
                                                            </button>
                                                        </form>
                                                    <?php else : ?>
                                                        <?php if ($_item->getIsSalable()) : ?>
                                                            <div class="stock available"><span><?= $block->escapeHtml(__('In stock')) ?></span></div>
                                                        <?php else : ?>
                                                            <div class="stock unavailable"><span><?= $block->escapeHtml(__('Out of stock')) ?></span></div>
                                                        <?php endif; ?>
                                                    <?php endif; ?>
                                                </div>
                                            <?php endif; ?>
                                            <?php if ($showWishlist || $showCompare) : ?>
                                                <div class="actions-secondary" data-role="add-to-links">
                                                    <?php if ($this->helper(\Magento\Wishlist\Helper\Data::class)->isAllow() && $showWishlist) : ?>
                                                        <a href="#"
                                                           data-post='<?= $block->getAddToWishlistParams($_item) ?>' class="action towishlist" data-action="add-to-wishlist" title="<?= $block->escapeHtmlAttr(__('Add to Wish List')) ?>">
                                                            <span><?= $block->escapeHtml(__('Add to Wish List')) ?></span>
                                                        </a>
                                                    <?php endif; ?>
                                                    <?php if ($block->getAddToCompareUrl() && $showCompare) : ?>
                                                        <?php $compareHelper = $this->helper(\Magento\Catalog\Helper\Product\Compare::class);?>
                                                        <a href="#" class="action tocompare" data-post='<?= $compareHelper->getPostDataParams($_item) ?>' title="<?= $block->escapeHtmlAttr(__('Add to Compare')) ?>">
                                                            <span><?= $block->escapeHtml(__('Add to Compare')) ?></span>
                                                        </a>
                                                    <?php endif; ?>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                        <?= ($iterator == count($items) + 1) ? '</li>' : '' ?>
                    <?php endforeach ?>
                </ol>
            </div>
            <?= $block->getPagerHtml() ?>
        </div>
    </div>
<?php endif;?>
7
  • Then make a file in templates folder as product/widget/content/grid.phtml and add code to this to add button Mar 2, 2021 at 5:08
  • I did all the steps but nothing changes on category page. Please help Mar 2, 2021 at 14:58
  • I have done this for me recently and it works correctly Mar 3, 2021 at 10:22
  • You did this for product listing page? Mar 3, 2021 at 14:00
  • I did this for all pages and categories Mar 4, 2021 at 7:28
0

for listing page

<?php 
use Magento\Framework\App\Action\Action; 
?>
<?php 
$helper = $this->helper('FME\ProductQtyIncrementDecrementButton\Helper\Data');
$_productCollection = $block->getLoadedProductCollection();
$_helper = $block->getData('outputHelper'); 
?>
<?php if (!$_productCollection->count()):?>
    <div class="message info empty">
    <div><?= $escaper->escapeHtml(__('We can\'t find products matching the selection.')) ?></div>
    </div>
<?php else:?>
    <?= $block->getToolbarHtml() ?>
    <?= $block->getAdditionalHtml() ?>
    <?php
    if ($block->getMode() == 'grid') {
        $viewMode = 'grid';
        $imageDisplayArea = 'category_page_grid';
        $showDescription = false;
        $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
    } else {
        $viewMode = 'list';
        $imageDisplayArea = 'category_page_list';
        $showDescription = true;
        $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW;
    }
    $pos = $block->getPositioned();
    ?>
    <div class="products wrapper <?= $viewMode ?> products-<?= $viewMode ?>">
        <ol class="products list items product-items">
            <?php /** @var $_product \Magento\Catalog\Model\Product */ ?>
            <?php foreach ($_productCollection as $_product):?>
            <li class="item product product-item">
                <div class="product-item-info"
                     id="product-item-info_<?= $_product->getId() ?>"
                     data-container="product-<?= $viewMode ?>">
                    <?php
                    $productImage = $block->getImage($_product, $imageDisplayArea);
                    if ($pos != null) {
                        $position = 'left:' . $productImage->getWidth() . 'px;'
                            . 'top:' . $productImage->getHeight() . 'px;';
                    }
                    ?>
                    <a href="<?= $escaper->escapeUrl($_product->getProductUrl()) ?>"
                       class="product photo product-item-photo"
                       tabindex="-1">
                        <?= $productImage->toHtml() ?>
                    </a>
                    <div class="product details product-item-details">
                        <?php
                            $_productNameStripped = $block->stripTags($_product->getName(), null, true);
                        ?>
                        <strong class="product name product-item-name">
                            <a class="product-item-link"
                               href="<?= $escaper->escapeUrl($_product->getProductUrl()) ?>">
                                <?= $_helper->productAttribute($_product, $_product->getName(), 'name')?>
                            </a>
                        </strong>
                        <?= $block->getReviewsSummaryHtml($_product, $templateType) ?>
                        <?= $block->getProductPrice($_product) ?>
                        <?php if ($_product->isAvailable()):?>
                            <?= $block->getProductDetailsHtml($_product) ?>
                        <?php endif; ?>
                        <div class="product-item-inner">
                            <div class="product actions product-item-actions">
                            <?php if($helper->isEnabled()):?>
                            <?php if(($helper->pageType()) && ($helper->productType($_product->getId()))) : ?>
                                <?php if(in_array($helper->getCurrentCategory(), $helper->getDropDownCategory()) ):?>
                            <div class="box-tocart">
                            <div class="field qty">
                            <?php $id = "qty_".$_product->getId(); ?>
                                <label class="label" for="<?= $id ?>"><span><?php echo __('Qty') ?></span></label>
                                <div class="control">
                                <span class="minus"><button type="button" style="background-color:#<?= $helper->buttonColor();?>;color:#<?= $helper->signColor();?>;"
                                onclick="
                                var result = document.getElementById('<?= $id ?>');
                                var qty = result.value;
                                // alert(qty);
                                if( !isNaN( qty ) && qty > 1 )
                                document.getElementById('<?= $id.'qty'?>').value = Number(--result.value);
                                return false;">-</button>
                                </span>
                                <input type="number"
                                    name="qty"
                                    id="<?= $id ?>"
                                    value="<?php echo $block->getProductDefaultQty() * 1 ?>"
                                    class="input-text qty"
                                    title="<?= __('Qty') ?>"
                                    data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                                    />
                                <span class="plus"><button type="button" style="background-color:#<?= $helper->buttonColor();?>;color:#<?= $helper->signColor();?>;"
                                onclick="
                                alert(JSON.parse(<?= json_encode($helper->changeQtyStep());?>));
                                var result = document.getElementById('<?= $id ?>');
                                var qty = result.value;
                                if( !isNaN( qty )) 
                                document.getElementById('<?= $id.'qty'?>').value = Number(++result.value);
                                return false;">+</button>
                                </span>
                                </div>
                            </div>
                            </div>
                            <?php endif; ?>
                            <?php endif; ?>
                            <?php endif; ?>
                                <div class="actions-primary">
                                    <?php if ($_product->isSaleable()):?>
                                        <?php $postParams = $block->getAddToCartPostParams($_product); ?>
                                        <?php $id = "qty_".$_product->getId(); ?>
                                        <form data-role="tocart-form"
                                              data-product-sku="<?= $escaper->escapeHtml($_product->getSku()) ?>"
                                              action="<?= $escaper->escapeUrl($postParams['action']) ?>"
                                              method="post">
                                            <input type="hidden"
                                                   name="product"
                                                   value="<?= $postParams['data']['product'] ?>"
                                                   >
                                            <input type="hidden"
                                                    id="<?= $id.'qty'?>"
                                                   name="qty"
                                                   value="qty"
                                                   >
                                            <input type="hidden"
                                                   name="<?= Action::PARAM_NAME_URL_ENCODED ?>"
                                                   value="<?=
                                                   $postParams['data'][Action::PARAM_NAME_URL_ENCODED] ?>"
                                                    >
                                            <?= $block->getBlockHtml('formkey') ?>
                                            <button type="submit"
                                                    title="<?= $escaper->escapeHtmlAttr(__('Add to Cart')) ?>"
                                                    class="action tocart primary">
                                                <span><?= $escaper->escapeHtml(__('Add to Cart')) ?></span>
                                            </button>
                                        </form>
                                    <?php else:?>
                                        <?php if ($_product->isAvailable()):?>
                                            <div class="stock available">
                                                <span><?= $escaper->escapeHtml(__('In stock')) ?></span></div>
                                        <?php else:?>
                                            <div class="stock unavailable">
                                                <span><?= $escaper->escapeHtml(__('Out of stock')) ?></span></div>
                                        <?php endif; ?>
                                    <?php endif; ?>
                                </div>
                                <?= strpos($pos, $viewMode . '-primary') ?
                                    $secureRenderer->renderStyleAsTag(
                                        $position,
                                        'product-item-info_' . $_product->getId() . ' div.actions-primary'
                                    ) : '' ?>
                                <div data-role="add-to-links" class="actions-secondary">
                                    <?php if ($addToBlock = $block->getChildBlock('addto')):?>
                                        <?= $addToBlock->setProduct($_product)->getChildHtml() ?>
                                    <?php endif; ?>
                                </div>
                                <?= strpos($pos, $viewMode . '-secondary') ?
                                    $secureRenderer->renderStyleAsTag(
                                        $position,
                                        'product-item-info_' . $_product->getId() . ' div.actions-secondary'
                                    ) : '' ?>
                            </div>
                            <?php if ($showDescription):?>
                                <div class="product description product-item-description">
                                    <?= $_helper->productAttribute(
                                        $_product,
                                        $_product->getShortDescription(),
                                        'short_description'
                                    ) ?>
                                    <a href="<?= $escaper->escapeUrl($_product->getProductUrl()) ?>"
                                       title="<?= $_productNameStripped ?>"
                                       class="action more"><?= $escaper->escapeHtml(__('Learn More')) ?></a>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <?= strpos($pos, $viewMode . '-actions') ?
                $secureRenderer->renderStyleAsTag(
                    $position,
                    'product-item-info_' . $_product->getId() . ' div.product-item-actions'
                ) : '' ?>
            </li>
            <?php endforeach; ?>
        </ol>
    </div>
    <?= $block->getToolbarHtml() ?>
    <?php if (!$block->isRedirectToCartEnabled()):?>
        <script type="text/x-magento-init">
        {
            "[data-role=tocart-form], .form.map.checkout": {
                "catalogAddToCart": {
                    "product_sku": "<?= $escaper->escapeJs($_product->getSku()) ?>"
                }
            }
        }
        </script>
        <?php endif; ?>    
<?php endif; ?>
2
  • Where should I put this code please? Mar 5, 2021 at 10:12
  • in your phtml file Mar 5, 2021 at 11:08

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.