تصميم متجر الكتروني html

تصميم متجر إلكتروني باستخدام HTML يتطلب أساسيات تصميم صفحات ويب متجاوبة وملائمة لاحتياجات التجارة الإلكترونية. سنقوم بتصميم مثال بسيط لصفحة متجر إلكتروني، مع التنويه أن هذا التصميم يستخدم HTML وCSS فقط كخطوة أولى، ويُمكن إضافة المزيد من الوظائف باستخدام JavaScript وBackend later.

إليك مثالاً على كيفية تصميم واجهة متجر إلكتروني بسيطة باستخدام HTML وCSS:

محتويات المقال

1. الهيكل الأساسي للصفحة (HTML):

html
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>متجر الكتروني</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- رأس الصفحة -->
    <header>
        <nav>
            <ul>
                <li><a href="#">الرئيسية</a></li>
                <li><a href="#">المنتجات</a></li>
                <li><a href="#">التسوق</a></li>
                <li><a href="#">اتصل بنا</a></li>
            </ul>
        </nav>
    </header>

    <!-- قسم العرض للمنتجات -->
    <section class="products">
        <h2>أحدث المنتجات</h2>
        <div class="product-list">
            <!-- منتج واحد -->
            <div class="product-item">
                <img src="product1.jpg" alt="منتج 1">
                <h3>اسم المنتج 1</h3>
                <p class="price">150 ر.س</p>
                <button class="add-to-cart">أضف إلى السلة</button>
            </div>

            <!-- منتج ثاني -->
            <div class="product-item">
                <img src="product2.jpg" alt="منتج 2">
                <h3>اسم المنتج 2</h3>
                <p class="price">250 ر.س</p>
                <button class="add-to-cart">أضف إلى السلة</button>
            </div>

            <!-- منتج ثالث -->
            <div class="product-item">
                <img src="product3.jpg" alt="منتج 3">
                <h3>اسم المنتج 3</h3>
                <p class="price">100 ر.س</p>
                <button class="add-to-cart">أضف إلى السلة</button>
            </div>
        </div>
    </section>

    <!-- تذييل الصفحة -->
    <footer>
        <p>&copy; 2025 جميع الحقوق محفوظة.</p>
    </footer>

</body>
</html>

2. تنسيق الصفحة باستخدام CSS:

css
/* إعادة تعيين تنسيق المتصفح الافتراضي */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* إعداد الخطوط */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    direction: rtl;
    background-color: #f4f4f4;
}

/* رأس الصفحة */
header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
}

nav ul li {
    margin: 0 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

/* قسم المنتجات */
.products {
    padding: 20px;
    text-align: center;
}

.products h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.product-list {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.product-item {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    width: 250px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.product-item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.product-item h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.product-item .price {
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 15px;
}

.product-item .add-to-cart {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.product-item .add-to-cart:hover {
    background-color: #2980b9;
}

/* تذييل الصفحة */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: fixed;
    width: 100%;
    bottom: 0;
}

3. الملاحظات والشرح:

التصميم بسيط: يتميز التصميم ببساطته، حيث يحتوي على رأس الصفحة مع روابط التنقل (الرئيسية، المنتجات، التسوق، الاتصال)، ثم قسم يعرض المنتجات بتنسيق بسيط، وفي الأسفل تذييل يحتوي على حقوق الطبع والنشر.
CSS بسيط ومرن: يضمن تنسيق الـ CSS استجابة جيدة وتصميماً بسيطاً للموقع. يمكن تعديل اللون والخطوط وأبعاد العناصر حسب تفضيلاتك.
إضافة صور المنتجات: يفضل أن تكون الصور بجودة عالية. يجب أن تقوم بتحديث مسارات الصور في الشيفرة src="product1.jpg" بما يتناسب مع ملفاتك.
إمكانية التوسع: هذا التصميم يعد أساسياً ويمكنك إضافة وظائف متقدمة مثل سلة التسوق، عمليات الدفع، وإدارة المخزون باستخدام JavaScript وPHP أو أي لغة برمجة جانب الخادم.

4. توسعات ممكنة:

إضافة JavaScript: يمكنك إضافة بعض الوظائف مثل إضافة منتج إلى السلة وعرضه.
استخدام PHP أو Node.js: للتفاعل مع قاعدة بيانات لعرض المنتجات وحساب الأسعار وتخزين تفاصيل المستخدم.
تصميم متجاوب (Responsive Design): يمكن تعديل الـ CSS ليكون متجاوباً مع جميع أنواع الأجهزة مثل الهواتف والحواسيب اللوحية.

هل ترغب في إضافة أي وظائف أخرى أو تخصيص معين في التصميم؟