Cómo omitir líneas en un bloque de tabla dinámica
Qué aprenderás
Aprenda 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. No obstante, puede 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 su correo electrónico. Esto sólo se recomienda a los vendedores con conocimientos técnicos o a los que tienen acceso a un desarrollador. Nuestro equipo de soporte no puede ayudarle a escribir código personalizado más allá de la orientación general que se cubre en esta documentación. Para mantener la seguridad de sus datos, el equipo de soporte de Klaviyo no puede abrir archivos HTML.
Antes de empezar
En este artículo se explica cómo ocultar elementos de los bloques de tablas dinámicas existentes. Si aún no ha creado un bloque de tabla dinámica que funcione (por ejemplo, los productos de un carro abandonado o un correo electrónico de confirmación de pedido), aprenda a crear uno desde cero o empiece con un mensaje de nuestra biblioteca de flujos.
Escriba sus sentencias if
Antes de realizar cambios en su plantilla, cree 2 fragmentos de código utilizando un editor de texto o código (en algún lugar del que pueda 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 su bloque de tabla. - Contenido, como una etiqueta de imagen o un texto sobre el producto.
- Una etiqueta de cierre,
{% endif %}.
Crea la etiqueta inicial if
He aquí algunos ejemplos de apertura de etiquetas if:
Etiqueta | Significado |
{% if item.price != 0 %} | Si el precio del artículo(item.price) 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 artículo(item.title) está establecido (es decir, tiene cualquier valor). |
Estas etiquetas distinguen entre mayúsculas y minúsculas y deben coincidir exactamente con sus datos. Por ejemplo, si la variable para el precio de su artículo es algo distinto de item.price (por ejemplo, item.Price o item.details.line_price), actualice el código para que coincida con su fuente de datos.
Crea el contenido de la sentencia if
Para el contenido, siga estos pasos para utilizar el contenido existente de su bloque de tabla dinámica. Escriba este fragmento de código en un editor de código o de texto; lo añadirá a su plantilla en la siguiente sección.
- En Contenido de celda para la imagen del bloque de tabla, haga clic en Reemplazar para ver el marcador de posición de la imagen.
- Copie todo el código del campo Variable dinámica o URL dinámica. Tenga en cuenta que puede tratarse de una simple variable dinámica o de un fragmento de código más largo; cópielo todo, independientemente de su longitud.
- Sustituya el marcador de posición de este fragmento de código por el código que ha copiado del campo Variable dinámica o URL dinámica.
<img src="PLACEHOLDER" style="width: 200px; height: auto;" width="200">Si su bloque de tabla existente tiene una variable dinámica simple para la imagen, el contenido resultante tendrá un aspecto similar al siguiente:
<img src="{{item.product.variant.images.0.src}}" style="width: 200px; height: auto;" width="200"> Si su 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, junte todo el contenido: su declaración if de apertura, luego su contenido y, por último, una etiqueta {% endif %} de cierre.
Repítelo para el contenido del texto
A continuación, repita este proceso con el contenido de la parte derecha de su bloque de tabla (por ejemplo, el contenido de texto). Haga clic en </ > para abrir el editor de código y copie todo el contenido HTML, luego envuelva este contenido en la misma sentencia if (pasos 1 y 3) que utilizó 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í tiene 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 utilice estos fragmentos de código, asegúrese de utilizar comillas rectas (") en lugar de comillas rizadas (") para garantizar que el código se muestra correctamente.
Una vez que haya escrito ambos fragmentos de código, continúe en el editor de plantillas siguiendo los pasos que se indican a continuación.
Omitir filas en un bloque de tabla dinámica
Antes de editar su bloque de tabla dinámica, considere la posibilidad de guardar el bloque original como contenido universal por si necesita hacer referencia a él en futuros mensajes. A continuación, desvincule el bloque y edítelo por separado, para que sus ediciones no se guarden en el bloque de contenido universal.
- Si su mensaje forma parte de un flujo, póngalo en Borrador o Manual para que los mensajes no se envíen mientras edita el mensaje del flujo.
- Asegúrese de que el Contenido de celda para ambas columnas del nuevo bloque de tabla está establecido en Texto.
- Haga clic en </ > para abrir el editor HTML de la parte izquierda del bloque de tabla.
- Copie el fragmento de código de la imagen del producto que creó en la sección anterior y péguelo en el campo HTML.
- Pulse Hecho en la parte superior izquierda.
- Navegue hasta el editor de la parte derecha del bloque de tabla.
- Haga clic en </ > para abrir el editor HTML de la parte derecha del bloque de tabla.
- Copie el fragmento de código de los detalles del producto que creó en la sección anterior y péguelo en el campo HTML, sustituyendo todo el contenido anterior.
- Pulse Hecho.
- Previsualice el correo electrónico para asegurarse de que aparece como se espera: el elemento omitido no debería aparecer, pero todos los demás elementos aparecerán con normalidad. Asegúrese de realizar una vista previa con un evento que contenga el elemento que intenta ocultar, para poder asegurarse de que está oculto.
Sentencias condicionales y el editor de texto en línea
Cuando añada determinadas sentencias condicionales a un bloque de texto, es posible que desaparezcan del editor de texto en línea. El código sigue presente; sólo está oculto. Para ver y editar las sentencias condicionales, abra el campo Código fuente del bloque de texto.
Las siguientes etiquetas sólo son visibles en el campo Código fuente de un bloque de texto:
- {% for ... %}
- {% endfor %}
- {% if ... %}
- {% elif ... %}
- {% else %}
- {% endif %}
- {% with ... %}
- {% endwith %}
Resuelve problemas
No aparecen elementos en la vista previa
- Asegúrese de que está previsualizando con un evento que coincide con la fuente de datos que ha utilizado (por ejemplo, Pago iniciado para un mensaje de carrito abandonado).
- Confirme 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
Compruebe la ortografía y las mayúsculas de su declaración "si". Si el producto sigue apareciendo, significa que cumple los criterios de su sentencia if, por lo que su sentencia if no está configurada correctamente. Más información sobre la lógica condicional en las plantillas.
Resultado
Tras seguir estos pasos, los artículos que no cumplan los criterios de su declaración if no aparecerán en mensajes como los de carrito abandonado o confirmación de pedido.
Recursos adicionales
- Referencia de personalización de mensajes
Descubre cómo usar las etiquetas de plantilla de Klaviyo para personalizar la experiencia de los clientes.
- Cómo importar una plantilla HTML personalizada
Aprenda a importar una plantilla HTML personalizada en Klaviyo.