Shopify +次.モダン・コマース

あなたにbuildnextshop.comによってもたらされる記事
ここ数年で、我々はすべてのオンラインショッピングで非常に快適になっている.これは電子商取引ブランドを彼らのオンラインショッピング経験に大いに投資するように押しました.Shopifyの商人は、2020年と2021年に記録的な成長を見ている.多くの商店は、テーマから離れていて、ヘッドレスの電子商取引解決へのベンチャーに出発しています.
この記事では、次のようにShopify Graphical Storefront APIを使用してヘッドレスの電子商取引店を設定するための基礎を示しています.フロントエンドフレームワークとしてのJSとスタイルのための風変わりなCSS.
次.JSは、我々が電子商取引のための完全な合うものである静的サイト生成を使って燃えるような速い店をつくるのを許します.
始めましょう

1 .セットアップJSプロジェクト
次をセットアップする多くの方法があります.JSプロジェクトですが、このプロジェクトは最速です.

npx create-next-app -e with-tailwindcss build-next-shop
cd build-next-shop

2 . Shopifyパートナーアカウントの設定と新規店の作成
Shopify Partnersに移動し、あなたのShopifyパートナーアカウントを作成します.
次に、左側のストアタブに移動し、新しいストアを作成します.
他の利点の中で、パートナーアカウントを簡単に店舗を管理することができますし、クライアントに転送する前にそれらに働くには無制限の時間があります.

3 .次への買い物店を接続します.jsアプリ
あなたのストアのアプリのタブに移動し、下部に“プライベートアプリケーションを管理”リンクを押す

条件を受け入れる、あなたのプライベートアプリケーション“Next . js接続”とあなたのメールアドレスを入力します.その後、下にスクロールし、“このアプリは、ストレージフロントAPIを使用して、ストアフロントデータにアクセスできるように”チェックしてください.

クリエイト.環境変数次のルートフォルダのローカルファイル.jsアプリケーションとこれらの変数を追加します.

SHOPIFY_STOREFRONT_ACCESSTOKEN='storefront api access token'
SHOPIFY_STORE_DOMAIN='yourstore.myshopify.com'

(すべてのファイル/フォルダは表示されません)

build-next-shop
 ┣ node_modules
 ┣ pages
 ┣ public
 ┣ .env.local *
 ┗ package.json
....

インストールします.
移動242479152は、下にスクロールして、“フロント”のAPIアクセスのためのすべてのスコープを選択し、あなたのアプリケーションで使用する前に、クエリをテストするのに役立つShopify Graphqlアプリをインストールします.
(この手順を実行する前に、あなたのストアにいくつかのサンプル製品を追加し、それらがGraphiqlアプリケーション販売チャンネルで利用可能であることを確認してください).
Shopify GraphiQL App
ここで、GraphSQLアプリケーションを開き、「表」APIスキーマを選択し、クエリフィールドにペーストします.

{
  products(first:5) {
    edges {
      node {
        id
      }
    }
  }
}

おめでとう!あなたの最初の店頭APIクエリを作った!

5 .次の製品の取得JS店頭
インサイドネクスト.JSアプリは、ルートディレクトリにlibフォルダを作成し、Shopifyを作成します.その中のJSファイル.
(すべてのファイル/フォルダは表示されません)

build-next-shop
 ┣ lib
 ┃ ┗ shopify.js *
 ┣ node_modules
 ┣ pages
 ┣ public
 ┣ .env.local
 ┗ package.json
....

塗りつぶし.js

const domain = process.env.SHOPIFY_STORE_DOMAIN
const storefrontAccessToken = process.env.SHOPIFY_STOREFRONT_ACCESSTOKEN

async function ShopifyData(query) {
  const URL = `https://${domain}/api/2021-07/graphql.json`

  const options = {
    endpoint: URL,
    method: "POST",
    headers: {
      "X-Shopify-Storefront-Access-Token": storefrontAccessToken,
      "Accept": "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ query })
  }

  try {
    const data = await fetch(URL, options).then(response => {
      return response.json()
    })

    return data
  } catch (error) {
    throw new Error("Products not fetched")
  }
}

export async function getAllProducts() {
  const query = `
  {
  products(first: 25) {
    edges {
      node {
        id
        title
        handle
        priceRange {
          minVariantPrice {
            amount
          }
        }
        images(first: 5) {
          edges {
            node {
              originalSrc
              altText
            }
          }
        }
      }
    }
  }
}
`

  const response = await ShopifyData(query)

  const allProducts = response.data.products.edges ? response.data.products.edges : []

  return allProducts
}

ここで何をしているのか

問い合わせを受け入れるShopifyDataという関数を作成します.

ShopifyDataはSetify Enterprise GraphSQL APIに設定されたヘッダーを使用してポスト要求を行い、JSONレスポンスを返します.

ShopifyData関数は、データを戻り値AllProducts変数に等しく設定します.

6 .ホームページに製品を表示する
インデックスの内側.jsファイル

import { getAllProducts } from "../lib/shopify"

export default function Home({ products }) {

  return (
    <div className="bg-white">
      <div className="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
        <h2 className="text-2xl font-extrabold text-gray-900 mb-6">
          Products
        </h2>
        <div className="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
         {
            products.map(product => (
              <ProductCard key={product.node.id} product={product} />
            ))
          }
       </div>
      </div>
    </div>
  )
}

export async function getStaticProps() {
  const products = await getAllProducts()

  return {
    props: { products }, // will be passed to the page component as props
  }
}

ProductCardを作成します.コンポーネントと呼ばれる新しいフォルダのJSコンポーネント

build-next-shop
 ┣ components
 ┃ ┗ ProductCard.js *
 ┣ lib
 ┣ node_modules
 ┣ pages
 ┣ public
 ┣ .env.local
 ┗ package.json
....

その後、ProductCardの内部.js

import Link from 'next/link'
import Image from 'next/image'
import { formatter } from '../utils/helpers'

const ProductCard = ({ product }) => {
  const { handle, title } = product.node

  const { altText, originalSrc } = product.node.images.edges[0].node

  const price = product.node.priceRange.minVariantPrice.amount

  return (
    <Link
      href={`/products/${handle}`}
    >
      <a className="group">
        <div className="w-full bg-gray-200 rounded-3xl overflow-hidden">
          <div className="relative group-hover:opacity-75 h-72">
            <Image 
              src={originalSrc}
              alt={altText}
              layout="fill"
              objectFit="cover"
            />
          </div>
        </div>
        <h3 className="mt-4 text-lg font-medium text-gray-900">{title}</h3>
        <p className="mt-1 text-sm text-gray-700">{formatter.format(price)}</p>
      </a>
    </Link>
  )
}

export default ProductCard

ここで起こっていること

私たちは次のことによって提供される 機能を使用しています.JSは、当社のShopifyからGetAllProducts機能からすべての製品を準備します.jsファイル.

当社のホームページ機能に支柱として製品を渡す.

ProductCardを作成します.JSは単一の製品カードを表示します.

製品を写像して、ProductCardを表示する

マッピング.それぞれのためのjs.

getStaticProps
おめでとう!あなたはちょうど次のあなたの基本的な買い物を作成しました.JSの店頭.

次の手順
次に を使用している

ダイナミックな製品ページ.js関数.

は、カート州管理のために反応文脈を使っているカート機能を加えます.

バーセルに展開.

サンプルスタータープロジェクト:getStaticPaths
チェックアウトは、例のウェブサイトとhttps://github.com/iskurbanov/shopify-next.js-tailwindで我々は完全に生産準備ができてShopifyヘッドレスストアを次の使用して作成するチュートリアル.js!