[eccube3]受注ステータスごとに色分けする

ちょっとだるい

前提

受注ステータス色分けプラグインというものがある。
2系と同じ配色でやってくれるらしい。
マスターデータで取り扱っている色じゃない気がするんだけど、まあそれは良いか。

3.0.18でも使えてる。

受注登録画面に色を付ける

一番上に表示されるselectが受注ステータス。
デザインが統一されすぎてて見づらいっちゃ見づらい。

{# 20201107 start #}
$(function(){
    var orderStatusVal = $('#order_OrderStatus').val();
    if(orderStatusVal == 1){ $('#order_OrderStatus').css({'cssText': 'background-color: #FFFFFF !important;'}); }
    else if(orderStatusVal == 2){ $('#order_OrderStatus').css({'cssText': 'background-color: #FFDE9B !important;'}); }
    else if(orderStatusVal == 3){ $('#order_OrderStatus').css({'cssText': 'background-color: #C9C9C9 !important;'}); }
    else if(orderStatusVal == 4){ $('#order_OrderStatus').css({'cssText': 'background-color: #FFFFAB !important;'}); }
    else if(orderStatusVal == 5){ $('#order_OrderStatus').css({'cssText': 'background-color: #BFDFFF !important;'}); }
    else if(orderStatusVal == 6){ $('#order_OrderStatus').css({'cssText': 'background-color: #FFFFAB !important;'}); }
    else if(orderStatusVal == 7){ $('#order_OrderStatus').css({'cssText': 'background-color: #FFCCCC !important;'}); }
    else if(orderStatusVal == 8){ $('#order_OrderStatus').css({'cssText': 'background-color: #FFCCCC !important;'}); }
    $('#order_OrderStatus').change(function(){
        var orderStatusVal = $('#order_OrderStatus').val();
        if(orderStatusVal == 1){ $('#order_OrderStatus').css({'cssText': 'background-color: #FFFFFF !important;'}); }
        else if(orderStatusVal == 2){ $('#order_OrderStatus').css({'cssText': 'background-color: #FFDE9B !important;'}); }
        else if(orderStatusVal == 3){ $('#order_OrderStatus').css({'cssText': 'background-color: #C9C9C9 !important;'}); }
        else if(orderStatusVal == 4){ $('#order_OrderStatus').css({'cssText': 'background-color: #FFFFAB !important;'}); }
        else if(orderStatusVal == 5){ $('#order_OrderStatus').css({'cssText': 'background-color: #BFDFFF !important;'}); }
        else if(orderStatusVal == 6){ $('#order_OrderStatus').css({'cssText': 'background-color: #FFFFAB !important;'}); }
        else if(orderStatusVal == 7){ $('#order_OrderStatus').css({'cssText': 'background-color: #FFCCCC !important;'}); }
        else if(orderStatusVal == 8){ $('#order_OrderStatus').css({'cssText': 'background-color: #FFCCCC !important;'}); }
        else{ $('#order_OrderStatus').css({'cssText': 'background-color: none !important;'}); }
    })
})
{# 20201107 end #}

すごい雑だけど、読み込み時の色指定とselect変更時の色指定。

app/template/admin/Order/edit.twig
の「{% block javascript %}」の中に足す。

決済状況管理に色を付ける

ECCUBEペイメントに付属するページ。
app/Plugin/GmoPaymentGateway/View/admin/gmo_order_status.twigを編集する。

<style>
    .order_status_color_1 td { background-color: #FFFFFF !important;}
    .order_status_color_2 td { background-color: #FFDE9B !important;}
    .order_status_color_3 td { background-color: #C9C9C9 !important;}
    .order_status_color_4 td { background-color: #FFFFAB !important;}
    .order_status_color_5 td { background-color: #BFDFFF !important;}
    .order_status_color_6 td { background-color: #FFFFAB !important;}
    .order_status_color_7 td { background-color: #FFCCCC !important;}
    .order_status_color_8 td { background-color: #FFCCCC !important;}
</style>

色指定のCSSを「{% block main %}」とかに突っ込む。
ページ最下部のリストに該当するtableの、tbody直下にあるtrを

<tr class="order_status_color_{{ OrderStatuses[Order[0].OrderStatus.id].id }}">

こうする。idが書き出されてclassが確定してcssが反映される。