24 May 2021 / Published in TechBlogs

マジェント2のオーダーグリッドに配送先の詳細を追加する方法

How-to-Add-Shipping-Address-Details-in-Order-Grid-in-Magento-2-950x500

マジェント2 の「Admin Order Grid」は、ストア管理者が注文の詳細を表示したり、注文を管理したり、新しい注文を作成したりするのに役立ちます。マジェント2 では、管理者は必要に応じてオーダーグリッドをカスタマイズすることができます。時々、管理者は配送先住所の詳細を必要とする、通り、都市、ピンコード、注文グリッドの電話の列です。これらの要求を満たすために、この記事を読み進めてください。

以下は、マジェント2 のオーダーグリッドに配送先住所の詳細を追加する方法の手順です。

1.マジェント 2のオーダーグリッドに配送先の詳細を追加するステップ

ステップ1: まず、拡張機能の中に「sales_order_grid.xml」ファイルを以下のパスに作成します。

app\code\Vendor\Extension\view\adminhtml\ui_component\

そして、以下のコードを追加します。

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="sales_order_columns">
        <settings>
            <childDefaults>
                <param name="fieldAction" xsi:type="array">
                    <item name="provider" xsi:type="string">false</item>
                </param>
            </childDefaults>
        </settings>
        <column name="street">
            <settings>
                <filter>text</filter>
                <label translate="true">Street</label>
                <bodyTmpl>ui/grid/cells/html</bodyTmpl>
                <visible>true</visible>
            </settings>
        </column>
        <column name="postcode">
            <settings>
                <filter>text</filter>
                <label translate="true">Zip</label>
                <bodyTmpl>ui/grid/cells/html</bodyTmpl>
                <visible>true</visible>
            </settings>
        </column>
        <column name="city">
            <settings>
                <filter>text</filter>
                <label translate="true">City</label>
                <bodyTmpl>ui/grid/cells/html</bodyTmpl>
                <visible>true</visible>
            </settings>
        </column>
        <column name="telephone">
            <settings>
                <filter>text</filter>
                <label translate="true">Phone</label>
                <bodyTmpl>ui/grid/cells/html</bodyTmpl>
                <visible>true</visible>
            </settings>
        </column>
    </columns>
</listing>

ステップ2：その後、拡張フォルダ内にdi.xmlファイルを以下のパスで作成します。

app_code_Vendor_Extension_etc\

以下のコードを追加してください。

<?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\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <plugin name="custom_orders_grid" type="Vendor\Extension\Plugin\OrdersGrid" sortOrder="10"/>
    </type>
</config>

ステップ3: その後、「OrdersGrid.php」ファイルを以下のパスフォルダー内に作成し、モジュールに追加します。

app_code_Vendor_Extension_Plugin\

以下のコードを追加します。

<?php
namespace Vendor\Extension\Plugin;
 
class OrdersGrid
{
    public function afterGetReport($subject, $collection, $requestName)
    {
        if ($requestName !== 'sales_order_grid_data_source')
        {
            return $collection;
        }
 
        if ($collection->getMainTable() === $collection->getResource()->getTable('sales_order_grid'))
        {
            $orderAddressTable  = $collection->getResource()->getTable('sales_order_address');
 
            $collection->getSelect()->joinLeft(
                ['oat' => $orderAddressTable],
                'oat.parent_id = main_table.entity_id AND oat.address_type = \'shipping\'',
                ['telephone', 'city', 'postcode', 'street']
            );
        }
 
        return $collection;
    }
}

上記の手順を完了したら、Magento 2ストアのバックエンドで結果を確認します。Magento 2のオーダーグリッドに、「Street」、「Zip code」、「City」、「Phone」などのShipping Addressの詳細カラムが追加されています。