تصميم RTL أصيل
الواجهة مصممة بالعربية من الأساس، بمتغيرات Tailwind المنطقية (rtl:/ltr:) في كل مكان. لا قلب ميكانيكي، ولا كسور في التخطيط.
dir=rtl · Tailwind logical variants
قالب سلة على محرك Twilight
متجر سلة سريع، أنيق، وقابل للتخصيص بالكامل.
تصميم RTL أصيل، وضع داكن/فاتح من صلب التصميم، و٢٦ بلوكاً قابلاً للتخصيص في محرر التاجر.
متاح بترخيص MIT • مفتوح المصدر استعرض الكود على GitHub
9:41
متجري
مجموعة جديدة
تسوق الآن
لماذا سريع
ما يميز قالب سريع
كل ميزة هنا لها سبب: تجربة شراء واقعية، لا قائمة تسويقية.
وضع داكن/فاتح حقيقي
ليس طبقة CSS فوق التصميم. كل العلامات (--store-bg، --header-bg-color، --footer-bg-color، ...) تتبدّل جذرياً عبر فئة html.dark.
initThemes() · 12+ swapped tokens
٢٦ بلوكاً قابلاً للتخصيص
أبطال وسلايدرات، بنرات، عروض منتجات، تصنيفات، فيديو تفاعلي، أسئلة شائعة، آراء العملاء — كل بلوك يظهر في محرر التاجر بمعاينة وحقول جاهزة.
twilight.json components · S_*.twig
تصفّح كامل التجهيز
قائمة Mega-menu بصور التصنيفات، فلاتر متطوّرة على صفحات التصنيفات، وفُتات الخبز (Breadcrumb) لرحلة شراء واضحة.
features: mega-menu · filters · breadcrumb · menu-images
بطاقة منتج بـ١٥ مفتاحاً
بدون كود: عرض سريع، شراء فوري، شارات تخفيض، مؤقت العرض، معرض صور، خيارات الألوان والمقاسات — كلها يفعّلها التاجر من المحرر.
window.product_card · 15 toggles
محرّك Twilight + Webpack
حِزَم منفصلة لكل صفحة (home / product / cart / checkout)، تحميل صور كسول أصلي (loading=lazy)، وCSS مضغوط — لأداء سريع على الجوال.
webpack.config.js · multi-entry · ITCSS
البلوكات
٢٦ بلوكاً قابلاً للتخصيص، جاهزة للمحرر.
كل بلوك يظهر للتاجر بمعاينة وحقول جاهزة. اختر، أضف، عدّل.
بالإضافة إلى ٥ بلوكات قياسية موروثة من Theme Raed (روابط سريعة، سلايدر منتجات بخلفية، صور مربعة محسنة، الماركات التجارية، آراء عملاء مخصصة).
النظام التصميمي
نظام تصميمي حقيقي، لا قائمة ألوان.
كل ما تراه على هذه الصفحة يستخدم نفس العقود التي يستخدمها القالب: متغيرات CSS، حاويات قياسية، RTL أصلي، وطبقات ITCSS.
العلامات (Tokens)
تتبدّل في الوقت الفعلي مع تبديل الوضعالحاويات
حاويات معرّفة كإضافة Tailwind في tailwind.config.js.container-full
100% fluid
.container-wide
1600px max
.container-narrow
1400px max
.container-base
1280px max
طبقات ITCSS
بنية SCSS تتبع نظام ITCSS
01
SETTINGS
tokens · fonts · breakpoints
02
GENERIC
reset · common · rtl · ltr · animations · lazyload
03
ELEMENTS
form · buttons · radio · radio-images
04
COMPONENTS
header · footer · menus · home-blocks · product · slider · brands · filters
05
UTILITIES
chat-bots · swal · safari-fixes · font-customization
هذه الصفحة هي الديمو الحي
التبديل في الأعلى يبدّل العلامات في كل عنصر تراه. تبديل اللغة يقلب الاتجاه. هذا هو القالب بالضبط.
بطاقة المنتج
بطاقة واحدة، ١٥ مفتاحاً، تأثير فوري.
كل ما يفعّله التاجر في المحرر — مرئي هنا. اضغط أي مفتاح، شاهد التغيير، قرّر.
ينتهي العرض خلال
02:14:33
1
2
3
-30%
قميص رجالي قطن
120 ر.س
170 ر.س
مرّر فوق البطاقة لتجربة التأثيرات السلوكية
التخطيط
تفاعل التمرير
معرض الصور
الشارات والحالة
المحتوى والإجراءات
البناء
خط أنابيب بسيط، نتائج سريعة.
من المصدر إلى محرر التاجر — كل خطوة شفافة، كل ملف في مكانه.
01
المصادر
قوالب Twig، أنماط SCSS بنظام ITCSS، JS بسيط — كلها تحت src/.
src/views/ · src/assets/styles/ · src/assets/js/
02
حقن العلامات
master.twig يحقن متغيرات CSS من إعدادات التاجر ويهيّئ window.product_card والإعدادات العامة قبل البناء.
src/views/layouts/master.twig:81-174
03
بناء Webpack
إدخالات منفصلة لكل صفحة، PostCSS (Tailwind + nesting + preset-env)، SCSS، ضغط CSS في الإنتاج.
webpack.config.js · postcss.config.js · tailwind.config.js
04
ناتج public/
ملفات مع content-hash، صور منسوخة عبر CopyPlugin، مسح كامل قبل كل بناء (output.clean).
public/app.css · public/home.js · public/[chunk].[hash].js
05
مزامنة المعاينة
ThemeWatcher من @salla.sa/twilight يرفع public/ تلقائياً إلى متجر المعاينة بعد كل بناء.
@salla.sa/twilight/watcher.js · salla theme preview
خريطة الحِزَم
إدخال منفصل لكل سطح صفحة — لا تحميل JS غير ضروري.app
عام
app.scss
wishlist.js
app.js
blog.js
home
صفحة
home.js
product
صفحة
product.js
products.js
checkout
صفحة
cart.js
thankyou.js
pages
صفحة
loyalty.js
brands.js
order
صفحة
order.js
testimonials
صفحة
testimonials.js
product-card
جزئي
partials/product-card.js
main-menu
جزئي
partials/main-menu.js
wishlist-card
جزئي
partials/wishlist-card.js
add-product-toast
جزئي
partials/add-product-toast.js
digital-files
جزئي
partials/digital-files.js
ثنائي اللغة من الأساس
كل سلسلة نصية في القالب تأتي من ar.json أو en.json، ويُعرضها Twig عبر trans(). التاجر يقلب اللغة في إعدادات سلة، والقالب يستجيب فوراً.
trans('blocks.header.cart')
→
السلة
·
Cart
ابدأ
جاهز للعمل؟
كل ما تحتاجه — كود، توثيق، معاينة — على بُعد ثلاثة أوامر.
ثلاثة أوامر فقط للبدء:
$
pnpm install
# install dependencies
$
pnpm run watch
# dev build in watch mode (auto-syncs to preview)
$
salla theme preview
# live-preview the theme in a demo store
MIT مفتوح المصدر