Shopifyのcheckout.liquidでできること

私達ARCHETYPでは、Shopifyの知識・技術UPのために定期的にShopify勉強会を行なっています。

前回のおさらいはこちら（Shopifyのチェックアウトページをテーマからカスタマイズしてみよう！）

前回に引き続き、今回もShopifyのチェックアウトについて深掘りして行きます！
今回はShopifyのPLASプランで作成することのできるcheckout.liquidについて共有していきます。

・checkout.liquidとは？
・checkout.liquidでやっていること
・コードの内容
・どこまでできるの？
・まとめ

checkout.liquid  とは？
・Shopifyの契約プランのPLUSプランから作成可能になる、チェックアウトページのコードが書かれているファイル
・ファイルの作成は、オンライン上のテーマエディターで作成可能
・checkout.liquidをカスタムしたいのであれば、事前にShopify側に申請する必要があるので注意！（ここから申請？）
・１契約で１申請ではなく、１ショップに１申請なので、開発と本番で２ショップあったりする場合は事前申請をお忘れなく！

checkout.liquidファイルを作ってしまえば、ファイルをカスタムできると思ってしまうのですが、実はカスタムします申請が必要です。
PLUSプランだと、オンラインエディターでファイルの作成は可能ですが、申請してないと、コードを変更しても反映されないので注意が必要。
あと、１ショップに対して１申請になるので、〇〇オーナーで申請してあるから、開発も本番の両方カスタムできる！！
なんて思っていて、本番のコードが変わらない！！とあたふたしたエンジニアは私です！w

checkout.liquidでやっていること
では、そもそもcheckout.liquidでは、何をやっているのか？
実は、ファイルは一つしかありませんが、７つの処理をやってくれています。

・在庫の問題
カートの数量に対して、在庫が対応できるかの確認。利用可能なアイテムの数量でカートを更新する確認ボタンが表示されます。

・連絡先
顧客は自分の電子メールアドレスを入力し、顧客アカウントがストアで有効になっている場合はログインするオプションがあります。カートアイテムの配送が必要な場合は、配送先住所フォームが顧客に表示されます。それ以外の場合、顧客には請求先住所フォームが表示されます。

・配送方法
顧客は配送オプションを選択するか、配送情報を編集します。カートアイテムのいずれも出荷を必要としない場合、このステップはスキップされます。配送方法をスキップすることは、デジタル製品またはサービスを販売する販売者にとって一般的です。[配送情報の編集]をクリックすると、訪問者は[顧客情報]ステップに戻ります。

・支払方法
顧客は支払い方法を選択し、該当する場合は支払い情報を入力します。一部の支払いプロバイダーは、顧客に別のサイトで支払い情報を入力するように要求します。お客様は、このステップで別の請求先住所を指定することもできます。

・注文を確認する
チェックアウト設定 に基づくオプション。顧客は、[注文の完了]をクリックして、注文の合計、配送先住所と請求先住所、および支払いの詳細を確認します。
ストアが欧州連合で運営されている場合は、この手順が必要になることがあります。

・処理/転送
注文が処理されているとき、または顧客がオフサイトの支払いプロバイダーにリダイレクトされているときに顧客に表示される一時的なページ。この手順で表示されるメッセージは、チェックアウトの翻訳設定によって異なります。

・注文の状況
チェックアウトの最後のステップ。このステップは、注文が完了すると表示されます。

コードの内容
７つも処理をしてくれるので、とても複雑そうなコードがたくさん書かれていそうなイメージですが、実のところ至ってシンプルな構成になっております。
・デフォルトで54行のコードしかない。
・色々なコードはShopify側で読み込ませてる
・読み込まれている内容は、17種類。
・必須内容は、content_for_header、content_for_layout（チェックアウトプロセスの各ステップのフォームフィールドとコンテンツ）

結局どこまでカスタマイズできるの？
なかなか、核心にたどりつきませんが…。
じゃぁ、実際どこまでカスタムできるのか？
実は、いろんなカスタムができるのことは、できるのですが…。

・Shopifyのアップグレートに対して、手動でメンテナンスをする必要があるので注意
・内容が読み込まれた後に、JavaScriptを使用してコンテンツの変更
・必須またはオプションのチェックアウトオブジェクトによって生成されたコンテンツを編集することはできません。（一部例外あり、翻訳やテーマエディター）
・その他、注意事項いっぱい！！

カスタムはできるが、制約があり…あまりおすすめしないという感じの内容です。
特にアップグレードに対して、手動でメンテナンスを加えていく必要がありるところが、一番リスクが高いかと…。
アップグレードを見落としました、決済できませんでした…なんてことがあり得なくはない。

CSSのカスタマイズもできそう！
・少なくとも4つのチェックアウトページ、最大で6つのチェックアウトページがあるので、それを考慮してカスタマイズする。
・!importantは避ける
・hoverやdisabledへのスタイル当ても忘れずに。
・CSSスタイルタグでWEBフォントをダウンロードできる
色々カスタムはできそうだが、こちらもDOMの依存関係などを考慮し、Shopifyのアップグレードに対応していく必要がありそう。

まとめ

・checkout.liquidはPLUSプランのみ
・１ショップに１申請忘れないで！
・カスタムはなんでもできる…？
・でも、結局はShopify縛り
・アップグレードに対応していく必要があるので、トータル的なリスクを考えると大幅なカスタマイズは、しない方がいいかも。

PLUSプランだと、チェックアウトがカスタムできる！！と思ってはいましたが…。結局のところ、リスクや技術的なことを考えるのであれば、あまりカスタムはおすすめできません。という結論になりました。
どうしてもカスタムしたいのであれば、ヘッドレスで作成する方が安全そうです。
　
来週は、checkout.liquidより便利そうな３種の神器について勉強していきます！

あと、
ARCHETYPでは、一緒に働く仲間を募集してます。
少しでも気になった方は、こちらから気軽に応募してみてください！！！
業務委託の方も大歓迎です！！
応募待ってます！！
（エンジニアさん向けの記事も書いているので、よかったら見てください！）