0

I have enabled "add to cart" button for my up-sell, cross-sell and related products. Now work all fine, but clicking on the button reloads the page. How can i enable ajax for this? Magento Version 2.3.6

0

Replace the below code in items.phtml,

path : app/design/frontend/[your_theme]/Magento_catalog/templates/product/list

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

// phpcs:disable Magento2.Templates.ThisInTemplate.FoundThis
// phpcs:disable Generic.WhiteSpace.ScopeIndent.Incorrect

/* @var $block \Magento\Catalog\Block\Product\AbstractProduct */
use Magento\Framework\App\Action\Action;

?>

<?php
switch ($type = $block->getType()) {

    case 'related-rule':
        if ($exist = $block->hasItems()) {
            $type = 'related';
            $class = $type;

            $image = 'related_products_list';
            $title = __('Related Products');
            $items = $block->getAllItems();
            $limit = $block->getPositionLimit();
            $shuffle = (int) $block->isShuffled();
            $canItemsAddToCart = $block->canItemsAddToCart();

            $showAddTo = true;
            $showCart = false;
            $templateType = null;
            $description = false;
        }
        break;

    case 'related':
        /** @var \Magento\Catalog\Block\Product\ProductList\Related $block */
        if ($exist = $block->getItems()->getSize()) {
            $type = 'related';
            $class = $type;

            $image = 'related_products_list';
            $title = __('Related Products');
            $items = $block->getItems();
            $limit = 0;
            $shuffle = 0;
            $canItemsAddToCart = $block->canItemsAddToCart();

            $showAddTo = true;
            $showCart = false;
            $templateType = null;
            $description = false;
        }
        break;

    case 'upsell-rule':
        if ($exist = $block->hasItems()) {
            $type = 'upsell';
            $class = $type;

            $image = 'upsell_products_list';
            $title = __('We found other products you might like!');
            $items = $block->getAllItems();
            $limit = $block->getPositionLimit();
            $shuffle = (int) $block->isShuffled();

            $showAddTo = false;
            $showCart = false;
            $templateType = null;
            $description = false;
            $canItemsAddToCart = false;
        }
        break;

    case 'upsell':
        /** @var \Magento\Catalog\Block\Product\ProductList\Upsell $block */
        if ($exist = count($block->getItemCollection()->getItems())) {
            $type = 'upsell';
            $class = $type;

            $image = 'upsell_products_list';
            $title = __('We found other products you might like!');
            $items = $block->getItemCollection()->getItems();
            $limit = $block->getItemLimit('upsell');
            $shuffle = 0;

            $showAddTo = false;
            $showCart = false;
            $templateType = null;
            $description = false;
            $canItemsAddToCart = false;
        }
        break;

    case 'crosssell-rule':
        /** @var \Magento\Catalog\Block\Product\ProductList\Crosssell $block */
        if ($exist = $block->hasItems()) {
            $type = 'crosssell';
            $class = $type;

            $image = 'cart_cross_sell_products';
            $title = __('More Choices:');
            $items = $block->getItemCollection();

            $showAddTo = true;
            $showCart = true;
            $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
            $description = false;
            $canItemsAddToCart = false;
        }
        break;

    case 'crosssell':
        /** @var \Magento\Catalog\Block\Product\ProductList\Crosssell $block */
        if ($exist = count($block->getItems())) {
            $type = 'crosssell';
            $class = $type;

            $image = 'cart_cross_sell_products';
            $title = __('More Choices:');
            $items = $block->getItems();

            $showAddTo = true;
            $showCart = true;
            $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
            $description = false;
            $canItemsAddToCart = false;
        }
        break;

    case 'new':
        if ($exist = $block->getProductCollection()) {
            $type = 'new';
            $mode = 'grid';
            $type = $type . ' ' . $mode;

            $class = 'widget' . ' ' . $type;

            $image = 'new_products_content_widget_grid';
            $title = __('New Products');
            $items = $exist;

            $showAddTo = true;
            $showCart = true;
            $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
            $description = ($mode == 'list') ? true : false;
            $canItemsAddToCart = false;
        }
        break;

    default:
        $exist = null;
}
?>

<?php if ($exist) :?>

<?php if ($type == 'related' || $type == 'upsell') :?>
<?php if ($type == 'related') :?>
<div class="block <?= $block->escapeHtmlAttr($class) ?>" data-mage-init='{"relatedProducts":{"relatedCheckbox":".related.checkbox"}}' data-limit="<?= $block->escapeHtmlAttr($limit) ?>" data-shuffle="<?= /* @noEscape */ $shuffle ?>">
    <?php else :?>
    <div class="block <?= $block->escapeHtmlAttr($class) ?>" data-mage-init='{"upsellProducts":{}}' data-limit="<?= $block->escapeHtmlAttr($limit) ?>" data-shuffle="<?= /* @noEscape */ $shuffle ?>">
        <?php endif; ?>
        <?php else :?>
        <div class="block <?= $block->escapeHtmlAttr($class) ?>">
            <?php endif; ?>
            <div class="block-title title">
                <strong id="block-<?= $block->escapeHtmlAttr($class) ?>-heading" role="heading" aria-level="2"><?= $block->escapeHtml($title) ?></strong>
            </div>
            <div class="block-content content" aria-labelledby="block-<?= $block->escapeHtmlAttr($class) ?>-heading">
                <?php if ($type == 'related' && $canItemsAddToCart) :?>
                    <div class="block-actions">
                        <?= $block->escapeHtml(__('Check items to add to the cart or')) ?>
                        <button type="button" class="action select" data-role="select-all"><span><?= $block->escapeHtml(__('select all')) ?></span></button>
                    </div>
                <?php endif; ?>
                <div class="products wrapper grid products-grid products-<?= $block->escapeHtmlAttr($type) ?>">
                    <ol class="products list items product-items">
                        <?php foreach ($items as $_item) :?>
                            <?php $available = ''; ?>
                            <?php if (!$_item->isComposite() && $_item->isSaleable() && $type == 'related') :?>
                                <?php if (!$_item->getRequiredOptions()) :?>
                                    <?php $available = 'related-available'; ?>
                                <?php endif; ?>
                            <?php endif; ?>
                            <?php if ($type == 'related' || $type == 'upsell') :?>
                                <li class="item product product-item" style="display: none;">
                            <?php else :?>
                                <li class="item product product-item">
                            <?php endif; ?>
                            <div class="product-item-info <?= /* @noEscape */ $available ?>">
                                <?= /* @noEscape */ '<!-- ' . $image . '-->' ?>
                                <a href="<?= $block->escapeUrl($block->getProductUrl($_item)) ?>" class="product photo product-item-photo">
                                    <?= $block->getImage($_item, $image)->toHtml() ?>
                                </a>
                                <div class="product details product-item-details">
                                    <strong class="product name product-item-name"><a class="product-item-link" title="<?= $block->escapeHtmlAttr($_item->getName()) ?>" href="<?= $block->escapeUrl($block->getProductUrl($_item)) ?>">
                                            <?= $block->escapeHtml($_item->getName()) ?></a>
                                    </strong>

                                    <?= /* @noEscape */ $block->getProductPrice($_item) ?>

                                    <?php if ($templateType) :?>
                                        <?= $block->getReviewsSummaryHtml($_item, $templateType) ?>
                                    <?php endif; ?>

                                    <?php if ($canItemsAddToCart && !$_item->isComposite() && $_item->isSaleable() && $type == 'related') :?>
                                        <?php if (!$_item->getRequiredOptions()) :?>
                                            <div class="field choice related">
                                                <input type="checkbox" class="checkbox related" id="related-checkbox<?= $block->escapeHtmlAttr($_item->getId()) ?>" name="related_products[]" value="<?= $block->escapeHtmlAttr($_item->getId()) ?>" />
                                                <label class="label" for="related-checkbox<?= $block->escapeHtmlAttr($_item->getId()) ?>"><span><?= $block->escapeHtml(__('Add to Cart')) ?></span></label>
                                            </div>
                                        <?php endif; ?>
                                    <?php endif; ?>

                                    <?php if ($showAddTo || $showCart) :?>
                                        <div class="product actions product-item-actions">
                                            <?php if ($showCart) :?>
                                                <div class="actions-primary">
                                                    <?php if ($_item->isSaleable()) :?>
                                                        <?php if ($_item->getTypeInstance()->hasRequiredOptions($_item)) :?>
                                                            <button type="submit" title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>" data-role="tocart-form" class="action tocart primary cart-btn">
                                                                <span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
                                                            </button>
                                                        <?php else :?>
                                                            
                                                            <?php $postParams =  $block->getAddToCartUrl($_item);?>
                                                            <?php $postDataHelper = $this->helper(Magento\Framework\Data\Helper\PostHelper::class);
                                                            $postData = $postDataHelper->getPostData($block->escapeUrl($block->getAddToCartUrl($_item)), ['product' => $_item->getEntityId()])
                                                            ?>
                                                    <form data-role="tocart-form" data-product-id="<?= $block->escapeHtml($_item->getId()) ?>" action="<?php /* @escapeNotVerified */ echo $postParams; ?>" method="post">
                                                        <input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $postParams; ?>">
                                                        <input type="hidden" name="<?php /* @escapeNotVerified */ echo Action::PARAM_NAME_URL_ENCODED; ?>" value="<?php /* @escapeNotVerified */ echo $postParams; ?>">
                                                        <?php echo $block->getBlockHtml('formkey')?>

                                                        <button type="submit" title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>" data-role="tocart-form" class="action tocart primary cart-btn">
                                                                <span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
                                                            </button>
                                                    </form>
                                                        <?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; ?>

                                            <?php if ($showAddTo) :?>
                                                <div class="secondary-addto-links actions-secondary" data-role="add-to-links">
                                                    <?php if ($addToBlock = $block->getChildBlock('addto')) :?>
                                                        <?= $addToBlock->setProduct($_item)->getChildHtml() ?>
                                                    <?php endif; ?>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                            </li>
                        <?php endforeach ?>
                    </ol>
                </div>
            </div>
        </div>
  <script type="text/x-magento-init">
    {
        "[data-role=tocart-form], .form.map.checkout": {
            "catalogAddToCart": {
                "product_sku": "<?= /* @NoEscape */ $_item->getSku() ?>"
            }
        }
    }
  </script>
        <?php endif;?>
4
  • thanks, but Exception #0 (Exception): Notice: Undefined variable: postParams in .....product/list/items.phtml on line 230 – iskander Jan 11 at 11:16
  • now answer is updated ... please try again with above code. – madani Jan 11 at 11:35
  • now is working, thanks! – iskander Jan 11 at 11:36
  • one small clarification: to enable "add to cart" button you need change $showCart = false with true, where is it necessary - f.e. in case "related", case "upsell" , or case "crosssel" , and to disable checkboxes set $canItemsAddToCart = false; – iskander Jan 11 at 13:32

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.