Magento 2 – Checkout Button on Product Page

checkoutjquerymagento2product

Is there a way to add a 'Add to Cart and Checkout' button to the product page, so that the product is added to the cart and then takes the user straight to the checkout?

Best Answer

By default, Magento used Ajax in product page. When pressing the add to cart button, the data will be sent to vendor/magento/module-checkout/Controller/Cart/Add.php. I have two suggestions for you.

Navigate to vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js, we can see ajaxSubmit function which will handle the response data from the server. It will check the back Url that it will redirect to if this url exists.

    success: function(res) {
                    ......
             //Line 70 ~ 80       
             if (res.backUrl) {
                        window.location = res.backUrl;
                        return;
                    }

And then, go to the cart controller vendor/magento/module-checkout/Controller/Cart/Add.php. In execute() method, if a product is added to cart successfully, Magento will call a goBack method to resolve the response data.

protected function goBack($backUrl = null, $product = null)
    {
        if (!$this->getRequest()->isAjax()) {
            return parent::_goBack($backUrl);
        }

        $result = [];

        if ($backUrl || $backUrl = $this->getBackUrl()) {
            $result['backUrl'] = $backUrl;
        } else {
            if ($product && !$product->getIsSalable()) {
                $result['product'] = [
                    'statusText' => __('Out of stock')
                ];
            }
        }

        $this->getResponse()->representJson(
            $this->_objectManager->get('Magento\Framework\Json\Helper\Data')->jsonEncode($result)
        );
    }

As can we see, the back url will get the url value from $backUrl argument or $this->getBackUrl(). If we set one, Magento will redirect to it. So, basically, we have two ways to redirect to checkout page.

1. We may rewrite the execute() method and add a back url(this way not recommend). For example: 

 #vendor/magento/module-checkout/Controller/Cart/Add.php

     if (!$this->_checkoutSession->getNoCartRedirect(true)) {
            if (!$this->cart->getQuote()->getHasError()) {
                $message = __(
                    'You added %1 to your shopping cart.',
                    $product->getName()
                );
                $this->messageManager->addSuccessMessage($message);
            }
            //Back Url here
            $backUrl = 'checkout';
            //return $this->goBack(null, $product); => Old code
            return $this->goBack($backUrl, $product); // New code
        }

2. We add a return url in the product page template, should rewrite also (easier way). For example, add a return url inside the product view form.

#vendor/magento/module-catalog/view/frontend/templates/product/view/form.phtml

<form ...>
   ...
   <input type="hidden" name="return_url" value="<?php echo $this->getUrl('checkout');?>">
   ...
</form>

More advanced, Magento has a config STORES > Configuration > SALES > Checkout > Shopping Cart > After Adding a Product Redirect to Shopping Cart. We can follow the logic of this option to build our own redirect.

Related Topic