Liquid Sandbox

{"subtitle":"Un laboratorio de temas. Ejemplos, datos y resultados al instante.","intro":"Elige un ejemplo, edita el Liquid y el JSON y ejecútalo. Todo se procesa en tu navegador.","choose":"Elige un ejemplo de tema","use":"Dónde usarlo","try_label":"Prueba a cambiar","code":"Código Liquid","data":"Datos de ejemplo · JSON","data_hint":"Datos ficticios, sin conexión con tu tienda. El JSON debe ser un objeto.","run":"Ejecutar código","reset":"Restablecer ejemplo","copy_code":"Copiar código","copy_output":"Copiar resultado","copied":"Copiado al portapapeles.","copy_failed":"Portapapeles no disponible. Selecciona el texto y cópialo con el teclado.","output":"Resultado","text":"Texto","html":"Vista HTML","preview_title":"Vista HTML segura","safe_note":"Vista estática: se eliminan scripts, enlaces, medios, formularios y estilos personalizados.","hint":"Edita el ejemplo. Pulsa Escape para salir del editor de código.","loading":"Procesando…","success":"Código ejecutado correctamente.","stale":"Los datos han cambiado. Vuelve a ejecutar el código.","reset_done":"Ejemplo restablecido. Ejecútalo para ver el resultado.","empty":"Ejecuta el ejemplo para ver el resultado.","json_error":"JSON inválido. Revisa comillas, comas y corchetes.","json_object":"El JSON debe ser un objeto, por ejemplo {\"product\": {...}}.","liquid_error":"Error de sintaxis o de ejecución de Liquid.","missing_error":"Falta una variable. Añádela al JSON o corrige el nombre en el código Liquid.","filter_error":"Este filtro no está disponible en LiquidJS. Usa un filtro estándar o pruébalo en tu tema Jumpseller.","restricted_error":"Este laboratorio no carga plantillas externas. Pega el código aquí en lugar de usar include, render o layout.","limit_error":"El ejemplo es demasiado grande o tarda demasiado. Reduce los datos o el tamaño del bucle.","line":"Línea","engine_missing":"No se ha podido cargar el motor Liquid. Recarga la página e inténtalo de nuevo.","reference":"Antes de usarlo en tu tema","limitations":"Esto utiliza LiquidJS en tu navegador, no el motor Liquid de Rails que usa Jumpseller. Los objetos de ejemplo son JSON, no datos reales de tu tienda. Prueba el código final en tu tema.","filter_note":"Solo están disponibles los filtros estándar de LiquidJS. No se implementan los filtros de Jumpseller como price, asset o image. Los ejemplos muestran precios numéricos con el código de moneda; no dan formato a importes ni calculan totales del checkout.","strict_note":"Este laboratorio informa de las variables ausentes. Un tema real puede tratarlas de otra forma. Se desactivan include, render y layout.","objects":"Referencia oficial de objetos","filters":"Referencia oficial de filtros","fictitious":"Datos ficticios de tema","title":"Liquid Sandbox — Herramienta gratuita | Jumpseller","examples":[{"id":"price","name":"Precio y descuento","description":"Muestra el precio original y el precio con descuento. product.discount es un importe, no un porcentaje.","location":"Página o tarjeta de producto.","try":"product.price y product.discount.","code":"\u003carticle\u003e\n  \u003ch2\u003e{{ product.name | escape }}\u003c/h2\u003e\n  {% if product.discount \u003e 0 %}\n    \u003cp\u003e\u003cs\u003e{{ product.price }} {{ store.currency }}\u003c/s\u003e\u003c/p\u003e\n    \u003cp\u003e\u003cstrong\u003e{{ product.price | minus: product.discount }} {{ store.currency }}\u003c/strong\u003e\u003c/p\u003e\n  {% else %}\n    \u003cp\u003e{{ product.price }} {{ store.currency }}\u003c/p\u003e\n  {% endif %}\n\u003c/article\u003e","data":{"product":{"name":"Camisa de lino","price":80,"discount":20},"store":{"currency":"EUR"}},"reference":"https://jumpseller.com/support/liquid/#product"},{"id":"stock","name":"Stock y agotados","description":"Alterna entre stock ilimitado, disponible y agotado.","location":"Página o tarjeta de producto, cerca de los controles de compra.","try":"product.stock = 0 o product.stock_unlimited = true.","code":"\u003ch2\u003e{{ product.name | escape }}\u003c/h2\u003e\n{% if product.stock_unlimited %}\n  \u003cp\u003eStock ilimitado\u003c/p\u003e\n{% elsif product.stock \u003e 0 %}\n  \u003cp\u003eDisponible: {{ product.stock }}\u003c/p\u003e\n{% else %}\n  \u003cp\u003e\u003cstrong\u003eAgotado\u003c/strong\u003e\u003c/p\u003e\n{% endif %}","data":{"product":{"name":"Camisa de lino","stock":8,"stock_unlimited":false}},"reference":"https://jumpseller.com/support/liquid/#product"},{"id":"category","name":"Productos de categoría","description":"Recorre los productos de category.products, incluida una categoría vacía.","location":"Plantilla de categoría o fragmento de listado de productos.","try":"Añade un producto a category.products o déjalo en [].","code":"\u003ch2\u003e{{ category.name | escape }}\u003c/h2\u003e\n\u003cul\u003e\n{% for product in category.products %}\n  \u003cli\u003e{{ product.name | escape }} — {{ product.price }} {{ store.currency }}\u003c/li\u003e\n{% else %}\n  \u003cli\u003eNo hay productos en esta categoría.\u003c/li\u003e\n{% endfor %}\n\u003c/ul\u003e","data":{"category":{"name":"Esenciales de cada día","products":[{"name":"Camisa de lino","price":80},{"name":"Bolsa de lona","price":25}]},"store":{"currency":"EUR"}},"reference":"https://jumpseller.com/support/liquid/#category"},{"id":"variants","name":"Variantes de producto","description":"Lista SKU, precio y disponibilidad de las variantes. No se presupone un campo de nombre.","location":"Página de producto, junto al selector de variantes.","try":"Cambia el precio, stock o stock_unlimited de una variante.","code":"\u003ch2\u003e{{ product.name | escape }}\u003c/h2\u003e\n\u003cul\u003e\n{% for variant in product.variants %}\n  \u003cli\u003e\n    {{ variant.sku | escape }} — {{ variant.price }} {{ store.currency }}\n    {% if variant.stock_unlimited %}Stock ilimitado{% elsif variant.stock \u003e 0 %}Disponible: {{ variant.stock }}{% else %}Agotado{% endif %}\n  \u003c/li\u003e\n{% endfor %}\n\u003c/ul\u003e","data":{"product":{"name":"Camisa de lino","variants":[{"sku":"SHIRT-S","price":80,"stock":4,"stock_unlimited":false},{"sku":"SHIRT-M","price":85,"stock":0,"stock_unlimited":false}]},"store":{"currency":"EUR"}},"reference":"https://jumpseller.com/support/liquid/#product-variants"},{"id":"cart","name":"Carrito y cantidades","description":"Recorre order.products y calcula un importe de ejemplo por línea: price × qty.","location":"Plantilla del carrito. El objeto actual es order; cart está obsoleto.","try":"Cambia order.products[0].qty de 2 a 4.","code":"{% assign sample_total = 0 %}\n\u003cul\u003e\n{% for orderedproduct in order.products %}\n  {% assign line_amount = orderedproduct.price | times: orderedproduct.qty %}\n  {% assign sample_total = sample_total | plus: line_amount %}\n  \u003cli\u003e{{ orderedproduct.name | escape }} — Cantidad: {{ orderedproduct.qty }} — Importe de línea: {{ line_amount }} {{ store.currency }}\u003c/li\u003e\n{% else %}\n  \u003cli\u003eTu carrito está vacío.\u003c/li\u003e\n{% endfor %}\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eTotal de ejemplo: {{ sample_total }} {{ store.currency }}\u003c/strong\u003e\u003c/p\u003e","data":{"order":{"products":[{"name":"Camisa de lino","price":80,"qty":2},{"name":"Bolsa de lona","price":25,"qty":1}]},"store":{"currency":"EUR"}},"reference":"https://jumpseller.com/support/liquid/#ordered-product"},{"id":"featured","name":"Etiqueta de destacado","description":"Usa un booleano documentado para mostrar una etiqueta de producto destacado.","location":"Tarjetas de producto en categorías o colecciones de destacados.","try":"Pon product.featured en false.","code":"\u003carticle\u003e\n  \u003ch2\u003e{{ product.name | escape }}\u003c/h2\u003e\n  {% if product.featured %}\n    \u003cp\u003e\u003cstrong\u003eDestacado\u003c/strong\u003e\u003c/p\u003e\n  {% else %}\n    \u003cp\u003eProducto sin destacar\u003c/p\u003e\n  {% endif %}\n\u003c/article\u003e","data":{"product":{"name":"Camisa de lino","featured":true}},"reference":"https://jumpseller.com/support/liquid/#product"}]}

Elige un ejemplo, edita el Liquid y el JSON y ejecútalo. Todo se procesa en tu navegador.

Antes de usarlo en tu tema

Esto utiliza LiquidJS en tu navegador, no el motor Liquid de Rails que usa Jumpseller. Los objetos de ejemplo son JSON, no datos reales de tu tienda. Prueba el código final en tu tema.

Solo están disponibles los filtros estándar de LiquidJS. No se implementan los filtros de Jumpseller como price, asset o image. Los ejemplos muestran precios numéricos con el código de moneda; no dan formato a importes ni calculan totales del checkout.

Este laboratorio informa de las variables ausentes. Un tema real puede tratarlas de otra forma. Se desactivan include, render y layout.

Referencia oficial de objetos ↗Referencia oficial de filtros ↗

¡Comienza tu viaje con nosotros!

Probar gratis por 7 días. No se requiere tarjeta de crédito.

Diseño y personalización

Pagos y envíos

Aplicaciones

Soporte

Resultado

Antes de usarlo en tu tema

¡Comienza tu viaje con nosotros!

Para Cada Negocio

Canales de Venta

Diseño y personalización

Pagos y envíos

Aplicaciones

Soporte

Liquid Sandbox

Resultado

Antes de usarlo en tu tema

¡Comienza tu viaje con nosotros!