0

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 enter image description here

enter image description here

0

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>
  • Soundararajan where you have define class="qty-inc" and class="qty-dec" for this <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> – somutesting Aug 1 at 9:51
  • Now we updated the code at end of the line – Soundararajan m Aug 1 at 11:21
  • Soundararajan how to get icons for porto-icon-up-dir and porto-icon-down-dir – somutesting Aug 1 at 12:43
  • @somutesting, we used porto theme so that we use porto icon. I if use fontawesome icon or other custom icon. – Soundararajan m Aug 1 at 12:47
  • for code i am facing two three issues when i click on increase button it isincreasing count 2 at a time and directly adding to cart and decrease button not working and if i add two products first product is adding two times(i mean when i click on second product increment button first product is also increasing)i placed script below these lines <div class="qty-changer"><a href="javascript:void(0)" class="qty-inc"><i class="porto-icon-up-dir"></i></a><ahref="javascript:void(0)"class="qty-dec"><i class="porto-icon-down-dir"></i></a></div> – somutesting Aug 1 at 12:52

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.