Aktualizowanie szablonów Liquid dla skryptów

Jeśli używasz skryptów w swoim sklepie online, musisz sprawdzić, jak wpływają one na strony w witrynie sklepu. Wiele szablonów zawiera kod obsługujący skrypty, ale niektóre go nie mają. Jeśli Twój szablon nie ma tego kodu, możesz go dodać.

Na tej stronie

Rozwiązywanie problemów

Większość problemów ze skryptami i szablonami dotyczy skryptów pozycji pojedynczych, które oferują rabaty. Na przykład łączna cena zamówienia jest prawidłowa, ale ceny pozycji pojedynczych nie uwzględniają rabatów. Klienci muszą rozumieć, w jaki sposób naliczane są ich rabaty. Chcą widzieć cenę oryginalną i cenę po rabacie, a także krótki opis rabatu. Jeśli w koszyku brakuje któregoś z tych szczegółów, musisz dodać kod Liquid, aby się pojawiły.

Dobrym sposobem na sprawdzenie, jak skrypt wpływa na witrynę sklepu, jest odwiedzenie jej jako klient i wykonanie czynności, które wyzwalają skrypt.

Atrybuty obiektu Liquid

Poniższe listy zawierają atrybuty obiektu Liquid, które są powszechnie potrzebne do obsługi skryptów w koszyku sklepu:

Atrybuty obiektu koszyka:

Atrybuty pozycji pojedynczej:

Obiekt skryptu:

Obiektu skryptu można użyć do zwrócenia informacji o aktywnych skryptach sklepu. Obiekt ten może być przydatny podczas debugowania skryptów.

Przykład

Poniższy przykład opisuje zmiany, które można wprowadzić w szablonie cart.liquid, aby obsługiwał on skrypt pozycji pojedynczej.

Przykładowy koszyk

Na przykład, jeśli masz w koszyku trzy pozycje pojedyncze:

Piłka nożna
- Ilość: 1
- Cena jednostkowa: 15,00 $
Piłka tenisowa
- Ilość: 5
- Cena jednostkowa: 5,00 $
But do biegania
- Ilość: 1
- Cena jednostkowa: 30,00 $

I masz opublikowany skrypt, który stosuje następujące rabaty:

10% rabatu na co najmniej dwie piłki tenisowe
5 $ rabatu na wszystkie buty

Wówczas Twój szablon cart.liquid może być prostą tabelą z listą pozycji pojedynczych i podsumowaniem ich łącznych kwot:

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

Po zastosowaniu rabatów przez skrypt ten szablon tworzy następującą tabelę dla koszyka:

Produkt	Ilość	Suma
Piłka nożna	1	15,00 $
Piłka tenisowa	5	22,50 $
But do biegania	1	25,00 $
Suma		62,50 $

Uaktualnij pozycje pojedyncze

Aby wyświetlić rabaty zastosowane przez skrypt, należy uaktualnić pozycje pojedyncze, aby wyświetlały trzy kluczowe informacje:

cena pozycji przed rabatami
cena pozycji po rabatach
komunikat opisujący zastosowane rabaty.

W tym celu użyj następujących atrybutów obiektu Liquid:

line_item.total_discount zwraca kwotę rabatu, który został zastosowany do pozycji pojedynczej
line_item.original_line_price zwraca cenę pozycji pojedynczej przed rabatami
line_item.message zwraca komunikat opisujący rabaty zastosowane do pozycji pojedynczej.

Warto odróżnić oryginalną cenę pozycji od ceny po rabacie za pomocą przekreślenia:

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

Koszyk powinien teraz wyglądać następująco:

Produkt	Ilość	Suma
Piłka nożna	1	15,00 $
Piłka tenisowa	5	22,50 $ ~~25,00 $~~ (10% rabatu na co najmniej dwie piłki tenisowe)
But do biegania	1	25,00 $ ~~30,00 $~~ (5 $ rabatu na wszystkie buty)
Suma		62,50 $

Uaktualnij podsumowanie koszyka

Aby pomóc klientowi śledzić cenę zamówienia, należy również wyświetlić:

oryginalną sumę częściową koszyka, aby klienci mogli porównać sumy przed rabatem i po rabacie
łączną kwotę oszczędności, jaką klient uzyskał w koszyku.

Aby dodać te informacje, ponownie użyj następujących atrybutów obiektu Liquid:

cart.total_discount zwraca kwotę rabatu zastosowanego do pozycji w koszyku
cart.original_total_price zwraca sumę częściową koszyka przed rabatami.

Dzięki tym informacjom zaktualizowany blok .summary może wyglądać następująco:

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

Tabela koszyka powinna teraz wyglądać następująco:

Produkt	Ilość	Suma
Piłka nożna	1	15,00 $
Piłka tenisowa	5	22,50 $ ~~25,00 $~~ (10% rabatu na co najmniej dwie piłki tenisowe)
But do biegania	1	25,00 $ ~~30,00 $~~ (5 $ rabatu na wszystkie buty)
Suma częściowa		70,00 $
Suma zniżek		7,50 $
Suma		62,50 $

Dodając kilka nowych obiektów Liquid do szablonów, pomożesz klientom zrozumieć, w jaki sposób obliczane są ich zniżki.

Inne przykłady

Poniższy przykład Liquid pokazuje zniżki dla każdej pozycji pojedynczej:

{% 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 %}

Zobacz inny przykład zniżki zawierający zmiany w kodzie Liquid.