Aktualizowanie szablonów Liquid dla skryptów

Jeśli wykonujesz skrypty w sklepie online, musisz sprawdzić, w jaki sposób wpływają one na strony w witrynie Twojego sklepu. Wiele szablonów zawiera kod do obsługi skryptów, ale niektóre nie. Jeśli Twój szablon nie ma kodu, możesz go dodać.

Rozwiązywanie problemów

Większość problemów ze skryptami i szablonami dotyczy skryptów pozycji pojedynczych oferujących rabaty. Na przykład całkowita cena zamówienia jest poprawna, ale dla cen pozycji nie wyświetlają się rabaty. Klienci muszą wiedzieć, w jaki sposób obliczane są ich rabaty. Chcą widzieć pierwotną i obniżoną cenę, a także krótki opis rabatu. Jeśli którejś z tych informacji brakuje w koszyku, musisz dodać kod Liquid, aby się pojawiła.

Dobrym sposobem na sprawdzenie, w jaki sposób skrypt wpływa na Twoją witrynę sklepową, jest odwiedzenie sklepu w roli klienta i wykonanie działań uruchamiających skrypt.

Atrybuty obiektu Liquid

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

Atrybuty obiektu koszyka:

Atrybuty pozycji pojedynczych:

Obiekt skryptów:

  • Obiekt skryptów może służyć do zwracania informacji o aktywnych skryptach sklepu. Ten obiekt może być przydatny podczas debugowania skryptów.

Przykład

W poniższym przykładzie opisano zmiany, które można wprowadzić w szablonie cart.liquid w celu obsługi skryptu pozycji pojedynczych.

Przykładowy koszyk

Na przykład, jeśli Twój koszyk zawiera trzy pozycje:

  • Piłka nożna - Ilość: 1

    • Cena jednostkowa: 15,00 zł
  • Piłka tenisowa - Ilość: 5

    • Cena jednostkowa: 5,00 zł
  • Buty do biegania - Ilość: 1

    • Cena jednostkowa: 30,00 zł

I opublikowałeś(-aś) skrypt, który stosuje następujące rabaty:

  • 10% rabatu na dwie lub więcej piłek tenisowych
  • 5 zł rabatu na wszystkie buty

Twój szablon cart.liquid może być prostą tabelą zawierającą pozycje i podsumowanie 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>

Biorąc pod uwagę rabaty zastosowane przez skrypt, szablon ten tworzy poniższą tabelę dla Twojego koszyka:

Produkt Quantity Suma
Piłka nożna 1 15,00 zł
Piłka tenisowa 5 22,50 zł
Buty do biegania 1 25,00 zł
Suma 62,50 zł

Zaktualizuj pozycje pojedyncze

Aby wyświetlić rabaty zastosowane przez skrypt, musimy zaktualizować pozycje pojedyncze, aby wyświetlić trzy kluczowe informacje:

  • cena pozycji przed rabatami
  • cena pozycji po rabatach
  • wiadomość z opisem rabatów, które zostały zastosowane.

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

  • line_item.total_discount zwraca kwotę rabatu zastosowanego do pozycji
  • line_item.original_line_price zwraca cenę pozycji przed rabatami
  • line_item.message zwraca wiadomość opisującą rabaty, które zostały zastosowane do pozycji.

Dzięki zastosowaniu przekreślenia można lepiej odróżnić pierwotną cenę pozycji od obniżonej ceny pozycji:

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

Twój koszyk powinien teraz wyglądać następująco:

Produkt Quantity Suma
Piłka nożna 1 15,00 zł
Piłka tenisowa 5 22,50 zł 25,00 zł (10% rabatu na dwie lub więcej piłek tenisowych)
Buty do biegania 1 25,00 zł 30,00 zł (5 zł rabatu na wszystkie buty)
Suma 62,50 zł

Zaktualizuj podsumowanie koszyka

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

  • pierwotną sumę częściową koszyka, aby umożliwić klientom porównywanie sum przed i po rabacie
  • łączną kwotę oszczędności dokonanych przez klienta przy zakupie produktów z koszyka.

Aby dodać te informacje, należy użyć poniższych 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.

Po uwzględnieniu tych informacji 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 Quantity Suma
Piłka nożna 1 15,00 zł
Piłka tenisowa 5 22,50 zł 25,00 zł (10% rabatu na dwie lub więcej piłek tenisowych)
Buty do biegania 1 25,00 zł 30,00 zł (5 zł rabatu na wszystkie buty)
Suma częściowa 70,00 zł
Oszczędności rabatowe 7,50 $
Suma 62,50 zł

Dodając kilka nowych obiektów Liquid do szablonów, możesz zapoznać swoich klientów ze sposobem obliczania ich rabatów.

Inne przykłady

Poniższy przykład Liquid pokazuje rabaty dla każdej pozycji:

  {% 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 rabatu, który zawiera zmiany kodu Liquid.

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo