見出し画像

Shopify Storefront APIで作る、フォーム一体型LPの構築について

TALO@Shopifyアプリエンジニア

Storefront API ×フォーム一体型LP


サブスク紹介LPなどでよく使われるフォーム一体型ランディングページを、Shopify Storefront APIを用いて開発するサンプルが、Shopifyディスカッションにて紹介されていました。

Private AppによるStorefront APIを使った独自UI構築のサンプルコード

Storefront APIの使い方サンプルです。販売チャネル用途のPublic appではなくて、マーチャントが自身のストアのUXをカスタマイズするためのPrivate appとして使う用途として作成しています。

One pager checkout は、日本でニーズの高い、LP+フォーム一体型のUXを構築するためのサンプルです。

Junichiokamuraさんの投稿

今回はこちらのソースコードを手元で動かしてみます。

開発環境構築

Githubページからソースをクローンし、READMEにそって初期構築を行います。必要なのは、自身のサイトドメインと、apiアクセストークンの二つです。ターミナルからエクスポートします。

以下二つの情報をエクスポート

% export SHOPIFY_STOREFRONT_ENDPOINT=https://YOUR_MYSHOPIFY_DOMAIN/api/graphql.json
% export SHOPIFY_STOREFRONT_TOKEN=COPIED_TOKEN_FROM_YOUR_PRIVATE_APP


そして、http://localhost:3000/ でサーバーを起動します。

デフォルトページは、one_pagerアプリについての概要が記載されています。

キモとなるのはこの部分

/one_pager?handle=YOUR_PRODUCT_HANDLE

One pager checkout by custom UI. The product handle is: "XXX" of https://YOUR_MYSHOPIFY_DOMAIN/products/XXX

つまり、?handle=の部分に、対象の商品のhandleコードをクエリセットすればよさそうです。

ハンドルコードは管理画面の商品管理ページから取得できます。

URLハンドルのproducts/以降の文字列ですね。

そして、ハンドルコードをクエリセットして送信してみます。今回はテスト商品を指定してみました。

http://localhost:3000/one_pager?handle=sample-item にアクセスします。

すると、この商品に特化したフォーム一体型LPが表示されました。


実際のページがこちら。

フォーム一体型LPのサンプル

商品画像と、その下に購入フォームが1画面内に表示されていますね。
フォーム内容としては

  • 購入数

  • メールアドレス

  • 氏名

  • 配送先住所

  • 配送料

  • 購入時コメント

が入力可能です。その他、Shopifyサイトのオリジナル商品ページへのリンクも表示されており、サイトへのアクセス経路も確保できます。

もちろん、デザインのスタイルは設定されていないので味気ないUIとなっていますが、ピュアHTMLで実装されているので、cssの追加も可能ですし、Reactなんかを使ってよりリッチなUIUXを実装することも可能です。
住所の入力補完や、クロスセルの表示なんかもできそうですね。

そして『Buy now!』ボタンクリック後はフォームの入力値を引き継いでチェックアウトページに移動します。

Buy Nowボタンクリック後の遷移先ページ


今回は、Private AppによるStorefront APIを使った独自UI構築のサンプルコードの記事を参考に、フォーム一体型LPの構築をやってみました。

Shopify 関連記事


参考
Private AppによるStorefront APIを使った独自UI構築のサンプルコード


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
TALO@Shopifyアプリエンジニア
Shopifyアプリを開発しています。カスタムアプリや、ストアフロントの開発を得意としています。 お問い合わせ: https://forms.gle/B3BWQX2Hk1aSorpf8