Cómo omitir líneas en un bloque de tabla dinámica

Qué aprenderás

Descubre cómo omitir filas (p. ej., artículos) en un bloque de tabla dinámica. El caso de uso más habitual es ocultar elementos irrelevantes, como el seguro de envío o los artículos de regalo gratis, de un email de carrito abandonado. Sin embargo, puedes seguir estos pasos para cualquier email que use un bloque de tabla dinámica.

Antes de empezar

En este artículo se explica cómo ocultar artículos de los bloques de tabla dinámica existentes. Si aún no has creado un bloque de tabla dinámica funcional (por ejemplo, los productos en un email de carrito abandonado o de confirmación de pedido), aprende a crear uno desde cero o empieza con un mensaje de nuestra biblioteca de flujos.

Estos pasos requieren la opción HTML en Contenido de la celda de tu bloque de tabla dinámica.

Si el email forma parte de un flujo, configúralo como Borrador o Manual antes de editarlo para que los mensajes no se envíen automáticamente mientras haces cambios.

Escribe tus declaraciones if

Crea 2 fragmentos de código con un editor de texto o de código (en un lugar desde el que puedas copiar y pegar los fragmentos más tarde): 1 para la imagen del producto y 1 para los detalles del producto. Cada fragmento de código constará de 3 partes:

1. Una etiqueta if de apertura, {% if ... %}, que indica qué elementos deben aparecer en el bloque de tabla.
2. Contenido, como una etiqueta de imagen o texto sobre el producto.
3. Una etiqueta de cierre, {% endif %}.

Crea la etiqueta if de apertura

Aquí tienes algunos ejemplos de etiquetas if de apertura:

En los ejemplos se usa item como alias de fila. Sustitúyelo si la tabla usa un alias diferente. El ejemplo del precio compara con el número 0; si el almacenamiento de datos guarda los precios como texto, compara con el valor de texto exacto, como {% if item.price != "0.00" %}.

Crea el contenido para la declaración if

En cuanto al contenido, sigue estos pasos para usar 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.

1. Selecciona la celda de imagen en el bloque de tabla. En Contenido de la celda, haz clic en Reemplazar para ver el marcador de posición de la imagen.

2. Copia todo el código del campo Variable dinámica o URL dinámica. Ten en cuenta que puede ser una variable dinámica simple, o bien un fragmento de código más largo; cópialo todo, independientemente de la longitud. Luego, cierra el selector de imágenes.

3. Sustituye el marcador de posición de este fragmento de código por el código que copiaste del campo Variable dinámica o URL dinámica.
   

<img src="PLACEHOLDER" style="width: 200px; height: auto;" width="200">

Este ejemplo usa un ancho de 200 px. Para mantener la configuración de imagen existente, usa su Ancho máximo, añade su Texto alternativo en un atributo alt y envuelve la imagen en una etiqueta <a href="..."> usando su Dirección del enlace.

Si tu bloque de tabla existente tiene una variable dinámica simple para la imagen, el contenido resultante tendrá un aspecto similar a este:

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

Luego, reúne todo el contenido: la etiqueta if de apertura, después tu contenido y, por último, una etiqueta {% endif %} de cierre.

Repite esto en el contenido de texto

Crea el segundo fragmento de código de la celda de detalles del producto:

1. Abre la celda de texto de detalles del producto. Si aparece un cuadro de diálogo que ofrece Convertir en bloque HTML, selecciónalo y continúa con el paso 3. Si no, selecciona y copia todo el contenido del editor de texto en línea.
2. En Contenido de la celda, selecciona HTML. Pega el contenido que copiaste en el editor de código y sustituye el contenido existente. Si se te solicita, elige Pegar como HTML.
3. Copia el HTML resultante en el segundo fragmento en el editor de texto o código. Envuélvelo en la misma etiqueta de apertura if y la etiqueta de cierre {% endif %} que usaste para el fragmento de imagen.

Por ejemplo, los 2 fragmentos de código pueden verse así para los datos de Shopify Started Checkout. Usa las variables y los enlaces de tu propia tabla:

Y aquí tienes un desglose de esos fragmentos de código:

Una vez que hayas escrito ambos fragmentos de código, continúa en el editor de plantillas siguiendo los pasos que se indican a continuación.

Omitir filas en un bloque de tabla dinámica

1. Selecciona la celda de imagen en la tabla dinámica existente. En Contenido de la celda, selecciona HTML.

2. Copia el fragmento de código de la imagen del producto que creaste en la sección anterior y pégalo en el editor de código, reemplazando cualquier contenido existente.

3. Selecciona la celda de detalles del producto, que configuraste como HTML en la sección anterior.
4. Copia el fragmento de código de detalles del producto que creaste en la sección anterior y pégalo en el editor de código, sustituyendo todo el contenido anterior.
5. Previsualiza el email para asegurarte de que aparece como se espera: el elemento omitido no debería aparecer, pero el resto de elementos aparecerán con normalidad. Asegúrate de previsualizar con un evento que contenga el artículo que estás intentando ocultar, para poder confirmar que está oculto. También previsualiza un evento que contenga solo los artículos que quieres ocultar para comprobar el aspecto del resto del email.
6. Cuando hayas terminado, espera a que los cambios terminen de guardarse y sal del editor de email. Si cambiaste un email de un flujo en vivo a Borrador o Manual, vuelve al flujo y configura ese email como En vivo cuando estés listo para reanudar el envío automático.

Estas condiciones ocultan el contenido de cada celda. Es posible que el espaciado o los bordes de las filas vacías sigan apareciendo, así que revisa el diseño en la vista previa.

Declaraciones condicionales y editor de texto integrado

En una celda de texto, las etiquetas de plantilla pueden aparecer como lógica editable en lugar de como código sin formato. Selecciona la lógica para editarla y, luego, haz clic en Guardar. En las celdas HTML usadas anteriormente, edita las etiquetas directamente en el editor de código.

Esto se aplica a estas etiquetas de plantilla:

• {% for ... %}
• {% endfor %}
• {% if ... %}
• {% elif ... %}
• {% else %}
• {% endif %}
• {% with ... %}
• {% endwith %}

Solución de problemas

No aparecen elementos en la vista previa

1. Asegúrate de previsualizar con un evento que coincida con la fuente de datos que usaste (p. ej., Started checkout para un mensaje de carrito abandonado).
2. En la pestaña Estilos de la tabla, confirma que Recopilación de filas y Alias de fila coincidan exactamente con la configuración del bloque original.

El artículo que debería omitirse sigue apareciendo

Comprueba que ambas celdas usen la misma instrucción if y que esta abarque todo el contenido que quieras ocultar. Comprueba la ortografía, el uso de mayúsculas, el alias de fila y el tipo de datos en relación con los datos del evento. Más información sobre la lógica condicional en las plantillas.

Resultado

Después de seguir estos pasos, los artículos que no cumplan los criterios de tu instrucción if no aparecerán en mensajes como emails de carrito abandonado o confirmación de pedido. 

Recursos adicionales