jamstack ecommerce
1.0.0
O Jamstack ECommerce a seguir fornece uma maneira de subir e correr rapidamente com um site de comércio eletrônico totalmente configurável usando o Next.JS.
Fora da caixa, o site usa dados completamente estáticos provenientes de um provedor de providers/inventoryProvider.js . Você pode atualizar este provedor para buscar dados de qualquer API real alterando a chamada na função getInventory .
Clique aqui para ver uma visualização ao vivo.
$ git clone https://github.com/jamstack-cms/jamstack-ecommerce.git$ yarn
# or
$ npm install$ npm run dev
# or to build
$ npm run buildUse a cli vercel
vercelnpx serverlessEste projeto é estilizado usando o Tailwind. Para saber mais como isso funciona, confira a documentação do Tailwind aqui.
Os principais arquivos, componentes e imagens que você pode querer alterar / modificar são:
Logotipo - public/logo.png
Botão, listItem, etc .. - componentes
Componentes de formulário - componentes/fórmonos
Contexto (Estado) - Contexto/MainContext.js
Páginas (administrador, carrinho, checkout, índice) - Páginas
Modelos (visualização de categoria, visualização de item único, visualizações de inventário) - modelos
À medida que é configurado, o inventário é buscado a partir de uma variedade de itens de inventário de codificação hard local. Isso pode ser facilmente configurado para ser buscado em uma fonte remota como o Shopify ou outro CMS ou fonte de dados alterando o provedor de inventário.
Atualize Utils/InventoryProvider.js com seu próprio provedor de inventário.
Se você alterar o provedor para buscar imagens de uma fonte remota, poderá optar por baixar as imagens localmente no horário de construção para melhorar o desempenho. Aqui está um exemplo de algum código que deve funcionar para este caso de uso:
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 downloadImageVocê pode usar esta função para mapear os dados do inventário depois de buscar e substituir os caminhos da imagem por uma referência à localização das imagens baixadas, provavelmente ficaria assim:
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 )
}
} )
)Atualize as páginas/admin.js com inscrição, assine, ing, sinalize e confirme os métodos.
Atualize componentes/viewInventory.js com métodos para interagir com a API de inventário real.
Atualize componentes/FormComponents/addinventory.js com métodos para adicionar item à API de inventário real.
Para ver um exemplo de como processar o servidor de pagamentos com o Stripe, consulte a função Lambda na pasta Snippets.
Além disso, considere a verificação do total, passando uma matriz de IDs para a função, calculando o total no servidor e comparando os totais para verificar e garantir que eles correspondam.
