jamstack ecommerceのダウンロード-Jamstack jamstack ecommerceソースコードのダウンロード

jamstack ecommerce

AI ソースコード

1.0.0

ダウンロード

ジャムスタックeコマース次へ

Jamstack Ecommerce Nextは、next.jsを使用して、完全に構成可能なeコマースサイトで迅速に立ち上がって実行する方法を提供します。

箱から出して、このサイトはproviders/inventoryProvider.jsのプロバイダーからの完全な静的データを使用します。このプロバイダーを更新して、 getInventory関数の呼び出しを変更することにより、実際のAPIからデータを取得できます。

ライブプレビュー

ライブプレビューを表示するには、ここをクリックしてください。

その他のJamstack eコマースページ

カテゴリビュー

アイテムビュー

カートビュー

管理パネル

はじめる

プロジェクトをクローンします

$ git clone https://github.com/jamstack-cms/jamstack-ecommerce.git

依存関係をインストールします。

$ yarn

# or

$ npm install

プロジェクトを実行します

$ npm run dev

# or to build

$ npm run build

Vercelに展開します

VercelCLIを使用します

vercel

AWSに展開します

npx serverless

プロジェクトについて

追い風

このプロジェクトは、Tailwindを使用してスタイルが付けられています。これがどのように機能するかについては、こちらのTailwindドキュメントをご覧ください。

コンポーネント

変更 /変更したいメインファイル、コンポーネント、および画像は次のとおりです。

ロゴ- パブリック/logo.png
ボタン、リスト項目など。-コンポーネント
フォームコンポーネント- コンポーネント/フォームコンポーネント
コンテキスト（状態） - Context/MainContext.js
ページ（管理者、カート、チェックアウト、インデックス） - ページ
テンプレート（カテゴリビュー、シングルアイテムビュー、インベントリビュー） - テンプレート

それがどのように機能するか

セットアップされると、インベントリは、在庫アイテムのローカルハードコード化された配列から取得されます。これは、在庫プロバイダーを変更して、Shopifyや別のCMSまたはデータソースなどのリモートソースから代わりにフェッチするように簡単に構成できます。

在庫プロバイダーの構成

独自の在庫プロバイダーでutils/inventoryprovider.jsを更新します。

ビルド時に画像をダウンロードしてください

プロバイダーを変更してリモートソースから画像を取得すると、ビルド時にローカルに画像をダウンロードしてパフォーマンスを向上させることもできます。このユースケースで機能するはずのコードの例を次に示します。

 import fs from 'fs'
import axios from 'axios'
import path from 'path'

function getImageKey ( url ) {
  const split = url . split ( '/' )
  const key = split [ split . length - 1 ]
  const keyItems = key . split ( '?' )
  const imageKey = keyItems [ 0 ]
  return imageKey
}

function getPathName ( url , pathName = 'downloads' ) {
  let reqPath = path . join ( __dirname , '..' )
  let key = getImageKey ( url )
  key = key . replace ( / % / g , "" )
  const rawPath = ` ${ reqPath } /public/ ${ pathName } / ${ key } `
  return rawPath
}

async function downloadImage ( url ) {
  return new Promise ( async ( resolve , reject ) => {
    const path = getPathName ( url )
    const writer = fs . createWriteStream ( path )
    const response = await axios ( {
      url ,
      method : 'GET' ,
      responseType : 'stream'
    } )
    response . data . pipe ( writer )
    writer . on ( 'finish' , resolve )
    writer . on ( 'error' , reject )
  } )
}

export default downloadImage

この関数を使用して、インベントリデータを取得した後にインベントリデータをマッピングし、画像パスをダウンロードした画像の位置に参照して置き換えることができます。おそらく次のようになります。

 await Promise . all (
  inventory . map ( async ( item , index ) => {
    try {
      const relativeUrl = `../downloads/ ${ item . image } `
      if ( ! fs . existsSync ( ` ${ __dirname } /public/downloads/ ${ item . image } ` ) ) {
        await downloadImage ( image )
      }
      inventory [ index ] . image = relativeUrl
    } catch ( err ) {
      console . log ( 'error downloading image: ' , err )
    }
  } )
)