Обновление шаблонов Liquid для скриптов

Если вы используете скрипты в своем интернет-магазине, то вам нужно проверить, как они влияют на страницы вашей витрины. Многие темы содержат код для поддержки скриптов, но некоторые — нет. Если в вашей теме нет необходимого кода, вы можете добавить его.

На этой странице

Поиск неисправностей

Большинство проблем со скриптами и темами связано со скриптами позиций, которые предоставляют скидки. Например, общая стоимость заказа верна, но в ценах позиций скидки не отображаются. Клиентам нужно понимать, как рассчитываются их скидки. Они хотят видеть первоначальную цену и цену со скидкой, а также краткое описание скидки. Если какие-либо из этих данных отсутствуют в вашей корзине, то вам нужно добавить код Liquid для их отображения.

Хороший способ проверить, как ваш скрипт влияет на витрину, — зайти в магазин под видом клиента и выполнить действия, которые активируют скрипт.

Атрибуты объекта Liquid

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

Атрибуты объекта корзины:

Атрибуты позиции:

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

Объект script можно использовать для получения информации об активных скриптах магазина. Этот объект может быть полезен при отладке скриптов.

Пример

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

С учетом скидок, примененных скриптом, этот шаблон создает для вашей корзины следующую таблицу:

Товар	Количество	Итого
Футбольный мяч	1	15,00 $
Теннисный мяч	5	22,50 $
Кроссовки	1	25,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>

Теперь ваша корзина должна выглядеть так:

Товар	Количество	Итого
Футбольный мяч	1	15,00 $
Теннисный мяч	5	22,50 $ ~~25,00 $~~ (скидка 10% на два и более теннисных мяча)
Кроссовки	1	25,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>

Теперь таблица вашей корзины должна выглядеть так:

Товар	Количество	Итого
Футбольный мяч	1	15,00 $
Теннисный мяч	5	22,50 $ ~~25,00 $~~ (скидка 10% на два и более теннисных мяча)
Кроссовки	1	25,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.