Magento 2 Ajax Add to Cart

Question

I have the above code on the homepage and this form adds the product to the cart. However, unlike the same form on the product listing page, it does this through a page refresh instead of asynchronously. How can I prevent this page refresh?

<form action="/checkout/cart/add/uenc/[key]/product/1/" method="post" id="product_addtocart_form">

<input type="hidden" name="product" value="1" tabindex="0">
<input name="form_key" type="hidden" value="[form_key]" tabindex="0">
<button class="action tocart primary" type="submit" title="Add to Cart" tabindex="0">
<span>Add to Cart</span>
</button>

</form>

There seem to be various script blocks that affect the add to cart form but

I have tried inserting these with no effect.

Answer 1

In product listing page, Magento has a jQuery widget to handle the Ajax Add To Cart. We should take a look:

vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

 <script type="text/x-magento-init">
        {
            "[data-role=tocart-form], .form.map.checkout": {
                "catalogAddToCart": {
                   "bindSubmit": true
                 }
            }
        }
 </script>

You can try with this script also.

In your form, it should has data-role=tocart-form.

Answer 2

You could look to target the on click with jQuery / Prototype and prevent the default action then submit the form and simply add a message indicating it has been successful.

jQuery(document).on('click', '#product_addtocart_form button', function(e) { e.preventDefault(); /* submit form and process result */ });

Answer 3

Try this

<form id="product_addtocart_form" data-name = "'.$product->getName().'" data-role="tocart-form" action="'.$postParams['action'].'" method="post">
    <input type="hidden" name="product" value="'.$postParams['data']['product'].'">
    <input type="hidden" name="' . Action::PARAM_NAME_URL_ENCODED .'" value="' . $postParams['data'][Action::PARAM_NAME_URL_ENCODED] .'">' . $this->getBlockHtml('formkey') .'
    <button type="submit" title="' . __('Add to cart') . '" class="action tocart primary">
            <span>' . __('Add to cart') . '</span>
    </button>
</form>
<script type="text/x-magento-init">
{
    "[data-role=tocart-form], .form.map.checkout": {
        "catalogAddToCart": {
            "bindSubmit": true
         }
     }
}
</script>

Answer 4

Add method to your class

public function __construct(
    ......................................................
    \Magento\Catalog\Model\ProductFactory $productFactory,
    \Magento\Catalog\Block\Product\ListProduct $listProductBlock,
    ......................................................
) {
    ......................................................
    $this->productFactory = $productFactory;
    $this->listProductBlock = $listProductBlock;
    ......................................................
}

public function getProductData($id)
{
    $collection = $this->productFactory->create()->load($id);
    return $collection;
}

public function getAddToCartPostParams($product)
{
    return $this->listProductBlock->getAddToCartPostParams($product);
}

Add into your phtml file

<?php
$_product = $block->getProductData(11);
?>
<?php $postParams = $block->getAddToCartPostParams($_product); ?>
<form data-role="tocart-form" action="<?php /* @escapeNotVerified */ echo $postParams['action']; ?>" method="post">
    <input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $postParams['data']['product']; ?>">
    <input type="hidden" name="<?php /* @escapeNotVerified */ echo "uenc"; ?>" value="<?php /* @escapeNotVerified */ echo $postParams['data']['uenc']; ?>">
    <?php echo $block->getBlockHtml('formkey')?>
    <button type="submit"
            title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>"
            class="action tocart primary">
        <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
    </button>
</form>
<script type="text/x-magento-init">
    {
        "[data-role=tocart-form]": {
            "Magento_Catalog/js/validate-product": {
                "bindSubmit": true
            }
        }
    }
</script>

Answer 5

Please add the below code at last in your phtml file and then check after cache flush.

<?php if (!$block->isRedirectToCartEnabled()) : ?>
    <script type="text/x-magento-init">
        {
            "[data-role=tocart-form], .form.map.checkout": {
                "catalogAddToCart": {
                    "product_sku": "<?= $block->escapeJs($_product->getSku()) ?>"
                }
            }
        }
    </script>
<?php endif; ?>

Note: Make sure you have to set the No option from admin which steps i have given below.

Admin -> Stores -> Configuration -> Sales -> Checkout -> Shopping Cart -> After Adding a Product Redirect to Shopping Cart to No