受注マスターでステータスごとに色を変える

ECCUBE3系では本来受注一覧ページでステータスごとに背景色を変える機能が備わっています。
マスタデータ管理のmtb_order_status_colorが背景色の一覧になります。

ただ、この機能私の環境ECCUBE3.0.10では動作しませんでした。
詳しく見たわけではありませんが、まだ実装された気配がありません。

どんなステータスであっても背景が白とグレーのストライプで表示されてしまいます。

↓before

そこでmtb_order_status_colorの色が反映されるようにファイルをカスタマイズしてみます。

1. EccubeServiceProvider.php

$appにOrderStatusColorのRepositoryが追加されていないので登録しておきます。

        $app['eccube.repository.master.order_status_color'] = $app->share(function () use ($app) {
            return $app['orm.em']->getRepository('Eccube\Entity\Master\OrderStatusColor');
        });

2. OrderController

orderStatusColorsの一覧をtwigに渡すデータに追加

        return $app->render('Order/index.twig', array(
            'searchForm' => $searchForm->createView(),
            'pagination' => $pagination,
            'disps' => $disps,
            'pageMaxis' => $pageMaxis,
            'page_no' => $page_no,
            'page_status' => $page_status,
            'page_count' => $page_count,
            'active' => $active,
            'orderStatusColors' => $app['eccube.repository.master.order_status_color']->findAll(),
        ));

3. Order/index.twig

受注テーブルのtrにorder-status-(ステータスID)というclassを追加

{% for Order in pagination %}
                                    <tr id="result_list_main__item--{{ Order.id }}" class="order-status-{{ Order.OrderStatus.Id }}">

CSSをtwig内に書いてしまいます。

{% block stylesheet %}
<link rel="stylesheet" href="{{ app.config.admin_urlpath }}/assets/css/bootstrap-datetimepicker.min.css">
    <style>
    {% for OrderStatusColor in statusColors %}
    tr.order-status-{{ OrderStatusColor.Id }} td,tr.order-status-{{ OrderStatusColor.Id }} th
        {
            background-color: {{ OrderStatusColor.name }} !important;
        }
    {% endfor %}
    </style>
{% endblock stylesheet %}

これでひとまず背景色を反映させることはできました。
↓after

EC-CUBEゴールドパートナー EC-CUBEは株式会社イーシーキューブの商標です

ECCUBE制作トップへ

EC-CUBEカスタマイズに関するお問い合わせはこちら

[重要]現在公式にセキュリティサポートが切れていないPHPは8.1以上、MySQLは8.0以上で、対応しているEC-CUBEバージョンは4.2以上です。古いEC-CUBEを使っている方は適切なタイミングでバージョンアップをご検討ください。