Cómo omitir líneas en un bloque de tabla dinámica
Objetivos del artículo
Aprende a omitir filas (por ejemplo, elementos) en un bloque de tabla dinámica. El caso de uso más común para esto es ocultar elementos irrelevantes, como seguros de envío o artículos de regalo, de un correo electrónico de carrito abandonado. Sin embargo, puedes seguir estos pasos para cualquier correo electrónico que utilice un bloque de tabla dinámica.
Este proceso implica editar directamente el código de tu correo electrónico. Esto sólo se recomienda a especialistas en marketing con conocimientos técnicos o a quienes tengan acceso a un desarrollador. Nuestro equipo de asistencia no puede ayudarte a escribir código personalizado más allá de la orientación general que se ofrece en esta documentación. Para mantener la seguridad de tus datos, el equipo de asistencia de Klaviyo no puede abrir archivos HTML.
Antes de empezar
Este artículo explica cómo ocultar elementos de un bloque de tabla dinámica existente. Si aún no has creado un bloque de tabla dinámica que funcione (por ejemplo, los productos de un carrito abandonado o una confirmación de pedido por correo electrónico), aprende a crear uno desde cero o empieza con un mensaje de nuestra biblioteca de flujos.
Escribe tus sentencias if
Antes de hacer cambios en tu plantilla, crea 2 fragmentos de código utilizando un editor de texto o de código (en algún lugar del que puedas copiar y pegar los fragmentos más tarde). Cada fragmento de código constará de 3 partes:
- Una etiqueta if de apertura,
{% if ... %}que indica qué elementos deben aparecer en tu bloque de tabla. - Contenido, como una etiqueta de imagen o texto sobre el producto.
- Una etiqueta de cierre,
{% endif %}.
Crea la etiqueta inicial if
Aquí tienes algunos ejemplos de apertura si etiqueta:
Etiqueta | Significado |
{% if item.price != 0 %} | Si el precio del artículo(precio.artículo) es distinto de 0. |
{% if item.product.name != "Route Shipping Insurance" %} | Si el nombre del artículo(item.product.name) es distinto de "Seguro de envío de ruta". |
{% if not "T-Shirt" in item.product.title %} | Si el título del artículo(item.product.title) no contiene "Camiseta". |
{% if item.title %} | Si el título del elemento(item.title) está establecido (es decir, tiene cualquier valor). |
Estas etiquetas distinguen entre mayúsculas y minúsculas y deben coincidir exactamente con tus datos. Por ejemplo, si la variable del precio de tu artículo es otra distinta de precio.artículo (por ejemplo, precio.artículo o precio.línea.detalles.artículo), actualiza el código para que coincida con tu fuente de datos.
Crea el contenido de la sentencia if
Para el contenido, sigue estos pasos para utilizar el contenido existente de tu bloque de tabla dinámica. Escribe este fragmento de código en un editor de código o de texto; lo añadirás a tu plantilla en la siguiente sección.
- En Contenido de celda para la imagen del bloque de tabla, haz clic en Reemplazar para ver el marcador de posición de la imagen.
- Copia todo el código del campo Variable dinámica o URL dinámica. Ten en cuenta que puede tratarse de una simple variable dinámica o de un fragmento de código más largo; cópialo todo, independientemente de su longitud.
- Sustituye el marcador de posición de este fragmento de código por el código que has copiado del campo Variable dinámica o URL dinámica.
<img src="PLACEHOLDER" style="width: 200px; height: auto;" width="200">Si tu bloque de tabla existente tiene una variable dinámica simple para la imagen, el contenido resultante tendrá un aspecto parecido a éste:
<img src="{{item.product.variant.images.0.src}}" style="width: 200px; height: auto;" width="200"> Si tu bloque de tabla existente contiene un fragmento de código más largo, el contenido resultante podría tener este aspecto:
<img src="{% if item.product.variant.images.0.src %}{{item.product.variant.images.0.src}}{%else%}{{item.product.images.0.src|missing_product_image}}{%endif%}" style="width: 200px; height: auto;" width="200">
Añade tu etiqueta final
A continuación, junta todo el contenido: tu declaración if de apertura, luego tu contenido y, por último, una etiqueta de cierre {% endif %} de cierre.
Repítelo para el contenido del texto
A continuación, repite este proceso con el contenido de la parte derecha de tu bloque de tabla (por ejemplo, el contenido de texto). Haz clic en </ > para abrir el editor de código y copia todo el contenido HTML, luego envuelve este contenido en la misma sentencia if (pasos 1 y 3) que utilizaste para el contenido de la imagen.
Así es como se ve todo junto:
fragmento de código 1 (imagen del producto) | fragmento de código 2 (detalles del producto) |
|
|
Y aquí tienes un desglose de esos fragmentos de código:
fragmento de código 1 (imagen del producto) | fragmento de código 2 (detalles del producto) |
|
|
Cuando utilices estos fragmentos de código, asegúrate de utilizar comillas rectas (") en lugar de comillas rizadas (") para que el código se muestre correctamente.
Una vez que hayas escrito ambos fragmentos de código, continúa en el editor de plantilla siguiendo los pasos que se indican a continuación.
Saltar filas en un bloque de tabla dinámica
Antes de editar tu bloque de tabla dinámica, considera la posibilidad de guardar el bloque original como contenido universal por si necesitas hacer referencia a él en futuros mensajes. A continuación, desvincula el bloque y edítalo por separado, para que tus ediciones no se guarden en el bloque de contenido universal.
- Si tu correo electrónico forma parte de un flujo, configúralo como Borrador o Manual para que los mensajes no se envíen mientras editas el mensaje de flujo.
- Asegúrate de que el Contenido de celda de ambas columnas del nuevo bloque de tabla está establecido en Texto.
- Haz clic en </ > para abrir el editor HTML de la parte izquierda del bloque de tabla.
- Copia el fragmento de código de la imagen del producto que creaste en la sección anterior y pégalo en el campo HTML.
- Pulsa Hecho en la parte superior izquierda.
- Navega hasta el editor de la parte derecha del bloque de tabla.
- Haz clic en </ > para abrir el editor HTML de la parte derecha del bloque de tabla.
- Copia el fragmento de código de los detalles del producto que creaste en la sección anterior y pégalo en el campo HTML, sustituyendo todo el contenido anterior.
- Pulsa Hecho.
- Previsualiza el correo electrónico para asegurarte de que aparece como se espera: el elemento omitido no debería aparecer, pero todos los demás elementos aparecerán con normalidad. Asegúrate de previsualizar con un evento que contenga el elemento que intentas ocultar, para asegurarte de que está oculto.
Declaraciones condicionales y editor de texto integrado
Cuando añadas determinadas declaraciones condicionales a un bloque de texto, es posible que desaparezcan del editor de texto integrado. El código seguirá estando allí, pero oculto. Para ver y editar las sentencias condicionales, abre el campo Código fuente del bloque de texto.
Las siguientes etiquetas solo son visibles en el campo Código fuente de un bloque de texto:
- {% for ... %}
- {% endfor %}
- {% if ... %}
- {% elif ... %}
- {% else %}
- {% endif %}
- {% with ... %}
- {% endwith %}
Guía de solución de problemas
No aparecen elementos en la vista previa
- Asegúrate de que estás previsualizando con un evento que coincide con la fuente de datos que has utilizado (por ejemplo, Página de inicio de pago para un mensaje de carrito abandonado).
- Confirma que la Repetición para y el Alias de fila coinciden exactamente con la Colección de filas y el Alias de fila del bloque original.
El elemento que debería omitirse sigue apareciendo
Revisa la ortografía y las mayúsculas de tu declaración "si". Si el producto sigue apareciendo, significa que cumple los criterios de tu sentencia if, por lo que tu sentencia if no está configurada correctamente. Más información sobre la lógica condicional en plantilla.
Resultado
Después de seguir estos pasos, los artículos que no cumplan los criterios de tu declaración if no aparecerán en mensajes como carrito abandonado o confirmación de pedido por correo electrónico.
Recursos adicionales
- Guía de personalización de mensajes
Descubre cómo usar las variables de personalización (o etiquetas) de Klaviyo para ofrecer una experiencia personalizada a tus clientes.
- Cómo importar una plantilla HTML personalizada
Aprende a importar una plantilla HTML personalizada en Klaviyo.