jamstack ecommerce
1.0.0
JamStack Ecommerce Next proporciona una forma de ponerse en funcionamiento rápidamente con un sitio de comercio electrónico totalmente configurable usando Next.js.
Fuera de la caja, el sitio utiliza datos completamente estáticos provenientes de un proveedor de providers/inventoryProvider.js . Puede actualizar este proveedor para obtener datos de cualquier API real cambiando la llamada en la función getInventory .
Haga clic aquí para ver una vista previa en vivo.
$ git clone https://github.com/jamstack-cms/jamstack-ecommerce.git$ yarn
# or
$ npm install$ npm run dev
# or to build
$ npm run buildUsa el CLI VERCEL
vercelnpx serverlessEste proyecto tiene el estilo de viento de cola. Para obtener más información sobre cómo funciona esto, consulte la documentación del viento de cola aquí.
Los archivos principales, componentes e imágenes que desee cambiar / modificar son:
Logotipo - Public/logo.png
Botón, listitem, etc. - componentes
Componentes de formulario : componentes/componentes
Contexto (estado) - context/maincontext.js
Páginas (administrador, carrito, pago, índice) - páginas
Plantillas (vista de categoría, vista de elemento único, vistas de inventario) - plantillas
A medida que está configurado, el inventario se obtiene de una matriz local codificada de elementos de inventario. En su lugar, esto se puede configurar fácilmente para obtener una fuente remota como Shopify u otra fuente de datos o fuente de datos cambiando el proveedor de inventario.
Actualice Utils/InventoryProvider.js con su propio proveedor de inventario.
Si cambia el proveedor para obtener imágenes de una fuente remota, puede optar por descargar también las imágenes localmente en el tiempo de compilación para mejorar el rendimiento. Aquí hay un ejemplo de algún código que debería 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 downloadImagePuede usar esta función para asignar los datos de inventario después de obtener y reemplazar las rutas de imagen con una referencia a la ubicación de las imágenes descargadas, probablemente se vería algo así:
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 )
}
} )
)Actualice páginas/admin.js con registro, firme, ina, cierre y confirme los métodos de inicio de sesión.
Actualizar componentes/ViewInventory.js con métodos para interactuar con la API de inventario real.
Actualice Componentes/FormComponents/Addinventory.js con métodos para agregar el elemento a la API de inventario real.
Para ver un ejemplo de cómo procesar el lado del servidor de pagos con Stripe, consulte la función Lambda en la carpeta de fragmentos.
Además, considere verificar los totales pasando una matriz de ID a la función, calculando el total en el servidor, luego comparando los totales para verificar y asegurarse de que coincidan.
