مشكله تسجيل الدخول والسله

اولا بالنسبة لمشكلة السلة فيجب اولا اخفاء جزء السلة عند بداية تحميل الصفحة حيث نقوم بوضع سمة تسمى hidden الى العنصر الذى يحوى السلة ونقوم باعطائه الخاصية display: none !important; هكذا.

.hidden {
    display: none !important;
}

ولاظهاره عند الضغط عليه ثم اخفاءه مره اخرى نستخدم الجافاسكريبت لفعل ذلك.

حيث اولا نضع لعنصر السلة id يسمى my-cart حتى نستعمله فى جافا سكريبت .

والان نقوم بتعريف متغيرين الاول يحوى الزر الخاص بفتح السلة والاخر هو عنصر السلة هكذا.

const cart = document.getElementById('cart-btn')
const my_cart = document.getElementById('my-cart');

والان نقوم بالاستماع الى الحدث الخاص click على زر السلة و عند الضغط عليه نقوم بحذف السمة hidden اذا كانت موجودة لاظهار السلة او وضع السمة hidden اذا لم تكن موجودة وذلك لاخفائها هكذا.

cart.addEventListener('click', () => {
    my_cart.classList.toggle('hidden');
});

والان نضع حدث click على document حتى نقوم باغلاق السلة اذا تم الضغط فى اى مكان اخر وذلك للتسهيل على المستخدم وعدم اجباره على الضغط فقط على الزر لاخفاء السلة هكذا.

document.addEventListener('click',(e)=>{
    if( !(e.target.id == "cart-btn") && !my_cart.classList.contains('hidden')){
         my_cart.classList.add('hidden');
    }
})

والان نقوم باستدعاء ملف الجافاسكريبت فى ملف index.html وايضا حذف زر السلة الاخر حيث يوجد زرين فى الكود . ولقد قمت بارفاق الملفات بعد تعديلها .

اما بالنسبة  تسجيل الدخول فان الامر ليس بتلك السهولة حيث ما قمت به الان هو فقط برمجة الواجهة الامامية اما تسجيل الدخول فيحتاج الى جزء الواجهة الخلفية والتعامل مع قواعد البيانات . 

ويمكنك عمل واجهة خلفية عن طريق استخدام لغة php او javascript مع اطار عمل express و nodejs .

واذا لم يكن لديك اى خلفية عن تطوير الواجهات الخلفية فانصحك اولا بمذاكرة اللغة التى تريد العمل بها بداية من الاساسيات حتى يتسنى لك انشاء اى موقع كاملا

script.js style.css index.html