magento2.3 – How to enable ajax for adding to cart up-sell, cross-sell and related products in Magento 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 MagentoCatalogBlockProductAbstractProduct */
use MagentoFrameworkAppActionAction;
?>

<?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 MagentoCatalogBlockProductProductListRelated $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 MagentoCatalogBlockProductProductListUpsell $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 MagentoCatalogBlockProductProductListCrosssell $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 = MagentoCatalogBlockProductReviewRendererInterface::SHORT_VIEW;
            $description = false;
            $canItemsAddToCart = false;
        }
        break;

    case 'crosssell':
        /** @var MagentoCatalogBlockProductProductListCrosssell $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 = MagentoCatalogBlockProductReviewRendererInterface::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 = MagentoCatalogBlockProductReviewRendererInterface::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 class="action tocart primary" data-mage-init='{"redirectUrl": {"url": "<?= $block->escapeUrl($block->getAddToCartUrl($_item)) ?>"}}' type="button" title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>">
                                                                <span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
                                                            </button>
                                                        <?php else :?>
                                                            <?php $postDataHelper = $this->helper(MagentoFrameworkDataHelperPostHelper::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 class="action tocart primary"
                                                                    data-post='<?= /* @noEscape */ $postData ?>'
                                                                    type="button" title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>">
                                                                <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;?>