マイページの注文履歴の詳細ページに、注文メモを挿入しメモの内容を反映したい

[yuicham]

マイページの注文履歴の詳細ページに、注文メモを挿入できるような実装の仕方はありますでしょうか？

お客様には、商品を注文する際（決済前）に「注文メモ」に必要事項を記載していただくような形にしております。
その記載していただいた注文メモを、マイページの注文履歴の詳細画面に注文メモを挿入しメモの内容を反映したいと思っております。

（こちらの注文履歴の詳細画面に注文メモが挿入できれば嬉しいです）



もし可能であれば、
そのファイル名とliquidコードを教えていただけますと幸いです。

もし難しいようでしたら、マイページ画面の注文履歴の表に追加するような形でも問題ございません。
こちらはcustomers/account.liquidファイルを編集すればなんとか実現できそうでしょうか・・・？

なお、テーマはExpress、shopifyのベーシックプランを使用しております。
どうぞよろしくお願いいたします。

[koji_matsumoto · Accepted solution]

@yuicham 様

order.noteというコードを使うと解決できそうです。

①注文詳細ページへの挿入

②アカウントページへの挿入

を回答いたします。

①注文詳細ページへの挿入

templates/customers/order.liquid の例えば217行目(tableの後)に下記を挿入。

<div class="memo">{{ order.note }}</div>

②アカウントページへの挿入

・メモ欄を作る

templates/customer/account 24行目あたり 

              <tr>
                <th scope="col">{{ 'customer.orders.order_number' | t }}</th>
                <th scope="col">{{ 'customer.orders.date' | t }}</th>
                <th scope="col">{{ 'customer.orders.payment_status' | t }}</th>
                <th scope="col">{{ 'customer.orders.fulfillment_status' | t }}</th>
                <th scope="col">{{ 'customer.orders.total' | t }}</th>
              </tr>

の中に下記を追加（合計のあとであれば最後に追加）

<th scope="col">メモ</th>

・メモ欄にテキストを反映する

customers/account.liquidの48行目あたり

                <tr class="table__row">
                  <th data-label="{{ 'customer.orders.order_number' | t }}" scope="row">
                    <a href="{{ order.customer_url }}"
                      class="button button--small"
                      aria-label="{{ 'customer.orders.order_number_link' | t: number: order.name }}"
                    >
                      {{ order.name }}
                    </a>
                  </th>
                  <td data-label="{{ 'customer.orders.date' | t }}">{{ order.created_at | time_tag: format: 'date' }}</td>
                  <td data-label="{{ 'customer.orders.payment_status' | t }}">{{ order.financial_status_label }}</td>
                  <td data-label="{{ 'customer.orders.fulfillment_status' | t }}">{{ order.fulfillment_status_label }}</td>
                  <td data-label="{{ 'customer.orders.total' | t }}">
                    {%- if settings.currency_code_enabled -%}
                      {{ order.total_price | money_with_currency }}
                    {%- else -%}
                      {{ order.total_price | money }}
                    {%- endif -%}
                  </td>
                  <td data-label="ordernote">{{ order.note }}</td>
                </tr>

の中に下記を追加

<td data-label="ordernote">{{ order.note }}</td>

以上の処理でそれぞれ反映できるかと思います。

参考になれば幸いです。

※例で実行してみたキャプチャも添付いたします

[yuicham]

@koji_matsumoto 様

ご返信が遅くなってしまい、大変申し訳ございません。
無事に実装でき、反映させることができました！
とても丁寧に教えていただき、大変助かりました。
ありがとうございます！

[prita]

横から突然失礼いたします。

私もこちら実装したいと思っい添付画像の青部分に入れたのですが、うまく反映されません。

テーマはSupplyを利用しているのですが、どこにいれればよいのでしょうか？

またコードは<div class="memo">{{ order.note }}</div>のままでよろしいのでしょうか？

ご教授いただけないでしょうか。

どうぞよろしくお願いいたします。ご返信お待ちしております。