如何在widget产品中创建数量增量/减量功能?

时间:2018-03-09 06:34:36

标签: php jquery magento-2.2.1

我在主页中使用magento2.2.2中的小部件显示产品。我将核心文件复制到我的自定义主题,文件路径是

  

d:\ XAMPP \ htdocs中\ PROJECT_NAME \应用\设计\前端\ CustomTheme \ THEMENAME \ Magento_CatalogWidget \模板\产品\插件\内容\ grid.phtml

数量增量/减量工作正常,但当我尝试在购物车中添加增量或减量数量时,它只会添加一个数量,下面是我的代码“ grid.phtml ”。 看到这个屏幕截图。的 http://prntscr.com/ioset7

提前致谢。

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

// @codingStandardsIgnoreFile

/** @var \Magento\CatalogWidget\Block\Product\ProductsList $block */
?>
<section class="featured-section">
  <div class="container">
<?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 = false;
    $showCart = true;
    $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::DEFAULT_VIEW;
    $description = false;
?>
    <div class="block widget block-products-list <?= /* @noEscape */ $mode ?>">
        <div class="row mb-4">
            <div class="deals-title-cover">
        <?php if ($block->getTitle()): ?>
        <div class="block-title deals-title bg-color2">
            <h2><strong><?= $block->escapeHtml(__($block->getTitle())) ?></strong></h2>
            <p><a href="<?= $block->getUrl("hot-deals.html"); ?>">View All</a></p> 
        </div>
    </div></div>
        <?php endif ?>
        <div class="block-content">
            <?= /* @noEscape */ '<!-- ' . $image . '-->' ?>
            <div class="<?= /* @noEscape */ $mode ?>"> 
                <ol class="row product-items <?= /* @noEscape */ $type ?>">

                    <?php $iterator = 1; ?>
                    <?php foreach ($items as $_item): ?>
                        <?php if ($iterator++ != 1): ?></li><?php endif ?> 
                        <li class="col-md-2 col-sm-3 col-xs-2 product-item">
                            <div class="product-item-cover mb-3">

                                <div class="product-img">
                                    <a href="<?= $block->escapeUrl($block->getProductUrl($_item)) ?>" class="product-item-photo">
                                        <?= $block->getImage($_item, $image)->toHtml() ?>
                                    </a>
                                </div>

                                <div class="product-desc">
                                    <h5 class="color2"><a title="<?= $block->escapeHtml($_item->getName()) ?>"
                                           href="<?= $block->escapeUrl($block->getProductUrl($_item)) ?>"
                                           class="product-item-link">
                                            <?= $block->escapeHtml($_item->getName()) ?>
                                        </a></h5>

                                    <h4 class="open-sans-bold color3"><?php
                                    echo $block->getProductPriceHtml($_item, $type);
                                    ?><span>/each<?php if ($templateType): ?>
                                        <?= $block->getReviewsSummaryHtml($_item, $templateType) ?>
                                    <?php endif; ?></span></h4>
                                </div>

                                    <?php if ($showWishlist || $showCompare || $showCart): ?>

                                        <?php if ($showWishlist || $showCompare): ?>
                                                <div class="actions-secondary wishlist" data-role="add-to-links">
                                                    <?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow() && $showWishlist): ?>
                                                        <a href="#"
                                                           data-post='<?= /* @noEscape */ $block->getAddToWishlistParams($_item) ?>' class="action towishlist" data-action="add-to-wishlist added" 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');?>
                                                        <a href="#" class="action tocompare" data-post='<?= /* @noEscape */ $compareHelper->getPostDataParams($_item) ?>' title="<?= $block->escapeHtmlAttr(__('Add to Compare')) ?>">
                                                            <!--<span><?= $block->escapeHtml(__('Add to Compare')) ?></span>-->
                                                            <i class="fa fa-heart"></i>
                                                        </a>
                                                    <?php endif; ?>
                                                </div>
                                            <?php endif; ?>
                                            <?php if ($showCart): ?>
                                                <div class="actions-primary add-to-cart">
                                                    <?php if ($_item->isSaleable()):?>
                                                          <div class="pro-qty">
                                                             <div class="qty-cover">
                                                                <button type="button" class="plus" id ="home_list_qty_decrease_qty"><i class="fa fa-minus"></i></button>
                                                             <input type="number" name="qty"
                                                                   id="qty"
                                                                   value="<?php /* @escapeNotVerified */ echo $_item->getProductDefaultQty() * 1 ?>"
                                                                   title="<?= /* @escapeNotVerified */ __('Qty') ?>"
                                                                   class="input-text qty form-control"
                                                                   data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                                                                   />
                                                             <button type="button" class="plus" id="home_list_qty_increase_qty"><i class="fa fa-plus"></i></button>
                                                           </div>
                                                         </div> 
                                                        <?php if ($_item->getTypeInstance()->hasRequiredOptions($_item)): ?>
                                                            <button class="action tocart primary btn btn-cart" data-mage-init='{"redirectUrl":{"url":"<?= $block->escapeUrl($block->getAddToCartUrl($_item)) ?>"}}' type="button" title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>">
                                                                <?= $block->escapeHtml(__('Add to Cart')) ?>
                                                            </button>
                                                        <?php else: ?>
                                                            <?php
                                                                $postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
                                                                $postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
                                                            ?>
                                                            <button class="action tocart primary btn btn-cart" data-post='<?= /* @noEscape */ $postData ?>' type="button" title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>">
                                                                <?= $block->escapeHtml(__('Add to Cart')) ?>
                                                            </button>
                                                        <?php endif; ?>
                                                    <?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; ?>
                                        </div>
                                    <?php endif; ?>
                        <?= ($iterator == count($items)+1) ? '</li>' : '' ?>
                    <?php endforeach ?>
                    <div>
                </ol>
            </div>
            <?= $block->getPagerHtml() ?>
        </div>
    </div>
    <script>
require(['jquery'],function($){          
jQuery(document).ready(function(){
    jQuery('button#home_list_qty_increase_qty').click(function() {
        var oldVal = Number(jQuery(this).prev().val());
        if ( oldVal >= 0 ) {
            var newVal = oldVal + 1;
            jQuery(this).prev().val(newVal);
        }
    });

    jQuery('button#home_list_qty_decrease_qty').click(function() {
        var oldVal = Number(jQuery(this).next().val());
        if ( oldVal >= 1 ) {
            var newVal = oldVal - 1;
            jQuery(this).next().val(newVal);
        }
    });
  });
});
</script>
<?php endif;?>
</div></section>

1 个答案:

答案 0 :(得分:-1)

不要在多个元素中使用相同的id。 id是具体的。你可以改用班级。

但我们仍然可以使用以下方式破解:

button#home_list_qty_increase_qtybutton#home_list_qty_decrease_qty

更改为

button[id="home_list_qty_increase_qty"]button[id="home_list_qty_decrease_qty"]