Qalab (قالب) - VS Code Extension
Qalab هي إضافة VS Code مصممة خصيصاً لتطوير قوالب متاجر Qumra Cloud. توفر لك تجربة تطوير سلسة مع الإكمال التلقائي الذكي والتحقق من الأخطاء.
المميزات
الإكمال التلقائي الذكي
المتغيرات
اكتب داخل {{ }} واحصل على اقتراحات فورية لجميع المتغيرات المتاحة:
{{ product.title }}
{{ product.price | money }}
{{ cart.total_price | money }}
{{ customer.first_name }}
الفلاتر
بعد كتابة | تظهر لك جميع الفلاتر المتاحة مع شرح لكل فلتر:
{{ product.price | money }}
{{ product.title | capitalize }}
{{ product.description | truncate(100) }}
{{ image | img_url: '500x500' }}
الترجمات
اكتب t( داخل {{ }} للحصول على اقتراحات مفاتيح الترجمة من ملفات locales/:
{{ t("product.add_to_cart") }}
{{ t("common.search") }}
{{ t("cart.empty_message") }}
التاقات
داخل {% %} تحصل على اقتراحات للتاقات المتاحة:
{% if product.available %}
{% for item in cart.items %}
{% set total = 0 %}
دعم تاقات Qumra
UI Components
{% ui 'header.njk' %}
{% ui 'product-card.njk' %}
تظهر لك جميع الملفات الموجودة في مجلد /ui.
{% form 'product' %}
{% form 'customer_login' %}
{% form 'contact' %}
Templates
{% template 'main' %}
{% template 'product' %}
التحقق من الأخطاء
الإضافة تتحقق تلقائياً من:
- ملفات schema.json: التأكد من صحة أنواع الحقول والخصائص المطلوبة
- ملفات pages/*.json: التحقق من وجود الـ widgets والـ blocks
- ملفات .njk: التحقق من وجود ملفات UI المستخدمة والفلاتر الصحيحة
- الترجمات: تحذير عند استخدام مفاتيح ترجمة غير موجودة
Snippets جاهزة
اكتب الاختصار واضغط Tab:
| الاختصار |
النتيجة |
if |
{% if condition %}...{% endif %} |
for |
{% for item in items %}...{% endfor %} |
set |
{% set variable = value %} |
block |
{% block name %}...{% endblock %} |
include |
{% include 'file.njk' %} |
التثبيت
من VS Code Marketplace
- افتح VS Code
- اذهب إلى Extensions (
Ctrl+Shift+X)
- ابحث عن Qalab
- اضغط Install
من ملف VSIX
code --install-extension qalab-0.0.8.vsix
هيكل المشروع المدعوم
my-theme/
├── layouts/
│ └── theme.njk
├── templates/
│ ├── main.json
│ └── product.json
├── widgets/
│ └── product-info/
│ ├── widget.njk
│ └── schema.json
├── ui/
│ ├── header.njk
│ └── footer.njk
├── pages/
│ └── index.json
├── locales/
│ ├── ar.json
│ └── en.json
└── settings/
├── settings-schema.json
└── templates-settings.json
الدعم
صنع بـ ❤️ بواسطة فريق Qumra
