構築したスタックに合い、手を加えないギフト機能
カスタムのカートドロワーにもギフトオプションは必要です。任意の要素にクラス名を付けるだけで、Gift Block がそこに表示され、ほかの部分には手を加えません。
テーマは公開したときのままです
ゼロから構築したテーマも、原形をとどめないほどカスタマイズしたテーマも大丈夫です。Gift Blocks はアプリ埋め込みで読み込まれるテーマアプリブロックなので、テーマのコードに管理すべきものを残さずにギフト機能を追加できます。
- 管理するスニペットはありません。テーマのファイルは公開したときのままで構いません。ギフト用のスニペットが絡んでいないので、自由にリファクタリングできます。
- テーマの更新は好きなタイミングで。Gift Blocks はテーマの更新後に自動で再配置されるので、次のリリースでギフト機能のチェックリストは不要です。金曜日のリリースでも大丈夫です。
- セクションが受け付ける場所にアプリブロックを。商品ページとカートページでは、Gift Blocks をほかのアプリブロックと同じように追加できます。受け付けないセクションには、Wrapped がブロックを自動で配置します。
独自のカートドロワーに Gift Block を
ドロワーを自作しましたか。ストアフロントの Gift Block には、そのための安定したフックが三つあります。ほとんどのストアでは不要で、使わなければ Wrapped が各ブロックを自動で配置します。
- 好きなクラス名。そのクラス名を持つ要素の中に Gift Block が表示されます。各明細行の下、チェックアウトボタンの上など、デザインに合わせた場所に置けます。モバイルとデスクトップの両方のマークアップに付けられます。
- 名前を付けた JavaScript イベント。お客様がギフトオプションを保存または削除すると、
documentとdocument.documentElementでディスパッチされます。カートのデータは含まれないので、リスナーでカートを取得し、ドロワーを自由に再描画してください。 - CSS 用の UUID。各ブロックの
uuid属性に入っているので、ドロワーの Gift Block はコンパクトに、カートページの Gift Block はゆったり表示できます。
Gift Blocks の対応先
- テーマ標準のドロワー。自動で配置されます。
- Shopify で人気のカートドロワーアプリ。ドロワーの読み込みが遅れても再構築されます。
- 自作のドロワー。指定したクラス名の場所に配置されます。
カートとチェックアウトに Shopify 標準の仕組み
Shopify をご存じなら、ギフト機能の仕組みもすでにご存じです。各ギフトオプションは価格、在庫、画像を持つ実際の Shopify 商品で、カートとチェックアウトは Shopify 標準の拡張ポイントで動作します。
- バンドルにはカートトランスフォーム。まとめて表示する場合、ギフトは Shopify のカートトランスフォーム関数で商品の明細行に含まれます。個別に表示する場合は独立した明細行になります。どちらでも、注文にはピッキングするすべての明細行が表示されます。
- ギフト割引にはディスカウント関数。ギフト商品の割引は自動で適用され、ほかの割引と一緒に Shopify の割引に並び、商品・注文・配送の割引と併用できます。コードの入力は不要です。
- Shopify Plus ならチェックアウトでも。チェックアウトの Gift Block はチェックアウト UI 拡張機能で、Shopify のチェックアウトエディターで配置し、チェックアウトのブランディングでスタイルが決まります。チェックアウトのデザインを変えれば、ブロックも追従します。
パイプラインがすでに見る場所にギフトデータを
ERP 連携や 3PL のインポートは、すでに Shopify の注文を読み込んでいます。ギフトの情報も同じ場所に入るので、新しいフィードをつなぐ必要はなく、倉庫システムにギフトメッセージを打ち直す人もいません。
- 明細行プロパティと注文属性。ギフトオプション、お届け先、贈り主、メッセージが、商品のギフト機能ではギフト対象の明細行に、注文のギフト機能では注文に入ります。
- マッピングどおりのキー。属性名はインポートに合わせられます。先頭にアンダースコアを付けると、注文には残したままお客様には非表示にできます。
- パーサーが見つけやすい概要。ギフトの概要は Liquid テンプレートから、二つの — Wrapped Gifting Attributes — 行の間に注文メモとして入ります。メモのほかの内容はそのまま残ります。
- ほかと共存できるタグ。タグは 🎁 Wrapped または独自のもので、注文の既存のタグに追加されます。
説明不要でクライアントにストアを引き渡し
次の開発者が引き継ぐテーマには当社のギフト用コードは含まれず、クライアントのチームは設定したデザインのまま Shopify 管理画面からギフト機能を運用できます。
- ステージング用テーマで準備完了。ステージング用テーマでギフト機能を設定すれば、そのテーマを公開した日から使えます。
- クライアントのチームが運用。ブロックの見た目と文言はギフトエディターで管理するので、「ギフトにする」を「ホリデー用にラッピング」に変えるのはクライアントの判断で、あなたへの依頼にはなりません。
- 付箋一枚ほどの引き継ぎメモ。クラス名でブロックを配置した場合は、対象の要素を伝えてください。そのマークアップはあなたのものだからです。ほかはすべて Shopify 管理画面にあります。
開発者からのよくある質問
次のテーマ更新でギフト機能が壊れませんか。
壊れません。Gift Blocks はアプリ埋め込みで読み込まれるテーマアプリブロックで、テーマのファイルは公開したときのままで構いません。ブロックはテーマの更新後に再配置されます。引き継ぐ必要があるのは、ご自身で追加したマークアップだけです。クラス名が指す要素は、新しいバージョンにも必要です。
自作のカートドロワーに Gift Block を置けますか。
はい。ドロワー内の要素に好きなクラス名を付けると、その中に Gift Block が表示されます。商品のギフト機能では、要素を明細行のループ内に置くと、商品ごとにブロックが表示されます。モバイルとデスクトップのマークアップが別々でも、両方にクラス名を付けられます。
JavaScript イベントにカートのデータは含まれますか。
含まれません。お客様がギフトオプションを保存または削除すると、Wrapped は名前を付けたイベントを document と document.documentElement でディスパッチします。それだけです。リスナーでカートを取得して独自のコードを実行し、たとえばページを再読み込みせずにカスタムドロワーを再描画できます。
Gift Block のどの部分にコードで依存できますか。
三つです。指定したクラス名、名前を付けたイベント、ブロックの uuid 属性にある UUID です。Gift Block 内のマークアップは含まれないので、この三つを使って構築し、見た目はギフトエディターに任せてください。
ギフト注文から ERP や 3PL のインポートには何が渡りますか。
通常の Shopify の注文データです。ギフトオプション、お届け先、贈り主、メッセージは、商品のギフト機能では明細行プロパティ、注文のギフト機能では注文属性になり、名前はインポートに合わせられます。ギフトの概要は Liquid テンプレートから、二つの — Wrapped Gifting Attributes — 行の間に注文メモとして入り、🎁 Wrapped タグまたは独自のタグが注文のタグに追加されます。プロパティと属性は注文作成と同時に入ります。メモの概要とタグは、その後数分以内に追加されます。
チェックアウトの Gift Block のスタイルは変えられますか。
チェックアウトのブランディングで変えられます。Shopify Plus では、チェックアウトの Gift Block はチェックアウト UI 拡張機能で、Shopify のチェックアウトエディターで各商品の下または注文ごとに一度配置し、設定済みのチェックアウトのブランディングでスタイルが決まります。
… Before we had even paid a cent for Wrapped, Adam answered questions, got into the nitty-gritty of coding and integration with our web developer. …