jamstack ecommerce
1.0.0
Jamstack Ecommerce Next предоставляет способ быстро встать и работать с полностью настраиваемым сайтом электронной коммерции с использованием next.js.
Из коробки сайт использует совершенно статические данные, поступающие от поставщика providers/inventoryProvider.js . Вы можете обновить этого поставщика, чтобы получить данные из любого реального API, изменив вызов в функции getInventory .
Нажмите здесь, чтобы увидеть живой предварительный просмотр.
$ git clone https://github.com/jamstack-cms/jamstack-ecommerce.git$ yarn
# or
$ npm install$ npm run dev
# or to build
$ npm run buildИспользуйте CLI Vercel
vercelnpx serverlessЭтот проект стилизован с использованием Tailwind. Чтобы узнать больше, как это работает, ознакомьтесь с документацией Tailwind здесь.
Основные файлы, компоненты и изображения, которые вы можете изменить / изменить:
Логотип - public/logo.png
Кнопка, список и т. Д. - Компоненты
Компоненты формы - компоненты/Формулы
Контекст (состояние) - контекст/maincontext.js
Страницы (администратор, Cart, Checkout, Index) - страницы
Шаблоны (представление категории, просмотр единого элемента, представления инвентаризации) - шаблоны
По мере его настройки инвентарь получен из локального жестко -кодированного массива инвентаризации. Это может быть легко настроено, чтобы вместо этого было извлечено из удаленного источника, такого как Shopify или другой CMS или источник данных, изменяя поставщика инвентаря.
Обновите utils/inventoryprovider.js с вашим собственным поставщиком инвентаря.
Если вы измените поставщика на получение изображений из удаленного источника, вы можете также загрузить изображения локально в Time Time для повышения производительности. Вот пример некоторого кода, который должен работать для этого варианта использования:
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 )
}
} )
)Обновите страницы/admin.js с регистрацией, подписью, внедрены, подпишите и подтвердите методы подписи.
Обновить компоненты/viewInventory.js с методами взаимодействия с фактическим инвентаризационным API.
Обновление компонентов/FormComponents/addInventory.js с методами добавления элемента в фактический API инвентаризации.
Чтобы увидеть пример того, как обрабатывать серверную сторону платежей с помощью полосы, ознакомьтесь с функцией лямбды в папке фрагментов.
Кроме того, рассмотрите возможность проверки итоги, передавая массив идентификаторов в функцию, вычисляя общую сумму на сервере, а затем сравнивая итоги для проверки и убедиться, что они совпадают.
