Today, we’re going to teach you guys how to display order information on the order success page of your Magento 2 store.
Displaying the order information after the customer places the order is quite essential in online stores. It helps customers to check and verify their order details one last time before they wait for their order to arrive.
In Magento 2, you can easily display order information on the order success page after successful order placement.
Also read: How to Add Order ID, Customer IP Address in Invoice in Magento 2?
And in this post, we’re going to show you exactly how you can display order information on the order success page in your Magento 2 store.
Step-By-Step Process to Display Order Information on Magento 2 Order Success Page
Please follow the below steps to learn how to display order information on the order success page in your Magento 2 store.
Step - 1
First of all, you need to create a registration.php file in the app/design/frontend/MageDelight/MageDelight/ folder and paste the following code:
<?php /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/MageDelight/MageDelight', __DIR__ );
Step - 2
After that, create a theme.xml file in the app/design/frontend/MageDelight/MageDelight/ folder and paste the following code:
<!-- /** * 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>MageDelight MageDelight</title> <parent>Magento/blank</parent> <media> <preview_image>media/preview.jpg</preview_image> </media> </theme>
Step - 3
Next, create a composer.json file in the app/design/frontend/MageDelight/MageDelight folder and paste the following code:
{
"name": "MageDelight/theme-frontend-MageDelight",
"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": "MageDelight Team",
"email": "[email protected]",
"homepage": "http://www.MageDelight.com/",
"role": "Developer"
}
],
"autoload": {
"files": [
"registration.php"
]
}
}
Step - 4
Now, execute the following command:
php bin/magento cache:flush
Step - 5
After that, log in to your admin panel, navigate to CONTENT > Design > Configuration, and select a theme of your choice.
Step - 6
Next, we need to add order information on the order success page.
For this, create a checkout_onepage_success.xml file in the app/design/fronend/MageDelight/MageDelight/Magento_Checkout/layout/ folder and paste the following code:
<?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="MageDelight\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>
Step - 7
Now, create a Success.php file in the \Magento\Checkout\Block\Onepage\ folder and paste the following code:
<?php
namespace MageDelight\CustomTheme\Block\Onepage;
/**
* One page checkout success page
*
* @api
*/
class Success extends \Magento\Checkout\Block\Onepage\Success
{
public function getOrder()
{
return $this->_checkoutSession->getLastRealOrder();
}
}
Step - 8
After that, create a new block named info.php in the app/code/MageDelight/CustomTheme/Block/Onepage/Success/Order/ folder and paste the following code to re-extend the block of the sales module:
<?php
namespace MageDelight\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();
}
}
Step - 9
Next, create a di.xml file in the app/code/MageDelight/CustomTheme/etc folder and paste the following code to create a plugin for success 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="MageDelight\CustomTheme\Plugin\Controller\Onepage\Success" sortOrder="1"/> </type> </config>
Step - 10
Now, create a controller success.php file in the app\MageDelight\CustomTheme\Plugin\Controller\Onepage and paste the following code:
<?php
/**
*
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
namespace MageDelight\CustomTheme\Plugin\Controller\Onepage;
/**
* Class Success
* @package MageDelight\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);
}
}
Step - 11
After that, create a success.phtml file in the app/design/frontend/MageDelight/MageDelight/Magento_Checkout/template/ folder and paste the following code:
<?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() ?>
Step - 12
Next, create a info.phtml file in the app/design/frontend/MageDelight/MageDelight/Magento_Sales/template/order/ folder and paste the following code to display order information.
<?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>
Step - 13
Now, create items.phtml file in the app/design/frontend/MageDelight/MageDelight/Magento_Sales/template/order/success/ folder and paste the following code to show all items from the 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; ?>
Also read: How to Display Products in Magento 2 Homepage?
Conclusion
And that’s about it!
This is the most straightforward way to display order information on the order success page of a Magento 2 store.
And if you need our professional assistance with Magento 2 Development Company, feel free to reach out to us at any time.