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 )
    }
  } )
)