1

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.

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__
);
  1. 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>
  1. 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;
    }
}
  1. 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'}}
3
  • 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. Apr 23 at 16:11
  • then need to create different add action. Apr 23 at 16:12
  • I'm sorry I am still new to Magento, could you please give me an example? Thank you so much. Apr 23 at 16:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.