[Shopify]checkout.liquidで3つの各ページステップごとにJS処理を出し分ける方法

2021年10月9日

今回紹介するのはcheckout.liquidの3つのページを検知して、そのステップごとに処理を出し分ける方法です。Shopifyのチェックアウト画面は3つのステップに分かれており

配送先住所入力ページ
配送方法選択ページ
支払い方法選択ページ

のように各ステップに分かれています。

その各ステップごとにJavaScriptを使用して情報を出し分けたいときに利用する方法について解説してみます。

※ちなみにcheckout.liquidはShopify Plusプランでのみ編集することが可能で、事前にShopifyサポートに有効化してもらう必要があるので注意です。

checkout.liquidで編集できる具体的な部分

まず具体的にチェックアウトページがどこを指すのか、checkout.liquidでどこが編集できるのかについて話してみます。

チェットアウトページとは、カート（/cart）画面以降の部分のことを指します。

商品詳細ページで商品をカートに入れる（ストアURL/products/）
カート画面に移動する（ストアURL/cart）
『購入を続ける』のようなボタンで次の画面に進む
『配送先住所』入力画面　←チェックアウトページ①
『配送方法』選択画面　←チェックアウトページ②
『支払い方法』選択画面　←チェックアウトページ③

のようにカート画面から先に進んだ部分のことを一般的にチェックアウトページと呼びます。そして、それらのページがcheckout.liquidで編集できる部分になります。

大きな案件になってくるとチェックアウトページに要素を加えたい、チェックアウト画面で何か処理を追加したい。といった要望が出てくるので、その際は

ShopifyのプランをPlusにアップグレードする
Shopify サポートに連絡してcheckout.liquidを有効化してもらう
checkout.liquidに処理を書く

という流れで対応することになります。

チェックアウトページの3種類

次に先ほどさらっと紹介した、チェックアウトページの3種類（3ステップ）を具体的に見ていきます。（我らがオリオンビールさんのチェックアウトページを参考にさせていただきます。）

チェックアウトページ①『配送先住所』

チェックアウト画面配送先 checkout.liquid

ここで配送先住所を入力します。チェックアウトページの1ページ目になります。

チェックアウトページ②『配送方法選択』

チェックアウトページ　配送方法 checkout.liquid

ここで配送方法の選択を行います。基本的には購入した金額、重量によって送料は決められているはずです。チェックアウトページの2ページ目になります。

チェックアウトページ③『支払い方法選択』

チェックアウトページ　支払い方法 checkout.liquid

そして最後のチェックアウトページとして、支払い方法の選択画面になります。

以上が各チェックアウトプロセスの画面でcheckout.liquidファイルにて編集可能な画面になります。

Shopify.Checkout.stepで各ステップごとに処理を出し分けする方法

そして、本題の各チェックアウトステップで処理を出し分けする方法です。なぜこの各プロセスでの出しわけが必要になるのでしょうか。

ちなみにチェックアウトページの3種類は

配送先住所入力ページ
配送方法選択ページ
支払い方法選択ページ

です。

まず処理出しわけせずに、単純にJavaScriptでcheckout.liquidで処理を書いた場合どうなるか。結果的にはすべてのチェックアウトページにその処理が適用されてしまうのです。

例えば「配送希望時間」というinput項目をcheckout.liquidのDOMを使用して追加したとしましょう。すると、各checkoutページで配送希望時間が表示されるのでお客さんが3回も入力しなければならなくなります。しかも③の支払いページでも配送希望時間を求められるのは違和感しかありません。

よって必要なのは②「配送方法選択」のときに「配送希望時間」項目を追加するという処理です。

やり方としては、

(function($) {

$(document).on("page:load page:change", function() {

if(Shopify.Checkout.step == "shipping_method"){

ここに配送希望時間を追加する処理追加

}

});

})(Checkout.$);

</script>

のようにコードを書いてあげることで特定のチェックアウト画面のみに処理を適用することができます。

ちなみに上記のコードはshipping_methodなので2番目のチェックアウトページになります。該当部分を

配送先住所ページ（contact_information）
配送方法ページ（shipping_method）
支払い方法ページ（payment_method）

に変更することで各ページへの処理を適用することができます。

[Shopify]checkout.liquidで3つの各ページステップごとにJS処理を出し分ける方法まとめ

以上、checkout.liquid上で各チェックアウト画面ごとに処理を出し分ける方法でした！checkout.liquidはShopify Plusプランでしか使用できないのでなかなか使用する機会はありません。ただその分、日本語の情報も少ないので良い機会だと思いまとめてみることにしました。参考になったなら嬉しいです！

最後までお読みいただき、ありがとうございました！本日も良い1日を！