تحديث قوالب Liquid لـ Scripts

إذا كنت تقوم بتشغيل برامج نصية في متجرك الإلكتروني، فستحتاج إلى التحقق من كيفية تأثيرها على الصفحات في واجهة متجرك. تتضمن العديد من القوالب تعليمات برمجية لدعم برامجك النصية، لكن البعض الآخر لا يتضمنها. إذا كان قالبك لا يحتوي على التعليمات البرمجية، فيمكنك إضافتها.

استكشاف الأخطاء وإصلاحها

تتضمن معظم المشكلات المتعلقة بالبرامج النصية والقوالب برامج عناصر السطر (line item) النصية التي تقدم خصومات. على سبيل المثال، إجمالي سعر الطلب صحيح، ولكن أسعار عناصر السطر لا تُظهر الخصومات. يحتاج العملاء إلى فهم كيفية احتساب خصوماتهم. فهم يريدون رؤية السعر الأصلي والسعر بعد الخصم، بالإضافة إلى وصف قصير للخصم. إذا كانت أي من هذه التفاصيل مفقودة من سلة التسوق الخاصة بك، فيجب عليك إضافة تعليمات Liquid البرمجية حتى تظهر.

من الطرق الجيدة للتحقق من كيفية تأثير برنامجك النصي على واجهة متجرك هي زيارته كعميل وتنفيذ الإجراءات التي تُشغّل (trigger) البرنامج النصي.

سمات كائن Liquid

تحتوي القوائم التالية على سمات كائن Liquid المطلوبة عادةً لدعم البرامج النصية في سلة تسوق متجرك:

سمات كائن سلة التسوق (Cart):

• cart.total_discount
• cart.original_total_price

سمات عنصر السطر (Line item):

• line_item.discounts
• line_item.message
• line_item.original_price
• line_item.original_line_price
• line_item.total_discount

كائن البرنامج النصي (Script):

• يمكن استخدام كائن script لإرجاع معلومات حول البرامج النصية النشطة في المتجر. يمكن أن يكون هذا الكائن مفيدًا عند تصحيح أخطاء البرامج النصية.

مثال

يصف المثال التالي التغييرات التي يمكنك إجراؤها على قالب cart.liquid لدعم برنامج نصي لعنصر سطر (line item script).

مثال لسلة التسوق

على سبيل المثال، إذا كان لديك سلة تسوق تحتوي على ثلاثة عناصر سطر:

• كرة قدم
  • الكمية: 1
  • سعر الوحدة: $15.00
• كرة تنس
  • الكمية: 5
  • سعر الوحدة: $5.00
• حذاء جري
  • الكمية: 1
  • سعر الوحدة: $30.00

وقمت بنشر برنامج نصي يطبق الخصومات التالية:

• خصم 10% على كرتي تنس أو أكثر
• خصم $5 على جميع الأحذية

فقد يكون قالب cart.liquid الخاص بك عبارة عن جدول بسيط يسرد عناصر السطر وملخصًا لإجمالي مبالغها:

<table class="cart">
  <thead class="heading">
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>

  <tbody class="line-items">
    {% for item in cart.items %}
    <tr>
      <td>{{ item.product.title }}</td>
      <td>{{ item.quantity }}</td>
      <td>{{ item.line_price | money }}</td>
    </tr>
    {% endfor %}
  </tbody>

  <tfoot class="summary">
    <tr>
      <td colspan="2">Total</td>
      <td>{{ cart.total_price | money }}</td>
    </tr>
  </tfoot>
</table>

مع تطبيق الخصومات بواسطة البرنامج النصي، ينشئ هذا القالب الجدول التالي لسلة التسوق الخاصة بك:

تحديث عناصر السطر

لإظهار الخصومات المطبقة بواسطة البرنامج النصي، نحتاج إلى تحديث عناصر السطر لعرض ثلاث معلومات رئيسية:

• سعر السطر قبل الخصومات
• سعر السطر بعد الخصومات
• رسالة تصف الخصومات التي تم تطبيقها.

للقيام بذلك، استخدم سمات كائن Liquid التالية:

• يقوم line_item.total_discount بإرجاع مبلغ الخصم الذي تم تطبيقه على عنصر السطر
• يقوم line_item.original_line_price بإرجاع سعر عنصر السطر قبل الخصومات
• يقوم line_item.message بإرجاع رسالة تصف الخصومات التي تم تطبيقها على عنصر السطر.

قد يكون من المفيد التمييز بين سعر السطر الأصلي وسعر السطر بعد الخصم باستخدام تأثير يتوسطه خط (strikethrough):

<tbody class="line-items">
  {% for item in cart.items %}
  <tr>
    <td>{{ item.product.title }}</td>
    <td>{{ item.quantity }}</td>
    <td>
      {{ item.line_price }}
      {% if item.total_discount > 0 %}
        <s>{{ item.original_line_price }}</s>
        ( {{ item.message }} )
      {% endif %}
    </td>
  </tr>
  {% endfor %}
</tbody>

يجب أن تبدو سلة التسوق الخاصة بك الآن على هذا النحو:

تحديث ملخص سلة التسوق

لمساعدة العميل في تتبع سعر طلبه، يجب عليك أيضًا إظهار:

• المجموع الفرعي (subtotal) الأصلي لسلة التسوق، للسماح للعملاء بمقارنة الإجماليات قبل الخصم وبعده
• إجمالي المدخرات التي حصل عليها العميل في سلة التسوق الخاصة به.

مجددًا، لإضافة هذه المعلومات، استخدم سمات كائن Liquid التالية:

• يقوم cart.total_discount بإرجاع مبلغ الخصم المطبق على العناصر الموجودة في سلة التسوق
• يقوم cart.original_total_price بإرجاع المجموع الفرعي لسلة التسوق قبل الخصومات.

باستخدام هذه المعلومات، قد تبدو كتلة .summary المحدثة الخاصة بك على هذا النحو:

<tfoot class="summary">
  <tr>
    <td colspan="2">Subtotal</td>
    <td>{{ cart.original_total_price | money }}</td>
  </tr>
  <tr>
    <td colspan="2">Discount Savings</td>
    <td>{{ cart.total_discount | money }}</td>
  </tr>
  <tr>
    <td colspan="2">Total</td>
    <td>{{ cart.total_price | money }}</td>
  </tr>
</tfoot>

يجب أن يبدو جدول سلة التسوق الخاصة بك الآن على النحو التالي:

من خلال إضافة بعض كائنات Liquid الجديدة إلى قوالبك، يمكنك مساعدة عملائك على فهم كيفية احتساب خصوماتهم.

أمثلة أخرى

يُظهر مثال Liquid التالي الخصومات لكل عنصر سطر:

{% if item.original_line_price != item.line_price %}
  <small class="original-price"><s>{{ item.original_line_price | money }}</s></small>
  {% endif %}
  {{ item.line_price | money }}
  {% for discount in item.discounts %}
  <small class="discount">{{ discount.title }}</small>
  {% endfor %}

اطلع على مثال خصم آخر يتضمن تغييرات كود Liquid.