עדכון תבניות ה-Liquid עבור סקריפטים

אם אתה מפעיל סקריפטים בחנות המקוונת שלך, עליך לבדוק כיצד הם משפיעים על הדפים בחזית החנות שלך. ערכות נושא רבות כוללות קוד לתמיכה בסקריפטים שלך, אך חלקן לא. אם ערכת הנושא שלך אינה כוללת את הקוד, תוכל להוסיף אותו.

פתרון בעיות

רוב הבעיות בסקריפטים ובערכות נושא קשורות לסקריפטים של פריטי שורה שמציעים הנחות. לדוגמה, המחיר הכולל של ההזמנה נכון, אך מחירי פריטי השורה אינם מציגים את ההנחות. לקוחות צריכים להבין כיצד מחושבות ההנחות שלהם. הם רוצים לראות את המחיר המקורי והמחיר לאחר הנחה, וכן תיאור קצר של ההנחה. אם אחד מהפרטים הללו חסר בסל שלך, עליך להוסיף את קוד ה-Liquid כדי שהם יופיעו.

דרך טובה לבדוק כיצד הסקריפט משפיע על חזית החנות שלך היא לבקר בה כלקוח ולבצע את הפעולות שמשמשות כטריגר לסקריפט.

מאפיינים של אובייקטי Liquid

הרשימות הבאות מכילות מאפיינים של אובייקטי Liquid שבדרך כלל נדרשים כדי לתמוך בסקריפטים בסל של החנות שלך:

מאפיינים של אובייקט הסל:

• cart.total_discount
• cart.original_total_price

מאפיינים של פריט שורה:

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

אובייקט סקריפט:

• ניתן להשתמש באובייקט הסקריפט כדי להחזיר מידע על הסקריפטים הפעילים בחנות. אובייקט זה עשוי להיות שימושי במהלך ניפוי באגים בסקריפטים.

דוגמה

הדוגמה הבאה מתארת את השינויים שניתן לבצע בתבנית cart.liquid שלך כדי לתמוך בסקריפט של פריטי שורה.

סל לדוגמה

לדוגמה, אם יש לך סל עם שלושה פריטי שורה:

• כדורגל
  • כמות: 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 מחזיר הודעה שמתארת את ההנחות שהוחלו על פריט השורה.

שימוש בקו חוצה יכול לעזור להבחין בין מחיר השורה המקורי לבין מחיר השורה לאחר ההנחה:

<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>

כעת הסל שלך אמור להיראות כך:

עדכון סיכום הסל

כדי לעזור ללקוח לעקוב אחרי מחיר ההזמנה שלו, כדאי גם להציג את:

• סכום הביניים המקורי של הסל, כדי לאפשר ללקוחות להשוות בין הסכומים הכוללים לפני ההנחה ואחריה
• החיסכון הכולל שהלקוח קיבל על הסל שלו.

שוב, כדי להוסיף את המידע הזה, השתמש במאפיינים הבאים של אובייקטי 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.