7

How to add "Buy Now" button in Magento 2.1 Product detail page along with add to cart? so the users can directly buy the product without adding into the cart.

11

2 Answers 2

14

Here is a module that adds a 'Buy Now' button that takes customer directly to checkout with the choosen product in cart.

Module Directory:

|   registration.php
|   
+---Controller
|   \---Cart
|           Add.php
|           
+---etc
|   |   module.xml
|   |   
|   \---frontend
|           routes.xml
|           sections.xml
|           
\---view
    \---frontend
        +---layout
        |       catalog_product_view.xml
        |       
        +---templates
        |       buynow.phtml
        |       
        \---web
            \---js
                    buy-now.js

Add.php

<?php

namespace AAllen\BuyNow\Controller\Cart;


class Add extends \Magento\Checkout\Controller\Cart\Add
{
    /**
     * Add product to shopping cart action
     *
     * @return \Magento\Framework\Controller\Result\Redirect
     * @SuppressWarnings(PHPMD.CyclomaticComplexity)
     */
    public function execute()
    {
        if (!$this->_formKeyValidator->validate($this->getRequest())) {
            return $this->resultRedirectFactory->create()->setPath('*/*/');
        }

        $params = $this->getRequest()->getParams();
        try {
            if (isset($params['qty'])) {
                $filter = new \Zend_Filter_LocalizedToNormalized(
                    ['locale' => $this->_objectManager->get('Magento\Framework\Locale\ResolverInterface')->getLocale()]
                );
                $params['qty'] = $filter->filter($params['qty']);
            }

            $product = $this->_initProduct();
            $related = $this->getRequest()->getParam('related_product');

            /**
             * Check product availability
             */
            if (!$product) {
                return $this->goBack();
            }

            // empty the cart.
            $this->cart->truncate();

            $this->cart->addProduct($product, $params);
            if (!empty($related)) {
                $this->cart->addProductsByIds(explode(',', $related));
            }

            $this->cart->save();

            /**
             * @todo remove wishlist observer \Magento\Wishlist\Observer\AddToCart
             */
            $this->_eventManager->dispatch(
                'checkout_cart_add_product_complete',
                ['product' => $product, 'request' => $this->getRequest(), 'response' => $this->getResponse()]
            );

            if (!$this->_checkoutSession->getNoCartRedirect(true)) {
                $baseUrl = $this->_objectManager->get('\Magento\Store\Model\StoreManagerInterface')
                        ->getStore()->getBaseUrl();
                // redirect to checkout page
                return $this->goBack($baseUrl.'checkout/', $product);
            }
        } catch (\Magento\Framework\Exception\LocalizedException $e) {
            if ($this->_checkoutSession->getUseNotice(true)) {
                $this->messageManager->addNotice(
                    $this->_objectManager->get('Magento\Framework\Escaper')->escapeHtml($e->getMessage())
                );
            } else {
                $messages = array_unique(explode("\n", $e->getMessage()));
                foreach ($messages as $message) {
                    $this->messageManager->addError(
                        $this->_objectManager->get('Magento\Framework\Escaper')->escapeHtml($message)
                    );
                }
            }

            $url = $this->_checkoutSession->getRedirectUrl(true);

            if (!$url) {
                $cartUrl = $this->_objectManager->get('Magento\Checkout\Helper\Cart')->getCartUrl();
                $url = $this->_redirect->getRedirectUrl($cartUrl);
            }

            return $this->goBack($url);

        } catch (\Exception $e) {
            $this->messageManager->addException($e, __('We can\'t add this item to your shopping cart right now.'));
            $this->_objectManager->get('Psr\Log\LoggerInterface')->critical($e);
            return $this->goBack();
        }
    }
}

routes.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="buynow" frontName="buynow">
            <module name="AAllen_BuyNow"/>
        </route>
    </router>
</config>

sections.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
    <action name="buynow/cart/add">
        <section name="cart"/>
    </action>
</config>

catalog_product_view.xml

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product.info.addtocart">

            <block class="Magento\Framework\View\Element\Template" template="AAllen_BuyNow::buynow.phtml"/>
        </referenceBlock>
        <referenceBlock name="product.info.addtocart.additional">

            <block class="Magento\Framework\View\Element\Template" template="AAllen_BuyNow::buynow.phtml"/>
        </referenceBlock>
    </body>
</page>

buynow.phtml

<button type="submit" title="<?php /* @escapeNotVerified */ echo __('Buy Now') ?>" id="buy-now" class="action buynow primary" data-mage-init='
{
    "AAllen_BuyNow/js/buy-now": {
        "form": "#product_addtocart_form"
    }
}
'>
    <span><?php /* @escapeNotVerified */ echo __('Buy Now') ?></span>
</button>

buy-now.js

define([
    'jquery'
], function ($) {
    "use strict";

    return function (config, element) {

        $(element).click(function () {
            var form = $(config.form);

            // change form action
            var baseUrl = form.attr('action'),
                buyNowUrl = baseUrl.replace('checkout/cart/add', 'buynow/cart/add');

            form.attr('action', buyNowUrl);

            form.trigger('submit');

            // set form action back
            form.attr('action', baseUrl);

            return false;
        });
    }
});

It works by creating a modified version of the controller used to add a product to the cart. When 'Buy Now' is clicked, the 'add product' form's action is switched to the custom controller which then redirects to the checkout page if the item is successfully added to cart.

7
  • Hey , After implement the module at magento 2 out of the box, i can see the button "Buy Now" and the buy-now.js is working after check with debug but i cant reach the BuyNow/Controller/Add.php . i try to change the xml files but still i get the core controller instead the custom one.
    – Goldy
    Dec 6, 2016 at 7:51
  • 1
    Hi, I made a few updates to buy-now.js and Add.php. Make those changes and try it again. Dec 6, 2016 at 9:30
  • PERFECT , thank you! . By the way , where you get the information about the form action on the js? and why there is xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd" on --sections.xml-- ?
    – Goldy
    Dec 7, 2016 at 7:35
  • I have created module as per above layout & installed successfully, but buynow button is not showing on product page, can you please assist me for this.
    – Tush
    Jan 4, 2017 at 13:00
  • Hi i follow this it's working fine but on click buy now button Add to cart change to adding then it redirect to checkout page magento.stackexchange.com/questions/269987/…
    – Magento 2
    Apr 13, 2019 at 17:10
1

I am assuming that you know the basic module creation. Follow below steps:

  1. Create a new module layout.

Vendor/Module/view/frontend/layout/catalog_product_view.xml

<?xml version="1.0"?>
<body>
    <referenceContainer name="product.info.social">
        <block class="Vendor\Module\Block\Product\View\Extra"
            name="product.view.extra"
            template="Vendor_Module::product/view/extra.phtml"
            after="-">
        </block>
    </referenceContainer>
</body>
  1. Create a template file

Vendor/Module/view/frontend/templates/product/view/extra.phtml

<h3><?php echo 'Custom Button'; ?></h3>

Reference

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