شكل

«معظم النماذج التجريبية للتجارة الإلكترونية صفحة رئيسية ووعد. نحن بنينا المتجر كاملاً — ثماني صفحات، وسلة تعمل فعلياً، وتصفية متعددة المعايير، بالإنجليزية والعربية — حتى لا يبقى السؤال هل نستطيع، بل متى نبدأ.»

VoltCrate

دراسة حالة

لنتواصل أيقونة
أيقونة نظرة عامة

VoltCrate

المتجر ليس صفحة، بل منظومة — كتالوج، وطريقة لتضييقه، وسلة تتذكّر ما بداخلها، ومسار شراء لا يفقد العميل في منتصفه. لذلك ابتكرنا متجر إلكترونيات استهلاكية في دبي وبنيناه بالكامل: ثمانية عشر منتجاً بمواصفات حقيقية، وتصفية متعددة المعايير مع أعداد حيّة، وسلة تبقى بعد إعادة التحميل، وصفحات منتجات ومدوّنة ودليل علامات، بالإنجليزية والعربية، على واجهة داكنة بلمسة زمردية.

مشروع تجريبي — ذاتي المبادرةالخدمة: تجارة إلكترونية وتصميم واجهاتالقطاع: تجزئة الإلكترونيات الاستهلاكيةالتقنيات: JavaScript، CSS Grid، WebPالسنة: 2026عرض النسخة الحية ↗
أيقونة ما الذي يثبته

متجر حقيقي، لا لقطة شاشة

٨

صفحات، جميعها تعمل

EN / AR

متجر معكوس بالكامل للعربية

٢٥١ كب

مجموعة الصور كاملة بصيغة WebP

icon لقطات

كيف يبدو فعلياً

لقطات من الموقع الحيّ — ليست تصاميم توضيحية. كل لقطة للموقع قيد التشغيل بمقاس 1440×900.

voltcrate.netlify.app
الصفحة الرئيسية
٠١

الصفحة الرئيسية

واجهة متغيرة فوق صور منتجات مصمّمة خصيصاً، يليها شريط الوعود ثم بطاقات الفئات التي تقود مباشرة إلى مرشّحات المتجر.

voltcrate.netlify.app/#top-picks
الفئات والمختارات
٠٢

الفئات والمختارات

أربع فئات رئيسية ورفّ مختارات يحمل شارات «جديد» و«الأكثر مبيعاً» و«تخفيض»، مع أسعار بالدرهم ونسبة خصم محسوبة من السعر الأصلي.

voltcrate.netlify.app/shop.html
المرشّحات التفصيلية
٠٣

المرشّحات التفصيلية

مرشّحات للفئة والتوفّر والسعر والتقييم، لكل منها عدّاد حيّ يُعاد حسابه مع كل تضييق للنتائج، وكل حالة لها رابط قابل للمشاركة.

voltcrate.netlify.app/product.html?p=soundpro-x1
صفحة المنتج
٠٤

صفحة المنتج

معرض صور مع تكبير يتتبّع المؤشر، ورصيد فعلي للمخزون، ومحدّد كمية، ولوحات مواصفات قابلة للطي، إلى جانب رفّ منتجات ذات صلة.

voltcrate.netlify.app/cart.html
سلّة تحتفظ بمحتواها
٠٥

سلّة تحتفظ بمحتواها

تُحفظ محليّاً فتبقى بعد إعادة تحميل الصفحة وترافق العميل بين الصفحات، وتقرأ شارة الرأس واللوحة الجانبية وهذه الصفحة من مصدر واحد.

voltcrate.netlify.app · العربية
عربيّة بالكامل
٠٦

عربيّة بالكامل

ليست طبقة ترجمة. خصائص CSS المنطقية تعكس المتجر بأكمله — التنقل والواجهة والشارات والمرشّحات والأرقام — بدل ترقيع تخطيط موجّه من اليسار.

أيقونة كيف بُني

التفاصيل

الكتالوج ملف بيانات واحد، وكل ما عداه مشتق منه — أعداد عوامل التصفية، وخيارات الترتيب، وشريط المنتجات ذات الصلة، والروابط المباشرة التي تتيح مشاركة فئة أو علامة كرابط مستقل. تُحفظ السلة محلياً فتبقى بعد إعادة التحميل وترافق العميل بين الصفحات، وتقرأ اللوحة الجانبية وصفحة السلة وشارة الرأس جميعها من مصدر واحد. صُوّرت المنتجات كمجموعة متجانسة بإضاءة زمردية على خلفية شبه سوداء، ثم حُوّلت إلى WebP — من ٤٫٣ ميغابايت إلى ٢٥١ كيلوبايت. وكل خصائص التخطيط منطقية لا فيزيائية، فتنعكس الواجهة بالكامل عند التبديل إلى العربية بدل ترقيعها، وقد جرى التحقق من تباين كل نص مقابل معيار WCAG AA قبل الإطلاق.

ملاحظة: VoltCrate مشروع تجريبي ذاتي المبادرة. المتجر ومنتجاته وأسعاره وكمياته جميعها افتراضية ولا شيء معروض للبيع. الغرض منه عرض هندسة التجارة الإلكترونية وتصميم الواجهات.

دراسة الحالة التاليةألفينار ريزيدنسز ←

لنتواصل معًا

* سؤال أو مشروع تريد مناقشته؟ فريق GOAT Technologies هنا — مكتب رئيسي في أمريكا وفرع في دبي. عبّئ النموذج أدناه!

GOAT Technologies
🇺🇸 واتساب أمريكا+1 212 321 5175🇦🇪 واتساب الإمارات+971 50 109 1453