jamstack ecommerce
1.0.0
يوفر Jamstack Ecrommerce التالي طريقة للاستعداد بسرعة وتشغيله مع موقع تجارة إلكترونية قابل للتكوين بالكامل باستخدام Next.js.
خارج المربع ، يستخدم الموقع بيانات ثابتة تمامًا من مزود في providers/inventoryProvider.js . يمكنك تحديث هذا الموفر لجلب البيانات من أي واجهة برمجة تطبيقات حقيقية عن طريق تغيير المكالمة في وظيفة getInventory .
انقر هنا لمشاهدة معاينة مباشرة.
$ git clone https://github.com/jamstack-cms/jamstack-ecommerce.git$ yarn
# or
$ npm install$ npm run dev
# or to build
$ npm run buildاستخدم Vercel CLI
vercelnpx serverlessتم تصميم هذا المشروع باستخدام Tailwind. لمعرفة المزيد كيف يعمل هذا ، تحقق من وثائق Tailwind هنا.
الملفات الرئيسية والمكونات والصور التي قد ترغب في تغييرها / تعديلها هي:
شعار - عام/شعار
زر ، ListItem ، إلخ .. - المكونات
مكونات النماذج - المكونات/FormComponents
السياق (الحالة) - السياق/maincontext.js
الصفحات (المسؤول ، العربة ، الخروج ، الفهرس) - الصفحات
قوالب (عرض الفئة ، عرض عنصر واحد ، طرق عرض المخزون) - قوالب
أثناء إعداده ، يتم جلب المخزون من مجموعة محلية مشفرة من عناصر المخزون. يمكن بسهولة تكوين هذا ليتم جلبه بدلاً من ذلك من مصدر بعيد مثل Shopify أو CMS أو مصدر بيانات آخر عن طريق تغيير مزود المخزون.
تحديث utils/justiceprovider.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 )
}
} )
)تحديث الصفحات/admin.js مع التسجيل ، وتوقيع ، وتوقيع ، وتسجيل الخروج ، وتأكيد أساليب تسجيل الدخول.
تحديث المكونات/viewInventory.js مع طرق للتفاعل مع واجهة برمجة تطبيقات المخزون الفعلي.
تحديث مكونات/formcomponents/addinventory.js مع طرق لإضافة عنصر إلى واجهة برمجة تطبيقات المخزون الفعلي.
للاطلاع على مثال على كيفية معالجة المدفوعات جانب الخادم مع شريط ، تحقق من وظيفة Lambda في مجلد Snippets.
أيضًا ، ضع في اعتبارك التحقق من الإجماليات من خلال تمرير مجموعة من المعرفات في الوظيفة ، وحساب المجموع على الخادم ، ثم مقارنة الإجماليات للتحقق والتأكد من مطابقة.
