Atualização de seus modelos Liquid de scripts

Se você executar scripts em sua loja virtual, precisará verificar como eles afetam as páginas de sua vitrine. Muitos temas incluem código compatíveis com seus scripts, mas outros não. No caso de o tema não incluir o código, você poderá adicioná-lo.

Solução de problemas

A maioria dos problemas com scripts e temas envolve scripts de itens de linha que oferecem descontos. Por exemplo, o preço total do pedido está correto, mas os preços dos itens de linha não mostram os descontos. Os clientes precisam entender como seus descontos são calculados. Eles querem conferir o preço original com o preço com desconto, bem como uma breve descrição do desconto. Se algumas dessas informações não forem encontradas no carrinho, você terá de adicionar o código Liquid para exibi-las.

Uma boa maneira de verificar como o script afeta sua vitrine é fazer uma visita como cliente e executar as ações que acionam o script.

Atributos de objetos Liquid

As listas a seguir contêm os atributos do objeto Liquid que normalmente são necessários para scripts no carrinho de sua loja:

Atributos de objetos de carrinho:

Atributos de itens de linha:

Objeto de scripts:

  • O objeto de scripts pode ser usado para retornar informações sobre os scripts ativos de uma loja. Esse objeto pode ser útil ao depurar scripts.

Exemplo

O exemplo a seguir descreve as alterações que podem ser feitas no modelo cart.liquid para estabelecer a compatibilidade dos scripts de itens de linha.

Exemplo de carrinho

Por exemplo, se o seu carrinho contém três itens de linha:

  • Bola de futebol - Quantidade: 1

    • Preço unitário: US$ 15,00
  • Bola de tênis - Quantidade: 5

    • Preço unitário: US$ 5,00
  • Tênis - Quantidade: 1

    • Preço unitário: US$ 30,00

E você publicou um script aplicável aos seguintes descontos:

  • 10% de desconto em duas ou mais bolas de tênis
  • US$ 5 de desconto em todos os sapatos

Sendo assim, seu modelo cart.liquid pode ser uma simples listagem em tabela dos itens de linha, bem como um resumo de suas quantidades totais:

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

Com os descontos aplicados pelo script, esse modelo cria a seguinte tabela para o carrinho:

Produto Quantidade Total
Bola de futebol 1 US$ 15,00
Bola de tênis 5 US$ 22,50
Tênis 1 US$ 25,00
Total US$ 62,50

Atualizar os itens de linha

Para mostrar os descontos aplicados pelo script, precisamos atualizar os itens de linha de modo a exibir três informações principais:

  • o preço da linha antes dos descontos
  • o preço da linha após os descontos
  • uma mensagem descrevendo os descontos aplicados.

Para fazer isso, utilize os seguintes atributos de objetos Liquid:

  • line_item.total_discount retorna o valor do desconto aplicado ao item de linha
  • line_item.original_line_price retorna o preço do item de linha antes dos descontos
  • line_item.message retorna uma mensagem que descreve os descontos aplicados ao item de linha.

Isso pode ajudar a diferenciar o preço original da linha do preço da linha com desconto usando um efeito de tachado:

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

O carrinho agora deve ter a seguinte aparência:

Produto Quantidade Total
Bola de futebol 1 US$ 15,00
Bola de tênis 5 US$ 22,50 US$ 25,00 (10% de desconto em duas ou mais bolas de tênis)
Tênis 1 US$ 25,00 US$ 30,00 (US$ 5 de desconto em todos os sapatos)
Total US$ 62,50

Atualizar o resumo do carrinho

Para ajudar o cliente a acompanhar o preço de seus pedidos, você também deve mostrar:

  • o subtotal original do carrinho a fim de permitir ao cliente comparar os totais de descontos antes e depois
  • a economia total obtida pelo cliente em seu carrinho.

Novamente, para adicionar essas informações, utilize os seguintes atributos de objetos Liquid:

  • cart.total_discount retorna o valor do desconto aplicado aos itens do carrinho
  • cart.original_total_price retorna o subtotal do carrinho antes dos descontos.

Utilizando essas informações, o bloco .summary atualizado deverá ter a seguinte aparência:

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

A tabela do carrinho agora deve ficar assim:

Produto Quantidade Total
Bola de futebol 1 US$ 15,00
Bola de tênis 5 US$ 22,50 US$ 25,00 (10% de desconto em duas ou mais bolas de tênis)
Tênis 1 US$ 25,00 US$ 30,00 (US$ 5 de desconto em todos os sapatos)
Subtotal US$ 70,00
Economia nos descontos US$ 7,50
Total US$ 62,50

Ao adicionar alguns novos objetos Liquid aos seus modelos, você pode ajudar os clientes a entender como seus descontos são calculados.

Outros exemplos

O exemplo Liquid a seguir mostra os descontos para cada item de linha:

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

Veja outro exemplo de desconto que inclui as alterações no código Liquid.

Pronto para começar a vender com a Shopify?

Experimente de graça