[Shopify] Order Printerアプリで作成した納品書に支払い方法を表示する

そんな場合の対応方法を解説します。

Shopifyの無料体験をはじめる

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です。 以上です。

Shopifyの無料体験をはじめる