كيفيه اضافه shopping cart الي موقع ويب ؟

بتاريخ 31 دقائق مضت قال Heba Saeed:

كيف يتم اضافة سله التسوق (shopping cart )  الي موقع ويب باستخدام php + mysql ؟

مع كتابه الكود رجاءً

مرحباً @Heba Saeed
إن سلة التسوق Shopping cart ليس لها علاقة مباشرة مع php و mysql، حيث يمكنك اعتبارها كمخزن مؤقت من طرف المستخدم وليس من طرف السيرفر، لذلك يجب عليك إضافتها في مشروعك من طرف المستخدم عن طريق الجافاسكريبت أو إطار العمل الذي تقومين باستعماله مهما يكن.
بعض النقاط لمساعدتك:
- يتم استخدام طريقتين لتخزين البيانات (المنتجات) من طرف المستخدم: عن طريق session storage أو  local storage ، والفرق بينهما:

ضمن Session storage: يتم تخزين البيانات ضمن الجلسة أي جميع البيانات التي يتم تخزينها هنا سيتم حذفها بمجرد إغلاق المستخدم للمتصفح.
أما ضمن Local Storage: فسيتم تخزين البيانات بشكل دائم ضمن المتصفح.

- يتم التعامل مع كلتا الحالتين عن طريق مفتاح Key و قيمة Value. أي لتخزين بيانات ضمن الجلسة عن طريق التابع
sessionStorage.setItem(key,value)
key: هو المفتاح أو اسم العنصر الذي سيساعدنا فيما بعد بالوصول إليه. وهو من النمط النصي String. مثال: "cart"
value: هو القيم المخزنة ضمن هذا العنصر

- أما لجلب البيانات من الجلسة، فيتم عن طريق التابع: sessionStorage.getItem(key)، حيث يكفي فقط أن نمرر اسم المفتاح للحصول على البيانات المخزنة ضمنه.

مثال لتخزين بيانات ضمن الجلسة:

var cart = {
    item: "Product 1",
    price: 35.50,
    qty: 2
};
var jsonStr = JSON.stringify(cart);
sessionStorage.setItem( "cart", jsonStr );

ونلاحظ هنا على سبيل المثال لدينا غرض اسمه cart يحوي عدة خصائص: العنصر item - سعر العنصر price - الكمية qty.
قمنا أولاً بتحويل الغرض cart إلى مصفوفة JSON ثم قمنا بتخزينها ضمن الجلسة.

وأيضاً يمكنك تخزين أنواع متعددة أو إضافة عدة عناصر باعتبار كل عنصر من نمط غرض Object وبذلك تكون سلة التوسق عبارة عن مصفوفة أغراض.

{ “items”: [ { “product”: “Product-name #1”, “qty”: 5, “price”: 5 }, { “product”: “Test”, “qty”: 1, “price”: 2 } ] }

وبعدها يمكنك استعادة البيانات عن طريق التابع getItem التالي:

sessionStorage.getItem("cart");

أما بالنسبة لـ localStorage فأيضاً يتم التخزين واستعادة البيانات عن طريق نفس التوابع، ولكن نستبدل sessonStorage ب localStorage. مثال:
 

localStorage.getItem("cart");

وبذلك يمكنك البدء بالمحاولة بإضافة سلة التسوق وجلب بياناتها وعرضها على الواجهة المخصصة لذلك ضمن موقعك.
بالتوفيق،

شكراً لك