[eccube3]商品選択項目・備考欄追加プラグインを触る

しんどいこれ

プラグイン
商品詳細ページでの表示の仕組み
1. 問題点
2. 問題点2
カート画面編集
注文確認ページ
1. 問題点3
注文履歴ページ
注文履歴詳細ページ

プラグイン

商品詳細ページでの表示の仕組み

デフォで購入ボタン位置の近くにあるこれがトリガーになって生成される。

{% for f in form.getIterator %}
    {% if f.vars.name matches '[^plg*]' %}
        {{ form_row(f) }}
    {% endif %}
{% endfor %}

だから、これを移動させることで任意の位置で表示させることができる。

問題点

ディレクトリを覗いても書き出しのルールが一切書かれてない。
元々の規格はタグをベタ打ちすることで表示させてるんだけど、このプラグインに関してはECCUBEを知らない僕が悪いんですけどシステムにぶっこんで生成してる臭いからHTMLをいじれない。classも振れないからデザインが触れない。
試行錯誤の末にタグのベタ打ちで表示させることに成功はしたけど青天井で増やせるプラグインに対して選択肢の数だけひたすらdetail.twigに書き続けるのは無理がある。

見落としてるってんならいいけどマジでどうなってんのこれ。
多分、「SelectionItemEvent.php」に書いてあることが全てなんだろうと思う。商品詳細ページ部分だけsearchしてないっていう、HTMLタグのなんちゃらも書いてない、マジほんと、なんですかこれは。

有料のくせになんかコメントアウトでやることやったけど無理ですわーっていうのが残ってるしマジほんとにマジでなにこれほんともう助けて。きついこれ。

ユニークなclassなりidで囲って指定してやっていくしかないかもしれない。HTMLが美しくないのでモチベーションめっちゃ下がるやつ。

{% for f in form.getIterator %}
    {% if f.vars.name matches '[^plg*]' %}
<li class="plugin_SelectionItem">
        {{ form_row(f) }}
</li>
    {% endif %}
{% endfor %}
{% if Product.stock_find %}

囲む場合はこんな感じでやる。forの直下だと空欄の何かを囲ったりして妙なことになる。他のプラグインも使う場合は話がややこしくなるので別のもっと広義的な意味のclassにしたほうがいいですね。

問題点2

項目名が必須なので、textareaのplaceholderでいいやと思っても何かしら記入しないといけない。selectは表示させるけどtextareaは非表示みたいなことはjsで要素をピックアップしないとダメで、それをやると読み込み時に一瞬表示されてかっこ悪いからキツい。まとめて表示・非表示どっちかしか選べない。なんだろうねこれは。

カート画面編集

テンプレートを作らずに直接イベント内で挿入のなんちゃらを完結させるのが好きなようなので、イベントデータだけいじればいい。

/app/Plugin/SelectionItem/SelectionItemEvent.php
「カートページに選択項目とテキスト項目を表示する.」で検索、530行目くらいから。

        $search = '<dd id="cart_item_list__item_price"';
        $replace = '<dd id="cart_item_list__item_choice" style="font-size:calc(1.2rem + 0.15vw);">{{ cartItemsInSess({"productClassId": ProductClass.id }) | nl2br }}</dd>'.$search;

この2行をコピーして片方をコメントアウトしてバックアップにして都合のいい感じに書き換える。

カートページというのは「\app\template\***\Cart\index.twig」のことです。
挿入近辺の文字列をチェックするために合わせて開きましょう。

この$replaceというのはコメントアウトタグ（<!– –>）も拾うので、要素を入れづらくてしんどいときは活用するといいよ。

注文確認ページ

ここは2箇所（2種？）に挿入される。
デフォのテーマが見れないと訳がわからないんだけど、「購入する商品一覧」と「配送先別商品一覧」それぞれに商品情報が表示されるんで、そこに項目を追加する。

プラグインのカスタマイズが進むとデフォのテンプレートが見れなくなる事があるので、こういう挿入関係に関してはデモサイトを活用すると楽になる。
https://demo3.ec-cube.net/

今作ってるサイトは複数配送がない（現サイトにおいてはないので今後もないと信じてる）から商品一覧だけに留めてるんで、片方だけいじればいいよねという感じ。

/app/Plugin/SelectionItem/SelectionItemEvent.php
800行目辺りの「注文確認ページに選択項目を表示する」の部分を編集する。

        // 商品情報
        $search = '<dd id="cart_box_list__price--{{ loop.index }}"';
        $replace = '<dd id="cart_box_list__item_choice--{{ loop.index }}" style="font-size:calc(1.2rem + 0.15vw);">{{ cartItemsInSess({"productClassId": orderDetail.productClass.id }) | nl2br }}</dd>'.$search;
        $source = str_replace($search, $replace, $source);

        // 配送情報
        $search = '<dd id="shipping_box__price--{{ idx }}_{{ shipmentItem.id }}"';
        $replace = '<dd id="shipping_box__item_choice--{{ idx }}_{{ shipmentItem.id }}" style="font-size:calc(1.2rem + 0.15vw);">{{ cartItemsInSess({"productClassId": shipmentItem.productClass.id }) | nl2br }}</dd>'.$search;
        $source = str_replace($search, $replace, $source);

これ、replaceの検索文字列が存在しない場合は処理がスキップされるんで、使わない場合はコメントアウトでもいいしそのままでもいいしって感じ。まあコメントアウトした方が無駄な処理（検索）がなくなるから正しいと思うけど。

問題点3

「{{ }}」で囲ってるのは、変数内（SelectionItemEvent.php内）では処理せずに貼り付けた先でタグが動くようにっていうおまじないらしい。そこは問題じゃなくて、「nl2br」で改行タグを突っ込むよっていうのが書いてある、ここがやばい。こういう規格枠は全部spanで括りたいから、んでnl2brがあるんなら\nがあるんじゃん？ってことで「nl2br」を「regex_replace:’/\n/’:'</span><span>’」に置き換えてみたんだけど動かないどころかエラーを吐く。スペース入れるなとかシングルクォートとかそこらへんも守ったのにエラーになる。なんでだよ。
仕様変更を余儀なくされてモチベーションが削られる。

注文履歴ページ

自分は商品名のみで規格は省いてるけど、一応。

/app/Plugin/SelectionItem/SelectionItemEvent.php
「注文履歴ページに選択項目とテキスト項目を表示する」の項目

        $search = '<dd id="history_detail_list__price--';
        $replace = '<dd id="history_detail_list__item_choice--{{ Order.id }}_{{ OrderDetail.id }}" class="small">{{ itemChoiceOrder({ "orderDetailId": OrderDetail.id }, { "productClassId": OrderDetail.productClass.id }) | nl2br }}</dd>'.$search;

注文履歴詳細ページ

一覧で省いた代わりにこっちに表記する。

/app/Plugin/SelectionItem/SelectionItemEvent.php
「注文履歴詳細ページに選択項目とテキスト項目を表示する」の項目

        // 変更不可テキスト表示
        $search = '<dd id="detail_list__price_inc_tax--';
        $replace = '<dd id="detail_list__item_choice--{{ OrderDetail.id }}" class="small">{{ itemChoiceOrder({ "orderDetailId": OrderDetail.id }, { "productClassId": OrderDetail.productClass.id }) | nl2br }}</dd>'.$search;

注文履歴に「変更フォーム」を付けられるらしいけど、どうなんかな。大手ECだってそんなことしないんだけど。変えたところで通知は飛ぶのかとか、変更したら決済額変わるじゃんとか、キャンセルして再注文するほうがスマートじゃないかと思う。

修正箇所はもう一個ある。

プラグインで追加された規格は再注文に反映されないので、プラグイン上で再注文の表記を非表示にしている。ちゃんとソースを読んでないけど、多分規格なしであれば普通に再注文できるんだろうとは思う。まあとりあえず、独自デザインで変更してある場合以下の部分を修正する。

        // 再注文を不可に
        $replace = '';
        $search = '<strong>【現在価格】{{ OrderDetail.productClass.price02IncTax|price }}</strong>';
        $source = str_replace($search, $replace, $source);
        $search = '<a href="{{ url(\'mypage_order\', {\'id\': Order.id }) }}" class="btn btn-primary btn-block" {{ csrf_token_for_anchor() }} data-method="put" data-confirm="false">再注文する</a>';
        $source = str_replace($search, $replace, $source);
        $search = '<strong>※金額が変更されている商品があるため、再注文時はご注意ください。</strong>';
        $source = str_replace($search, $replace, $source);