【Shopify】今週の振り返り3

久しぶりにCheckout extensionを触りました。
私の中では、Checkout extension、Checkout extensibility、Checkout UI extensionsと色々呼び名がありますが、どれを言っても伝わるので助かってます。笑

今回は、久しぶりに触ったので下記2点をまとめてみます。

• Checkout UI extensionsの導入

• テキスト、画像、リンクを挿入してみる

＊Mac OSを使用しています。
＊VSコードを使っています。

Checkout UI extensionsの導入

まずはドキュメントです。

Checkout UI extensions

英語はなかなかに理解が乏しいので、ご自身でドキュメントを読み解いていただきつつ、私の手法をご紹介します笑

コードを触る前に、ストアの準備をします。
Shopify パートナーのアカウントが既にある状態だとして、ご説明いたします。

開発用のテストストアを作成するのですが、注意点は1つ、
「ビルドバージョン > 開発者プレビュー > Checkout and Customer Accounts Extensibility」を選択してください。

それでは構築の準備をしていきます。
まず、ドキュメントには下記のコードを叩きなさいと言われていますが、私流に解説をしていきます。

npm init @shopify/app@latest
cd your-app
npm run shopify app generate extension

①自分の好きなところにフォルダを作る
→デスクトップでもどこでもOKです。
「checkout-test」などお好きな名前で、フォルダを作ります。
そのフォルダをVSコードにドラックアンドドロップします。

VSコードが開いたら、コマンド⌘ ＋ j でターミナルを開きます。

そして、ドキュメントに記載されていた、下記のコマンドを実行します。
npm init @shopify/app@latest

実行すると、色々聞かれます。
言語などはお好きなものを選んでいただいて構いませんが、今回は下記を選択しました。
Build a Remix app (recommended)
Javascript

新しいアプリですよと答え、アプリの名前を自由に決めてください。

ターミナルの動きが止まったら、最初に作ったchekout-testフォルダの中に、アプリの名前のフォルダができあがります。
アプリの名前のフォルダの中身を全てコピーし、最初に作成したcheckout-testフォルダの中にお引越しさせてください。
生成されたファイルたちを1階層上に上げてあげるイメージです。

するとVSコードが下記の状態になります。

これで、アプリフォルダの準備完了です。
サンクスページにテキストと画像、リンクを表示してみましょう。

npm run shopify app generate extension
コマンドを叩きます。

Discounts and checkout の Checkout UI を選択します。

extensionの名前と、使用する言語を決めます。
私は、名前を「thanks-element」とし、Javascript Reactで進めていきます。（TypeScript勉強中…）

すると、extensionsフォルダの中に、先ほど作成したthanks-elementが入ってきています。
作業するのはこのフォルダの中のsrc > Checkout.jsxと直下のshopify.extension.tomlファイルです。

呼び名がわからないのですが…このthanks-elementのこと「ブロック」と呼んでいきます。

ブロックには表示される場所を指定する必要があります。
これはターゲットと呼ばれています。
ドキュメント: https://shopify.dev/docs/api/checkout-ui-extensions#extension-targets

サンクスページに表示したいので、ドキュメントから、それらしき箇所を確認します。（https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview#supported-typ-locations）

今回はpurchase.thank-you.block.render を使用することにしました。

shopify.extension.tomlの「extensions.targeting」を「purchase.thank-you.block.render」に書き換えます。

下記リンクのコードをまるっとコピーして、Checkout.jsxを書き換えます。
https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/block/purchase-thank-you-block-render

その後、returnの内容を下記に書き換えてください

return (
    <BlockStack>
      <Text>テスト</Text>
    </BlockStack>
  );

ここまできたら、一旦サイトで確認してみましょう！
VSコードで shopify app dev コマンドを叩きます。

サイトを聞かれるので、最初に作成したサイトを選択してください。

ターミナルの箇所を選択した状態で英字入力にして、「p」を入力します。
すると、ブラウザーで何やら黒いページが開きます。
その中の 「App home」をクリックします。

サイトへのインストール画面が開きます。
インストールボタンをクリックして、下記ページが開けば、第一関門突破です！

このページは、「npm init @shopify/app@latest」を叩くと作成される、アプリのデフォルトのコードが反映されているものです。
このページは実際には、今やろうとしているチェックアウトの表示とは関係ないのですが…、無事にアプリがサイトにインストールされた証拠になります！

次は、先ほど作ったサンクスページ用のブロックが使用できるか確認します。

サイト管理画面 > 設定 > チェクアウト > カスタマイズ を開きます。

サンクスページのカスタマイズ画面でアプリブロックを追加します。

すると、「テスト」と表示されているはずです！

それでは、テキストや画像、リンクを好きな文字列に変えられるよう、コードを変更していきます。

shopify.extension.tomlに下記を追加します。

[extensions.settings]
[[extensions.settings.fields]]
key = "text"
type = "single_line_text_field"
name = "テキスト"

[[extensions.settings.fields]]
key = "image_src"
type = "single_line_text_field"
name = "画像リンク"

[[extensions.settings.fields]]
key = "url"
type = "single_line_text_field"
name = "URL"

 すると画像のように、テキストボックスが表示されます。

こちらも、さまざまなルールで追加できるものが決まっていますので、ドキュメントを確認してください

最後に、ここに入力した文字をサンクスページで表示する方法です。Checkout.jsxを下記に書き換えてください

import {
  BlockStack,
  reactExtension,
  Text,
  Link,
  Image,
  useSettings
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.thank-you.block.render',
  () => <Extension />,
);

function Extension() {
  const { text, image_src: image, url } = useSettings();

  return (
    <BlockStack>
      { text && <Text>{text}</Text> }
      {url ? (
        <Link to={url}>
          {image && (
            <Image source={image} />
          )}
        </Link>
      ):(
        image && (
          <Image source={image} />
        )
      )}
    </BlockStack>
  );
}

新しく、LinkとImageのコンポートを使用するので、importします。
コンポーネントについてこちらのドキュメントを確認してください。

useSettingsを使用して入力欄に入力したものを使用できます。
こちらもimportを行います。

const { text, image_src: image, url } = useSettings();

shopify.extension.tomlに書いた、keyで呼び出しを行います。
ただし、変数名に"_"は使用できないので、keyをimage_srcとした場合は、":"の後ろに新たに変数名を指定します。

これで、サンクスページにテキスト、画像、リンクの表示を行うことができました！
お知らせやキャンペーンページ、マイアカウントへの誘導を行ったりと色々活用できそうですね！

ただし、Shopify Plusでしか追加できない部分もありますので、こちらもぜひチェックを！

おまけ
今週はなんと2箇所のカフェと作業スペースで作業を行いました。
外での作業はやはり効率は落ちる気がしますが、人の目がある分とても集中できる感じがしました。
あと、何だか外でPC作業してると、できる人ふうな感じで、さらにやる気が出ます笑

ただ、普段はUS配列の外付けキーボードを使用しているのですが、PCがJIS配列…。これが本当に作業しづらい…
来年、春頃にMac book airの新しいのが出るのかなぁ、欲しいなぁと思いながら作業していました( ´∀｀)

来週も頑張ります！

---

Shopifyに特化したWEB制作会社で勤務しています。
Shopifyについての学びを発信中です。
記載されている内容をストアで使用する際は自己責任にてお願いいたします。