تابي tabby
معاينة

قالب سلة احترافي — مبني على Twilight

تابي tabby

متجر سلة سريع، عربي أولاً، بأكثر من ٢٤ مكونًا قابلًا للتخصيص — مع نظام ألوان كامل ووضع داكن جاهز.

تصفح المكونات معاينة مباشرة

02 / مميزات

مميزات رئيسيةKey features

القدرات التي يقدمها القالب — مستخرجة من إعدادات Twilight ونقاط الإدخال الفعلية في البناء. The capabilities the theme actually ships, traced back to Twilight settings and webpack entry points.

03 / المكونات

المكونات المخصصةCustom blocks (T_*)

تسعة عشر مكونًا منزليًا مبنيًا خصيصًا للقالب — كل واحد منها مسجّل في twilight.json بصورة معاينة وحقول قابلة للتخصيص للمالك. Nineteen home blocks built specifically for this theme — each registered in twilight.json with a preview image and a configurable field schema for the merchant editor.

03b / Standard

المكونات القياسية من سلةStandard Salla blocks

ستة مكونات قياسية مفعّلة في القالب بدون تعديل، تكمّل المجموعة المخصصة. Six standard Salla blocks enabled in the theme as-is, complementing the custom set.

04 / التصميم

نظام التصميمDesign system

كل لون، حاوية، ووضع عرض — متغيرات CSS تحت :root. بدّل الوضع الليلي أو اللغة في الأعلى وراقب القيم تتحدث مباشرة. Every colour, container, and direction sits on a :root CSS variable. Toggle dark mode or language up top and watch the values update live.

جرّب الوضع الليلي ↑Try the toggle ↑

04.a لوحة الألوان — قيم حيةLive colour palette

كل خانة تعرض اسم متغيّر CSS الفعلي في القالب وقيمته الحالية. بدّل الوضع ↑ وستتغيّر القيم. Each chip is a real theme CSS variable and its current computed value. Toggle the mode above and the values update.

04.b نظام الحاوياتContainer system

أربع حاويات جاهزة في tailwind.config.js: container-base ١٢٨٠، container-wide ١٦٠٠، container-narrow ١٢٠٠، container-full ١٠٠٪. Four containers from tailwind.config.js: container-base 1280, container-wide 1600, container-narrow 1200, container-full 100%.

container-full 100%
container-wide 1600
container-base 1280
container-narrow 1200

04.c الاتجاه — RTL أولاًDirection — RTL-first

القالب يضبط <html dir> بحسب theme.is_rtl. بدّل اللغة ↑ ولاحظ ترتيب العناصر، الأيقونات، والـ margins ينعكس بالكامل. The theme drives <html dir> from theme.is_rtl. Toggle language ↑ — the order, icon side, and margins all flip.

1أولFirst
2ثانٍSecond
3ثالثThird
إلى الأمامForward →

05 / بطاقة المنتج

تحكم حي ببطاقة المنتجLive product-card controls

ثمانية مفاتيح فعلية من window.tabby_features — كل مفتاح هنا يطابق سلوك القالب الحقيقي. Eight live switches from window.tabby_features — each one matches the theme's real behaviour.

src/views/layouts/master.twig
−25%
متوفرIn stock
ينتهي خلالEnds in 02:14:33
جديدNEW كميات محدودةLIMITED

عطر تابي الخشبيTabby Wood Eau de Parfum

تابي · العطورtabby · Fragrance

120SAR 160

06 / البنية التقنية

البنية التقنيةUnder the hood

محرّك Twilight · Webpack بثلاثة عشر مدخلًا · ITCSS فوق Tailwind بـ @apply · pnpm حصريًا. Twilight engine · 13-entry Webpack · ITCSS over Tailwind via @apply · pnpm-only.

06.a

مداخل WebpackWebpack entries

كل مدخل ينتج باندل JS مستقلًا في public/ يُحمَّل عند الحاجة فقط. Each entry emits its own JS bundle into public/, loaded only where it's used.

  1. appأساس الموقع، header، menu، modalssite shell, header, menu, modals
  2. homeالصفحة الرئيسية والمكوناتhome page & T_* block logic
  3. productصفحة المنتج المفردsingle product page
  4. product-cardweb component للبطاقةcard web component
  5. products-bundleسلايدر/قائمة المنتجاتproducts slider / list
  6. main-menuالقائمة الرئيسية والـ mega-menumain menu + mega menu
  7. wishlist-cardقائمة الأمنياتwishlist card
  8. add-product-toastإشعار «أُضيف للسلة»"added to cart" toast
  9. digital-filesالمنتجات الرقميةdigital files
  10. checkoutالسلة وصفحة الشكرcart + thank-you
  11. orderصفحة الطلبorder page
  12. pagesصفحات الولاء والبرانداتloyalty + brands
  13. testimonialsقصص العملاءcustomer stories
webpack.config.js · module.exports.entry
06.b

طبقات ITCSSITCSS layers

SCSS منظَّم من العام للخاص. Tailwind داخل SCSS عبر @apply لإبقاء الـ DOM نظيفًا. SCSS layered from generic to specific. Tailwind is consumed inside SCSS via @apply to keep markup terse.

  1. 01
    settings tailwind، الخطوط، المتغيرات الجذرية، breakpoints. tailwind, fonts, root vars, breakpoints.
  2. 02
    generic reset، animations، lazyload، rtl/ltr. reset, animations, lazyload, rtl/ltr.
  3. 03
    elements forms، buttons، radio. forms, buttons, radio.
  4. 04
    components header، footer، slider، product، home-blocks، loyalty. header, footer, slider, product, home-blocks, loyalty.
  5. 05
    utilities swal، chat-bots، إصلاحات سفاري. swal, chat-bots, safari fixes.
src/assets/styles/app.scss
06.c

سير العمل في الطرفيةThe CLI workflow

pnpm حصريًا — يفرضه preinstall. التحديث الحي عبر Salla CLI ومن Twilight ThemeWatcher. pnpm-only — enforced via preinstall. Live sync through Salla CLI + Twilight ThemeWatcher. 

$ pnpm install            # pnpm only — npm/yarn refused at preinstall
$ pnpm watch              # webpack --mode development --watch + ThemeWatcher
$ salla theme p           # live preview in the merchant store
$ node check-static-text.js # lint Twig for hardcoded AR/EN text
$ pnpm prod               # minified build → public/ (wiped on every run)

جاهز للتثبيتReady to install

افتح تابي على متجرك خلال دقائق. Get tabby on your storefront in minutes.

شاهد القالب يعمل على متجر تجريبي حقيقي، ثم اربطه بمتجرك عبر Salla Partners Portal وشغّل pnpm watch لمتابعة التغييرات لحظيًا. See the theme running live on a demo store, then link it to your own via the Salla Partners Portal and run pnpm watch for live updates.

معاينة مباشرة على متجر سلةLive preview on a Salla store Salla Partners PortalSalla Partners Portal تواصل مع المؤلفContact the author
  • الإصدارVersion 1.322.0
  • الترخيصLicense MIT
  • المحرّكEngine Twilight ≥ 2.14
  • اللغاتLocales ar · en