طراحی قالب اولیه سایت فروشگاهی
بیایید یک قالب واکنشگرا و مدرن برای سایت فروشگاهی طراحی کنیم. این کد شامل بخشهای اصلی هدر، محصولات، سبد خرید و فوتر میشود.
<!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>فروشگاه آنلاین</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> /* Reset و تنظیمات کلی */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f9f9f9; color: #333; line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* استایل هدر */ header { background-color: #2c3e50; color: white; padding: 15px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .header-content { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 28px; font-weight: bold; color: #f39c12; } .logo span { color: white; } .search-bar { display: flex; width: 40%; } .search-bar input { flex: 1; padding: 12px 15px; border: none; border-radius: 5px 0 0 5px; font-size: 16px; } .search-bar button { background-color: #f39c12; color: white; border: none; padding: 0 20px; border-radius: 0 5px 5px 0; cursor: pointer; font-size: 18px; } .user-actions { display: flex; align-items: center; gap: 20px; } .cart-icon, .user-icon { position: relative; cursor: pointer; font-size: 22px; color: #ecf0f1; } .cart-count { position: absolute; top: -8px; left: -8px; background-color: #e74c3c; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: bold; } /* استایل نوار ناوبری */ nav { background-color: #34495e; padding: 10px 0; } .nav-links { display: flex; list-style: none; gap: 25px; } .nav-links a { color: white; text-decoration: none; font-size: 17px; transition: color 0.3s; } .nav-links a:hover { color: #f39c12; } /* استایل بنر اصلی */ .hero { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80'); background-size: cover; background-position: center; color: white; padding: 100px 0; text-align: center; margin-bottom: 40px; } .hero h1 { font-size: 48px; margin-bottom: 20px; color: #f39c12; } .hero p { font-size: 20px; max-width: 800px; margin: 0 auto 30px; } .cta-button { background-color: #f39c12; color: white; padding: 15px 40px; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; transition: background-color 0.3s; } .cta-button:hover { background-color: #e67e22; } /* استایل بخش محصولات */ .section-title { text-align: center; margin: 40px 0; color: #2c3e50; font-size: 32px; position: relative; } .section-title::after { content: ''; position: absolute; width: 100px; height: 4px; background-color: #f39c12; bottom: -10px; left: 50%; transform: translateX(-50%); } .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; margin-bottom: 60px; } .product-card { background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; } .product-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .product-img { height: 200px; width: 100%; object-fit: cover; } .product-info { padding: 20px; } .product-title { font-size: 20px; margin-bottom: 10px; color: #2c3e50; } .product-price { color: #e74c3c; font-size: 22px; font-weight: bold; margin-bottom: 15px; } .product-price span { font-size: 16px; color: #7f8c8d; text-decoration: line-through; margin-right: 10px; } .add-to-cart { background-color: #2c3e50; color: white; border: none; padding: 12px 0; width: 100%; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } .add-to-cart:hover { background-color: #f39c12; } /* استایل سبد خرید */ .cart-sidebar { position: fixed; top: 0; left: -400px; width: 380px; height: 100%; background-color: white; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); padding: 25px; overflow-y: auto; transition: left 0.4s; z-index: 2000; } .cart-sidebar.active { left: 0; } .cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 2px solid #eee; padding-bottom: 15px; } .cart-header h2 { color: #2c3e50; } .close-cart { background: none; border: none; font-size: 28px; cursor: pointer; color: #7f8c8d; } .cart-item { display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .cart-item-img { width: 80px; height: 80px; object-fit: cover; border-radius: 5px; margin-left: 15px; } .cart-item-details { flex: 1; } .cart-item-title { font-weight: bold; margin-bottom: 5px; } .cart-item-price { color: #e74c3c; font-weight: bold; } .cart-item-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .quantity-btn { background-color: #ecf0f1; border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 18px; } .cart-total { margin-top: 25px; padding-top: 20px; border-top: 2px solid #eee; font-size: 22px; font-weight: bold; display: flex; justify-content: space-between; } .checkout-btn { background-color: #27ae60; color: white; border: none; padding: 15px; width: 100%; border-radius: 5px; font-size: 18px; cursor: pointer; margin-top: 20px; transition: background-color 0.3s; } .checkout-btn:hover { background-color: #219653; } /* استایل فوتر */ footer { background-color: #2c3e50; color: white; padding: 50px 0 20px; margin-top: 60px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px; } .footer-section h3 { font-size: 22px; margin-bottom: 20px; color: #f39c12; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: #ecf0f1; text-decoration: none; transition: color 0.3s; } .footer-links a:hover { color: #f39c12; } .copyright { text-align: center; padding-top: 20px; border-top: 1px solid #34495e; color: #bdc3c7; } /* رسپانسیو */ @media (max-width: 992px) { .search-bar { width: 30%; } .hero h1 { font-size: 40px; } .products-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } } @media (max-width: 768px) { .header-content { flex-direction: column; gap: 15px; } .search-bar { width: 80%; order: 3; } .hero h1 { font-size: 32px; } .hero p { font-size: 18px; } .nav-links { justify-content: center; flex-wrap: wrap; } .cart-sidebar { width: 100%; left: -100%; } } @media (max-width: 576px) { .products-grid { grid-template-columns: 1fr; } .hero { padding: 60px 0; } } </style> </head> <body> <!-- هدر سایت --> <header> <div class="container header-content"> <div class="logo"> <i class="fas fa-shopping-bag"></i> فروشگاه<span>آنلاین</span> </div> <div class="search-bar"> <input type="text" placeholder="جستجوی محصولات..."> <button><i class="fas fa-search"></i></button> </div> <div class="user-actions"> <div class="cart-icon" id="cartToggle"> <i class="fas fa-shopping-cart"></i> <span class="cart-count">3</span> </div> <div class="user-icon"> <i class="fas fa-user-circle"></i> </div> </div> </div> </header> <!-- نوار ناوبری --> <nav> <div class="container"> <ul class="nav-links"> <li><a href="#"><i class="fas fa-home"></i> خانه</a></li> <li><a href="#"><i class="fas fa-mobile-alt"></i> گوشی موبایل</a></li> <li><a href="#"><i class="fas fa-laptop"></i> لپ تاپ</a></li> <li><a href="#"><i class="fas fa-tv"></i> تلویزیون</a></li> <li><a href="#"><i class="fas fa-headphones"></i> لوازم جانبی</a></li> <li><a href="#"><i class="fas fa-info-circle"></i> درباره ما</a></li> <li><a href="#"><i class="fas fa-address-book"></i> تماس با ما</a></li> </ul> </div> </nav> <!-- بنر اصلی --> <section class="hero"> <div class="container"> <h1>فروشگاه اینترنتی با بهترین قیمتها</h1> <p>با خرید از فروشگاه ما از جدیدترین محصولات با گارانتی معتبر و قیمت مناسب بهرهمند شوید. ارسال رایگان برای خریدهای بالای ۵۰۰ هزار تومان</p> <button class="cta-button">مشاهده محصولات ویژه</button> </div> </section> <!-- بخش محصولات --> <main class="container"> <h2 class="section-title">محصولات پرفروش</h2> <div class="products-grid" id="productsContainer"> <!-- محصولات توسط جاوااسکریپت اضافه خواهند شد --> </div> <h2 class="section-title">جدیدترین محصولات</h2> <div class="products-grid"> <!-- محصولات مشابه اضافه میشوند --> </div> </main> <!-- سبد خرید --> <aside class="cart-sidebar" id="cartSidebar"> <div class="cart-header"> <h2><i class="fas fa-shopping-cart"></i> سبد خرید شما</h2> <button class="close-cart" id="closeCart">×</button> </div> <div id="cartItems"> <!-- آیتمهای سبد خرید توسط جاوااسکریپت اضافه میشوند --> </div> <div class="cart-total"> <span>مجموع:</span> <span id="totalPrice">۲,۴۵۰,۰۰۰ تومان</span> </div> <button class="checkout-btn">تکمیل فرآیند خرید</button> </aside> <!-- فوتر --> <footer> <div class="container"> <div class="footer-content"> <div class="footer-section"> <h3>درباره فروشگاه</h3> <p>فروشگاه اینترنتی ما با بیش از ۱۰ سال سابقه در زمینه فروش محصولات الکترونیکی، ارائهدهنده کالاهای اصل با گارانتی معتبر میباشد.</p> </div> <div class="footer-section"> <h3>لینکهای سریع</h3> <ul class="footer-links"> <li><a href="#">صفحه اصلی</a></li> <li><a href="#">محصولات جدید</a></li> <li><a href="#">تخفیفهای ویژه</a></li> <li><a href="#">پرسشهای متداول</a></li> </ul> </div> <div class="footer-section"> <h3>خدمات مشتریان</h3> <ul class="footer-links"> <li><a href="#">پیگیری سفارش</a></li> <li><a href="#">روشهای پرداخت</a></li> <li><a href="#">روشهای ارسال</a></li> <li><a href="#">گارانتی محصولات</a></li> </ul> </div> <div class="footer-section"> <h3>تماس با ما</h3> <ul class="footer-links"> <li><i class="fas fa-map-marker-alt"></i> تهران، خیابان ولیعصر</li> <li><i class="fas fa-phone"></i> ۰۲۱-۱۲۳۴۵۶۷۸</li> <li><i class="fas fa-envelope"></i> info@store.com</li> </ul> </div> </div> <div class="copyright"> <p>کلیه حقوق این وبسایت محفوظ میباشد © ۱۴۰۳</p> </div> </div> </footer> <script> // دادههای نمونه محصولات const products = [ {id: 1, name: "گوشی سامسونگ S23", price: 24500000, discount: 26500000, image: "https://images.unsplash.com/photo-1610945265064-0e34e5519bbf?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"}, {id: 2, name: "لپتاپ اپل مکبوک پرو", price: 68000000, discount: 72000000, image: "https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"}, {id: 3, name: "هدفون بیسیم سونی", price: 5200000, discount: 6000000, image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&auto=format&fit=crop&w-600&q=80"}, {id: 4, name: "ساعت هوشمند اپل", price: 18500000, discount: 20000000, image: "https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"}, {id: 5, name: "دوربین کانن EOS R6", price: 42000000, discount: 45000000, image: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"}, {id: 6, name: "پلیاستیشن 5", price: 32000000, discount: 35000000, image: "https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"}, {id: 7, name: "تلویزیون ال جی 65 اینچ", price: 55000000, discount: 58000000, image: "https://images.unsplash.com/photo-1593359677879-a4bb92f829d1?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"}, {id: 8, name: "تبلت سامسونگ گلکسی", price: 17500000, discount: 19000000, image: "https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"} ]; // دادههای نمونه سبد خرید const cartItems = [ {id: 1, name: "گوشی سامسونگ S23", price: 24500000, quantity: 1, image: "https://images.unsplash.com/photo-1610945265064-0e34e5519bbf?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"}, {id: 3, name: "هدفون بیسیم سونی", price: 5200000, quantity: 2, image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"} ]; // فرمتدهی قیمت به تومان function formatPrice(price) { return new Intl.NumberFormat('fa-IR').format(price) + " تومان"; } // ایجاد کارت محصول function createProductCard(product) { return ` <div class="product-card"> <img src="${product.image}" alt="${product.name}" class="product-img"> <div class="product-info"> <h3 class="product-title">${product.name}</h3> <div class="product-price"> ${product.discount ? `<span>${formatPrice(product.discount)}</span>` : ''} ${formatPrice(product.price)} </div> <button class="add-to-cart" data-id="${product.id}"> <i class="fas fa-cart-plus"></i> افزودن به سبد خرید </button> </div> </div> `; } // ایجاد آیتم سبد خرید function createCartItem(item) { return ` <div class="cart-item" data-id="${item.id}"> <img src="${item.image}" alt="${item.name}" class="cart-item-img"> <div class="cart-item-details"> <div class="cart-item-title">${item.name}</div> <div class="cart-item-price">${formatPrice(item.price)}</div> <div class="cart-item-actions"> <button class="quantity-btn minus-btn" data-id="${item.id}">-</button> <span>${item.quantity}</span> <button class="quantity-btn plus-btn" data-id="${item.id}">+</button> <button class="remove-btn" data-id="${item.id}" style="margin-right: auto; color: #e74c3c; background: none; border: none; cursor: pointer;"> <i class="fas fa-trash"></i> </button> </div> </div> </div> `; } // محاسبه مجموع سبد خرید function calculateCartTotal() { let total = 0; cartItems.forEach(item => { total += item.price * item.quantity; }); document.getElementById('totalPrice').textContent = formatPrice(total); // بروزرسانی تعداد آیتمهای سبد خرید const totalItems = cartItems.reduce((sum, item) => sum + item.quantity, 0); document.querySelector('.cart-count').textContent = totalItems; } // بارگذاری محصولات document.addEventListener('DOMContentLoaded', function() { const productsContainer = document.getElementById('productsContainer'); // اضافه کردن محصولات به صفحه products.forEach(product => { productsContainer.innerHTML += createProductCard(product); }); // بارگذاری سبد خرید const cartItemsContainer = document.getElementById('cartItems'); cartItems.forEach(item => { cartItemsContainer.innerHTML += createCartItem(item); }); // محاسبه مجموع سبد خرید calculateCartTotal(); // اضافه کردن رویداد به دکمههای افزودن به سبد خرید document.querySelectorAll('.add-to-cart').forEach(button => { button.addEventListener('click', function() { const productId = parseInt(this.getAttribute('data-id')); const product = products.find(p => p.id === productId); // بررسی آیا محصول در سبد خرید موجود است const existingItem = cartItems.find(item => item.id === productId); if (existingItem) { existingItem.quantity++; } else { cartItems.push({ ...product, quantity: 1 }); } // بروزرسانی نمایش سبد خرید updateCartDisplay(); // نمایش پیام موفقیت alert(`محصول ${product.name} به سبد خرید اضافه شد.`); }); }); // باز و بسته کردن سبد خرید document.getElementById('cartToggle').addEventListener('click', function() { document.getElementById('cartSidebar').classList.add('active'); }); document.getElementById('closeCart').addEventListener('click', function() { document.getElementById('cartSidebar').classList.remove('active'); }); // بستن سبد خرید با کلیک خارج از آن document.addEventListener('click', function(event) { const cartSidebar = document.getElementById('cartSidebar'); if (!event.target.closest('#cartSidebar') && !event.target.closest('#cartToggle') && cartSidebar.classList.contains('active')) { cartSidebar.classList.remove('active'); } }); }); // بروزرسانی نمایش سبد خرید function updateCartDisplay() { const cartItemsContainer = document.getElementById('cartItems'); cartItemsContainer.innerHTML = ''; cartItems.forEach(item => { cartItemsContainer.innerHTML += createCartItem(item); }); // اضافه کردن رویداد به دکمههای سبد خرید addCartEventListeners(); // محاسبه مجدد مجموع calculateCartTotal(); } // اضافه کردن رویداد به دکمههای سبد خرید function addCartEventListeners() { // دکمههای کم و زیاد کردن تعداد document.querySelectorAll('.minus-btn').forEach(button => { button.addEventListener('click', function() { const productId = parseInt(this.getAttribute('data-id')); const item = cartItems.find(item => item.id === productId); if (item.quantity > 1) { item.quantity--; } else { // حذف آیتم از سبد خرید const index = cartItems.findIndex(item => item.id === productId); cartItems.splice(index, 1); } updateCartDisplay(); }); }); document.querySelectorAll('.plus-btn').forEach(button => { button.addEventListener('click', function() { const productId = parseInt(this.getAttribute('data-id')); const item = cartItems.find(item => item.id === productId); item.quantity++; updateCartDisplay(); }); }); // دکمههای حذف document.querySelectorAll('.remove-btn').forEach(button => { button.addEventListener('click', function() { const productId = parseInt(this.getAttribute('data-id')); const index = cartItems.findIndex(item => item.id === productId); cartItems.splice(index, 1); updateCartDisplay(); }); }); } </script> </body> </html>