0

I have a problem with + increase and - decrease qty function. On 1 single click it goes up +2 or -2. It also do so on other children products qty inputs. How can I fix this correcly?

enter image description here

\Magento_GroupedProduct\templates\product\view\type\grouped.phtml

<?php
/**
 * Copyright © Magento, Inc. 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; ?>

<?php $objectManager =  \Magento\Framework\App\ObjectManager::getInstance(); ?>
<?php $productRepository = $objectManager->get('\Magento\Catalog\Model\ProductRepository'); ?>

<?php $grouped = $_product->load($_product->getId()); ?>                    
<?php $associatedProducts = $grouped->getTypeInstance()->getAssociatedProducts($grouped); ?>

</form>

<div class="table-wrapper grouped">
    <table class="table data grouped" id="super-product-table">
        <caption class="table-caption"><?= /* @escapeNotVerified */ __('Grouped product items') ?></caption>
        <thead>
        <tr>
            <th class="image-width"><?= /* @escapeNotVerified */ __('Image') ?></th>
            <th class="col item" scope="col"><?= /* @escapeNotVerified */ __('Description') ?></th>
            <?php if ($_product->isSaleable()): ?>
                <th class="col qty" scope="col"><?= /* @escapeNotVerified */ __('Qty') ?></th>
            <?php endif; ?>
        </tr>
        </thead>
        <?php if ($_hasAssociatedProducts): ?>
        <?php foreach ($_associatedProducts as $_item): ?>
        <?php $childProduct = $productRepository->get($_item->getSku()); ?>
        <tbody>
            <tr>
                <td class="image-float"><img src="<?= $block->getUrl('pub/media/catalog').'product'.$childProduct->getImage() ?>" alt width="230"/></td>
                <td data-th="<?= $block->escapeHtml(__('Product')) ?>" class="col item">
                    <strong class="product-item-name"><?= $block->escapeHtml($_item->getName()) ?></strong>
                    <a href="<?php echo $_item->getProductUrl() ?>"><span class="sku"><?= $_item->getSku() ?></span></a>
                    <div class="price-font" data-th="<?= $block->escapeHtml(__('Price')) ?>" class="col item">
                    <?php if ($block->getCanShowProductPrice($_product)): ?>
                        <?php if ($block->getCanShowProductPrice($_item)): ?>
                            <?= /* @escapeNotVerified */ $block->getProductPrice($_item) ?>
                        <?php endif; ?>
                     <?php endif; ?>
                     </div>
                    </td>
                <?php if ($_product->isSaleable()): ?>
                <td data-th="<?= $block->escapeHtml(__('Qty')) ?>" class="col qty">
                        <?php if ($_item->isSaleable()) : ?>
                            <div class="control qty">
                                <form data-product-sku="<?php echo $_item->getSku() ?>" data-role="tocart-form" action="<?php echo $this->getAddToCartUrl($_item); ?>" method="post" id="product_addtocart_form">
                                    <input type="hidden" name="product" value="<?php echo $_item->getId(); ?>">
                                    <input type="hidden" name="selected_configurable_option" value="" />
                                    <input type="hidden" name="related_product" id="related-products-field" value="">                                  
                                    <input type="hidden" name="item"  value="<?php echo $_item->getId(); ?>" />
                                    
                                    <?php echo $block->getBlockHtml('formkey')?><div class="box-tocart"><div class="fieldset"><div class="field qty"><div class="control">
                                    
                                    <input type="number" name="qty" id="qty" maxlength="12" value="1" title="Antall" class="qty-default input-text qty" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1,&quot;maxAllowed&quot;:10000}}"/>
                                    <span class="qty-main">
                    <span class="qty-btn qty-inc"><i class="fa fa-plus" aria-hidden="true"></i></span>
                    <span class="qty-btn qty-dec"><i class="fa fa-minus" aria-hidden="true"></i></span>
                </span>
                <script type="text/javascript">
                    require(['jquery'], function(){
                        jQuery(document).ready(function(){
                            jQuery('.qty-inc').click(function () {
                                jQuery('.qty-default').val(Number(jQuery('.qty-default').val())+1);
                            });

                            jQuery('.qty-dec').click(function () {
                                    var value = Number(jQuery('.qty-default').val())-1;
                                    if(value > 0){
                                        jQuery('.qty-default').val(value);
                                    }

                            });
                        });
                    });
                </script>
                </div>
            </div>
                            <div class="actions">
                            <button type="submit" title="Legg i Handlekurv" class="action primary tocart" id="product-addtocart-button">
                            <span>Legg i Handlekurv</span>
                            </button>
                            </div>
                        </div>
                    </div>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/js/validate-product": {}
        }
    }
        </script>
    </form>
</div>
                        <?php else: ?>
                            <div class="stock unavailable" title="<?= /* @escapeNotVerified */ __('Availability') ?>">
                                <span><?= /* @escapeNotVerified */ __('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">
                        <?= $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; ?>">
                    <?= /* @escapeNotVerified */ __('No options of this product are available.') ?>
                </td>
            </tr>
        </tbody>
        <?php endif; ?>
    </table>
</div>
<div id="validation-message-box"></div>

<form>

Edit: So after moving script from tbody to thead I fixed the +2 increase and -2 decrease from a single click. But the script is still adding +1 to all products when clicking + increase or - decrease.

<script type="text/javascript">
                    require(['jquery'], function(){
                        jQuery(document).ready(function(){
                            jQuery('.qty-inc').click(function () {
                                jQuery('.qty-default').val(Number(jQuery('.qty-default').val())+1);
                            });

                            jQuery('.qty-dec').click(function () {
                                    var value = Number(jQuery('.qty-default').val())-1;
                                    if(value > 0){
                                        jQuery('.qty-default').val(value);
                                    }

                            });
                        });
                    });
                </script>

Edit: Is this correct? When I click the button + or - nothing happens

<input type="number" name="qty" id="qty" maxlength="12" value="1" title="Antall" class="qty-default input-text qty" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1,&quot;maxAllowed&quot;:10000}}"/>
                                    <span class="qty-main">
                    <span class="qty-btn qty-inc" href="javascript:void(0)" onclick="qtyinc(jQuery(this),'+');"><i class="fa fa-plus" aria-hidden="true"></i></span>
                    <span class="qty-btn qty-dec " href="javascript:void(0)" onclick="qtyinc(jQuery(this),'-');"><i class="fa fa-minus" aria-hidden="true"></i></span>
                </span>
                <script>
                function qtyinc(element,action){
                    var oldVal = jQuery(element).parent().find("input").val();
                    if(isNaN(oldVal)){
                        jQuery(element).parent().find("input").val(1);
                        return false;
                    }
                    if(action == "+"){
                         if ( parseFloat(oldVal) >= 0 ) {
                            var newVal = parseFloat(oldVal) + 1;
                            jQuery(element).parent().find("input").val(newVal);
                            jQuery(element).parent().find("input").trigger("change");

                            jQuery(element).parent().find("button").show();
                          }
                    }
                    if(action == "-"){                      
                        if(oldVal == 1 || oldVal == ''){                 
                            jQuery(element).parent().find("input").val(0);
                        }
                        if ( parseFloat(oldVal) >= 2 ) {
                            var newVal = parseFloat(oldVal) - 1;
                            jQuery(element).parent().find("input").val(newVal);
                            jQuery(element).parent().find("button").show();
                            jQuery(element).parent().find("input").trigger("change");
                        }
                    }
                }
                </script>

1 Answer 1

0

Please refer Below code. I have done it in my Project it's worked perfectly. you Need to Some changes to your code.

<input type="number" name="qty" id="qty" maxlength="12" value="1" title="Antall" class="qty-default input-text qty" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1,&quot;maxAllowed&quot;:10000}}"/>
                                    <span class="qty-main">
                    <span class="qty-btn qty-inc" href="javascript:void(0)" onclick="qtyinc(jQuery(this),'+');><i class="fa fa-plus" aria-hidden="true"></i></span>
                    <span class="qty-btn qty-dec " href="javascript:void(0)" onclick="qtyinc(jQuery(this),'-');><i class="fa fa-minus" aria-hidden="true"></i></span>
                </span>

Create a Below function and insert the function to the End of the file.

<script type="text/javascript">
function qtyinc(element,action){
    var oldVal = jQuery(element).parents('.control.qty').find("input#qty").val();    
    if(isNaN(oldVal)){
        jQuery(element).parents('.control.qty').find("input#qty").val(1);
        return false;
    }
    if(action == "+"){

         if ( parseFloat(oldVal) >= 0 ) {
            var newVal = parseFloat(oldVal) + 1;            
            jQuery(element).parents('.control.qty').find("input#qty").val(newVal);
            jQuery(element).parents('.control.qty').find("input#qty").trigger("change");            
          }
    }
    if(action == "-"){                      
        if(oldVal == 1 || oldVal == ''){                 
            jQuery(element).parents('.control.qty').find("input#qty").val(0);
        }
        if ( parseFloat(oldVal) >= 2 ) {
            var newVal = parseFloat(oldVal) - 1;
            jQuery(element).parents('.control.qty').find("input#qty").val(newVal);            
            jQuery(element).parents('.control.qty').find("input#qty").trigger("change");
        }
    }
 }      
</script>
4
  • Hello, thank you for the response. I edited my post with code. Could you please check what I am missing? When I click + or - nothing happens. It's likely script isn't being linked up or onclick command?
    – i37Ow
    Feb 24 at 12:07
  • Is this really correct? onclick="qtyinc(jQuery(this),'+'); onclick="qtyinc(jQuery(this),'-');
    – i37Ow
    Feb 24 at 18:31
  • this function call after the end of the file. I have updated the code so please replace it with a new code. Feb 28 at 3:59
  • Thank you, It's working for me now. onclick="qtyinc(jQuery(this),'+'); is also missing " on endline. onclick="qtyinc(jQuery(this),'+');" but after fixing that and adding script to end of file it's working. :)
    – i37Ow
    Feb 28 at 12:42

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.