Shopify

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

・ShopifyのOrder Printerアプリの納品書に支払い方法を表示したい

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

Order Printerアプリとは

Order Printer は、Shopifyの納品書作成アプリです。無料で使えますが、十分な機能が備わっているため、作成したいものが一般的なテンプレートであれば、特に有料アプリにする必要はありません。

ただ、デフォルトで用意されているテンプレートでは英語であったり、いくつか変更しなければならない箇所があります。

詳細は以下に解説しています。

[Shopify] 納品書アプリのテンプレートを日本対応に変更する(無料)Shopifyでショップを構築する上で必要となる一つに、商品を送付する際に同梱する納品書がありますが、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です。

以上です。

ABOUT ME
toru
toru
フリーランステクニカルディレクター・UI/UXデザイナー。 Web制作会社10年・フリーランス6年の経験をもとにWebサイト・ECサイト構築・運用支援を行うかたわら、Web制作スキルを身につけたい方や、フリーランスを目指す方に向けて、自分の経験をもとに役に立つ情報をわかりやすく発信していきます。