Актуализиране на Вашите Liquid шаблони за Scripts

Ако изпълнявате скриптове във Вашия онлайн магазин, тогава трябва да проверите как те влияят на страниците във Вашата витрина. Много теми включват код за поддръжка на Вашите скриптове, но някои не го правят. Ако Вашата тема не разполага с кода, тогава можете да го добавите.

Отстраняване на неизправности

Повечето проблеми със скриптовете и темите засягат скриптове за редове, които предлагат отстъпки. Например общата цена на поръчката е правилна, но цените на редовете не показват отстъпките. Клиентите трябва да разбират как се изчисляват техните отстъпки. Те искат да видят оригиналната цена и цената с отстъпка, както и кратко описание на отстъпката. Ако някоя от тези подробности липсва във Вашата количка, тогава трябва да добавите Liquid кода, за да се появят.

Добър начин да проверите как Вашият скрипт влияе на Вашата витрина е да я посетите като клиент и да извършите действията, които задействат скрипта.

Атрибути на обект на Liquid

Следващите списъци съдържат атрибути на обект на Liquid, които обикновено са необходими за поддръжка на скриптове в количката на Вашия магазин:

Атрибути на обект на количка:

Атрибути на ред:

Обект на скрипт:

  • Обектът на скрипт може да се използва за връщане на информация за активните скриптове на магазина. Този обект може да бъде полезен при отстраняване на грешки в скриптове.

Пример

Следващият пример описва промените, които можете да направите във Вашия 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>

С отстъпките, приложени от скрипта, този шаблон създава следната таблица за Вашата количка:

ПродуктКоличествоОбщо
Футболна топка115,00 $
Топка за тенис522,50 $
Маратонки за бягане125,00 $
Общо62,50 $

Актуализиране на редовете

За да покажем отстъпките, приложени от скрипта, трябва да актуализираме редовете, така че да показват три ключови части от информацията:

  • цената на реда преди отстъпките
  • цената на реда след отстъпките
  • съобщение, описващо приложените отстъпки.

За да направите това, използвайте следните атрибути на обект на 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>

Сега количката Ви трябва да изглежда така:

ПродуктКоличествоОбщо
Футболна топка115,00 $
Топка за тенис522,50 $ 25,00 $ (10% отстъпка за две или повече топки за тенис)
Маратонки за бягане125,00 $ 30,00 $ (5 $ отстъпка за всички обувки)
Общо62,50 $

Актуализиране на резюмето на количката

За да помогнете на клиента да следи цената на поръчката си, трябва да покажете също:

  • оригиналната междинна сума на количката, за да позволите на клиентите да сравнят сумите преди и след отстъпката
  • общите спестявания, които клиентът е получил в количката си.

Отново, за да добавите тази информация, използвайте следните атрибути на обект на 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>

Сега таблицата на количката Ви трябва да изглежда така:

ПродуктКоличествоОбщо
Футболна топка115,00 $
Топка за тенис522,50 $ 25,00 $ (10% отстъпка за две или повече топки за тенис)
Маратонки за бягане125,00 $ 30,00 $ (5 $ отстъпка за всички обувки)
Междинна сума70,00 $
Спестена сума от отстъпки7,50 $
Общо62,50 $

Като добавите няколко нови обекта на 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.