Ajax add to cart button in product detail page magento 2

Question

I have check online demo of Magento 2
http://magento2-demo.nexcess.net/fusion-backpack.html
when we click on add to cart it add product via AJAX but i have Set up demo on localhost it don't to add Product to cart via AJAX.

Can anyone tell where is settings to enable ajax on add to cart ?

Answer 1

You have to just override addtocart.phtml file

app/design/frontend/Packagename/themename/Magento_Catalog/templates/product/view/addtocart.phtml

Replace "bindSubmit": false to "bindSubmit": true

<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "catalogAddToCart": {
                "bindSubmit": false
            }
        }
    }
</script>

to

<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "catalogAddToCart": {
                "bindSubmit": true
            }
        }
    }
</script>

Remove cache and check its in detail page.

Answer 2

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>