Magento – Show Order Details in Order History

blocksfrontendlayoutmagento2

Basically I want to show Customer's Order Details information in order History page under Customer Account My Order History Page.

Exactly what I'm did?

I have overridden

vendor/magento/module-sales/view/frontend/templates/order/history.phtml

through below layout change : 

<!--app/code/Btech/OrderTracking/view/frontend/layout/sales_order_history.xml -->

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Btech_OrderTracking::css/custom.css"/>
    </head>
    <body>
        <referenceBlock name="sales.order.history">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">Btech_OrderTracking::order/history.phtml</argument>
            </action>
        </referenceBlock>
    </body>
</page>

In my history.phtml

app/code/Btech/OrderTracking/view/frontend/templates/order/history.phtml

    <div id="accordion" data-mage-init='{
            "accordion":{
                "active": [1,2],
                "collapsible": true,
                "openedState": "active",
                "multipleCollapsible": true
            }}'>

    <?php foreach ($_orders as $_order): ?>
        <div data-role="collapsible">
                <div data-role="trigger">
                    <h4><?php echo $_order->getRealOrderId() ?></h4>
                </div>
            </div>
            <div data-role="content">
                Want to Show Order Items
            </div>
    <?php endforeach; ?>
<?php endif; ?>

I want like as like below screen :

enter image description here

Best Answer

Supravat. I guess that you want to get Content from www.example.com/sales/order/view/order_id/{OrderId}/ when clicking into <h4>

In that, I suggest is that implement ajaxContent of Collapsible widget

that call www.example.com/sales/order/view/order_id/{OrderId}/ and get content of HTML out of Block sales.order.view.

<block class="Magento\Sales\Block\Order\View" name="sales.order.view" cacheable="false" after="sales.order.info.links">

At this case, send an extra parameter name visited_from to url www.example.com/sales/order/view/order_id/{OrderId}/visited_from/orderview to identify that request coming from that your custom Url

After that for getting the out of particular Block sales.order.view use Plugin on \Magento\Sales\Controller\Order\View::execute

and Using around plugin aroundExecute only response sales.order.view section of block.

Plugin Class

<?php


namespace StackExchange\Magento\Plugin\Controller\Order;

use Magento\Framework\View\Result\PageFactory;
use Magento\Sales\Controller\AbstractController\OrderLoaderInterface;

class ViewPlugin 
{

    /**
     * @var OrderLoaderInterface
     */
    private $orderLoader;


    /**
     * @var PageFactory
     */
    private $resultPageFactory;

    public function __construct(
        PageFactory $resultPageFactory,
        OrderLoaderInterface  $orderLoader   
     ) {

         $this->resultPageFactory = $resultPageFactory;
         $this->orderLoader = $orderLoader;
    }
     public function aroundExecute(
        \Magento\Sales\Controller\Order\View $subject,
        \Closure $proceed    
     ) {
         if($subject->getRequest()->getParam('visited_from') == 'orderview'){

            $result = $this->orderLoader->load($subject->getRequest());
            if ($result instanceof \Magento\Framework\Controller\ResultInterface) {
                return $result;
            }

            $resultPage = $this->resultPageFactory->create();
            $response = $resultPage->getLayout()->getBlock('sales.order.view')->toHtml();
            return $subject->getResponse()->setBody($response);            
         }

         // run original  Method
         return $proceed();
    }

}
Related Topic