Next.js와 Shopify에서 가장 빠른 EC 사이트 만들기 ②

※이 기사는 Next.js와 Shopify에서 가장 빠른 EC 사이트 만들기 ①의 계속입니다.
아직 읽지 않은 사람은 먼저 전반 기사를 읽는 것이 좋습니다.

전반 : Next.js와 Shopify에서 가장 빠른 EC 사이트 만들기 ①
후반 : Next.js와 Shopify에서 가장 빠른 EC 사이트 만들기 ② ← 지금 여기

상품 상세 화면 작성

다음에 간단한 상품의 상세 화면을 작성합니다.

["pages/[id].tsx"]

type DetailProps = {
  product?: Product
  errors?: string
};

const DetailPage = (props: DetailProps) => {
  const {product, errors} = props;

  if (errors) { return <p>Error: {props.errors}</p> }
  if (!product) { return <p>Error: Product not found</p> }

  return (
    <Layout title={product.title}>
      <div>
        <p>{product.title}</p>
        <img src={product.images[0].src} height={200}/>
      </div>
    </Layout>
  )
}

export default DetailPage

이번에는 SSG에서 각각의 상품 페이지를 생성하므로 getStaticPaths와 getStaticProps를 사용하여 그 데이터를 취득합니다.

["pages/[id].tsx"]

export const getStaticPaths: GetStaticPaths = async () => {
  const products: Product[] = await client.product.fetchAll();
  const paths = products.map((product) => ({
    params: { id: product.id.toString() },
  }))
  return { paths, fallback: false }
}

export const getStaticProps: GetStaticProps<DetailProps> = async ({ params }) => {
  try {
    const id = params?.id;
    if(!id) {
      return { props: { errors: "not found" } };
    }
    const productRes = await client.product.fetch(id as string);
    const product = JSON.parse(JSON.stringify(productRes));
    return { props: { product: product } }
  } catch (err) {
    return { props: { errors: "unexpected error" } };
  }
}

마지막으로, 톱 페이지로부터 링크를 작성하면 완성입니다.

["pages/index.tsx"]

const IndexPage: React.FC<IndexProps> = ({ products }) => {
  console.log(products);
  return (
    <Layout title="Top">
      <h1>Hello Next.js 👋</h1>
      <ul>
        {
          products.map((product) => 
          <li key={product.id}>
+            <Link href="/[id]" as={`/${product.id}`}>
+              <a>
                {product.title}
                <img src={product.images[0].src} height={80}/>
+              </a>
+            </Link>
          </li>)
        }
      </ul>
    </Layout>
  );
}

링크를 눌러 상품 상세 화면에 가면 아래와 같은 화면이 표시되고 있다고 생각합니다.

http://localhost:3000/[商品ID]

구매 버튼 설치

그리고는 구입에의 도선을 준비해 주면 완료입니다.

이번은 최소한의 코드로 시험하고 싶기 때문에, 장바구니 페이지는 준비하지 않고, 상품 상세 화면에 직접 구입 버튼을 두고 싶습니다.

["pages/[id].tsx"]

const DetailPage = (props: DetailProps) => {
  const {product, errors} = props;
+  const [checkoutLink, setCheckoutLink] = useState("");

  if (errors) { return <p>Error: {props.errors}</p> }
  if (!product) { return <p>Error: Product not found</p> }
+
+  useEffect(() => {
+    client.checkout.create().then((checkout: any) => {
+      const variantsId = product.variants[0].id;
+      client.checkout.addLineItems(checkout.id, [{ variantId: variantsId, quantity: 1}])
+      .then((checkout) => {
+        console.log(checkout.lineItems); 
+        setCheckoutLink(checkout.webUrl);
+      });
+    });
+  }, []);

  return (
    <Layout title={product.title}>
      <div>
        <p>{product.title}</p>
        <img src={product.images[0].src} height={200}/>
      </div>
+      <Link href={checkoutLink}>
+        <button>購入する</button>
+      </Link>
    </Layout>
  )
}

처리로서는 useEffect 중에서 구입 처리의 단위가 되는 checkout 를 작성해, 현재의 상품 상세 화면에서 표시하고 있는 상품을 1 개 추가하고 있습니다.
이 checkout 를 장바구니처럼 사용할 수 있지만 처리를 단순화하기 위해 이러한 간단한 구현으로 하고 있습니다.
checkout에는 webUrl라는 속성이 있습니다.
이것은 Shopify의 사이트로 이동해 결산을 할 수 있는 페이지의 URL이 되고 있으므로, 이번은 이것을 이용합니다.

그리고, 주의점으로서 addLineItems 로 지정하는 상품의 ID는 product.id 는 아니고, product.variants[x].id 가 됩니다.
Shopify의 상품 데이터는, 사이즈나 색등을 다른 바리에이션으로서 가질 수 있어 그 ID가 됩니다.
이번에는 특히 바리에이션은 신경쓰지 않고, 최초의 바리에이션( product.variants[0].id )을 선택하고 있습니다.



이제 '구매' 버튼이 추가되었는지 궁금합니다.
이 버튼을 누르면 Shopify 사이트로 이동하여


https://nexjs-example.myshopify.com/52339802311/checkouts/[checkoutID]
이런 구매 페이지가 표시된다고 생각합니다.

요약

이상으로 Next.js와 Shopify에서 가장 빠른 EC 사이트를 만드는 내용으로하고 싶습니다!

처음으로 Shopify라는 EC 서비스를 사용해보고 고전하는 경우도 많았지만 어떻게든 구입할 수있는 곳까지 만들 수 있었다고 생각합니다.

Shopify는 셀프 호스팅만으로 EC 사이트를 구축할 수 있습니다만, 이번과 같이 편리한 API를 준비해 주고 있으므로, 독자적으로 JAMStack 구성이나 마이크로 서비스 구성 등에도 편입하기 쉬워지고 있다고 생각합니다.

이번은 Storefront API (by js-by-sdk)를 사용했습니다만, 그 밖에도 Shopify Buy Botton 를 사용하는 방법이나, Admin API등도 있기 때문에 할 수 있는 것은 아직 여러가지 있을 것 같습니다.

계속 Shopify에 대해 공부하고 싶습니다.

이번 소스 코드는 여기에 있습니다.
GitHub : htps : // 기주 b. 코 m / 노부 x42 / 네 xt 쇼피 fy 에어 mp ぇ