Atualização de seus modelos Liquid de scripts
Se você executar scripts em sua vitrine 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 do 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:
- line_item.discounts
- line_item.message
- line_item.original_price
- line_item.original_line_price
- line_item.total_discount
Objeto de script:
- É possível usar o objeto de script para apresentar informações sobre os scripts ativos de uma loja. Além disso, ele pode ser útil na depuração de 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 do Liquid:
-
line_item.total_discountretorna o valor do desconto aplicado ao item de linha -
line_item.original_line_priceretorna o preço do item de linha antes dos descontos -
line_item.messageretorna 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 |
| Tênis | 1 | US$ 25,00 |
| 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 do Liquid:
-
cart.total_discountretorna o valor do desconto aplicado aos itens do carrinho -
cart.original_total_priceretorna 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 |
| Tênis | 1 | US$ 25,00 |
| Subtotal | US$ 70,00 | |
| Economia nos descontos | US$ 7,50 | |
| Total | US$ 62,50 | |
Ao adicionar alguns novos objetos do 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.