Hack'z Jewel

▷ Gatsby.js の導入

はい、これで終わり！

npx gatsby new

TypeScriptが使いたかったらこのコマンドも叩いてね！

yarn add -D typescript

▷ Shopify の導入

いろいろ書こうと思ったけど、こっちの方がわかりやすかったのでこの記事を参考にしてね！

自分だけのECサイトを作成! Shopify × Gatsby

▷ カート機能の実装

上記の記事通りに手を動かせば Shopify × Gatsbyで作るECサイトのセットアップは完了したはずなので、 今回は一歩先に進んだ 「カート機能」 を実装しようと思います！

以下のコードをコピペしてgetCartItemsを動かすと、カートに追加したデータを簡単に取得することができます🛒

※ envファイル内の値や変数名は各自の環境に合わせて修正してください🙇‍♂️

getCartItems.tsx
import Client from "shopify-buy";

const client = Client.buildClient({
  domain: process.env.GATSBY_SHOPIFY_STORE_URL ?? "",
  storefrontAccessToken: process.env.GATSBY_STOREFRONT_ACCESS_TOKEN ?? ""
})

export const getCartItems = async() => {
  // Checkoutを生成する
  // 公式ドキュメント：https://github.com/Shopify/js-buy-sdk#creating-a-checkout
  const newCheckout = await client.checkout.create();

  // 作成した New Checkout に Shopify 側で保存されているデータをfetchする
  const existingCheckout = await client.checkout.fetch(newCheckout.id);

  // lineItem にカートに追加したアイテムが反映される
  console.log(existingCheckout.lineItem)

  return existingCheckout
}

ここまできたら、あとは取得したデータを使ってよしなにやるだけです！

今回はただデータを表示するだけではつまらないので、ECサイトではよくアレを実装していきます！！！

Header.tsx
import * as React from "react";
import { useState, useEffect } from "react";
import { Link } from "gatsby";
import { css } from "@emotion/react";
import { getCartItems ] from "../getCartItems.tsx"

export const Header = () => {
  const [cartList, setCartList] = useState(null);

  useEffect(() => {
    const setUp = async () => {
      const data = await getCartItems();

      if(!data) return false;

      setCartList(data);
        } catch (e) {
          console.log(e);
        }
      };

    setUp();
  }, []);

  let isBuying;

  if (
    cartList.cart.lineItems &&
    cartList.cart.lineItems.length > 0
  ) {
    isBuying = css`
      position: relative;

      &::after {
        content: "";
        width: 8px;
        height: 8px;
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 4px;
        background: ${colors.green.lighten};
      }
    `;
  }

  return (
    <header>
      <nav>
        <Link to="/">
          Hackz Jewel
        </Link>
        <button css={isBuying}>
           <カートのアイコン />
        </button>
      </nav>
    </header>
  );
};

完成イメージはこんな感じ↓↓ カートに商品が追加されたら、よくあるマークが追加されるんだぜ！！！