ShopifyやEコマースに関連することを話してみよう
マイページの注文履歴の詳細ページに、注文メモを挿入できるような実装の仕方はありますでしょうか?
お客様には、商品を注文する際(決済前)に「注文メモ」に必要事項を記載していただくような形にしております。
その記載していただいた注文メモを、マイページの注文履歴の詳細画面に注文メモを挿入しメモの内容を反映したいと思っております。
(こちらの注文履歴の詳細画面に注文メモが挿入できれば嬉しいです)
もし可能であれば、
そのファイル名とliquidコードを教えていただけますと幸いです。
もし難しいようでしたら、マイページ画面の注文履歴の表に追加するような形でも問題ございません。
こちらはcustomers/account.liquidファイルを編集すればなんとか実現できそうでしょうか・・・?
なお、テーマはExpress、shopifyのベーシックプランを使用しております。
どうぞよろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
@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 様
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>
以上の処理でそれぞれ反映できるかと思います。
参考になれば幸いです。
※例で実行してみたキャプチャも添付いたします
@koji_matsumoto 様
ご返信が遅くなってしまい、大変申し訳ございません。
無事に実装でき、反映させることができました!
とても丁寧に教えていただき、大変助かりました。
ありがとうございます!
すべてのShopifyアカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023Shopifyの管理画面では、商品ごとや配送元のロケーション(倉庫)ごとにカスタム配送料を設定することができます。特に購入金額による送料無料設定は、顧客の購買意欲を高める効果的な手...
By Alex06 Nov 5, 2023