Actualizar las plantillas de Liquid para Scripts

Si ejecutas scripts en la tienda online, revisa cómo afectan las páginas de la tienda online. Muchos temas incluyen código para admitir los scripts, pero algunos no. Si el tema no tiene ese código, puedes agregarlo.

En esta página

Resolución de problemas

La mayoría de los problemas con scripts y temas se relacionan con scripts de línea de artículo que aplican descuentos. Por ejemplo, el precio total del pedido es correcto, pero los precios de las líneas de artículo no muestran los descuentos. Los clientes necesitan entender cómo se calculan sus descuentos. Quieren ver el precio original y el precio con descuento, además de una breve descripción del descuento. Si falta alguno de estos datos en el carrito, agrega el código Liquid para mostrarlos.

Una buena forma de comprobar cómo afecta el script a la tienda online es visitarla como cliente y realizar las acciones que activan el script.

Atributos de los objetos de Liquid

Las siguientes listas incluyen atributos de objetos de Liquid que se necesitan con frecuencia para admitir scripts en el carrito de la tienda:

Atributos del objeto cart:

Atributos de línea de artículo:

Objeto script:

El script object se puede usar para devolver información sobre los scripts activos de la tienda. Este objeto puede ser útil para depurar scripts.

Ejemplo

El siguiente ejemplo describe los cambios que puedes hacer en la plantilla cart.liquid para admitir un script de línea de artículo.

Carrito de ejemplo

Por ejemplo, si tienes un carrito con tres líneas de artículo:

Balón de fútbol
- Cantidad: 1
- Precio unitario: $15.00
Pelota de tenis
- Cantidad: 5
- Precio unitario: $5.00
Zapatilla para correr
- Cantidad: 1
- Precio unitario: $30.00

Y has publicado un script que aplica los siguientes descuentos:

10% de descuento en dos o más pelotas de tenis
$5 de descuento en todo el calzado

Entonces, la plantilla cart.liquid podría ser una tabla simple que enumera las líneas de artículo y un resumen de sus importes totales:

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

Con los descuentos que aplica el script, esta plantilla genera la siguiente tabla para el carrito:

Producto	Cantidad	Total
Balón de fútbol	1	$15.00
Pelota de tenis	5	$22.50
Zapatilla para correr	1	$25.00
Total		$62.50

Actualizar las líneas de artículo

Para mostrar los descuentos que aplica el script, actualiza las líneas de artículo para mostrar tres datos clave:

el precio de línea antes de los descuentos
el precio de línea después de los descuentos
un mensaje que describa los descuentos aplicados.

Para hacerlo, usa los siguientes atributos de los objetos de Liquid:

line_item.total_discount devuelve el monto de descuento aplicado a la línea de artículo
line_item.original_line_price devuelve el precio de la línea de artículo antes de los descuentos
line_item.message devuelve un mensaje que describe los descuentos aplicados a la línea de artículo.

Para diferenciar el precio de línea original del precio de línea con descuento, puedes aplicar un efecto 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>

El carrito ahora debería verse así:

Producto	Cantidad	Total
Balón de fútbol	1	$15.00
Pelota de tenis	5	$22.50 ~~$25.00~~ (10% de descuento en dos o más pelotas de tenis)
Zapatilla para correr	1	$25.00 ~~$30.00~~ ($5 de descuento en todo el calzado)
Total		$62.50

Actualizar el resumen del carrito

Para ayudar a los clientes a llevar el control del precio del pedido, muestra también:

el subtotal original del carrito, para que los clientes comparen los totales antes y después de los descuentos
el ahorro total obtenido en el carrito.

Nuevamente, para agregar esta información, usa los siguientes atributos de los objetos de Liquid:

cart.total_discount devuelve el monto de descuento aplicado a los artículos del carrito
cart.original_total_price devuelve el subtotal del carrito antes de los descuentos.

Con esta información, el bloque .summary actualizado podría verse así:

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

La tabla del carrito ahora debería verse así:

Producto	Cantidad	Total
Balón de fútbol	1	$15.00
Pelota de tenis	5	$22.50 ~~$25.00~~ (10% de descuento en dos o más pelotas de tenis)
Zapatilla para correr	1	$25.00 ~~$30.00~~ ($5 de descuento en todo el calzado)
Subtotal		70,00 $
Ahorro por descuentos		7,50 $
Total		$62.50

Si agregas algunos objetos Liquid nuevos a las plantillas, puedes ayudar a que los clientes entiendan cómo se calculan los descuentos.

Otros ejemplos

El siguiente ejemplo de Liquid muestra los descuentos de cada línea de artículo:

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

Consulta otro discount example que incluye los cambios en el código de Liquid.