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 { … }. والمحدِّدات لا تطابق أبدًا إلا داخل مكوّنك — فالإجراء لا يستطيع الوصول إلى سلة السحب، ولا إتمام الشراء، ولا أي شيء آخر في الصفحة.

نموذج الأمان — لماذا لا تعمل بعض الأشياء

ثلاث طبقات لا يمكنك التنصل منها:

1. كل مخرجات {{ }} يهرّبها المحرك إلى HTML.
2. يُعقَّم HTML الناتج: تُنزع <script> و<iframe> ومعالجات الأحداث المضمّنة (onclick=…) وبضعة وسوم أخرى. والقوالب التي تحتوي <script> تُرفض عند الحفظ.
3. ‏CSS محصور النطاق: يصبح .self كلاسًا لكل نسخة. وأسماء @keyframes عامة على مستوى الصفحة — فابدأها بمعرّفك.

النتائج العملية: لا إخراج بـ | raw لترميز آتٍ من الإعدادات، والأكورديونات تُبنى بمربع اختيار داخل الـ <label> الخاص به مع :has() أو إجراء toggle (لا بـ <details> الذي يُنزع)، وأي JavaScript سلوكي مكانه data-tt-action — وليس القالب أبدًا.

قواعد التأليف والأمثلة

قواعد التأليف الكاملة (قائمة المسموحات في المعقِّم، ونمط المحتوى القابل للتكرار، وإرشادات RTL) تُشحن مع مجموعة تعريفات مرجعية مجرَّبة — شريط ماركي، وبانر CTA، وشبكة بنتو، وأكورديون أسئلة شائعة، وشارات ثقة، وجدول مقارنة، وشريط منتجات — كلٌّ منها مختبَر على خط أنابيب العرض الحقيقي. ويحصل عليها المساعدون الذكيون عبر خادم MCP ‏(builder_get_liquid_examples)؛ وهي نقطة البداية الموصى بها لأول تعريف بدلًا من قالب فارغ.

وكما كل شيء في منشئ المتجر، تُجهَّز تعديلات Custom Liquid على مسودتك ولا تصل إلى المتسوقين إلا عند النشر.