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
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;?>
-
thanks, but Exception #0 (Exception): Notice: Undefined variable: postParams in .....product/list/items.phtml on line 230 – iskander Jan 11 at 11:16
-
-
-
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
