Adding a row count to the order sales view items table in Magento 2.4 makes it easy for you, as a store owner, to view and manage the orders. By default, these functionalities will not be available in your store, so let us see how you can add them for smooth management. Let’s go step-by-step into this. Here, we will look at 2 solutions here:
- By adding a column via sales_order_view.xml
- By adding a column via plugins
First, let us start by creating the module Meetanshi_RowCounter with the needed files for both solutions:
1). Add registration.php:
<?php use Magento\Framework\Component\ComponentRegistrar; ComponentRegistrar::register( ComponentRegistrar::MODULE, 'Meetanshi_RowCounter', __DIR__ );
2. Add etc/module.xml:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Meetanshi_RowCounter"/>
</config>
3). Create a block file, Block/Adminhtml/Items/Column/Row.php:
<?php
declare(strict_types=1);
namespace Meetanshi\RowCounter\Block\Adminhtml\Items\Column;
use Magento\Sales\Block\Adminhtml\Items\Column\DefaultColumn;
class Row extends DefaultColumn
{
/** @var int */
private int $row = 1;
/**
* @return int
*/
public function getRow(): int
{
return $this->row++;
}
}
Once you’ve created the module, there are two approaches to the soluton.
Solution 1: Adding a column via sales_order_view.xml
Create view/adminhtml/layout/sales_order_view.xml:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="order_items">
<arguments>
<argument name="columns" xsi:type="array">
<item name="row" xsi:type="string" translate="true">#</item>
</argument>
</arguments>
<block class="Meetanshi\RowCounter\Block\Adminhtml\Items\Column\Row" name="column_row" template="Meetanshi_RowCounter::items/column/row.phtml" group="column"/>
</referenceBlock>
<referenceBlock name="default_order_items_renderer">
<arguments>
<argument name="columns" xsi:type="array">
<item name="row" xsi:type="string" translate="true">col-row</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
This solution has only one drawback: you will not have control over the order of columns, and a new column will be added. Now, let us head to the 2nd solution here: adding a column via plugins
Solution 2: By adding a column via plugins
1). Add view/adminhtml/layout/sales_order_view.xml:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="order_items">
<block class="Meetanshi\RowCounter\Block\Adminhtml\Items\Column\Row" name="column_row" template="Meetanshi_RowCounter::items/column/row.phtml" group="column"/>
</referenceBlock>
</body>
</page>
2). Add etc/adminhtml/di.xml for the plugins:
<?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\Sales\Block\Adminhtml\Order\View\Items">
<plugin name="Meetanshi_RowCounter::OrderViewItems" type="Meetanshi\RowCounter\Plugin\Block\Adminhtml\Order\View\Items"/>
</type>
<type name="Magento\Sales\Block\Adminhtml\Order\View\Items\Renderer\DefaultRenderer">
<plugin name="Meetanshi_RowCounter::OrderViewItemsDefaultRenderer" type="Meetanshi\RowCounter\Plugin\Block\Adminhtml\Order\View\Items\Renderer\DefaultRenderer"/>
</type>
</config>
3). Add first plugin class, Plugin/Block/Adminhtml/Order/View/Items.php
<?php
declare(strict_types=1);
namespace Meetanshi\RowCounter\Plugin\Block\Adminhtml\Order\View;
use Magento\Sales\Block\Adminhtml\Order\View\Items as BaseItems;
class Items
{
/**
* @param BaseItems $subject
* @param array $result
*
* @return array
*/
public function afterGetColumns(
BaseItems $subject,
array $result
): array {
return [
'row' => __('#'),
...$result,
];
}
}
4). Add the other plugin Plugin/Block/Adminhtml/Order/View/Items/Renderer/DefaultRenderer.php
<?php
declare(strict_types=1);
namespace Meetanshi\RowCounter\Plugin\Block\Adminhtml\Order\View\Items\Renderer;
use Magento\Sales\Block\Adminhtml\Order\View\Items\Renderer\DefaultRenderer as BaseDefaultRenderer;
class DefaultRenderer
{
/**
* @param BaseDefaultRenderer $subject
* @param array $result
*
* @return array
*/
public function afterGetColumns(
BaseDefaultRenderer $subject,
array $result
): array {
return [
'row' => 'col-row',
...$result,
];
}
}
And that’s it! This is how you will see the column appear after running the second solution, where you have more control over the column order. Try it yourself, and if you have any doubts, let me know in the comments. I would love to help you out.
