Actualización de tus plantillas de Liquid para scripts

Si ejecutas scripts en tu tienda online, debes verificar cómo afectan las páginas en tu tienda. Muchos temas incluyen código para admitir tus scripts, pero algunos no lo hacen. Si tu tema no tiene el código, puedes agregarlo.

Shopify Plus

Shopify Scripts y la aplicación Script Editor están disponibles solo para comerciantes de Shopify Plus. La aplicación Script Editor ya no está disponible para su descarga desde la Shopify App Store.

El 28 de agosto de 2025, Shopify Scripts se eliminará y dejará de funcionar. Migra tus scripts existentes a Shopify Functions antes de esta fecha.

Resolución de problemas

La mayoría de los problemas con scripts y temas involucran scripts de línea de artículos que ofrecen descuentos. Por ejemplo, el precio total del pedido es correcto, pero los precios de la línea de artículo no muestran los descuentos. Los clientes necesitan saber cómo se calculan sus descuentos. Quieren ver el precio original y con descuento, así como una breve descripción del descuento. Si falta alguno de estos detalles en tu carrito, debes agregar el código de Liquid para que aparezcan.

Una buena manera de comprobar cómo afecta el script a tu tienda online es ingresar como cliente y realizar acciones que activen el script.

Atributos de objeto Liquid

Las siguientes listas contienen atributos de objetos Liquid que normalmente se necesitan para admitir scripts en el carrito de tu tienda:

Atributos de objeto de carrito:

• cart.total_discount
• cart.original_total_price

Atributos de línea de artículo:

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

Objeto de scripts:

• El objeto de scripts puede usarse para informar sobre los scripts activos de una tienda. Este objeto puede ser útil al depurar scripts.

Ejemplo

El siguiente ejemplo describe los cambios que puedes hacer en tu 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:

• Pelota de fútbol

  • Cantidad: 1
  • Precio unitario: $15,00

• Pelota de tenis

  • Cantidad: 5
  • Precio unitario: $5,00

• Zapatillas para correr

  • Cantidad: 1
  • Precio unitario: $30,00

Por último, has publicado un script que aplica los siguientes descuentos:

• 10 % de descuento con la compra de dos o más pelotas de tenis.
• $5 de descuento en todos los zapatos.

Entonces tu plantilla cart.liquid puede ser una tabla simple que indica las líneas de artículo y un resumen de sus montos 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 aplicó el script, esta plantilla crea la siguiente tabla para tu carrito:

Producto	Cantidad	Total
Pelota de fútbol	1	$15,00
Pelota de tenis	5	$22,50
Zapatillas para correr	1	$25,00
Total		$62,50

Actualiza las líneas de artículo

Para mostrar los descuentos que aplicó el script, debemos actualizar 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 que se aplicaron.

Para hacer esto, usa los siguientes atributos de objeto Liquid:

• line_item.total_discount muestra el monto del descuento que se aplicó a la línea de artículo.
• line_item.original_line_price muestra el precio de la línea de artículo antes de los descuentos.
• line_item.message muestra un mensaje que describe los descuentos que se aplicaron a la línea de artículo.

Puede ser útil diferenciar el precio de línea original del precio de línea con descuento mediante 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>

Tu carrito debería verse así:

Producto	Cantidad	Total
Pelota de fútbol	1	$15,00
Pelota de tenis	5	$22,50 $25,00 (10 % de descuento con la compra de dos o más pelotas de tenis)
Zapatillas para correr	1	$25,00 $30,00 ($5 de descuento en todos los calzados)
Total		$62,50

Actualizar del resumen del carrito

Para ayudar al cliente a hacer un seguimiento del precio de su pedido, también debe mostrar la siguiente información:

• el subtotal original del carrito, para que los clientes puedan comparar los totales previos y posteriores a los descuentos.
• Los descuentos totales que el cliente recibió en su carrito.

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

• cart.total_discount muestra el importe del descuento aplicado a los artículos del carrito.
• cart.original_total_price muestra el subtotal del carrito previo a los descuentos.

Con esta información, es posible que tu bloque actualizado .summary luzca de la siguiente manera:

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

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

Producto	Cantidad	Total
Pelota de fútbol	1	$15,00
Pelota de tenis	5	$22,50 $25,00 (10 % de descuento con la compra de dos o más pelotas de tenis)
Zapatillas para correr	1	$25,00 $30,00 ($5 de descuento en todos los calzados)
Subtotal		$70,00
Ahorro		$7,50
Total		$62,50

Al agregar algunos nuevos objetos Liquid a tus plantillas, puedes ayudar a tus clientes a comprender cómo se calculan sus descuentos.

Otros ejemplos

El siguiente ejemplo de Liquid muestra los descuentos para 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 %}

Observa otro ejemplo de descuento que incluye los cambios en el código de Liquid.