【Shopify】今週の振り返り4

先週に引き続き、Checkout extensionについてまとめていきたいと思います。

• Checkout UI extensionsで定期購入時のトリガーを作ってみる

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

Checkout UI extensionsの導入

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

https://shopify.dev/docs/api/checkout-ui-extensions

定期購入時にXXXを表示する…って結構需要があるのでは？
と思ったので、ご紹介させていただきます！

今回はチェックアウトページを対象にしたいと思います。

前回と同じストア、アプリを使用し、ブロックを追加します。

前回の記事はこちらからご確認ください！

まずは新しいブロックを作成します。
前回も使用した以下のコマンドをターミナルで叩きます。

npm run shopify app generate extension

Checkout UIを選択した後に、ブロックの名前と使用する言語を決めます。

コード

カートに入っている商品が定期商品であるかのチェックは以下のように行うことができました。

import React, { useEffect, useState } from "react";
import {
  reactExtension,
  BlockStack,
  Text,
  useApi
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.checkout.block.render", () => (
  <Extension />
));

function Extension() {
  const { lines } = useApi();
  const [hasSubscription, setHasSubscription] = useState(false);

  useEffect(() => {
    const subscriptionExists = lines.current.some(
      (lineItem) => lineItem.merchandise?.sellingPlan?.id
    );
    setHasSubscription(subscriptionExists);
  }, [lines]);

  return (
    <BlockStack>
      {hasSubscription ? (
        <Text>定期便商品が含まれます</Text>
      ) : (
        <Text>定期便商品は含まれません</Text>
      )}
    </BlockStack>
  );
}

解説

このコードで、カートに入っている商品を取得できます。

const { lines } = useApi();

一度以下のように記載してみてください。

  lines.current.forEach((lineItem) => {
    console.log("lineItem Id", lineItem);
  });

すると、lineItemsがどのようなデータを持っているのか、コンソールで確認することが可能です。
定期商品は、sellingPlanというデータを持つため、このデータがあれば、カートに定期商品が入っているということになります！

今週も無事に更新できました！
ついでに今週は特に外では作業せず…
来週はどこかに行ってみようかなと思っています！！

---

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