Latest news

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

No comments

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": "support@tigren.com",
		    "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.

1 Star2 Stars3 Stars4 Stars5 Stars (8 votes, average: 5.00 out of 5)
Loading...

Related Posts:

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

Magento vs WordPress 2018 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

 

April LeeHow To Display Order Information In Checkout Success Page In Magento 2?

Leave a Reply

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