متجر الكتروني Online Store
A downloadable game
# 🛍️ متجر إلكتروني عصري
## 📌 الوصف
مشروع متجر إلكتروني عصري مبني باستخدام **HTML, CSS, JavaScript** بواجهة أنيقة وسهلة الاستخدام.
يدعم **تعدد اللغات (العربية والإنجليزية)** ويحتوي على جميع الصفحات الأساسية لإدارة المنتجات والعروض بشكل مرن واحترافي.
---
## ✨ المميزات
- 🌍 دعم لغتين (العربية والإنجليزية).
- 🛒 إدارة المنتجات (إضافة، تعديل، حذف).
- 🎁 إدارة العروض الخاصة مع أسعار جديدة.
- ✨ ميزة "اصنع عرضك بنفسك" عبر اختيار المنتجات وإرسالها عبر واتساب.
- 📱 تصميم متجاوب يعمل على الهاتف والكمبيوتر.
- 🔐 لوحة تحكم لإدارة المنتجات والعروض.
- 💬 إمكانية اقتراح منتجات جديدة من العملاء.
- 🖼️ استعراض صور المنتجات مع التكبير والتنقل.
- 🛍️ سلة مشتريات أنيقة مع التحكم بالكميات.
- ⚙️ إعدادات متقدمة للبطاقات (حجم، ألوان، خلفية).
- ⚡ كود نظيف وسهل التخصيص بدون استخدام أي إطار عمل خارجي.
---
## 📂 محتويات الحزمة
- `index.html` → الملف الرئيسي للموقع.
- `assets/` → مجلد للصور والأيقونات والملفات المساعدة (إن وجد).
- `README.md` → هذا الملف.
- ملفات CSS وJavaScript مضمنة وجاهزة للتشغيل.
---
## 🖥️ المتطلبات
- متصفح حديث (Chrome, Firefox, Edge, Safari).
- لا يحتاج إلى خادم خاص (Static Website) → يعمل مباشرة بفتح ملف `index.html`.
- (اختياري) إمكانية ربطه مع قاعدة بيانات أو Backend مثل **Supabase**.
---
## ⚙️ التثبيت والتشغيل
1. فك الضغط عن الحزمة.
2. افتح ملف `index.html` في أي متصفح حديث.
3. من لوحة التحكم (Admin Panel) يمكنك:
- إضافة منتجات مع صور ووصف وسعر.
- إنشاء العروض الخاصة.
- تعديل إعدادات البطاقات.
4. جميع التغييرات ستظهر مباشرة في الموقع.
---
## 📱 التوافقية
- ✔️ Google Chrome
- ✔️ Mozilla Firefox
- ✔️ Microsoft Edge
- ✔️ Safari
- ✔️ متوافق مع الهواتف والأجهزة اللوحية
---
## 📷 لقطات شاشة
يرجى الاطلاع على مجلد **screenshots/** المرفق لمعاينة صفحات الموقع (الصفحة الرئيسية، العروض، لوحة التحكم، السلة).
---
## 📝 ملاحظات
- الكود مكتوب بالكامل بـ **HTML + CSS + JavaScript**.
- لا يعتمد على مكتبات خارجية معقدة.
- يمكن ربطه بسهولة مع أي Backend أو API.
---
## 🔗 ربط قاعدة البيانات
هذا القالب يعمل بشكل ثابت (Static Website)، لكنه يدعم الربط مع أي قاعدة بيانات أو API خارجي.
### أمثلة للربط:
- **Supabase**: لتخزين المنتجات والعروض في قاعدة بيانات سحابية.
- **Firebase**: لربط المتجر مع Realtime Database أو Firestore.
- **MySQL / PHP**: لتخزين المنتجات عبر Backend بسيط.
- **أي API خارجي**: عبر AJAX أو Fetch.
---
### 📌 مثال عملي (JavaScript + Supabase)
```html
<script src="https://unpkg.com/@supabase/supabase-js"></script>
<script>
// 1. ربط الموقع مع Supabase
const SUPABASE_URL = "https://rqiognpfzyyfyferyjah.supabase.co";
const SUPABASE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJxaW9nbnBmenl5ZnlmZXJ5amFoIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ3MzI2ODcsImV4cCI6MjA3MDMwODY4N30.srA9q_fRyWo0d4htuiC4lyrBg2j5QSABfA1yi_8MSIc";
const supabase = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
// 2. جلب المنتجات من قاعدة البيانات
async function fetchProducts() {
const { data, error } = await supabase.from("products").select("*");
if (error) {
console.error("خطأ في جلب المنتجات:", error);
} else {
console.log("المنتجات:", data);
// هنا يمكنك تحديث واجهة المتجر بالبيانات
}
}
// 3. إضافة منتج جديد
async function addProduct(name, price) {
const { data, error } = await supabase
.from("products")
.insert([{ name: name, price: price }]);
if (error) {
console.error("خطأ في إضافة المنتج:", error);
} else {
console.log("تمت إضافة المنتج:", data);
}
}
// استدعاء المثال
fetchProducts();
</script>
📌 ملاحظات:
يجب أن تنشئ جدول باسم products داخل Supabase يحتوي على أعمدة مثل:
id (رقم تسلسلي)
name (اسم المنتج)
price (السعر)
image (رابط صورة المنتج)
---
📧 الدعم الفني
📩 البريد الالكتروني:Rascokhalid65@gmail.com
🕑 الرد خلال: 24 ساعة عمل
يشمل الدعم:
المساعدة في التثبيت.
حل الأخطاء البرمجية إن وجدت.
توضيح أي جزء غير واضح من الكود.
اعدادات لوحة التحكم
كلمة السر الحاليه هي 7732
يمكنك تغييرها من الكود بنفسك
---
---
🛍️ Modern E-Commerce Store
📌 Overview
A modern e-commerce store project built using HTML, CSS, and JavaScript with a clean and user-friendly interface.
Supports multi-language (Arabic & English) and includes all essential pages to manage products and offers in a flexible and professional way.
---
✨ Features
🌍 Multi-language support (Arabic & English).
🛒 Product management (Add, Edit, Delete).
🎁 Manage special offers with new prices.
✨ "Create your own offer" feature with WhatsApp integration.
📱 Fully responsive design for mobile and desktop.
🔐 Admin panel for managing products and offers.
💬 Product suggestions from customers.
🖼️ Product image viewer with zoom & navigation.
🛍️ Shopping cart with quantity control.
⚙️ Advanced card settings (size, colors, background).
⚡ Clean and easy-to-customize code with no frameworks required.
---
📂 Package Contents
index.html → Main website file.
assets/ → Folder for images, icons, and assets (if included).
README.md → This file.
Embedded CSS and JavaScript (ready to use).
---
🖥️ Requirements
Modern browser (Chrome, Firefox, Edge, Safari).
No special server needed (Static Website) → Runs by opening index.html.
(Optional) Can be integrated with databases or a backend like Supabase.
---
⚙️ Installation & Usage
1. Extract the package.
2. Open index.html in any modern browser.
3. From the admin panel you can:
Add products with images, description, and price.
Create special offers.
Customize card settings.
4. All changes will appear instantly on the site.
---
📱 Compatibility
✔️ Google Chrome
✔️ Mozilla Firefox
✔️ Microsoft Edge
✔️ Safari
✔️ Mobile & Tablet friendly
---
📷 Screenshots
Please check the included screenshots/ folder for previews of the pages (Home, Offers, Admin Panel, Cart).
---
📝 Notes
Code written entirely with HTML + CSS + JavaScript.
No complex external libraries used.
Easy integration with any backend or API.
---
🔗 Database Integration
This template is static but can easily be integrated with any database or API.
Examples:
Supabase → Cloud-based product & offers storage.
Firebase → Use Realtime Database or Firestore.
MySQL / PHP → Connect to a backend for product management.
Any external API → Consume via Fetch or AJAX.
---
📌 Example (JavaScript + Supabase)
<script src="https://unpkg.com/@supabase/supabase-js"></script>
<script>
const SUPABASE_URL = "https://your-project.supabase.co";
const SUPABASE_KEY = "your-anon-public-key";
const supabase = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
async function fetchProducts() {
const { data, error } = await supabase.from("products").select("*");
if (error) console.error("Error fetching products:", error);
else console.log("Products:", data);
}
async function addProduct(name, price) {
const { data, error } = await supabase
.from("products")
.insert([{ name: name, price: price }]);
if (error) console.error("Error adding product:", error);
else console.log("Product added:", data);
}
fetchProducts();
</script>
---
📧 Support
📩 Email: Rascokhalid65@gmail.com
🕑 Response time: Within 24 business hours
Support includes:
Assistance with installation.
Bug fixing (if any).
Clarification of unclear code sections.
Control Panel Settings
The current password is 7732
You can change it from the code yourself
---
كود قاعدة البيانات | Database Code
هذا هو كود SQL لإنشاء جداول قاعدة البيانات اللازمة للمشروع. يمكنك تنفيذ هذا الكود في لوحة تحكم Supabase أو أي قاعدة بيانات PostgreSQL متوافقة.
This is the SQL code to create the necessary database tables for the project. You can execute this code in the Supabase dashboard or any compatible PostgreSQL database.
"-- =============================================
-- إنشاء جداول قاعدة البيانات للمتجر الإلكتروني
-- Database Tables Creation for E-commerce Store
-- =============================================
-- جدول المنتجات | Products Table
CREATE TABLE IF NOT EXISTS products (
id INTEGER GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
name TEXT NOT NULL,
price DECIMAL(10, 2) NOT NULL DEFAULT 0.00,
description TEXT,
images TEXT[] DEFAULT '{}', -- مصفوفة من روابط الصور | Array of image URLs
type TEXT DEFAULT 'normal', -- normal, special, etc.
disabled BOOLEAN DEFAULT FALSE,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
order_index INTEGER DEFAULT 0 -- لترتيب عرض المنتجات | For product display order
);
-- جدول العروض | Offers Table
CREATE TABLE IF NOT EXISTS offers (
id INTEGER GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
name TEXT NOT NULL,
price DECIMAL(10, 2) NOT NULL DEFAULT 0.00,
description TEXT,
images TEXT[] DEFAULT '{}', -- مصفوفة من روابط الصور | Array of image URLs
products_ids INTEGER[] DEFAULT '{}', -- مصفوفة من معرفات المنتجات | Array of product IDs
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- جدول اقتراحات المنتجات | Product Suggestions Table
CREATE TABLE IF NOT EXISTS product_suggestions (
id INTEGER GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
name TEXT NOT NULL,
description TEXT,
suggested_by TEXT, -- اسم أو بريد إلكتروني للمقترح | Name or email of suggester
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- =============================================
-- إنشاء فهارس لتحسين الأداء | Create Indexes for Performance
-- =============================================
-- فهارس لجدول المنتجات | Indexes for products table
CREATE INDEX IF NOT EXISTS idx_products_name ON products(name);
CREATE INDEX IF NOT EXISTS idx_products_type ON products(type);
CREATE INDEX IF NOT EXISTS idx_products_disabled ON products(disabled);
CREATE INDEX IF NOT EXISTS idx_products_order ON products(order_index);
CREATE INDEX IF NOT EXISTS idx_products_created_at ON products(created_at);
-- فهارس لجدول العروض | Indexes for offers table
CREATE INDEX IF NOT EXISTS idx_offers_name ON offers(name);
CREATE INDEX IF NOT EXISTS idx_offers_created_at ON offers(created_at);
-- فهارس لجدول اقتراحات المنتجات | Indexes for product_suggestions table
CREATE INDEX IF NOT EXISTS idx_suggestions_name ON product_suggestions(name);
CREATE INDEX IF NOT EXISTS idx_suggestions_created_at ON product_suggestions(created_at);
CREATE INDEX IF NOT EXISTS idx_suggestions_suggested_by ON product_suggestions(suggested_by);
-- =============================================
-- إنشاء دوال لتحديث التاريخ تلقائياً | Create Functions for Auto-updating Timestamps
-- =============================================
-- دالة لتحديث updated_at تلقائياً | Function to auto-update updated_at
CREATE OR REPLACE FUNCTION trigger_set_timestamp()
RETURNS TRIGGER AS $$
BEGIN
NEW.updated_at = NOW();
RETURN NEW;
END;
$$ LANGUAGE plpgsql;
-- تطبيق الدالة على الجداول | Apply the function to tables
CREATE TRIGGER set_timestamp_products
BEFORE UPDATE ON products
FOR EACH ROW
EXECUTE FUNCTION trigger_set_timestamp();
CREATE TRIGGER set_timestamp_offers
BEFORE UPDATE ON offers
FOR EACH ROW
EXECUTE FUNCTION trigger_set_timestamp();
-- =============================================
-- إنشاء سياسات الأمان (RLS) لـ Supabase | Create Security Policies (RLS) for Supabase
-- =============================================
-- تفعيل RLS على جميع الجداول | Enable RLS on all tables
ALTER TABLE products ENABLE ROW LEVEL SECURITY;
ALTER TABLE offers ENABLE ROW LEVEL SECURITY;
ALTER TABLE product_suggestions ENABLE ROW LEVEL SECURITY;
-- سياسات القراءة العامة (للمستخدمين غير المسجلين) | Public read policies (for unauthenticated users)
CREATE POLICY "Allow public read access to products" ON products
FOR SELECT USING (true);
CREATE POLICY "Allow public read access to offers" ON offers
FOR SELECT USING (true);
CREATE POLICY "Allow public read access to product_suggestions" ON product_suggestions
FOR SELECT USING (true);
-- سياسات الكتابة (للمسؤولين فقط) | Write policies (admin only)
-- ملاحظة: يجب استبدال 'your-service-role-key' بمفتاح الخدمة الخاص بك في Supabase
-- Note: Replace 'your-service-role-key' with your actual service role key in Supabase
CREATE POLICY "Allow admin insert/update/delete on products" ON products
FOR ALL USING (auth.role() = 'service_role');
CREATE POLICY "Allow admin insert/update/delete on offers" ON offers
FOR ALL USING (auth.role() = 'service_role');
CREATE POLICY "Allow admin insert on product_suggestions" ON product_suggestions
FOR INSERT WITH CHECK (auth.role() = 'service_role');
CREATE POLICY "Allow public insert on product_suggestions" ON product_suggestions
FOR INSERT WITH CHECK (true);
-- =============================================
-- إدخال بيانات تجريبية (اختياري) | Insert Sample Data (Optional)
-- =============================================
-- إدخال منتجات تجريبية | Insert sample products
INSERT INTO products (name, price, description, images, type, disabled, order_index) VALUES
('ساعة ذكية', 25.00, 'ساعة ذكية متعددة الوظائف مع شاشة لمس', ARRAY['https://example.com/watch1.jpg', 'https://example.com/watch2.jpg'], 'normal', false, 1),
('سماعات لاسلكية', 15.00, 'سماعات بلوتوث عالية الجودة مع عزل للضوضاء', ARRAY['https://example.com/headphones1.jpg'], 'normal', false, 2),
('شاحن محمول', 10.00, 'شاحن محمول بسعة 10000mAh', ARRAY['https://example.com/charger1.jpg', 'https://example.com/charger2.jpg'], 'normal', false, 3),
('كابل USB', 5.00, 'كابل USB نوع C طول 1.5 متر', ARRAY['https://example.com/cable1.jpg'], 'normal', false, 4),
('حافظة هاتف', 8.00, 'حافظة واقية للهاتف مع دعم للشحن اللاسلكي', ARRAY['https://example.com/case1.jpg'], 'normal', false, 5);
-- إدخال عروض تجريبية | Insert sample offers
INSERT INTO offers (name, price, description, products_ids) VALUES
('عرض العودة للمدارس', 45.00, 'حزمة متكاملة للطلاب تشمل ساعة ذكية وسماعات لاسلكية', ARRAY[1, 2]),
('عرض السفر', 20.00, 'حزمة السفر الأساسية مع شاحن محمول وكابل USB', ARRAY[3, 4]),
('عرض الحماية الكاملة', 12.00, 'حماية هاتفك مع حافظة وكابل USB', ARRAY[4, 5]);
-- =============================================
-- إنشاء وظائف مساعدة | Create Helper Functions
-- =============================================
-- دالة للحصول على المنتجات النشطة مرتبة حسب الترتيب | Function to get active products ordered by order_index
CREATE OR REPLACE FUNCTION get_active_products()
RETURNS TABLE (
id INTEGER,
name TEXT,
price DECIMAL(10, 2),
description TEXT,
images TEXT[],
type TEXT,
created_at TIMESTAMP WITH TIME ZONE,
order_index INTEGER
) AS $$
BEGIN
RETURN QUERY
SELECT p.id, p.name, p.price, p.description, p.images, p.type, p.created_at, p.order_index
FROM products p
WHERE p.disabled = false
ORDER BY p.order_index NULLS LAST, p.created_at DESC;
END;
$$ LANGUAGE plpgsql;
-- دالة للحصول على العروض مع تفاصيل المنتجات | Function to get offers with product details
CREATE OR REPLACE FUNCTION get_offers_with_products()
RETURNS TABLE (
offer_id INTEGER,
offer_name TEXT,
offer_price DECIMAL(10, 2),
offer_description TEXT,
offer_images TEXT[],
product_ids INTEGER[],
product_names TEXT[],
product_prices DECIMAL(10, 2)[],
created_at TIMESTAMP WITH TIME ZONE
) AS $$
BEGIN
RETURN QUERY
SELECT
o.id AS offer_id,
o.name AS offer_name,
o.price AS offer_price,
o.description AS offer_description,
o.images AS offer_images,
o.products_ids AS product_ids,
ARRAY(
SELECT p.name
FROM unnest(o.products_ids) WITH ORDINALITY AS pid(pid, idx)
JOIN products p ON p.id = pid.pid
ORDER BY pid.idx
) AS product_names,
ARRAY(
SELECT p.price
FROM unnest(o.products_ids) WITH ORDINALITY AS pid(pid, idx)
JOIN products p ON p.id = pid.pid
ORDER BY pid.idx
) AS product_prices,
o.created_at
FROM offers o
ORDER BY o.created_at DESC;
END;
$$ LANGUAGE plpgsql;"
ملاحظات مهمة | Important Notes
استبدال الروابط: تأكد من استبدال روابط الصور التجريبية بروابط حقيقية عند إدخال بياناتك.
مفاتيح الأمان: في بيئة الإنتاج، تأكد من تكوين سياسات الأمان (RLS) بشكل صحيح.
النسخ الاحتياطي: قم دائمًا بعمل نسخة احتياطية من قاعدة البيانات قبل تنفيذ تغييرات كبيرة.
الأداء: الفهارس التي تم إنشاؤها ستساعد في تحسين أداء الاستعلامات على الجداول الكبيرة.
Replace Links: Make sure to replace the sample image URLs with real ones when entering your data.
Security Keys: In production, ensure you properly configure the security policies (RLS).
Backup: Always create a backup of your database before executing major changes.
Performance: The created indexes will help improve query performance on large tables
