قالب سلة فاخر · مبني على Twilight

سيرا.
متجر يستحق إطلالتك.

قالب متجر سلة مبني على محرك Twilight، عربيٌ بالأولوية مع وضع داكن وفاتح أصيلين، ١٢ قسماً مخصصاً، و٦٠+ إعداداً للتاجر — من شريط العروض المتحرك إلى تسوّق الإطلالة بنقاط تفاعلية.

اكتشف الأقسام عرض على GitHub
قسماً مخصصاً
12
إعداداً للتاجر
60+
ميزة عامة
17
جديد

عباية حرير الكلاسيكية

٤٢٠ ر.س ٥٢٠ ر.س
سيرا· إطلالات متكاملة· تسوّق الإطلالة· وضع داكن أصيل· ٦٠+ إعدادًا· عربيٌ بالأولوية·

ما الذي يميّز سيرا

قالب صُمّم للتاجر، لا للمطوّر فقط.

كل ميزة هنا مُختبَرة في متاجر سلة حقيقية: عربي بالأولوية، إمكانية وصول، أداء، وأناقة تصلح لقطاع الأزياء والإكسسوارات.

عربي بالأولوية · RTL

كل التحركات، الخطوط، الأسهم، والتباعد مصممة من البداية للاتجاه من اليمين لليسار — مع `rtl:` و `ltr:` بدلًا من `left/right` الخام.

وضع داكن وفاتح أصيلان

`darkMode: 'class'` على html، ومجموعتان كاملتان من متغيرات CSS — `--text-primary`, `--card-bg`, `--header-bg-color` — تتبدّل لحظيًا دون إعادة تحميل.

تسوّق الإطلالة بالنقاط

قسم `H_product_set` يضع نقاطًا تفاعلية بإحداثيات نسبية على أي صورة، فتتحوّل صورة منسّقة إلى متجر قابل للنقر — مع لمحة سعر عند المرور.

٦٠+ إعدادًا من محرّر سلة

عرض الصفحة، استدارة البطاقات، شفافية الهيدر، شاشة تحميل بضبابية أو لون، شريط علوي ترويجي، عداد عروض — كل شيء قابل للتعديل بدون كود.

حركات احترافية على التمرير

`IntersectionObserver` مع تأخير متدرّج (`--delay`) لكل مجموعة، يحترم `prefers-reduced-motion`، ويرصد المحتوى الديناميكي عبر `MutationObserver`.

١٢ قسمًا حصريًا لسيرا

أقسام `H_*` مبنية لقطاع الأزياء: إطلالة كاملة، فروع متعددة، استعراض تشكيلات، أسئلة شائعة بإمكانية وصول كاملة، ومارّكي للعروض.

مكتبة الأقسام

٣١ قسمًا جاهزًا في محرّر سلة.

١٢ قسمًا حصريًا لسيرا (H_*) مبنية للأزياء، و١٩ قسمًا قياسيًا موروثًا من Twilight — كلها تعمل من نفس المحرّر، بنفس متغيرات الألوان والتباعد.

بانر رئيسي home.H_hero_section

البانر الرئيسي

سلايدر بعرض كامل بتأثير عمق متوازٍ، تشغيل تلقائي، وإمكانية تخصيص الارتفاع لكل من سطح المكتب والجوال.

h_hero_height_pc hero_slider_auto hero_slider_delay
تشكيلات home.H_special_categories

تشكيلات مميزة

بطاقات تشكيلات بتأثير «المروحة» على الديسكتوب، وعلى الجوال تنقلب إلى سلايدر بزوايا ±٣°.

category_image category_bg_img item_link
عروض home.H_marquee

شريط الإعلانات المتحرك

شريط تمرير تلقائي بأيقونات ونصوص، مع قناع تلاشٍ اختياري على الحواف، وإيقاف عند المرور.

marquee_speed has_mask marquee_bg_color
إطلالة home.H_featured_look

واجهة المنتجات المميزة

تقسيم ٢٥/٧٥: شريط جانبي بشعار المتجر وأسهم، وسلايدر بطاقات منتج تُجلب ديناميكيًا فوق الصورة.

sec_collection selected_product h_featured_arrows_sw
منتجات home.H_promo_products

بانر تسويقي للمنتجات

تخطيط مزدوج غير متماثل: ٤ بطاقات منتج تحيط ببانر مركزي بنص علامة مائية، مع شريط كود خصم اختياري بنسخ بنقرة.

selected_product banner_image promo_title
إطلالة home.H_look_banner

بانر الإطلالة

صورة عارضة كبيرة مع شبكة منتجات قابلة للطي بنقرة على الزر، وتأثير دوران أيقونة الشيفرون.

products_source bg_style bg_image_overlay
تصنيفات home.H_explore_categories

اكتشف الأقسام

لوحتان متزامنتان: قائمة أقسام قابلة للتمدد على اليسار، وصورة لاصقة على اليمين تتبدّل بانتقال سلس.

explore_category_collection products_number btn_txt
تسوّق الإطلالة home.H_product_set

تسوّق الإطلالة

منتقي منتجات تفاعلي بنقاط مرقّمة بإحداثيات نسبية على صورة مركزية، مع لمحة سعر عند المرور وفتح درج المنتج بالنقر.

main_image products_list[x,y] has_grid_img
محتوى home.H_FAQ

الأسئلة الشائعة

لوحة معلومات لاصقة بزرّ CTA، إلى جانب أكورديون بتنقّل لوحة المفاتيح (سهم لأعلى/لأسفل/Home/End) وعلامات Schema.org.

faq_collection button_url enable_custom_colors
آراء home.H_testimonials

آراء العملاء

سلايدر آراء بعمودين بتأثير parallax متدرّج على النص والنجوم والصورة، مع بانر جانبي اختياري.

reviews auto_play banner_image
مقالات home.H_blog_posts

أحدث المقالات

مقال رئيسي مميّز مع شبكة ٣ أعمدة لبقية المقالات، بطاقات بتحميل كسول، عرض الوسوم، وعدّاد إعجابات/تعليقات.

special_article articles main_title
فروع home.H_branches

فروعنا

تبويبات مواقع تظهر خرائط Google مدمجة (تحميل كسول) مع بطاقة معلومات تطفو فوق الخريطة: ساعات العمل، الهاتف، العنوان.

collection[] map_embed_code branch_hours

نظام التصميم

متغيّرات وألوان وحركة تعمل لصالحك.

كل لون وكل استدارة وكل مسافة في سيرا تأتي من متغيّر CSS واحد، يُحقن في وقت التشغيل من إعدادات التاجر — جرّبها هنا مباشرة.

اللوحة اللونية

انقر على أي لون لنسخ قيمته

عرض المحتوى

أربعة عروض جاهزة عبر `tailwind.config.js` يختار التاجر بينها من المحرر.

.container-narrow 1200px
.container-base 1280px
.container-wide 1600px
.container-full بدون حدّ

الخطوط

عائلتان: عرض أنيق وأخرى متعددة الأوزان للنص الجاري — مدفوعتان بمتغيّر `--font-main` من `theme.font`.

Display · El Messiri / Playfair Display

سيرا

Body · Tajawal / Inter

إطلالة مكتملة من قطع خفيفة تواكب تفاصيل يومك، بتشكيلة ألوان دافئة وقماش يلامس البشرة.

المسافات بين الأقسام

إعداد `space_inner` في `twilight.json` يختار سلّم المسافات — من xxs إلى xl — والقيم تتدرّج تلقائيًا بين الجوال وسطح المكتب.

xxs
24px
xs
40px
md
56px
lg
80px
xl
112px
def
96px

استدارة العناصر

حرّك المؤشّر لرؤية متغيّرات CSS تتحدّث لحظيًا — نفس المتغيّرين اللذين يستخدمهما القالب: `--btns-radius-val` و `--card-radius-val`.

8px
12px

معاينة مباشرة

بطاقة تجريبية

بطاقة المنتج

ثمانية مفاتيح تغيّر كل شيء.

من `master.twig` تتدفّق قيم التاجر إلى `window.productCard`، وبطاقة المنتج تستجيب لها لحظيًا. كل تبديل أدناه يغيّر فعلًا ما يظهر للزائر.

معاينة مباشرة — مرّر فوق البطاقة

20%-
جديد
(48)

عباية حرير الكلاسيكية

٤٢٠ ر.س ٥٢٠ ر.س
المقاس:

مفاتيح بطاقة المنتج

الإعدادات الحيّة

global window object 
window.productCard = { ... };

البنية والتقنية

بسيط من حيث الاعتماد، صارم من حيث الانضباط.

سيرا يحتضن خمس مكتبات تشغيلية فقط، حزم webpack أحادية لكل صفحة (لا code-splitting)، وعدم وجود إطار JS — كل ذلك ليبقى الأداء قابلًا للتنبؤ والصيانة سهلة.

١

المصدر

src/
src/
├─ views/ · Twig
├─ assets/js/ · vanilla JS
├─ assets/styles/ · SCSS · ITCSS
└─ locales/ · ar.json · en.json
+ twilight.json
مخطط محرّر التاجر
٢

البناء

webpack.config.js
  • • ١٢ مدخلاً مسمّى
  • • Babel + core-js@3
  • • Tailwind 3.4 + PostCSS
  • • Terser · drop_console · mangle.toplevel
  • • splitChunks: false
  • • runtimeChunk: false
  • • output.clean: true
٣

المخرجات

public/
public/
├─ app.{js,css} · global
├─ home.{js,css}
├─ product.{js,css}
├─ product-card.{js,css}
├─ main-menu.{js,css}
└─ … 7 more
حزم أحادية لكل دخل، تُنشَأ من نقطة الصفر في كل بناء.

المكدّس التقني

خمس مكتبات تشغيلية، اختيرت بعناية.

Twilight · Salla Twig Tailwind 3.4 SCSS · ITCSS Vanilla JS webpack 5 Babel pnpm

الاعتماديات وقت التشغيل

animejs fslightbox lite-youtube-embed mmenu-light sweetalert2

خيارات مقصودة

  • ● لا code-splitting — حزمة لكل صفحة، يفتح المتصفح ملفًا واحدًا.
  • ● لا اختبارات وحدة ولا linter — قرار صريح يقلّل ضوضاء الصيانة.
  • ● `salla` كائن عالمي يحقنه Twilight — لا استيراد، تكامل تشغيلي.
  • ● `twilight.js` ملفّ مساعد للـ IDE فقط — مستثنى من البناء.
  • ● `pnpm` مفروض عبر `npx only-allow pnpm` في `preinstall`.

جاهز للانطلاق

متجر يستحق إطلالتك. هل أنت جاهز؟

سيرا مفتوح المصدر تمامًا — استنسخ المستودع، شغّل `pnpm install`، وابدأ التخصيص. وإن كنت تاجرًا، تواصل معنا للحصول على تثبيت كامل وتدريب.

تواصل عبر واتساب استنسخ على GitHub
أو راسلنا مباشرة nourn882001@gmail.com +20 155 455 4000
١٢
قسمًا حصريًا
٦٠+
إعدادًا للتاجر
٥
اعتماديات فقط