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?
