2023.01.16[Mon]
[シリーズ連載] Shopify Post-Purchase Checkout Extension

Shopify Post-Purchase Extensionでレジ前販売を実装する コンポーネント紹介編 ① 〜見た目・入力〜

  • Shopify

目次

  • - remote-ui
  • - コンポーネント
  • - 表示・強調
  • - アクセシビリティ
  • - アクション・インプット
  • - 終わりに

この機能は既に実用可能ではありますが、執筆時点の2023年1月現在も「ベータ版」という位置付けであり、今後仕様が変更になる可能性があります。また、公式ドキュメントも随時更新されており、一部の表現やコードの内容が一致しない可能性があります。

エンジニアの茄子です。

前回は公式のチュートリアルに基づいてサンプルアプリを作成しました。( https://techlab.q-co.jp/articles/77/
今回はPost-Purchase Checkout Extensionで利用可能なコンポーネントを紹介します。
利用可能なコンポーネントは公式ドキュメントに掲載されていますが、Propsを変えた見た目などがわかるといいなと思う場合が多々あったためここで紹介したいと思います。

remote-ui

(Github: https://github.com/Shopify/remote-ui )
(Shopifyによる解説: https://shopify.engineering/remote-rendering-ui-extensibility )

コンポーネント紹介に入る前に remote-ui の仕組みについて触れておきます。
Post-Purchase Checkout Extension で使用できるコンポーネントは、Shopify が提供する remote-ui という仕組みで制限されています。
remote-uiは独自のコンポーネントAPI(コンポーネント集)を定義するための仕組みで、UIの定義とレンダリングを切り離し、3rd party (開発者)のコードを安全にShopifyのUIに組み込むことができます。迎え入れる側のUI(Shopifyストア)側からするとiframeのような役割となります。

通常、React等のコンポーネントはバンドル後のコードに(当然ながら)レンダリングも含まれていて、ブラウザがそれを実行してレンダリングされますが、remote-uiでは開発者側はUIの構成のみを行い、実際のレンダリングをするコードはそれを受け取ったremote-uiが行います。
Post-Purchase Checkout Extension で利用可能なコンポーネントを定義したものが冒頭に貼ったリンクですが、逆にここに定義されていないものは一切使えません。<div> 一つでもエラーになります。また、スタイルの変更も余白や位置関係含め、Propsとしてコンポーネントに定義されている選択肢のみです。

Shopifyはチェックアウト周りのカスタマイズについては特に慎重であり、Post-Purchaseについても自由なものを許してしまうと、品質を保ちづらくなるという側面もあると思われます。

コンポーネント

利用可能なコンポーネントを紹介していきます。コンポーネントとそのオプションによる違いを画像で載せつつ、注意点があれば説明を加えます。
あくまで紹介目的で見た目がメインとなりますので、すべてのパラメータ(Props)を確認したい場合は公式ドキュメントをご覧ください。
公式ドキュメント: https://shopify.dev/api/checkout-extensions/components

表示・強調

BuyerConsent

文章は固定です。

CalloutBanner
Heading
HeadingGroup
Image
Spinner

Tiles(次回紹介)で囲むとおかしくなるので注意。

Separator
Text
TextBlock
TextContainer

アクセシビリティ

HiddenForAccessibility

このコンポーネントで囲ったコンポーネントは、音声読み上げなどのアシスト機能(ユーザー補助機能)の対象から除外されます。

VisuallyHidden

このコンポーネントで囲ったコンポーネントは、アシスト機能がオンの時にのみ表示されます。

アクション・インプット

Button
ButtonGroup

Buttonの例をまるごと括るとこのようになります

Checkbox
Radio
Select
options
TextField
Form

onSubmit イベントハンドラを提供するためのラッパーです。加えて、Enterキーによるsubmitの挙動を変更できます。

FormLayout(+ FormLayoutGroup)

配置、行・列の割り方などは後に紹介するレイアウト系コンポーネントで基本的に行いますが、Form内ではこのコンポーネントと、同時に提供されるFormLayoutGroupでTiles無しで等間隔に配置してくれます。

終わりに

次回はレイアウト系コンポーネントをコードも交えて紹介します。

Share

  1. 01 Shopify Post-Purchase Extensionでレジ前販売を実装する 概要編 >
  2. 02 Shopify Post-Purchase Extensionでレジ前販売を実装する チュートリアル編 ① >
  3. 03 Shopify Post-Purchase Extensionでレジ前販売を実装する チュートリアル編 ② >
  4. 04 Shopify Post-Purchase Extensionでレジ前販売を実装する コンポーネント紹介編 ① 〜見た目・入力〜
  5. 05 Shopify Post-Purchase Extensionでレジ前販売を実装する コンポーネント紹介編 ② 〜レイアウト〜 >
Shopify Post-Purchase Extensionでレジ前販売を実装する コンポーネント紹介編 ② 〜レイアウト〜Shopify Post-Purchase Extensionでレジ前販売を実装する チュートリアル編 ②