How To Display Order Information In Checkout Success Page In Magento 2?

How To Display Order information in checkout success page magento 2

In Magento 2, you will be able to add more order information to the checkout success page. In order to declare a new theme, let’s create the following files:

1. Create the file app/design/frontend/Tigren/tigren/registration.php:

	<?php
	/**
	 * Copyright © Magento, Inc. All rights reserved.
	 * See COPYING.txt for license details.
	 */

	\Magento\Framework\Component\ComponentRegistrar::register(
	    \Magento\Framework\Component\ComponentRegistrar::THEME,
	    'frontend/Tigren/tigren',
	    __DIR__
	);

2. Create the file app/design/frontend/Tigren/tigren/theme.xml:

	<!--
	/**
	 * Copyright © Magento, Inc. All rights reserved.
	 * See COPYING.txt for license details.
	 */
	-->
	<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
	    <title>Tigren tigren</title>
	    <parent>Magento/blank</parent>
	    <media>
		<preview_image>media/preview.jpg</preview_image>
	    </media>
	</theme>

3. Create the file composer.json trong app/design/frontend/Tigren/tigren

	{
	    "name": "tigren/theme-frontend-tigren",
	    "description": "N/A",
	    "require": {
		"php": "7.0.2|7.0.4|~7.0.6|~7.1.0",
		"magento/framework": "101.0.*"
	    },
	    "type": "magento2-theme",
	    "version": "100.2.1",
	    "license": [
		"OSL-3.0",
		"AFL-3.0"
	    ],
	    "authors": [
		{
		    "name": "Tigren Team",
		    "email": "[email protected]",
		    "homepage": "http://www.tigren.com/",
		    "role": "Developer"
		}
	    ],
	    "autoload": {
		"files": [
		    "registration.php"
		]
	    }
	}

Then, you must run the command php bin/magento cache:flush and access to your admin panel (CONTENT > Design > Configuration) to choose the new theme. Next, to add more information for the checkout page: 4. Create the layout checkout_onepage_success.xml: app/design/fronend/Tigren/tigren/Magento_Checkout/layout/checkout_onepage_success.xml

		<?xml version="1.0"?>
		<!--
		/**
		 * Copyright © Magento, Inc. All rights reserved.
		 * See COPYING.txt for license details.
		 */
		-->
		<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
		<body>
		<referenceContainer name="content">
			<block class="Magento\Framework\View\Element\Template" name="checkout.success.order.summary.title" template="Magento_Theme::text.phtml">
			    <arguments>
			        <argument translate="true" name="text" xsi:type="string">Order Summary</argument>
			        <argument name="tag" xsi:type="string">div</argument>
			        <argument name="css_class" xsi:type="string">summary-title</argument>
			    </arguments>
			</block>
			<block class="Tigren\CustomTheme\Block\Onepage\Success\Order\Info" as="info" name="sales.order.info" template="Magento_Sales::order/info.phtml" />
			<block class="Magento\Sales\Block\Order\Items" name="order_items" after="sales.order.info" template="Magento_Sales::order/success/items.phtml">
			    <block class="Magento\Framework\View\Element\RendererList" name="sales.order.items.renderers" as="renderer.list" template="Magento_Sales::order/success/items/default.phtml"/>
			    <block class="Magento\Sales\Block\Order\Totals" name="order_totals" template="Magento_Sales::order/totals.phtml">
			        <arguments>
			            <argument name="label_properties" xsi:type="string">colspan="4" class="mark"</argument>
			            <argument name="value_properties" xsi:type="string">class="amount"</argument>
			        </arguments>
			        <block class="Magento\Tax\Block\Sales\Order\Tax" name="tax" template="Magento_Tax::order/tax.phtml"/>
			    </block>
			</block>
		</referenceContainer>
		</body>

5. Create a module under the name CustomTheme. 6. Create the block Success.php extends \Magento\Checkout\Block\Onepage\Success

	<?php

	namespace Tigren\CustomTheme\Block\Onepage;

	/**
	 * One page checkout success page
	 *
	 * @api
	 */
	class Success extends \Magento\Checkout\Block\Onepage\Success
	{
	    public function getOrder()
	    {
		return $this->_checkoutSession->getLastRealOrder();
	    }
	}

7. Create a new block in that module and re-extend the block of the Sales module: app/code/Tigren/CustomTheme/Block/Onepage/Success/Order/Info.php

<?php

	namespace Tigren\CustomTheme\Block\Onepage\Success\Order;

	use Magento\Framework\Registry;
	use Magento\Framework\View\Element\Template\Context as TemplateContext;
	use Magento\Payment\Helper\Data as PaymentHelper;
	use Magento\Sales\Model\Order\Address\Renderer as AddressRenderer;

	/**
	 * Sales order info
	 *
	 * @api
	 */
	class Info extends \Magento\Sales\Block\Order\Info
	{
	    /**
	     * @var \Magento\Checkout\Model\Session
	     */
	    protected $_checkoutSession;

	    /**
	     * Info constructor.
	     * @param TemplateContext $context
	     * @param Registry $registry
	     * @param PaymentHelper $paymentHelper
	     * @param AddressRenderer $addressRenderer
	     * @param \Magento\Checkout\Model\Session $checkoutSession
	     * @param array $data
	     */
	    public function __construct(
		TemplateContext $context,
		Registry $registry,
		PaymentHelper $paymentHelper,
		AddressRenderer $addressRenderer,
		\Magento\Checkout\Model\Session $checkoutSession,
		array $data = []
	    ) {
		parent::__construct($context, $registry, $paymentHelper, $addressRenderer, $data);
		$this->_checkoutSession = $checkoutSession;
	    }

	    /**
	     * @throws \Magento\Framework\Exception\LocalizedException
	     */
	    protected function _prepareLayout()
	    {
		$infoBlock = $this->paymentHelper->getInfoBlock($this->getOrder()->getPayment(), $this->getLayout());
		$this->setChild('payment_info', $infoBlock);
	    }

	    /**
	     * @return \Magento\Sales\Model\Order
	     */
	    public function getOrder()
	    {
		return $this->_checkoutSession->getLastRealOrder();
	    }
	}

8. Create eth file di.xml in app/code/Tigren/CustomTheme/etc and create a plugin for Success class in the controller:

	<?xml version="1.0" ?>
	<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
		xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
	    <type name="Magento\Checkout\Controller\Onepage\Success">
		<plugin name="checkout.success" type="Tigren\CustomTheme\Plugin\Controller\Onepage\Success" sortOrder="1"/>
	    </type>
	</config>

9. Create the file Controller Success.php in app\Tigren\CustomTheme\Plugin\Controller\Onepage:

<?php
	/**
	 *
	 * Copyright © Magento, Inc. All rights reserved.
	 * See COPYING.txt for license details.
	 */

	namespace Tigren\CustomTheme\Plugin\Controller\Onepage;

	/**
	 * Class Success
	 * @package Tigren\CustomTheme\Plugin\Controller\Onepage
	 */
	class Success
	{
	    /**
	     * @var \Magento\Framework\Registry
	     */
	    protected $_coreRegistry;
	    /**
	     * @var \Magento\Checkout\Model\Session
	     */
	    protected $_checkoutSession;

	    /**
	     * Success constructor.
	     * @param \Magento\Framework\Registry $coreRegistry
	     * @param \Magento\Checkout\Model\Session $checkoutSession
	     */
	    public function __construct(
		\Magento\Framework\Registry $coreRegistry,
		\Magento\Checkout\Model\Session $checkoutSession
	    ) {
		$this->_coreRegistry = $coreRegistry;
		$this->_checkoutSession = $checkoutSession;
	    }

	    /**
	     * @param \Magento\Checkout\Controller\Onepage\Success $subject
	     */
	    public function beforeExecute(\Magento\Checkout\Controller\Onepage\Success $subject)
	    {
		$currentOrder = $this->_checkoutSession->getLastRealOrder();
		$this->_coreRegistry->register('current_order', $currentOrder);
	    }
	}

10. Create the file success.phtml custom to replace the file success.phtml with the path app/design/frontend/Tigren/tigren/Magento_Checkout/template/

	<?php
	/**
	 * Copyright © Magento, Inc. All rights reserved.
	 * See COPYING.txt for license details.
	 */

	// @codingStandardsIgnoreFile

	?>
	<?php /** @var $block \Magento\Checkout\Block\Onepage\Success */ ?>
	<div class="checkout-success">
	    <div class="success-title">
		<span><strong><?= __('Your order has been received') ?></strong></span>
	    </div>
	    <?php if ($block->getOrderId()):?>
		<?php if ($block->getCanViewOrder()) :?>
		    <p><?= __('Thank you for purchese your order is: %1.', sprintf('<a href="%s" class="order-number"><strong># %s</strong></a>', $block->escapeHtml($block->getViewOrderUrl()), $block->escapeHtml($block->getOrderId()))) ?></p>
		<?php  else :?>
		    <p><?= __('Thank you for purchese your order is: <span class="order-number"># %1</span>.', $block->escapeHtml($block->getOrderId())) ?></p>
		<?php endif;?>
		    <p><?= /* @escapeNotVerified */ __('YOU WILL RECEIVE AN ORDER CONFIRMATION EMAIL WHIT DETAILS OF YOU ORDER AND A LINK TO TRACK ITS PROGRESS') ?></p>
	    <?php endif;?>

	    <?= $block->getAdditionalInfoHtml() ?>

	    <div class="actions-toolbar">
		    <a class="button continue" href="<?= /* @escapeNotVerified */ $block->getContinueUrl() ?>"><span><?= /* @escapeNotVerified */ __('Back to Shopping') ?></span></a>
	    </div>
	</div>

	<?= $block->getChildHtml() ?>

11. Create the file info.phtml to show information of the order. app/design/frontend/Tigren/tigren/Magento_Sales/template/order/info.phtml

	<?php
	/**
	 * Copyright © Magento, Inc. All rights reserved.
	 * See COPYING.txt for license details.
	 */

	// @codingStandardsIgnoreFile

	?>
	<?php /** @var $block \Magento\Sales\Block\Order\Info */ ?>
	<?php $_order = $block->getOrder() ?>
	<?php $shippingMehodCode = $_order->getShippingMethod() ?>
	<?php $shippingMehod = $_order->getShippingAddress()->getShippingMethod() ?>

	<div class="block block-order-details-view">
	    <div class="block-title">
		<strong><?= /* @escapeNotVerified */ __('Order Summary') ?></strong>
	    </div>
	    <div class="block-content">
		<?php if (!$_order->getIsVirtual()): ?>
		    <div class="box box-order-shipping-address">
		        <strong class="box-title"><span><?= /* @escapeNotVerified */ __('Shipping Address') ?></span></strong>
		        <div class="box-content">
		            <address><?= /* @escapeNotVerified */ $block->getFormattedAddress($_order->getShippingAddress()) ?></address>
		        </div>
		    </div>

		    <div class="box box-order-shipping-method">
		        <strong class="box-title">
		            <span><?= /* @escapeNotVerified */ __('Shipment Method') ?></span>
		        </strong>
		        <div class="box-content">
		            <?php if ($_order->getShippingDescription()): ?>
		                <div class="shipping-method-content" id="<?= __('shipping_method_').$shippingMehodCode ?>">
		                    <?= $block->escapeHtml($_order->getShippingDescription()) ?>
		                </div>
		            <?php else: ?>
		                <?= /* @escapeNotVerified */ __('No shipping information available') ?>
		            <?php endif; ?>
		        </div>
		    </div>
		<?php endif; ?>

		<div class="box box-order-billing-address">
		    <strong class="box-title">
		        <span><?= /* @escapeNotVerified */ __('Billing Address') ?></span>
		    </strong>
		    <div class="box-content">
		        <address><?= /* @escapeNotVerified */ $block->getFormattedAddress($_order->getBillingAddress()) ?></address>
		    </div>
		</div>
		<div class="box box-order-billing-method">
		    <strong class="box-title">
		        <span><?= /* @escapeNotVerified */ __('Payment Method') ?></span></strong>
		    <div class="box-content">
		        <div class="payment-method-content <?php echo $_order->getPayment()->getMethodInstance()->getCode()?>"
		            <?= $block->getPaymentInfoHtml() ?>
		        </div>
		    </div>
		</div>
	    </div>
	</div>

12. Create the file items.phtml app/design/frontend/Tigren/tigren/Magento_Sales/template/order/success/items.phtml. This file will show all items in your order

<?php
	/**
	 * Copyright © Magento, Inc. All rights reserved.
	 * See COPYING.txt for license details.
	 */

	// @codingStandardsIgnoreFile

	/** @var \Magento\Sales\Block\Order\Items $block */
	?>
	<div class="cart table-wrapper order-items">
	    <table class="cart items data table table-order-items" id="my-orders-table" summary="<?= /* @escapeNotVerified */ __('Items Ordered') ?>">
		<caption class="table-caption"><?= /* @escapeNotVerified */ __('Items Ordered') ?></caption>
		<thead>
		    <tr>
		        <th colspan="4" class="col name"><?= /* @escapeNotVerified */ __('Order') ?></th>
		    </tr>
		</thead>
		<?php $items = $block->getItems(); ?>
		<?php $giftMessage = ''?>
		<?php foreach ($items as $item): ?>
		    <?php if ($item->getParentItem()) continue; ?>
		    <tbody class="cart item">
		        <?= $block->getItemHtml($item) ?>
		        <?php if ($this->helper('Magento\GiftMessage\Helper\Message')->isMessagesAllowed('order_item', $item) && $item->getGiftMessageId()): ?>
		            <?php $giftMessage = $this->helper('Magento\GiftMessage\Helper\Message')->getGiftMessageForEntity($item); ?>
		            <tr>
		                <td class="col options" colspan="5">
		                    <a href="#"
		                       id="order-item-gift-message-link-<?= /* @escapeNotVerified */ $item->getId() ?>"
		                       class="action show"
		                       aria-controls="order-item-gift-message-<?= /* @escapeNotVerified */ $item->getId() ?>"
		                       data-item-id="<?= /* @escapeNotVerified */ $item->getId() ?>">
		                        <?= /* @escapeNotVerified */ __('Gift Message') ?>
		                    </a>
		                    <?php $giftMessage = $this->helper('Magento\GiftMessage\Helper\Message')->getGiftMessageForEntity($item); ?>
		                    <div class="order-gift-message" id="order-item-gift-message-<?= /* @escapeNotVerified */ $item->getId() ?>" role="region" aria-expanded="false" tabindex="-1">
		                        <a href="#"
		                           title="<?= /* @escapeNotVerified */ __('Close') ?>"
		                           aria-controls="order-item-gift-message-<?= /* @escapeNotVerified */ $item->getId() ?>"
		                           data-item-id="<?= /* @escapeNotVerified */ $item->getId() ?>"
		                           class="action close">
		                            <?= /* @escapeNotVerified */ __('Close') ?>
		                        </a>
		                        <dl class="item-options">
		                            <dt class="item-sender"><strong class="label"><?= /* @escapeNotVerified */ __('From') ?></strong><?= $block->escapeHtml($giftMessage->getSender()) ?></dt>
		                            <dt class="item-recipient"><strong class="label"><?= /* @escapeNotVerified */ __('To') ?></strong><?= $block->escapeHtml($giftMessage->getRecipient()) ?></dt>
		                            <dd class="item-message"><?= /* @escapeNotVerified */ $this->helper('Magento\GiftMessage\Helper\Message')->getEscapedGiftMessage($item) ?></dd>
		                        </dl>
		                    </div>
		                </td>
		            </tr>
		        <?php endif ?>
		    </tbody>
		<?php endforeach; ?>
	    </table>
	    <div class="cart-summary">
		<div class="cart-totals">
		    <div class="table-wrapper">
		        <table class="data table totals">
		            <tfoot>
		            <?= $block->getChildHtml('order_totals') ?>
		            </tfoot>
		        </table>
		    </div>
		</div>
	    </div>
	    <div class="actions-toolbar">
		<a class="button continue" href="<?php echo $this->getBaseUrl()?>"><span><?= /* @escapeNotVerified */ __('Back to Shopping') ?></span></a>
	    </div>
	</div>
	<?php if ($giftMessage): ?>
	<script type="text/x-magento-init">
	    {
		"a.action.show, a.action.close": {
		    "giftMessage": {}
		}
	    }
	</script>
	<?php endif; ?>

We have shown you 12 steps to show order information in the checkout success page. If you have any problems when following the instructions, just leave a comment below.

Related Posts:

How To Add Contact Form To CMS Page In Magento 2?

Magento vs WordPress Side-By-Side Comparison

Magento 2.3.0 Beta Release – What To Expect?

How To Add Extension Attribute To Order In Magento 2?

Free Magento 2 Migration Quotation And Consultation

Leave a Reply

Your email address will not be published. Required fields are marked *