ギャツビーとShopifyで電子商取引店を造ること

あなたはあなたのお気に入りのアイテムのために買い物をするサイトを訪れたことがありますので、多くのリダイレクトとローディングのように挫折した-とそれが付属している時間の不要な無駄.それとも、オンラインストアを構築するの挑戦に直面しているだけで開始する方法を見つけることができませんでした-と完了-それで?このチュートリアルはあなたのためだけです.
Gatsbyとそれを使用し始めて以来、そのコミュニティから来る素晴らしい愛を使用して来る相対的な容易さで、私は他のものを見つけることを決めたamazing things that come. with it . 最初に、私は電子商取引店とともに来ている非常にダイナミックな機能性について考えて、ギャツビーがどのように彼らのために静的なページを生成することができたかについて想像することができませんでした.
しかし、ねえ、私たちはギャツビーとNetlify . これらの日に何かを行うことができます.
私は、私が何を思い付くことができるかについて見るために、少しの掘削をし始めました.私はそれに関するいくつかの記事を見ました、しかし、彼らは大部分はそれほど人気のないテクノロジーまたはプロバイダーを使用していました.私は迅速かつ迅速に何かを必要とした.物事を開始するために大きなお尻のドキュメントを読んで私を必要としなかった何か.
私もこれに遭遇article from the Gatsby docs , しかし、私はまだ、それがストライプとの統合であったので、少し制限されていると感じました.私は多くの支払いプロバイダーとメソッドをサポートした解決を必要としました、そして、私は1つだけ考えることができました.買物.
私はギャツビーとShopifyによって供給された電子商取引店のための素晴らしいギャツビースターターを発見した.喜びスターターはすでにすべてのストレスの部分を取り出した.ここでホイールを再発明する必要はありません、そして、それが必要とするすべては微調整ですここで、そして、若干の再設計はあなたの味覚に合うために.あなたはスターターをチェックアウトすることができますhere on Gatsby または直接source code Githubについて
つの問題は、静的なオンラインショップを作成するときに発生する可能性があります.最初に、ダイナミックな製品目録.お客様の製品の可用性は、Shopifyストアでの在庫に応じて変更する必要があります.ギャツビーは、実際には在庫切れのリストのページを静的に構築されているので、あなたの製品が利用可能に表示されたくないでしょう.この問題については、上記のスターターは、すべてのソートされている.によると、

“The Shopify product inventory is being checked in realtime, therefore no rebuilding and redeploy is needed when a product goes out of stock. This avoids problems where products could still be available even though they’re out of stock due to redeploy delay.”

第二に、ページがすべてのギャツビーによって構築されるように、我々は製品の詳細を変更するときに何が起こるか、新しい製品を追加するか、既存の製品を削除するか?ビルドをトリガーするためにnetlifyにログバックする必要がありますか?いや!この問題については、我々はまた、それのための回避策を持っています.
多くのADOなしで、始めましょう.

買い物をする
まず、ログインする必要がありますShopify アカウントcreate one あなたがすでに持っていないならば.ログイン中に、新しい店を作成し、あなたが望む任意の名前を与えます.あなたはこの名前を必要とするでしょう、あなたがすぐに得るStorefrontアクセストークンに加えて.
ストアを作成すると、ストアにいくつかの製品を追加してください.GatsbyのGraphSQLは、ストアに製品がない場合、ビルド中にエラーをスローします.
次に、店頭トークンを取得しなければなりません.このため、あなたの店のアプリのセクションに移動し、プライベートアプリを管理し続けます.“プライベートアプリケーション名”の下に任意の名前で新しいプライベートアプリケーションを作成し、管理APIの下で読み取りアクセスとしてデフォルトのアクセス許可を残します.Shopify Storefront APIを有効にするには、“このアプリは、あなたのストレージフロントAPIを使用してアクセスすることができます”と言うボックスをチェックしてください.また、それらの対応する箱をチェックすることによって製品と顧客タグを読むアクセスを許可するようにしてください.次に、あなたに提供される店頭アクセストークンをコピーします.これは秘密ではなく、任意の公開可能なJavascriptファイルに置くことができます.

ギャツビーセットアップ
プロジェクトを起動するには、コマンドラインで実行します.

gatsby new gatsby-shopify-starter https://github.com/AlexanderProd/gatsby-shopify-starter

プロジェクトを起動し、依存関係をインストールするのに少し時間がかかります.完了したら、あなたのお気に入りのエディタでプロジェクトのフォルダを開き、オープン.env.development と.env.production ファイルのデフォルト値SHOP_NAME and SHOPIFY_ACCESS_TOKEN それぞれのストア名とアクセストークンにそれぞれ.それはすべてのセットアップのために行う必要があります.あなたが実行してこれをテストすることができますgatsby develop . このためには、製品を取得し、製品ページを構築するギャツビーのためのインターネットに接続する必要があります.すべてが完了すると、新しいeコマースストアをローカルホスト上で実行する必要があります.あなたが先に行くことができますし、あなたのデザインとユースケースに合わせて、プロジェクトに関連する変更を行います.それから、すべてはNetlifyに展開します.

自動ビルドの処理
NetLifyに展開されたストアでは、Shopifyストアで製品の変更を行うたびにNetLifyの自動ビルドを設定する必要があります.
これを行うには、NetLifyのビルドフックを設定する必要があります.POST リクエストは、そのような要求がURLをヒットしたときに自動的にビルドをトリガします.このためには、ビルドの＆ビルドのフックをビルドフックを追加します.フック名を入れ、ビルドを実行するgitから分岐を選択しますmaster . ヒット保存.保存すると、新しいフックのURLのエンドポイントが表示されます.それをコピーして、店に店の上に頭を戻してください.設定に移動します.イベントの場合は、製品の作成を選択し、JSONとして形式を残し、NetLifyビルドフックからURLをペーストし、Save Webhookをヒットします.製品削除と製品更新のためにもう一度2回これをしてください、そして、あなたが感じるどんな他のイベントもNetLifyから同じURLを使用している間、再構築のために必要かもしれません.
そして、あなたが追加/更新/削除製品として、NetLifyは変更を反映するために数分でサイトを再構築します.

For more stuff, like adding payment or delivery options, please do that in the Shopify dashboard. The Gatsby “front-end” just displays the info and preferences from the Shopify dashboard “back-end”.

余分なもの:あなたがShopifyのオンラインストアの販売チャンネルを必要としないのを見て(ギャツビーのアプリが目的を提供するように)、安全に販売チャネルとして削除することができます.これは、(またはあなたのクライアント)は、基本的なShopifyの計画の上で29ドル月額料金を避けるために、その代わりに、$ 9月間Shopify Lite計画を購読することができます.
PS :誰かがあなたのための店を設定する必要がある場合は、することができますhire me .