Shopify Post-Purchase Extensionでレジ前販売を実装する　機能拡張編① 〜ランダム商品〜

type CollectionResponse = {
  collection: {
    id;
    title: string;
    products: {
      nodes: Product[];
    };
  };
};

app.get("/offer", async (req: Request, res: Response) => {
  console.log(`/offer`, new Date());

  const query = gql`
    query ($collectionId: ID!) {
      collection(id: $collectionId) {
        title
        products(first: 10) {
          nodes {
            id
            title
            featuredImage {
              url
            }
            descriptionHtml
            variants(first: 3) {
              edges {
                node {
                  id
                  price
                  compareAtPrice
                }
              }
            }
          }
        }
      }
    }
  `;

  const result = await graphQLClient.request<CollectionResponse>(query, {
    collectionId: `gid://shopify/Collection/274800705621`,
  });

  const collection = result.collection;
  const products = collection.products;

  const initialData = products.nodes.map((product, i) => {
    const variant = product.variants.edges[0].node;

    return {
      variantId: variant.id.split("gid://shopify/ProductVariant/")[1],
      productTitle: product.title,
      productImageURL: product.featuredImage.url,
      productDescription: product.descriptionHtml.split(/<br.*?>/),
      originalPrice: variant.compareAtPrice,
      discountedPrice: variant.price,
    };
  });

  res.send(initialData);
});

    query ($productId: ID!) {
      product(id: $productId) {
        ...

{
  variantId: variant.id.split("gid://shopify/ProductVariant/")[1],
  productTitle: product.title,
  productImageURL: product.featuredImage.url,
  productDescription: product.descriptionHtml.split(/<br.*?>/),
  originalPrice: variant.compareAtPrice,
  discountedPrice: variant.price,
};

curl http://localhost:8077/offer

extend("Checkout::PostPurchase::ShouldRender", async ({ storage, inputData }): Promise<{ render: boolean }> => {
  console.log('Shouldrender hook');
  // 購入金額
  const initialPurchasePrice = parseInt(inputData.initialPurchase.totalPriceSet.presentmentMoney.amount, 10);
  // コレクション取得
  const postPurchaseOffer: UpsellVariant[] = await fetch(
    'http://localhost:8077/offer', {}
  ).then((res) => res.json());

  // 初期購入金額の半分以下の商品を候補にする
  const candidateItems = postPurchaseOffer.filter((item) => {
    const originalPrice = parseInt(item.originalPrice, 10);
    return initialPurchasePrice / 2 > originalPrice;
  })

  //候補が無い場合はPost-Purchase画面を表示せずにThankyou画面へ
  const render = candidateItems.length > 0;

  if (render) {
    // 候補からランダムに
    const rand = Math.floor(Math.random() * 100) % candidateItems.length;
    const pickedItem = candidateItems[rand];

    // Saves initial state, provided to `Render` via `storage.initialData`
    await storage.update(pickedItem);
  }

  return {
    render,
  };
});

  const render = candidateItems.length > 0;