Custom Liquid
Custom Liquid هو مخرج الطوارئ في منشئ المتجر: عندما لا يستطيع أي قسم مدمج التعبير عن تصميم ما، تكتبه أنت — قالب Liquid بترميزه الخاص وCSS محصور النطاق، يوضع على الصفحات كأي قسم آخر ويُ ضبط من لوحة الإعدادات نفسها.
الأقسام المدمجة تحصل مجانًا على إعدادات الثيم وأنظمة الألوان ودعم RTL ومتغيرات المنتجات وتكامل السلة. أما Custom Liquid فلا يحصل على أي من ذلك تلقائيًا — فهو الأداة الصحيحة للقسم المميز الذي لا يستطيع الكتالوج التعبير عنه، لا بديلًا عامًا. (قسم التراكب overlap section يغطي الآن التخطيطات المتراكبة/غير المتناظرة التي كانت تتطلب Liquid.)
تشريح التعريف
تعريف Custom Liquid على مستوى المتجر كله، يُعرَّف بمعرّف (مثل hero-split)، ويحمل:
| الجزء | ما هو |
|---|---|
template | مصدر Liquid. إعدادات النسخة متاحة كـ {{ settings.name }}. |
css | ورقة أنماط محصورة النطاق لكل نسخة: .self يستهدف غلاف المكوّن. |
schema | الإعدادات التي يعدّلها التاجر لكل نسخة — نصوص وألوان ووسائط وقوائم اختيار — تُعرض في اللوحة القياسية. |
defaults | القيم الاحتياطية للإعدادات. |
data | بيانات التجارة التي تحلّها واجهة المتجر داخل القالب (أدناه). |
ضع النسخ بإضافة قسم Custom Liquid إلى صفحة واختيار المعرّف. وتعديل التعريف يحدّث كل نسخة تستخدمه.
بيانات التجارة
صرّح بما يحتاجه القالب وتجلبه واجهة المتجر من جهة العميل:
collection— منتجات مجموعة (قابلة للاختيار لكل نسخة عبر إعداد): collection.title، وcollection.productsمع المعرّف والعنوان والرابط والصورة والسعر والسعر المنسق والتوفر. احرس دائمًا بـ{% if collection.loaded %}واكتب الحالة الفارغة — فالبيانات تصل بعد الرسم الأول.cart— عدد العناصر والإجماليات.shop— العملة.
التفاعلات: data-tt-action
لا يمكن لمخرجات Custom Liquid أن تحتوي على JavaScript أبدًا (راجع الأمان أدناه). التفاعلية تأتي من CSS — ومن مفردات صغيرة موثوقة من الإجراءات التصريحية تستدعيها بسمات data:
| الإجراء | السمات | السلوك |
|---|---|---|
toggle | data-tt-target، وdata-tt-class (الافتراضي tt-open) | يبدّل كلاسًا على الأهداف (أو على الزر المشغِّل نفسه)؛ ويعكس aria-expanded |
tab | data-tt-tab="group"، وdata-tt-target | يفعّل مشغِّلًا ولوحة واحدة لكل مجموعة عبر tt-active |
scroll-to | data-tt-target | يمرّر الهدف بسلاسة حتى يظهر |
carousel-prev / carousel-next | data-tt-target | يقلّب حاوية تمرير، مع مراعاة RTL |
<button data-tt-action="toggle" data-tt-target=".answer">Question?</button>
<div class="answer">…</div>
نسّق الحالات في css الخاص بك: .self .tt-open { … }. والمحدِّدات لا تطابق أبدًا إلا داخل مكوّنك — فالإجراء لا يستطيع الوصول إلى سلة السحب، ولا إتمام الشراء، ولا أي شيء آخر في الصفحة.
نموذج الأمان — لماذا لا تعمل بعض الأشياء
ثلاث طبقات لا يمكنك التنصل منها:
- كل مخرجات
{{ }}يهرّبها المحرك إلى HTML. - يُعقَّم HTML الناتج: تُنزع
<script>و<iframe>ومعالجات الأحداث المضمّنة (onclick=…) وبضعة وسوم أخرى. والقوالب التي تحتوي<script>تُرفض عند الحفظ. - CSS محصور النطاق: يصبح
.selfكلاسًا لكل نسخة. وأسماء@keyframesعامة على مستوى الصفحة — فابدأها بمعرّفك.
النتائج العملية: لا إخراج بـ | raw لترميز آتٍ من الإعدادات، والأكورديونات تُبنى بمربع اختيار داخل الـ <label> الخاص به مع :has() أو إجراء toggle (لا بـ <details> الذي يُنزع)، وأي JavaScript سلوكي مكانه data-tt-action — وليس القالب أبدًا.
قواعد التأليف والأمثلة
قواعد التأليف الكاملة (قائمة المسموحات في المعقِّم، ونمط المحتوى القابل للتكرار، وإرشادات RTL) تُشحن مع مجموعة تعريفات مرجعية مجرَّبة — شريط ماركي، وبانر CTA، وشبكة بنتو، وأكورديون أسئلة شائعة، وشارات ثقة، وجدول مقارنة، وشريط منتجات — كلٌّ منها مختبَر على خط أنابيب العرض الحقيقي. ويحصل عليها المساعدون الذكيون عبر خادم MCP (builder_get_liquid_examples)؛ وهي نقطة البداية الموصى بها لأول تعريف بدلًا من قالب فارغ.
وكما كل شيء في منشئ المتجر، تُجهَّز تعديلات Custom Liquid على مسودتك ولا تصل إلى المتسوقين إلا عند النشر.