Shopify Checkout UI extensions を使ってチェックアウト画面に商品追加ウィジェットを作る方法

import {
  reactExtension,
  BlockStack,
  Text,
  useApi,
  InlineLayout,
  Button,
  useApplyCartLinesChange,
  ProductThumbnail,
  BlockLayout,
  View,
  Heading,
  BlockSpacer,
  Select,
  Stepper,
  useCartLines,
} from "@shopify/ui-extensions-react/checkout";
import { CartLineChange } from "@shopify/ui-extensions/checkout";
import { useState, useEffect } from "react";

// https://shopify.dev/docs/api/storefront/latest/queries/productRecommendations
const GET_PRODUCT_RECOMMENDATIONS = `#graphql
  query GetProductRecommendations($id: ID!) {
    productRecommendations(productId: $id) {
      id
      title
      featuredImage {
        url
      }
      variantsCount {
        count
      }
    }
  }
`;

// https://shopify.dev/docs/api/storefront/latest/queries/product
const GET_VARIANTS = `#graphql
  query GetProductVariants($id: ID!, $first: Int!) {
    product(id: $id) {
      title
      variants(first: $first) {
        edges {
          node {
            id
            title
            price {
              amount
              currencyCode
            }
            image {
              url
            }
          }
        }
      }
    }
  }
`;

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

function Extension() {
  const lines = useCartLines();
  const cartLineChange = useApplyCartLinesChange();
  const { query } = useApi();

  const [recommendationProducts, setRecommendationProducts] = useState([]);
  const [productVariants, setProductVariants] = useState([]);
  const [loading, setLoading] = useState(true);
  const [expandedOptions, setExpandedOptions] = useState({});
  const [selectedVariants, setSelectedVariants] = useState({});
  const [quantities, setQuantities] = useState({});
  const [addingToCart, setAddingToCart] = useState({});

  // 商品データの取得を最適化した実装
  useEffect(() => {
    const fetchProductData = async () => {
      if (lines.length === 0) {
        setLoading(false);
        return;
      }

      try {
        setLoading(true);
        // 1番目の商品からおすすめ商品を取得
        const targetProduct = lines[0];

        // 1. おすすめ商品の取得
        const recommendationsResponse = await query(
          GET_PRODUCT_RECOMMENDATIONS,
          {
            variables: { id: targetProduct.merchandise.product.id },
            version: "2025-01",
          }
        );

        // 最大2つのおすすめ商品を取得
        const recommendedItems =
          recommendationsResponse.data.productRecommendations.slice(0, 2);
        setRecommendationProducts(recommendedItems);

        // 2. 並行してすべてのバリアント情報を取得
        const variantsData = await Promise.all(
          recommendedItems.map(async (product) => {
            const result = await query(GET_VARIANTS, {
              variables: {
                id: product.id,
                first: product.variantsCount.count || 1,
              },
              version: "2025-01",
            });
            return {
              product: result.data.product,
              recommendedProduct: product,
            };
          })
        );

        // 3. 取得したデータを整理
        const variants = variantsData.map((item) => item.product);
        setProductVariants(variants);

        // 4. 初期値の設定も並行して行う
        const initialVariants = {};
        const initialQuantities = {};

        variants.forEach((product) => {
          const firstVariantId = product.variants.edges[0]?.node?.id;
          if (firstVariantId) {
            initialVariants[product.title] = firstVariantId;
            initialQuantities[product.title] = 1;
          }
        });

        // 5. 状態を一度に更新
        setSelectedVariants(initialVariants);
        setQuantities(initialQuantities);
      } catch (error) {
        console.error("Failed to fetch product data:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchProductData();
  }, []);

  // オプション展開/折りたたみ処理
  const toggleOptions = (productId) => {
    setExpandedOptions((prev) => ({
      ...prev,
      [productId]: !prev[productId],
    }));
  };

  // バリアント選択ハンドラ
  const handleVariantChange = (productId, variantId) => {
    setSelectedVariants((prev) => ({
      ...prev,
      [productId]: variantId,
    }));
  };

  // 数量変更ハンドラ
  const handleQuantityChange = (productId, quantity) => {
    setQuantities((prev) => ({
      ...prev,
      [productId]: quantity,
    }));
  };

  // 特定の商品をカートに追加（バリアントと数量を指定）
  const addToCart = async (merchandiseId, quantity = 1, productId = null) => {
    try {
      // 追加中状態を設定
      if (productId) {
        setAddingToCart((prev) => ({ ...prev, [productId]: true }));
      }

      const newCartLine: CartLineChange = {
        type: "addCartLine",
        merchandiseId,
        quantity,
      };
      await cartLineChange(newCartLine);
    } catch (error) {
      console.error("Failed to add item to cart:", error);
    } finally {
      // 追加完了後に追加中状態を解除
      if (productId) {
        setAddingToCart((prev) => ({ ...prev, [productId]: false }));
      }
    }
  };

  // 特定の商品のオプション選択からカートに追加
  const addToCartWithOptions = async (productId) => {
    const variantId = selectedVariants[productId];
    const quantity = quantities[productId] || 1;

    await addToCart(variantId, quantity, productId);

    // 追加後にオプション表示を閉じる
    setExpandedOptions((prev) => ({
      ...prev,
      [productId]: false,
    }));
  };

  if (loading) {
    return <Text>読み込み中...</Text>;
  }

  if (recommendationProducts.length === 0) {
    return null;
  }

  return (
    <View>
      {/* タイトル */}
      <Heading level={3}>こちらの商品もご一緒にいかがでしょうか？</Heading>

      <BlockSpacer />

      {/* おすすめ商品を表示 */}
      {productVariants.map((product, index) => {
        const firstVariant = product.variants.edges[0]?.node;
        if (!firstVariant) return null;

        // バリアント数の取得
        const variantCount = product.variants.edges.length;
        const productId = product.title; // 製品IDとして名前を利用

        // 現在選択されているバリアント情報
        const currentVariantId = selectedVariants[productId] || firstVariant.id;
        const currentVariant =
          product.variants.edges.find(
            (edge) => edge.node.id === currentVariantId
          )?.node || firstVariant;

        // 現在の数量
        const currentQuantity = quantities[productId] || 1;

        // 現在の商品がカートに追加中かどうか
        const isAdding = addingToCart[productId] === true;

        return (
          <BlockLayout
            key={index}
            border={"dotted"}
            padding={"tight"}
            rows={
              variantCount > 1 && expandedOptions[productId]
                ? ["auto", "auto", "auto"]
                : ["auto", "auto"]
            }
            blockAlignment={"start"}
            spacing="base"
          >
            <InlineLayout columns={["auto", "fill", "auto"]} spacing={"base"}>
              {/* 画像 */}
              <ProductThumbnail
                source={
                  currentVariant.image?.url ||
                  recommendationProducts[index].featuredImage?.url ||
                  ""
                }
              />

              {/* 商品情報 */}
              <BlockStack spacing={"none"}>
                <Text>{product.title}</Text>
                {variantCount > 1 && <Text>{currentVariant.title}</Text>}
                <Text appearance="subdued">
                  {`${Math.floor(currentVariant.price.amount)} ${
                    currentVariant.price.currencyCode
                  }`}
                </Text>
              </BlockStack>

              {/* ボタン */}
              <View padding={"none"} blockAlignment={"center"}>
                <Button
                  onPress={() =>
                    expandedOptions[productId]
                      ? addToCartWithOptions(productId)
                      : addToCart(currentVariant.id, 1, productId)
                  }
                  loading={isAdding}
                  appearance="monochrome"
                >
                  追加する
                </Button>
              </View>
            </InlineLayout>

            {/* オプション展開ボタン */}
            {variantCount > 1 && (
              <Button kind="plain" onPress={() => toggleOptions(productId)}>
                {expandedOptions[productId]
                  ? "オプションを閉じる"
                  : "オプション"}
              </Button>
            )}

            {/* オプション選択UI */}
            {variantCount > 1 && expandedOptions[productId] && (
              <BlockLayout
                spacing="base"
                padding={["none", "base", "base", "base"]}
                rows={["auto"]}
              >
                <InlineLayout columns={["fill", "fill"]} spacing="base">
                  <Select
                    label="種類を選択"
                    value={currentVariantId}
                    onChange={(value) => handleVariantChange(productId, value)}
                    options={product.variants.edges.map((edge) => ({
                      label: edge.node.title,
                      value: edge.node.id,
                    }))}
                  />

                  <Stepper
                    label="数量"
                    value={currentQuantity}
                    onChange={(value) => handleQuantityChange(productId, value)}
                    min={1}
                    max={10}
                  />
                </InlineLayout>
              </BlockLayout>
            )}
          </BlockLayout>
        );
      })}
    </View>
  );
}