FROM CACHE - jp_header
解決済

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

yuicham
Shopify Partner
9 0 1

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

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

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

スクリーンショット 2022-01-26 17.24.15 (1).png

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

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

スクリーンショット 2022-01-26 17.29.14.png

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

1 件の受理された解決策

koji_matsumoto
Shopify Partner
31 18 29

成功

@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>

 

 

 

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

参考になれば幸いです。

 

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

元の投稿で解決策を見る

3件の返信3

koji_matsumoto
Shopify Partner
31 18 29

成功

@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
Shopify Partner
9 0 1

@koji_matsumoto 様

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

prita
訪問者
2 0 0

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

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

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

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

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

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

 

スクリーンショット 2023-12-19 153529.png