Atualização dos modelos do Liquid para Scripts

Se você executa scripts na sua loja virtual, precisará verificar como eles afetam as páginas da sua vitrine virtual. Muitos temas incluem código compatível com seus scripts, mas alguns não. Se o seu tema não tiver o código, adicione-o.

Solução de problemas

A maioria dos problemas com scripts e temas envolve scripts de item 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 os descontos deles são calculados. Eles querem ver o preço original, o preço com desconto e uma breve descrição do desconto. Se algum desses detalhes não estiver no seu carrinho, será preciso adicionar o código do Liquid para que eles apareçam.

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

Atributos de objeto do Liquid

As listas a seguir contêm atributos de objeto do Liquid que costumam ser necessários para oferecer compatibilidade com scripts no carrinho da sua loja:

Atributos de objeto do carrinho:

• cart.total_discount
• cart.original_total_price

Atributos do item de linha:

• line_item.discounts
• line_item.message
• line_item.original_price
• line_item.original_line_price
• line_item.total_discount

Objeto de script:

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

Exemplo

O exemplo a seguir descreve as alterações que você pode fazer no modelo cart.liquid para oferecer compatibilidade com um script de item de linha.

Exemplo de carrinho

Por exemplo, se você tem um carrinho com 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 de corrida
  • Quantidade: 1
  • Preço unitário: US$ 30,00

E você publicou um script que aplica os seguintes descontos:

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

Nesse caso, seu modelo cart.liquid pode ser uma tabela simples que lista os itens de linha e um resumo dos valores 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, este modelo cria a seguinte tabela para o seu carrinho:

Atualizar os itens de linha

Para mostrar os descontos aplicados pelo script, é preciso atualizar os itens de linha para exibir três informações importantes:

• o preço do item de linha antes dos descontos
• o preço do item de linha depois dos descontos
• uma mensagem com a descrição dos descontos aplicados.

Para isso, use os seguintes atributos de objeto do Liquid:

• line_item.total_discount retorna o valor do desconto que foi 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.

Pode ser útil diferenciar o preço original do item de linha do preço 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>

Seu carrinho agora deve ter esta aparência:

Atualizar o resumo do carrinho

Para ajudar o cliente a acompanhar o preço do pedido, você também deve exibir:

• o subtotal original do carrinho, para que os clientes comparem o total antes e depois do desconto
• a economia total que o cliente recebeu no carrinho.

Novamente, para adicionar essas informações, use os seguintes atributos de objeto do Liquid:

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

Com essas informações, seu bloco .summary atualizado pode ter esta 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>

Agora, a tabela do seu carrinho deve ter esta aparência:

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

Outros exemplos

O exemplo de Liquid a seguir mostra os descontos de 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 do Liquid.