💳

【Shopify.dev和訳】Apps/Checkout/Post-Purchase/Build extension

2021/09/12に公開

Shopify

apps

tech

この記事について

この記事は、Apps/Checkout/Post-purchase/Build an extensionの記事を和訳したものです。

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

Shopify アプリのご紹介

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

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

購入後のチェックアウト拡張機能の構築 | Building a post-purchase checkout extension

このチュートリアルでは、購入後のチェックアウト拡張機能の基本的な例を作成する方法を学びます。購入後のチェックアウト拡張機能の制限や注意点などの一般的な情報については、概要を参照してください。

条件 | Requirements

パートナーアカウントと開発ストアを作成済み。
開発ストアには拡張機能をテストするための製品がいくつか用意されている。
開発ストアでテスト注文を行うことができる。
公開アプリまたはカスタムアプリを作成済み。

ステップ 1: 拡張機能の作成 | Step1: Create the extension

Shopify CLI で、以下のコマンドを実行して、購入後の拡張機能用のファイルを作成します。

Terminal

shopify extension create

Checkout Post Purchase 拡張機能を作成するには、以下の手順に従ってください。拡張機能が作成されたら、拡張機能のスクリプトの中身（src/index.jsまたはsrc/index.tsのいずれか）を以下のコードで置き換えます。

Checkout::PostPurchase::ShouldRender は、購入者がチェックアウトの支払いページに到達したときに実行され、購入後のページを表示するかどうかを判断します。Checkout::PostPurchase::Render は、購入者が支払い情報を送信した後に実行され、レンダリングされるべき UI コンポーネントを返します。

src/index.jsx

import { extend, render, useExtensionInput, BlockStack, Button, Heading, Image } from '@shopify/post-purchase-ui-extensions-react';

extend('Checkout::PostPurchase::ShouldRender', async () => {
  return { render : true };
});

render('Checkout::PostPurchase::Render', () => <App />);

export function App() {
  const {done} = useExtensionInput();
  return (
    <BlockStack spacing="loose" alignment="center">
      <Heading>My first post-purchase extension</Heading>
      <Button submit onPress={done}>Click me</Button>
    </BlockStack>
  )
}

Vanilla

src/index.js

import { extend, BlockStack, Button, Heading, Image } from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::ShouldRender', async () => {
  return {render: true};
});

extend('Checkout::PostPurchase::Render', (root, {done}) => {
  root.appendChild(
    root.createComponent(BlockStack, {spacing: 'loose', alignment: 'center'}, [
      root.createComponent(Heading, {}, 'My first post-purchase extension'),
      root.createComponent(Button, {onPress: done}, 'Click me'),
    ])
  );
});

ステップ 2: 拡張機能のテスト | Step2: Test the extension

購入後のライブのチェックアウト拡張機能は Shopify によってホストされ、提供されていますので、セットアップとテストの間は、ローカルのチェックアウト拡張機能をチェックアウトに提供するために Shopify のブラウザ拡張機能を使用する必要があります。

ブラウザ拡張機能は、テスト中にチェックアウトの URL を自動的に更新します。

Shopify ChromeまたはFirefoxブラウザ拡張をインストールしてください。
Shopify CLI で、以下のコマンドを実行します：

Terminal

shopify extension serve

このコマンドは、次のステップで使用する URL を返します。

ブラウザの拡張機能の設定で、shopify extension serveがコンソールに出力する Script URL を入力し、Partner Dashboardにある API Key を入力します。

開発ストアでテスト注文を行い、チェックアウトのステップを実行します。購入後の UI は、支払いステップの後、サンキューページの前に表示されます。

ステップ 3: 拡張 UI の構築 | Step3: Build the extension UI

これらの購入後のチェックアウト拡張機能の UI コンポーネントは Shopify によって管理され、チェックアウトが高速で、モバイル用に最適化され、Shop Pay と統合されるようになっています。拡張機能の構築を終了するには、データのプリフェッチを追加し、UI を完成させる必要があります。

Checkout::PostPurchase::ShouldRender を使用してデータを事前にフェッチし、拡張機能がすばやく読み込まれるようにします。fetchPostPurchaseData 関数は、モックデータを返し、storageオブジェクトに保存します。このデータは、UI のレンダリング時に使用されます。次のサンプルコードでは、拡張機能にデータのプリフェッチ機能を追加する方法を示しています。

src/index.jsx

import { extend, render, useExtensionInput, BlockStack, Button, Heading, Image } from '@shopify/post-purchase-ui-extensions-react';

async function fetchPostPurchaseData() {
  // ここでは、データを取得するためにアプリのサーバーにリクエストを行います
  return {
    productTitle: 'Fertilizer',
    productImageURL: 'https://cdn.shopify.com/s/files/1/0551/4084/3576/products/fertilizer_95d61198-8f34-4d2e-85f7-97f3a8d994c5_320x320@2x.jpg',
  };
}

extend('Checkout::PostPurchase::ShouldRender', async ({storage}) => {
  const postPurchaseData = await fetchPostPurchaseData();
  await storage.update(postPurchaseData);

  return { render : true };
});

render('Checkout::PostPurchase::Render', () => <App />);

export function App() {
  const {done, storage} = useExtensionInput();
  const {productTitle, productImageURL} = storage.initialData;
  return (
    <BlockStack spacing="loose" alignment="center">
      <Heading>{productTitle}</Heading>
      <Image source={productImageURL}/>
      <Button submit onPress={done}>Click me</Button>
    </BlockStack>
  )
}

Vanilla

src/index.js

import { extend, BlockStack, Button, Heading, Image } from '@shopify/post-purchase-ui-extensions';

async function fetchPostPurchaseData() {
  // ここでは、データを取得するためにアプリのサーバーにリクエストを行います
  return {
    productTitle: 'Fertilizer',
    productImageURL: 'https://cdn.shopify.com/s/files/1/0551/4084/3576/products/fertilizer_95d61198-8f34-4d2e-85f7-97f3a8d994c5_320x320@2x.jpg',
  };
}

extend('Checkout::PostPurchase::ShouldRender', async ({storage}) => {
  const postPurchaseData = await fetchPostPurchaseData();
  await storage.update(postPurchaseData);

  return {render: true};
});

extend('Checkout::PostPurchase::Render', (root, {done, storage}) => {
  const {productTitle, productImageURL} = storage.initialData;

  root.appendChild(
    root.createComponent(BlockStack, {spacing: 'loose', alignment: 'center'}, [
      root.createComponent(Heading, {}, productTitle),
      root.createComponent(Image, {source: productImageURL}),
      root.createComponent(Button, {onPress: done}, 'Click me'),
    ])
  );
});

データのプリフェッチを追加した後、購入後のページは以下のようにレンダリングされます：

次のステップ | Next steps

アップセルの例：チェックアウト拡張機能を使った購入後のアップセルの作成方法。
購入後のアップセルのガイドライン：マーチャントとバイヤーのための購入後の拡張機能を作成するためのガイドライン

Shopify アプリのご紹介

Discussion

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