Magento 2 - How to have a custom "add to cart" button in CMS page?

Question

So I am trying to add "Add to Cart" button in my CMS page. In one CMS page, I will have one item and multiple "Add to Cart" buttons. I'm wondering how can I do this?

All the existing examples, they user objectManager in .phtml file which is not a good practice. I'm wondering if there is another way.

This is what I have done so far: 1.) Create a CMS page through the admin panel 2.) Create .phtml file in app/design/frontend/{Vendor Theme}/{Theme name}/Magento_Catalog/templates/add-to-cart-custom.phtml 3.) Call the block in CMS page {{block class="Magento\Framework\View\Element\Template" template="Magento_Catalog::add-to-cart-custom.phtml" product-sku="VVXL10"}}

I want to pass product-sku and display the buttons using the product-sku, how can I achieve this?

Thank you.

Answer 1

Create a module by following steps:

1. app/code/M2Expert/CmsAddtocart/registration.php

with below code:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
 \Magento\Framework\Component\ComponentRegistrar::MODULE,
 'M2Expert_CmsAddtocart',
 __DIR__
);

2. app/code/M2Expert/CmsAddtocart/etc/module.xml

with below code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
 <module name="M2Expert_CmsAddtocart" setup_version="0.0.1">
 <sequence>
 <module name="Magento_Backend"/>
 <module name="Magento_Sales"/>
 <module name="Magento_Quote"/>
 <module name="Magento_Checkout"/>
 <module name="Magento_Cms"/>
 <module name="Magento_Catalog"/>
 </sequence>
 </module>
</config>

3. app/code/M2Expert/CmsAddtocart/Block/CmsCart.php

with below code:

<?php
namespace M2Expert\CmsAddtocart\Block;
class CmsCart extends \Magento\Framework\View\Element\Template
{
 protected $productRepository;
 protected $listProductBlock;
 protected $scopeConfig;
 public function __construct(
 \Magento\Framework\View\Element\Template\Context $context,
 \Magento\Catalog\Model\ProductRepository $productRepository,
 \Magento\Catalog\Block\Product\ListProduct $listProductBlock,
 \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
 ) {
 $this->productRepository = $productRepository;
 $this->listProductBlock = $listProductBlock;
 $this->scopeConfig = $scopeConfig;
 parent::__construct($context);
 }
 public function getAddToCartUrl()
 {
 if ($_product = $this->getProduct()) {
 return $this->listProductBlock->getAddToCartPostParams($_product);
 }
 return '#';
 }
 public function getProduct()
 {
 if ($product_id = $this->getProductId()) {
 $_product = $this->productRepository->getById($product_id);
 if ($_product) {
 return $_product;
 }
 }
 return false;
 }
}

4. app/code/M2Expert/CmsAddtocart/view/frontend/templates/cms/addtocart.phtml

with below code:

<?php $postParams = $block->getAddToCartUrl(); ?>
<?php $buttonText = $block->getButtontext(); ?>
<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="uenc" value="<?php /* @escapeNotVerified */ echo $postParams['data']['uenc']; ?>">
 <?php echo $block->getBlockHtml('formkey')?>
 <button type="submit"
 title="Add to Cart"
 class="action tocart primary">
 <span><?= ($buttonText)? $buttonText : __('Add to Cart') ?></span>
 </button>
 </form>

Done!!

You can now use that on cms page or cms block like below:

{{block class='M2Expert\CmsAddtocart\Block\CmsCart' product_id=2 buttontext="Add to
Cart from CMS" template='M2Expert_CmsAddtocart::cms/addtocart.phtml'}}

• Magento_learner: Thank you so much! I will try this, also, is there any way to make this button redirect user to cart. I know that we can do that through admin panel, but I don't was that as that will apply to all the "add to cart" buttons in the website. I just want it for this special CMS page.
• Sukumar Gorai: then need to create different add action.
• Magento_learner: I'm sorry I am still new to Magento, could you please give me an example? Thank you so much.