・ShopifyのOrder Printerアプリの納品書に支払い方法を表示したい
そんな場合の対応方法を解説します。
Order Printerアプリとは
Order Printer は、Shopifyの納品書作成アプリです。無料で使えますが、十分な機能が備わっているため、作成したいものが一般的なテンプレートであれば、特に有料アプリにする必要はありません。
ただ、デフォルトで用意されているテンプレートでは英語であったり、いくつか変更しなければならない箇所があります。
詳細は以下に解説しています。
今回は、こちらの日本語化したテンプレートに、デフォルトでは表示されない「支払い方法」を表示してみます。
Order Printerアプリで作成した納品書に支払い方法の値を表示する
今回は、合計の行の下に「お支払い方法」を追加します。
まず、Order Printer の編集画面を開き、その中に合計の行、 {{ total_price | money_with_currency }} の箇所を探します。
<tr>
<td><strong>総合計 (税込)</strong></td>
<td style="text-align: right;"><strong>{{ total_price | money_with_currency }}</strong></td>
</tr>
{% comment %}
{% if total_paid != total_price %}
<tr>
<td><strong>お支払い済</strong></td>
<td style="text-align: right;"><strong>{{ total_paid | money }}</strong></td>
</tr>
<tr>
<td><strong>お支払い残金</strong></td>
<td style="text-align: right;"><strong>{{ total_price | minus: total_paid | money }}</strong></td>
</tr>
{% endif %}
{% endcomment %}
合計の下にある {{ total_paid | money }} と {{ total_price | minus: total_paid | money }} の行は、不要であればtrごと削除またはコメントアウトしておきます。
今回追加する「お支払い方法」は、編集画面にある以下、{{ gateway }} になるので、
合計の行が含まれるtableの下に、新しくtableを追加してこの {{ gateway }} を表示してみます。
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
<tr>
<td>お支払い方法</td>
<td style="text-align: right;">{{ gateway }}</td>
</tr>
</table>
すると、クレジットカードの場合は以下で表示されました。
また、代金引換の場合は以下のように表示されました。
このように、支払い方法によって英語になっていたり、微妙におかしい表示になっています。
Order Printerアプリで作成した納品書に支払い方法の値をカスタマイズする
それぞれの支払い方法の表示名を、例えば以下のようにしたいとします。
| {{ gateway }} の値 | 変更後 |
| shopify_payment | クレジットカード |
| Cash on Delivery (COD) | 代金引換 |
| あと払い_ペイディ_ | あと払い (ペイディ) |
こうするためには、
{{ gateway | replace: "shopify_payments", "クレジットカード" | replace: "Cash on Delivery (COD)", "代金引換" | replace: "あと払い_ペイディ_", "あと払い (ペイディ)" }}のようにreplaceする必要があります。
replace – Liquid template language
これで正しく表示されました。
先ほどの3つの支払い方法以外も設定している場合は、それぞれ {{ gateway }} の値を調べてから、replace で置き換えをすればOKです。
以上です。
