現代のショッピングサイトを構築する

7895 ワード
webdev astro shopify ecommerce テキストリンク
こんにちは!
それほど多くの新しいテクノロジーで遊ぶので、少しの時間!私たちが見たとき、Shopifyは彼らの拡大を見ましたStorefront API , Netlifyの開発者エクスペリエンスチームは、ショッピングサイトを構築することができるさまざまな方法のすべてを再生するためにそれにジャンプしました.
私は建物を1台で手に入れることにしたAstro と反応!
あなたが私がそれを構築した方法に興味があるならば、読書を続けてください.チームの残りの部分がどのようにして構築されたかを見たいと思うなら、ここでいくつかの素晴らしい記事があります.
  • Ekene, with Gridsome
  • Phil, with 11ty
  • Ben, with Nuxt
  • 角がついたタラ

    • 統一開始


    私たちのチーム全体はいくつかのServerless関数で始まりました.これらには以下の機能がありました.
  • 製品を得る
  • 商品一覧を見る
  • カートに製品を追加します(もし存在しない場合は新しいカートオブジェクトを作る)
  • カートを得る
  • カートから製品を取り外す
    • 私たちも同じようなスタイルをプロジェクトを共有していたので、私たちは、同じサイトの近くのレプリカを誰もが、ちょうど別の方法で構築を示すことができるように!
    あなたが機能を見たいと思うならば、あなたは我々のデモプロジェクトのどれにでも行くことができます、あるいはhere they are in the project we’ll talk about today .

    買い物の設定


    あなたはこれでどこに行く前にアカウントを起動する必要がありますよ!
  • クリエイトアShopify partner account あなたが1を持たないならば.
  • あなたのパートナーアカウントにログインしてShopify development store 実装をテストします.

  • Generate your API credentials ストアドフロントAPIへの認証要求を作成します.
  • あなたの店で製品と製品バリアントをつくってください.これは、私たちは常に空腹されているので、私たちは肉やチーズを使用してAPIをオフに取得ダミーの製品かもしれない.
  • あなたのShopify管理ダッシュボード上のプライベートアプリケーションを作成します.これは、クライアントのアプリケーションをどこに要求をするでしょうから表示されます.
    • 今、我々はすべてのキーでスクワットを得ることができます!

    飛行機の設置


    あなたのデータを埋めるためにAstroプロジェクトを作成する必要があります!前にアストロを使用していない場合は、私は非常にチェックアウトをお勧めしますthis introductory blog post ここでは、どのようにAstroプロジェクトの構造を説明し、どのように.astro ファイル仕事!

    起動変数と環境変数の設定


    クローンとコピーmy existing Shopify site project そうでなければ、このスタータープロジェクトで新鮮なスタートを切ることができます.

    既存のサイトプロジェクトを使用すると、このビルドは失敗します.環境変数を設定し、Netlify CLI , 前進する!
    先に行き、Aを作る.env ファイル(どのプロジェクトをクローン化したかに関係なく)、Shopifyから取得したキーとエンドポイントを設定します.
    SHOPIFY_STOREFRONT_API_TOKEN=example
SHOPIFY_API_ENDPOINT=https://exampleshopify/graphql.json
    今、あなたが私の既存のプロジェクトを使用するならば、あなたが走るとき、あなたのウェブサイトは動きますnpm start ! いくつかのコピーを変更しなければならないかもしれませんが、*あなたはすべて完了です*.おっと!行って、それをカスタマイズ!

    ゼロからのビルド


    あなたがゼロから始めた場合は、いくつかのより多くの手順があります.次のようになります.
  • 集合するsnowpack.config.mjs Serverless関数を動作させるには
  • プロジェクト、製品詳細、およびカート情報を取得するためのServerless関数を追加
  • あなたのサイトのページを作る
  • ページにデータを設定する

    • スノーパックの設置設定。MJS


    なぜ設定ファイルがここにあるのでしょうか.mjs ファイル.それはあなたが興味があればそれはあなた自身で研究することができますecmascriptモジュールシステムを使用するためです.
    以下のファイルを設定します.
    export default {
  env: {
    NETLIFY_URL: process.env.NETLIFY
      ? process.env.URL
      : 'http://localhost:8888',
  },
};
    これによって、我々がどの環境にいるのかを知ることができます(ローカル開発またはprod)、そしてNetLify CLIは現在、ローカルで、または生産で私達のServerlessな機能を実行するためにこれを使用することができます!このファイルに設定された変数はimport.meta.env .

    Shopify APIのServerless関数を追加する


    リンクしましたthese functions もっと早く.限り、あなたの機能を使用してこの機能をカバーすると、あなたが好きなように書くことができます.それらをクローンに無料!

    あなたのサイトのページを作る


    このサイトの「ページ」コンポーネントの3種類が必要ですsrc/pages/ フォルダ.アストロは、ページベースのルーティングを使用するので、これらのファイルを作ることによって、ルートが自動的に存在する!私は以下のように名前を付けました.
  • index.astro – ホームページ!
  • cart.astro – カートページ!
  • $product.astro – 各製品を定義するテンプレートページ!ページファイルが$ これは、単一のテンプレートから複数のページを生成するために使用するコレクションページタイプです.

    • ページにデータを設定する


    今、あなたはレースにオフです!各ページにデータを格納するには、以前に作成したServerless関数APIを問い合わせると、データを表示したいコンポーネントを作成できます.私は以前に私の例で反応成分を使用しました.
    のためにindex and cart ページは、アストロの様々なを使用することができますdata fetching オプション.たとえば、問い合わせをしたい場合はget-product-list エンドポイント、あなたのフェッチは次のようになります.
    let products = await fetch(`${import.meta.env.NETLIFY_URL}/.netlify/functions/get-product-list`)
  .then(res => res.json()).then((response) => {
    return response.products.edges
  });
    これは、$product あなたがAstroのものを使う以外は、ページCollections API それぞれの製品ページのルートを作成するには!

    完了です！


    ホロウ!すべてのことができる場合は、すべてのレースに自分のショッピングサイトを構築するオフに設定されて!
    あなたが私の例を見たいならば、あなたはそうすることができますcheck out the site here , and check out the source code on GitHub .
    グッドラック!
    WebAPIの使用
    React & Redux