Magento 2 is full of features that can make your online store better. But to use it to its fullest, you need to know the little tips and tricks that can make things even better.
In this blog, we’re going to talk about how you can show order details on the success page after a customer buys something. This isn’t just a nice touch – it can also make your customers happier and more likely to come back.
So, whether you’re a pro at using Magento 2 and looking for more ways to improve, or a store owner trying to learn more about how your site works, this blog is for you.
We’ll give you a step-by-step guide on how to get order details on the success page in Magento 2. Let’s dive in!
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 in 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 on the checkout success page. If you have any problems when following the instructions, just leave a comment below.
Related Posts:
