Magento 2 ajax add to cart in Custom Module

Sometime wheb building Mangento Extensions or do the projects in Mangento , you want to add products to cart from list without go to product page. In order to do it you, can use ajax to build the function. In my example , I will make function ajax add to cart from list in custom module.

In order to add to cart use Ajax, you can do the 3 steps bellow:
– Get list Products.
– Create Ajax function.
– Create controller function.

1. Get List products.

You can get list product from Magento Products Collection. You should create custom Block to get Products . For example : create file app/code/Vendor/Module/Block/Products.php

#file p/code/Magebay/Hello/Block/Products.php 
 * Created by PhpStorm.
 * User: maiuoc
 * Date: 2019-02-22
 * Time: 3:42 PM

namespace Magebay\Hello\Block;

use Magento\Framework\View\Element\Template;

class Products extends \Magento\Framework\View\Element\Template
    protected $collectionFactory;
    public function __construct(
        Template\Context $context,
        \Magento\Catalog\Model\ResourceModel\Product\CollectionFactory $collectionFactory,
        array $data = []
        parent::__construct($context, $data);
        $this->collectionFactory = $collectionFactory;
    function getCustomProducts() {
        $collection = $this->collectionFactory->create()
        return $collection;

Now, We will show list products in phtml file . Create file

app/code/Magebay/Hello/view/frontend/templates/products.phtml -->
<?php if(count($products)) : ?>
<?php foreach ($products as $product) : ?>
<li><?php echo $product->getTitle() ?></li>
<li><button id="product-item-<?php echo $product->getId() ?>" class="product-item"></button> </li>
<?php endforeach; ?>
<input type="hidden" id="add-cart-url" value="<?php echo $block->getUrl('hello/index/addToCart'); ?>">
<?php endif; ?>

Now, you can see list procucts in fontend , To continue , I will build ajax function use Jquery.

2. Crate ajax function

you can add Jquery code bellow list products in products.phml. The ajax function will call to controller addToCart

var productId = $(this).attr('id');
productId = productId.replace('product-item-','');
var data = {product: productId};
var addToCartUrl = $('#add-cart-url').val();
url : addToCartUrl,
dataType : 'json',
type : 'POST',
data: data,
success : function(res)
error : function()

3. Create controller action

As you can see, the ajax function call to addToCart action so I will create new Controller action in

* Created by PhpStorm.
* User: maiuoc
* Date: 2019-01-19
* Time: 1:16 PM

namespace Magebay\Hello\Controller\Index;

use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
use Magento\Framework\Controller\Result\JsonFactory;

* Class DellPost
* @package Magebay\Hello\Controller\Index
class AddToCart extends \Magento\Framework\App\Action\Action
* Result page factory
* @var \Magento\Framework\Controller\Result\JsonFactory;
protected $_resultJsonFactory;
protected $formKey;
protected $cart;
protected $product;
* @param Context $context
* @param PageFactory $resultPageFactory
public function __construct(
Context $context,
JsonFactory $resultJsonFactory,
\Magento\Framework\Data\Form\FormKey $formKey,
\Magento\Checkout\Model\Cart $cart,
\Magento\Catalog\Model\Product $product
$this->_resultJsonFactory = $resultJsonFactory;
$this->formKey = $formKey;
$this->cart = $cart;
$this->product = $product;
public function execute()
$resultJson = $this->_resultJsonFactory->create();
$response = array(
'message'=>'Error, Please try again'
$params = $this->getRequest()->getParams();
$productId = isset($params['product']) ? (int)$params['product'] : 0;
if($productId > 0)
try {
$params['form_key'] = $this->formKey->getFormKey();
$_product = $this->product->load($productId);
$this->cart->addProduct($_product, $params);
catch(\Exception $e) {
$response['message'] = $e->getMessage();

return $resultJson->setData($response);

As you can see, you can easy add product to cart by ajax , I hope it is useful for you when Create Module or do the project or website in Mangento. We have a some Great extension like Magento Reservation and Booking System Pro, Magento Multi Vendor Marketplace extension , Magento Product Designer Canvas , if you want to use extensions or build projects in Magento, you can contact to [email protected]