jamstack ecommerce下載-Jamstack jamstack ecommerce源代碼下載

jamstack ecommerce

Ai源碼

1.0.0

下載

Jamstack電子商務接下來

Jamstack Ecommerce Next提供了一種方法，可以使用Next.js來快速使用可配置的電子商務網站快速運行和運行。

開箱即用，該網站使用來自providers/inventoryProvider.js提供商的完全靜態數據。您可以通過更改getInventory函數中的調用來更新此提供商以從任何真實API獲取數據。

實時預覽

單擊此處查看實時預覽。

其他jamstack電子商務頁面

類別視圖

項目視圖

購物車視圖

管理面板

入門

克隆項目

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

安裝依賴項：

$ yarn

# or

$ npm install

運行項目

$ npm run dev

# or to build

$ npm run build

部署到Vercel

使用Vercel Cli

vercel

部署到AWS

npx serverless

關於項目

尾風

該項目使用尾風進行了風格。要了解更多工作的工作原理，請在此處查看尾風文檔。

成分

您可能需要更改 /修改的主要文件，組件和圖像是：

徽標- public/logo.png
按鈕，ListItem等。 -組件
形式組件- 組件/formComponents
上下文（狀態） - 上下文/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 )
    }
  } )
)