📁

【Shopify.dev和訳】Themes/Architecture/Layout/checkout.liquid

2021/09/17に公開

Shopify

themes

tech

この記事について

この記事は、Themes/Architecture/Layout/checkoutの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

checkout.liquid

チェックアウトプロセスは、checkout.liquidファイルによってレンダリングされます。theme.liquid とは異なり、checkout.liquidは自己完結型で、追加のテンプレートファイルをレンダリングしません。

チェックアウトプロセスには、以下のステップがあります。

ステップ	詳細
在庫問題	これは、カート内の 1 つ以上の商品が在庫切れの場合、または在庫レベルがお客様の要求を下回っている場合に表示されます。お客様には、利用可能なアイテムの数量でカートを更新する確認ボタンが表示されます。
お客様情報	お客様は E メールアドレスを入力し、ストアでカスタマーアカウントが有効になっている場合は、ログインするためのオプションが表示されます。カートの商品に送料が必要なものがある場合、お客様には配送先住所の入力フォームが表示されます。それ以外の場合は、請求先住所のフォームが表示されます。
配送方法	お客様が配送オプションを選択するか、配送情報を編集します。カートに入れた商品の中に配送が必要なものがない場合、このステップは省略されます。デジタル製品やサービスを販売しているマーチャントでは、配送方法を省略するのが一般的です。配送情報の編集をクリックすると、お客様情報のステップに戻ります。
支払方法	お客様は支払い方法を選択し、必要に応じて支払い情報を入力します。一部の決済代行会社では、お客様に別のサイトでお支払い情報を入力していただく必要があります。また、お客様はこのステップで別の請求先住所を指定することもできます。
レビュー順	チェックアウトの設定によってはオプションとなります。お客様は、Complete order（注文を完了する）をクリックして、注文合計金額、配送先住所、請求先住所、支払い情報を確認します。このステップは、ストアが欧州連合で運営されている場合に必要になることがあります。
加工/転送	注文を処理する際、またはサイト外の支払プロバイダにリダイレクトされる際に、お客様に表示される一時的なページです。このステップで表示されるメッセージは、お客様のチェックアウトの翻訳設定によって異なります。
注文状況	チェックアウトの最後のステップです。このステップは、注文が完了した後に表示されます。詳細はこちら

各ステップでは、商品、価格、税金、送料を表示した注文概要が右カラムに表示されます。この列は、モバイルのブレークポイントで折りたたまれます。

checkout.liquid にアクセス

チェックアウトには 2 つのバージョンがあります。

Standard - これはチェックアウトのデフォルトバージョンで、checkout.liquidへのアクセスが有効でない場合に使用されます。このバージョンは、Shopify がチェックアウトの新しいアップデートや機能をリリースすると自動的に更新されます。
Maintenance - このバージョンは、checkout.liquidへのアクセスが有効な場合に使用されます。これは、特定の時間に凍結されたStandardチェックアウトの安定バージョンです。つまり、自動的には更新されません。このバージョンのチェックアウトを使用している場合、以下の方法で新しいアップデートや機能にアクセスできます。
- checkout.liquidへのアクセスを無効にして、Standardバージョンに戻す。
- Maintenance版のアップグレードを待って、チェックアウトのアップグレード手順に従う。

チェックアウトオブジェクト

checkout.liquidでは、2 種類の Liquid オブジェクトが利用できます。

必要なオブジェクト

checkout.liquidには以下のオブジェクトが必要です。

{{ content_for_header }} - このオブジェクトは、Google Analytics、Shopify Analytics、Shopify アプリなどのための Shopify からのスクリプトを出力します。HTML タグの<head>と</head>の間に、このオブジェクトへの参照を追加する必要があります。
{{ content_for_layout }} - このオブジェクトは、チェックアウトプロセスの各ステップのフォームフィールドとコンテンツを動的に出力します。このオブジェクトへの参照は、<body>と</body>の HTML タグの間に追加する必要があります。

オプションオブジェクト

checkout.liquidには以下のオブジェクトがあります。

{{ locale }} - 現在選択されているロケールです。
{{ direction }} - コンテンツの CSS 方向を指定します。例えば、ltrやrtlなどです。
{{ page_title }} - ページのタイトルです。- ページのタイトル（通常は<title>タグで囲みます）。
{{ skip_to_content_link }} - メインコンテンツへのスキップを可能にするアクセシビリティのための隠しリンクです。
{{ checkout_html_classes }} - Shopify のデフォルト CSS を利用するために HTML タグに追加すべき文字列です。
{{ checkout_stylesheets }} - Shopify のチェックアウト用スタイルシートです。デフォルトのスタイルを置き換えるには大掛かりな作業が必要なので、独自のスタイルシートを持っていてもこれを削除しないことをお勧めします。
{{ checkout_scripts }} - Shopify の JavaScript ファイルです。
{{ content_for_logo }} - テーマのカスタマイズによって決定された、あなたのストアロゴ。
{{ breadcrumb }} - チェックアウトを完了するために必要なステップのリストです。ブレッドクラムはチェックアウト中の最終確認ステップでは表示されません。
{{ order_summary_toggle }} - モバイル端末で注文サマリーの表示・非表示を切り替えるために必要なマークアップです。
{{ content_for_order_summary }} - 並び順、割引、税金、合計などのコンテンツサマリーです。
{{ alternative_payment_methods }} - PayPal などの利用可能な決済方法の一覧です。
{{ content_for_footer }} - ストアポリシーのリスト、またはリストが空の場合は著作権表示です。
{{ tracking_code }} - Google Analytics でチェックアウトをトラッキングするための JavaScript コードです。
チェックアウトオブジェクト

チェックアウトコンテンツのカスタマイズ

上記のオブジェクトによって生成されたコンテンツは、必須であるかオプションであるかにかかわらず、レンダリングされる前に編集することはできません。唯一の例外は、翻訳設定、テーマエディタの設定、およびストアの管理画面で利用可能な一部のオプションです。

ステップ識別

チェックアウトはすべて 1 つのページで行われるため、お客様がプロセスのどの段階にいても、URL は同じままです。これを考慮して、以下の JavaScript オブジェクトを使用して、顧客がチェックアウトプロセスのどこにいるかを識別することができます。

Shopify.Checkout.step

お客様がチェックアウトのどのステップにいるかを示すオブジェクトです。次のいずれかの結果を返します。

contact_information
shipping_method
payment_method
processing - これは、payment_methodステップとthank_youページの間のステップです。
review - これは Shopify Admin で設定されるオプションのステップです。

Shopify.Checkout.page

お客様がどのタイプのページにいるのかを示すオブジェクトです。次のいずれかの結果を返します。

show - チェックアウトプロセスの様々なステップのためのページテンプレートです。
stock_problems - カートの商品に在庫上の問題がある場合に表示されるページです。
processing - お支払いの処理中に表示されるページです。
forward - PayPal または他のサードパーティゲートウェイからのページです。
thank_you

Shopify.Checkout.OrderStatus

Order Status ページにコンテンツを追加するために使用できるオブジェクトです。また、顧客がThank Youページにいるのか、Order Statusページにいるのかを判断するのにも役立ちます。

Order Statusページは、通常、Checkoutページとみなされます。Shopify.Checkout.stepとShopify.Checkout.pageオブジェクトが定義されているところでは、顧客が初めてそのページを訪れたときには、Thank Youページとみなされます。

顧客がページを再訪または再読み込みした場合、このCheckoutはorderに変換され、ページはOrder Statusページとして読み込まれます。Shopify.Checkout.stepとShopify.Checkout.pageオブジェクトは未定義で、Shopify.Checkout.OrderStatusオブジェクトが定義されています。

ページイベント

すべてのチェックアウトステップは、1 つのページに表示され、現在のステップに応じてコンテンツが動的に読み込まれます。このプロセスでは、2 つの主要なページイベントが発生します。

page:load

page:loadイベントは、各ステップのコンテンツが読み込まれる際に発生します。これは、ロード時にページにコンテンツを追加する際に使用すべきデフォルトのイベントです。

$(document).on("page:load", function () {
  // Add content
})

page:change

page:changeイベントは、お客様が同じチェックアウトステップにいるが、コンテンツの一部が変更された場合に発生します。たとえば、このイベントは、割引フォームが送信されたときに発生します。

page:loadだけでコンテンツを Document Object Model (DOM)に追加すると、page:changeイベントで上書きされてしまう危険性があります。この問題を回避するには、コンテンツを追加する際に両方のイベントを監視する必要があります。

$(document).on("page:load page:change", function () {
  // Add content
})

チェックアウト jQuery

チェックアウトには独自のバージョンの jQuery が含まれており、Checkout.$を使ってアクセスできます。

;(function ($) {
  $(document).on("page:load page:change", function () {
    // Add your customizations
  })
})(Checkout.$)

チェックアウトの属性

チェックアウトの属性は、カートの属性と同様の方法で取得することができます。

チェックアウト属性を取得するには、メインのチェックアウトフォームの中に、属性名が name="checkout[attributes][attribute-name]" である入力項目を入れます（attribute-name は希望する属性名）。

Example

<input type="text" name="checkout[attributes][custom attribute]">

チェックアウト属性を取得すると、既存のカート属性が削除されることに注意してください。この問題を回避する方法については、以下のカート属性の保持を参照してください。

カートの属性を保持する

チェックアウト属性を取得する際には、カート属性の値を含む checkout.attributes Liquid オブジェクトでカート属性を保持することができます。属性をループして、既存の属性データで定義された名前と値を持つチェックアウト属性入力として追加することができます。

このスニペットは、属性入力をメインフォーム内に配置するための JavaScript 関数の中に含める必要があります。

Example

{% for attribute in checkout.attributes %}
  <input type=hidden name="checkout[attributes][{{ attribute.first }}]" value="{{ attribute.last  }}">
{% endfor %}

checkout.liquid の編集に関するベスト・プラクティス

もしあなたが Shopify Plus に加入しているならば、checkout.liquidレイアウトにアクセスすることができます。ただし、このレイアウトに変更を加えた場合は、Shopify がアップグレードをリリースするたびに、手動でアップグレードする必要があります。

Document Object Model (DOM)への依存

チェックアウトの修正を実装する際の最大の注意点の一つは、コードがどれだけ DOM に依存しているかということです。

Shopify がチェックアウトのアップグレードをリリースすると、checkout.liquidの Liquid drops が出力するコンテンツが更新され、場合によってはcheckout.liquidのコンテンツ自体も更新されます。

これは、あなたのカスタマイズがそのコンテンツに依存している場合、新しいアップグレードで壊れてしまう可能性があることを意味します。あなたのチームの将来のサポート負債を減らすために、DOM 依存を最小限にすることが常に最善です。

カスタムコードの追加

変更を加える際には、特定のカスタマイズに関連するすべてのコードを 1 つのスニペットにまとめておくとよいでしょう。これにより、他のコードとの衝突のリスクが減り、コードが読みやすくなります。

また、変更を加えた際には、誰がいつ変更したのかを示すコメントを変更箇所の先頭に記載することをお勧めします。

Example

{% comment %} Added by Name from Company on September 21 2018 {% endcomment %}

killswitches の追加

checkout.liquidをカスタマイズすると、チェックアウトで問題や衝突が発生しやすくなり、売上に支障をきたす可能性があるため、カスタマイズした内容を killswitch（テーマ設定）で囲むのが良いでしょう。これにより、カスタマイズを一時的に無効にしてチェックアウトを迅速に機能させることができ、問題を解決するための時間を確保することができます。

一般的なカスタマイズ方法

一般的には、以下のようなアプローチでカスタマイズを行います。

killswitch のテーマ設定を作成する
カスタマイズのホストとなるスニペットを作成する。
作成したスニペットを killswitch で囲み、checkout.liquidに含める。

以下の例では、killswitch テーマ設定と、killswitch に基づいた条件で包まれたスニペットのインクルードを示しています。

config/settings_schema.json

{
  "type": "checkbox",
  "id": "checkout_customization",
  "label": "Enables a checkout customization"
},

layout/checkout.liquid

{% comment %}Added by Name at Company on September 21, 2018{% endcomment %}
{% if settings.checkout_customization %}
  {% render 'checkout-customization' %}
{% endif %}

あなたのスニペットでは、以下のようにすることができます。

チェックアウトのバージョンの jQuery を使用する
page:loadおよびpage:changeイベントを監視して、カスタマイズを設定する。
次のオブジェクトを参照して、カスタマイズを適切なステップまたはページにスコープします。
- Shopify.Checkout.step
- Shopify.Checkout.page
- Shopify.Checkout.OrderStatus

;(function ($) {
  $(document).on("page:load page:change", function () {
    if (Shopify.Checkout.step === "contact_information") {
      // Add content
    }
  })
})(Checkout.$)

フォーム送信

多くのチェックアウトのカスタマイズでは、お客様が次のステップに進む前にデータを検証する必要があります。メインフォームの送信ボタンには機能があるので、最も簡単な方法は、フォームのsubmitフィールドではなく、このボタンのclickイベントを監視することです。また、エンターキーの使用を監視し、その機能を送信ボタンのclickイベントに再ルーティングする必要があります。

(function($) {
  $(document).on("page:load page:change", function() {
    if (Shopify.Checkout.step === "contact_information") {
      $("DEFINE_YOUR_SUBMIT_BUTTON_SELECTOR").on("click", function(e) {
        e.preventDefault();

        if (data is valid) {
          $("DEFINE_YOUR_MAIN_FORM_SELECTOR").submit();
        } else {
          // Show an error
        }
      });

      $("DEFINE_YOUR_MAIN_FORM_SELECTOR").on("keyup", function(e) {
        if (e.keycode === 13) {
          e.preventDefault;
          $("DEFINE_YOUR_SUBMIT_BUTTON_SELECTOR").trigger("click");
        }
      });
    }
  });
})(Checkout.$);

一般的なカスタマイズ

以下の例は、一般的に要求されるカスタマイズです。これらはすべて、一般的なカスタマイズ方法を出発点としています。

アドレス欄に特定の文字を使用しないようにする

アドレスフィールドで特定の文字の使用をブロックするには、次のようなケースを考慮する必要があります。

blurイベントのような、関連するアドレスフィールドの更新。
フォームの送信イベント。

これらのケースでは、それぞれ検証を行います。たとえば、任意のフィールド値を正規表現（Regex）で比較することができます。データが有効でない場合は、エラーを表示し、デフォルトの機能を使用しないようにすることができます。

アドレス欄の文字数制限

アドレスフィールドの文字数を制限するには、以下の例のように、関連するフィールドにmaxlength属性を追加します。

$("DEFINE_YOUR_FIELD_SELECTOR").attr("maxlength", your_value)

maxlength属性は、追加の文字が入力されるのを防ぐだけです。ユーザーエクスペリエンスを向上させるために、お客様が文字数制限に達したときに表示されるメッセージを追加する必要があります。

必須の利用規約チェックボックスの追加

利用規約に同意するための必須チェックボックスを追加するには、ページ上にチェックボックスを作成し、フォームの送信イベントをフォローして、顧客が先に進めるようにする前にチェックボックスがチェックされているかどうかをチェックします。また、チェックボックスの値を保存するためにcheckout 属性を使用するのも良いアイデアです。

checkout.liquid での CSS スタイリング

テーマのcheckout.liquidファイルに CSS を追加することで、チェックアウトページのスタイルを強化することができます。checkout.liquidファイルに CSS を追加する際には、以下のベストプラクティスを考慮してください。

チェックアウトページ

チェックアウトのスタイルを決める際には、その構成ページを考慮することを忘れないでください。チェックアウトの設定にもよりますが、チェックアウトページは最低でも 4 つ、多くても 6 つあります。

BEM 構文

Checkout では、BEM 構文を使用して入れ子を最小限に抑えています。セレクタの深い入れ子は避け、ニーズに合った最もシンプルなセレクタを使用する必要があります。

例えば、注文概要内の商品名にスタイルを設定するには、次のようにします。

これの代わりに

.order-summary .order-summary__section .product_list .product_info .product__info__name {
  color: red;
}

これを使いましょう

.product__info__name {
  color: green;
}

!important は使わないでください。

チェックアウトスタイルシートはベーススタイルシートの後に読み込まれるので、すべてのプロパティに !important を追加する必要はありません。どうしても必要な場合に限って !important を使うようにしましょう。

ボタンの例

disabled、normal、hoverのすべての状態のボタンをデザインすることを検討してください。

クラスをカスタマイズして、テーマに合ったボタンスタイルを提供します。

主なブレークポイント

デフォルトのスタイルシートには 4 つのブレークポイントがありますが、これをスタイルシートで使用することができます。

Small：0px 以上 - メディアクエリを必要としない
Medium：750px 以上
Large: 1000px 以上
Large Desktop: 1300px 以上

カスタム Web フォントと追加スクリプト

checkout.liquid 内の CSS スタイルタグから、@font-face 宣言を使って、自分でホストしているウェブフォントを直接読み込むことができます。

External assets

Checkout では、お客様が安全に購入できるように、SSL 暗号化を使用しています。画像や追加コンテンツを読み込む場合は、これらのアセットを https:// で提供し、ページ上でレンダリングする必要があります。可能であれば、Shopify CDN を使用してすべてのアセットをホストしてください。

機能の検出

<html>要素にはいくつかのユーティリティクラスが含まれています。

Javascript: js/no-js は、ブラウザが javascript をサポートしているかどうかを知ることができます。

ブラウザと OS。例えば、OS X で Chrome を使用しているユーザーには、mac chrome.Please クラスがあります。

Modernizr です。Modernizr は、ブラウザが RGBA、複数の背景画像、ボックスシャドウ、疑似要素、インライン SVG などの特定の CSS プロパティをサポートしているかどうかを検出するために使用されます。

これらのクラスを使用することで、古いブラウザでのチェックアウト体験を向上させることができます。

フィールド、モーダル、および通知

checkout.liquidの CSS でカスタマイズできるその他のコンポーネントには、fields、modals、warnings、error messagesがあります。

フィールドの状態とクラス

テーブルのクラスを使って、3 つのフィールドの状態をテーマに合わせてスタイリングします。

Field state	CSS class
Default	クラスは不要
Focus	field--focus
Error	field--error

モーダル

ポリシー（返金、プライバシー、利用規約）や処理/転送のページは、フルスクリーンのモーダルで表示されます。

警告

ユーザーが購入を完了する前に、注文の合計金額が変更されたことを通知するには、警告を使用します。例えば、在庫が自動的に調整された場合に警告を追加することができます。

エラーメッセージ

ユーザーにエラーを伝えるには、明確なエラーメッセージを使用します。

Shopify アプリのご紹介

Discussion

ログインするとコメントできます