Liquid

التعريف

Liquid هي لغة قوالب (Template Language) مفتوحة المصدر طوّرتها شركة Shopify عام 2006، وتُستخدم لبناء واجهات المتاجر الإلكترونية ديناميكيًا. هي ليست لغة برمجة كاملة، بل لغة عرض (Presentation Language) تُتيح للتجار وأصحاب المتاجر إدراج منطق بسيط داخل صفحات HTML دون الحاجة لكتابة كود خلفي معقّد. تُشغَّل Liquid على خوادم Shopify (Server-Side Rendering)، مما يعني أن الصفحة تُبنى بالكامل قبل وصولها لمتصفح الزائر، وهو ما ينعكس مباشرة على سرعة التحميل وتحسين محركات البحث (SEO).

من الناحية التقنية، تعتمد Liquid على ثلاث ركائز أساسية: الكائنات (Objects) مثل {{ product.title }}، والوسوم (Tags) مثل {% if %} و{% for %}، والفلاتر (Filters) مثل {{ price | money }}. هذه البنية تجعلها آمنة (Sandboxed) بحيث لا يستطيع أي تاجر تنفيذ أوامر ضارة على الخادم.

تشبيه مبسّط

تخيّل أن متجرك الإلكتروني مطعم. الـ HTML هو الطاولة والكراسي (الهيكل الثابت). الـ CSS هو الديكور والإضاءة (المظهر). أما Liquid فهو النادل الذكي الذي يعرف أن العميل الفلاني يفضّل القهوة السادة، فيجلب له الطلب الصحيح تلقائيًا حسب بياناته المحفوظة. بمعنى آخر: Liquid يقرأ بيانات متجرك (منتجات، أسعار، مخزون، عملاء) ويقرر ماذا يعرض لكل زائر في اللحظة المناسبة.

الصيغة الأساسية

{{ object.property | filter: argument }}
{% tag condition %}
 ... المحتوى ...
{% endtag %}

مثال عملي على عرض سعر منتج مع خصم 20%:

{% assign discount = product.price | times: 0.8 %}
<span>{{ discount | money }}</span>

إذا كان سعر المنتج 250 ريالًا، فسيظهر للعميل: 200.00 ريال.

جدول مقارن: Liquid مقابل البدائل

سيناريوهات التطبيق في التجارة الإلكترونية

1. عرض المنتجات المخصّصة حسب السوق: باستخدام {% if localization.country.iso_code == "SA" %} لعرض السعر بالريال وشحن مجاني فوق 200 ريال، مقابل عرض بالدرهم للإمارات فوق 300 درهم.

2. شارات المخزون التلقائية: {% if product.available %} لإظهار "متوفر" أو "نفد المخزون"، وهو ما يرفع معدل التحويل بنسبة تصل إلى 18% وفق دراسات DTC.

3. صفحات هبوط مخصّصة للحملات: إنشاء قالب page.ramadan-offer.liquid يعرض عرضًا موسميًا بشروط معيّنة دون لمس باقي المتجر.

4. السلات المتروكة: عبر {% if cart.item_count > 0 %} لإظهار شريط تذكيري أعلى الصفحة.

5. تخصيص توصيات المنتجات: استخدام {% for product in collections.best-sellers.products limit: 4 %} لعرض أفضل 4 منتجات مبيعًا.

الأخطاء الشائعة

- الخلط بين assign وcapture: الأولى لتعيين قيمة بسيطة، والثانية لالتقاط كتلة HTML كاملة.

- نسيان endfor أو endif: يؤدي لخطأ في بناء الثيم بالكامل.

- استخدام Liquid لعمليات ثقيلة: مثل الحسابات المعقّدة أو الاستعلامات المتكررة، مما يبطئ تحميل الصفحة.

- تعديل ملفات الثيم مباشرة دون نسخة احتياطية: أي خطأ قد يُعطّل المتجر بالكامل.

- الاعتماد على Liquid للتفاعلات الفورية: مثل إضافة للسلة دون تحديث الصفحة، فهذا يتطلب JavaScript (AJAX API).

- تجاهل حدود Liquid: الحد الأقصى 50,000 حرف لكل ملف قالب، و100 مدخل في الحلقة الواحدة افتراضيًا لتجنّب البطء.

- افتراض أن Liquid يعمل خارج Shopify: نعم هي مفتوحة المصدر، لكن ميزات كثيرة (مثل cart وcheckout) مرتبطة بمنصة Shopify فقط.

مصطلحات ذات صلة

- Theme (الثيم): مجموعة ملفات Liquid التي تُشكّل مظهر المتجر.

- Section (قسم): وحدة قابلة للتخصيص من لوحة التحكم، مكتوبة بـ Liquid.

- Snippet (مقتطف): ملف Liquid صغير قابل لإعادة الاستخدام عبر {% render %}.

- Schema: كتلة JSON داخل ملفات Liquid تُحدّد إعدادات القسم في محرر الثيم.

- Metafield: حقل بيانات إضافي يُقرأ في Liquid لتخصيص المحتوى.

- Shopify CLI: أداة تطوير لبناء ثيمات Liquid محليًا ورفعها.

- Hydrogen / Storefront API: البديل الحديث لـ Liquid في بناء واجهات Headless.

خلاصة عملية

إذا كنت تدير متجر DTC على Shopify، فإن إتقان Liquid يمنحك تحكّمًا كاملًا في تجربة العميل دون الحاجة لمطوّر لكل تعديل بسيط. ابدأ بتعلّم الكائنات الأساسية (product, collection, cart, customer)، ثم تدرّب على الوسوم الشرطية والحلقات، وستتمكن من بناء صفحات هبوط مخصّصة، وعروض موسمية، وتجارب شراء محلية (Localized) ترفع معدل التحويل بشكل ملموس.