انتقل إلى المحتوى الرئيسي

لغة قوالب Qalab

Qalab هي لغة القوالب المستخدمة في قوالب Qumra. وهي مشابهة لـ Liquid و Nunjucks، ومصممة لبناء واجهات متاجر ديناميكية.

البنية الأساسية​

الإخراج​

استخدم الأقواس المزدوجة المنحنية لإخراج القيم:

{{ product.title }}
{{ settings.mainColor }}
{{ 'Hello' | upcase }}

Tags​

استخدم {% %} للمنطق والتحكم في التدفق:

{% if product.available %}
  <button>أضف إلى السلة</button>
{% else %}
  <span>غير متوفر</span>
{% endif %}

{% for item in cart.items %}
  <div>{{ item.title }}</div>
{% endfor %}

Filters​

حوّل القيم باستخدام حرف الأنبوب |:

{{ product.title | upcase }}
{{ product.price | money }}
{{ 'style.css' | assets }}

Objects المتاحة​

الوصول إلى بيانات المتجر من خلال هذه الـ objects:

Objectالوصف
productالمنتج الحالي
collectionالمجموعة الحالية
cartسلة التسوق
customerالعميل المسجل الدخول
storeمعلومات المتجر
settingsإعدادات القالب

عرض جميع الـ objects ←

Filters الشائعة​

Filterمثالالناتج
money{{ 1000 | money }}$10.00
assets{{ 'style.css' | assets }}/assets/style.css
translate{{ 'cart.title' | translate }}سلة التسوق
date{{ 'now' | date: '%Y' }}2024

عرض جميع الـ filters ←

Tags الشائعة​

Tagالاستخدام
if / elseالعرض الشرطي
forالتكرار عبر المصفوفات
includeتضمين قوالب أخرى
uiتضمين مكونات واجهة المستخدم
templateتضمين الترويسة/التذييل

عرض جميع الـ tags ←

أمثلة سريعة​

بطاقة المنتج​

<div class="product-card">
  <img src="{{ product.image }}" alt="{{ product.title }}">
  <h3>{{ product.title }}</h3>
  <p>{{ product.price | money }}</p>
  {% if product.available %}
    <button>أضف إلى السلة</button>
  {% endif %}
</div>

استخدام الإعدادات​

<header style="background: {{ settings.headerColor }}">
  <h1>{{ store.name }}</h1>
</header>

الترجمة​

<h2>{{ 'products.title' | translate }}</h2>
<button>{{ 'cart.add' | translate }}</button>

تعلم المزيد​

  • Filters - تحويل القيم
  • Tags - التحكم في التدفق والمنطق
  • Objects - البيانات المتاحة