Quantity increment and decrement happening to all products at a time in grouped products

Question

I Have created quantity increment and decrement for grouped products in this location

C:\xampp\htdocs\Magento2\vendor\magento\module-grouped-product\view\frontend\templates\product\view\type\grouped.phtml

But the problem is if click on quantity increment it applying to all products in the group. It is not coming individually

code https://drive.google.com/open?id=1aY-ANcC1pL0j1P33ANZFGwXnXMoldkaO

Answer 1

Can you please try this code for grouped product view page.

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/**
 * Grouped product data template
 *
 * @var $block \Magento\Catalog\Block\Product\View\BaseImage
 * @var $block \Magento\GroupedProduct\Block\Product\View\Type\Grouped
 */
?>
<?php $block->setPreconfiguredValue(); ?>
<?php $_product = $block->getProduct(); ?>
<?php $_associatedProducts = $block->getAssociatedProducts(); ?>
<?php $_hasAssociatedProducts = count($_associatedProducts) > 0; ?>

<div class="table-wrapper grouped">
    <table class="table data grouped" id="super-product-table">
        <caption class="table-caption"><?php /* @escapeNotVerified */ echo __('Grouped product items') ?></caption>
        <thead>
        <tr>
            <th class="col item" scope="col"><?php /* @escapeNotVerified */ echo __('Product Name') ?></th>
            <?php if ($_product->isSaleable()): ?>
                <th class="col qty" scope="col"><?php /* @escapeNotVerified */ echo __('Qty') ?></th>
            <?php endif; ?>
        </tr>
        </thead>

        <?php if ($_hasAssociatedProducts): ?>
        <?php foreach ($_associatedProducts as $_item): ?>
        <tbody>
            <tr>
                <td data-th="<?php echo $block->escapeHtml(__('Product Name')); ?>" class="col item">
                    <strong class="product-item-name"><?php echo $block->escapeHtml($_item->getName()) ?></strong>
                    <?php if ($block->getCanShowProductPrice($_product)): ?>
                        <?php if ($block->getCanShowProductPrice($_item)): ?>
                            <?php /* @escapeNotVerified */ echo $block->getProductPrice($_item) ?>
                        <?php endif; ?>
                     <?php endif; ?>
                </td>
                <?php if ($_product->isSaleable()): ?>
                <td data-th="<?php echo $block->escapeHtml(__('Qty')); ?>" class="col qty">
                <?php if ($_item->isSaleable()) : ?>
                    <div class="control qty">
                        <input type="number" name="super_group[<?php /* @escapeNotVerified */ echo $_item->getId() ?>]"
                               maxlength="12"
                               value="<?php /* @escapeNotVerified */ echo $_item->getQty() * 1 ?>"
                               title="<?php /* @escapeNotVerified */ echo __('Qty') ?>"
                               class="input-text qty"
                               data-validate="{'validate-grouped-qty':'#super-product-table'}"
                               data-errors-message-box="#validation-message-box"/>
                        <div class="qty-changer">
                            <a href="javascript:void(0)" class="qty-inc"><i class="porto-icon-up-dir"></i></a>
                            <a href="javascript:void(0)" class="qty-dec"><i class="porto-icon-down-dir"></i></a>
                        </div>
                    </div>
                <?php else: ?>
                    <div class="stock unavailable" title="<?php /* @escapeNotVerified */ echo __('Availability') ?>">
                        <span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span>
                    </div>
                <?php endif; ?>
                </td>
                <?php endif; ?>
            </tr>
            <?php if ($block->getCanShowProductPrice($_product)
                && $block->getCanShowProductPrice($_item)
                && trim($block->getProductPriceHtml(
                    $_item,
                    \Magento\Catalog\Pricing\Price\TierPrice::PRICE_CODE
                ))): ?>
                <tr class="row-tier-price">
                    <td colspan="2">
                        <?php echo $block->getProductPriceHtml(
                            $_item,
                            \Magento\Catalog\Pricing\Price\TierPrice::PRICE_CODE
                        ) ?>
                    </td>
                </tr>
            <?php endif; ?>
        </tbody>
        <?php endforeach; ?>
        <?php else: ?>
        <tbody>
            <tr>
                <td class="unavailable"
                    colspan="<?php if ($_product->isSaleable()): ?>4<?php else : ?>3<?php endif; ?>">
                    <?php /* @escapeNotVerified */ echo __('No options of this product are available.') ?>
                </td>
            </tr>
        </tbody>
        <?php endif; ?>
    </table>
</div>
<div id="validation-message-box"></div>

<script>
    require([
        'jquery',
        'mage/mage',
        'Magento_Catalog/product/view/validation',
        'Magento_Catalog/js/catalog-add-to-cart'
    ], function ($) {
        'use strict';

        $('#product_addtocart_form').mage('validation', {
            radioCheckboxClosest: '.nested',
            submitHandler: function (form) {
                var widget = $(form).catalogAddToCart({
                    bindSubmit: false
                });

                widget.catalogAddToCart('submitForm', $(form));

                return false;
            }
        });
        $(".qty-inc").unbind('click').click(function(){
            if($(this).parents('.field.qty').find("input.input-text.qty").is(':enabled')){
                $(this).parents('.field.qty').find("input.input-text.qty").val((+$(this).parents('.field.qty').find("input.input-text.qty").val() + 1) || 0);
                $(this).parents('.field.qty').find("input.input-text.qty").trigger('change');
                $(this).focus();
            }
            else if($(this).parents('.col.qty').find("input.input-text.qty").is(':enabled')){
                $(this).parents('.col.qty').find("input.input-text.qty").val((+$(this).parents('.col.qty').find("input.input-text.qty").val() + 1) || 0);
                $(this).parents('.col.qty').find("input.input-text.qty").trigger('change');
                $(this).focus();
            }
        });
        $(".qty-dec").unbind('click').click(function(){
            if($(this).parents('.field.qty').find("input.input-text.qty").is(':enabled')){
                $(this).parents('.field.qty').find("input.input-text.qty").val(($(this).parents('.field.qty').find("input.input-text.qty").val() - 1 > 0) ? ($(this).parents('.field.qty').find("input.input-text.qty").val() - 1) : 0);
                $(this).parents('.field.qty').find("input.input-text.qty").trigger('change');
                $(this).focus();
            }
            else if($(this).parents('.col.qty').find("input.input-text.qty").is(':enabled')){
                $(this).parents('.col.qty').find("input.input-text.qty").val(($(this).parents('.col.qty').find("input.input-text.qty").val() - 1 > 0) ? ($(this).parents('.col.qty').find("input.input-text.qty").val() - 1) : 0);
                $(this).parents('.col.qty').find("input.input-text.qty").trigger('change');
                $(this).focus();
            }
        });
    });
</script>