[Quick Order Printer] 領収書へのリンクをマイページの任意の場所に表示する／出荷済みの注文のみ領収書を表示する
こんにちは。Quick Order Printer ではマイページからの領収書・納品書の印刷機能をサポートしています。
管理画面から機能をONにするだけで注文履歴にリンクが表示されます。テーマファイルの編集などの面倒な作業は一切不要（ノーコード）です。
更に、Shopifyが標準装備している Liquid によるカスタマイズ機能を駆使することで柔軟にストアの表示を制御することが可能になります。
本記事では、下記のマイページのカスタマイズ方法を解説します。
- マイページ上で任意の場所に領収書／納品書印刷リンクを表示する
- 出荷済みの注文にだけリンクを表示する方法
マイページ上で任意の場所に領収書／納品書印刷リンクを表示する
デフォルトでは注文番号の右側に領収書もしくは納品書へのリンクが表示されます。
しかし、たとえば合計金額の右にセルを追加してそこに表示したい場合もあるかもしれません。その場合のカスタマイズ手順は以下になります。
1. タグのコピー
アプリの「印刷画面へのリンク」タブの「通知メールに印刷画面へのリンクを表示する」にある通知メール用のタグをコピーしてください。
タグは以下のようなものです:
<a href="https://documents-app.mixlogue.jp/print?shop=XXXXX&t=xxxxxxx&u={{customer.id}}&o={{ id }}&locale=ja">領収書を表示する</a>
2. タグの変更
タグの一部分を変更します。「o={{ id }}」を「o={{ order.id }}」に変更します。
<a href="https://documents-app.mixlogue.jp/print?shop=XXXXX&t=xxxxxxx&u={{customer.id}}&o={{ order.id }}&locale=ja">領収書を表示する</a>
3. テーマファイルの変更
テーマファイルのマイページの該当部分のコードを変更します。例として"Debut"テーマの場合を説明します。テーマによっては変更するファイルが異なる場合がありますので、適宜読み替えてください。
現在のテーマの「アクション」から「コードを編集」をクリックします。
Templates の customers/account.liquid というファイルを編集します。
下記のように変更します（コメント<!-- -->を参照してください）。
<table class="responsive-table">
<thead>
<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>
<!-- ヘッダの列を追加 -->
<th></th>
</tr>
</thead>
<tbody>
{% for order in customer.orders %}
<tr>
<th data-label="{{ 'customer.orders.order_number' | t }}" scope="row">
<a href="{{ order.customer_url }}" class="btn btn--secondary btn--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 }}">{{ order.total_price | money }}</td>
<!-- 領収書の列を追加 -->
<td><a href="https://documents-app.mixlogue.jp/print?shop=XXXXX&t=xxxxxxx&u={{customer.id}}&o={{ order.id }}&locale=ja">領収書を表示する</a></td>
</tr>
{% endfor %}
</tbody>
</table>
4. 「購入履歴（アカウントページ）に領収書印刷ボタンを表示する」機能を無効にする
以上で作業は完了です。表示を確認します。
合計金額の右に領収書へのリンクを表示する列が追加されました。
出荷済みの注文にだけリンクを表示する方法
出荷済みの注文のみリンクを表示するには、先程のタグを以下のLiquidタグで囲みます。
{% if order.fulfillment_status == ‘fulfilled’ %} 〜〜〜 {% endif %}
{% if order.fulfillment_status == 'fulfilled' %}<a href="https://documents-app.mixlogue.jp/print?shop=XXXXX&t=xxxxxxx&u={{customer.id}}&o={{ order.id }}&locale=ja">領収書を表示する</a>{% endif %}
すると出荷済みの注文にのみリンクが表示されます。ご確認ください。
以上のようにマイページをカスタマイズすることができました。本アプリは基本的にはノーコードでストア内にリンクを表示することができますが、このように HTMLやLiquid のタグを駆使することで自在にストア上の表示・デザインをカスタマイズすることができます。
このような柔軟性は Shopify の最大の魅力でもありますね。もし、タグの設置等でうまく行かない場合がありましたら、こちらのフォームからいつでもお気軽にお問い合わせください。弊社チームが設置完了までサポートさせていただきます。