Condicionales avanzados

Las plantillas usan una sintaxis ligera al estilo Mustache para condicionales. Consulta Campos disponibles para la lista completa de lo que puedes referenciar —campos del feed, campos calculados para mostrar, y los flags de Display options que se explican en Dar soporte a los switches de diseño. Esta página cubre la sintaxis de los condicionales en sí.

Sintaxis Se renderiza cuando
{{campo}} Siempre —imprime el valor, escapado como HTML.
{{{campo}}} Siempre —imprime el valor como HTML sin escapar. Úsalo solo si el campo realmente contiene HTML que quieres renderizar tal cual; para texto normal, {{campo}} es la opción correcta.
{{#campo}}...{{/campo}} campo es truthy.
{{^campo}}...{{/campo}} campo es falsy.
{{#campo:valor}}...{{/campo:valor}} campo es exactamente igual a valor.
{{^campo:valor}}...{{/campo:valor}} campo no es igual a valor.

Combinar un switch con datos por producto

Los condicionales se pueden anidar para combinar una opción de diseño con datos propios de cada producto. Así es exactamente como las plantillas de fábrica gestionan los productos que no se pueden añadir al carrito directamente —un campo del feed disable_add_to_cart cambia el botón por un enlace "Ver producto", pero solo cuando el switch Show Add to Cart button está activo:

{{#show_add_to_cart}}
  {{^disable_add_to_cart}}<button data-ss-atc data-ss-product-id="{{id}}">{{t_add_to_cart}}</button>{{/disable_add_to_cart}}
  {{#disable_add_to_cart}}<button class="ss-view-product">{{t_view_product}}</button>{{/disable_add_to_cart}}
{{/show_add_to_cart}}

Condicionar por tus propios campos del feed

Los condicionales de igualdad son lo que hace útiles a los campos personalizados en una plantilla —no solo mostrar un valor, sino cambiar qué se renderiza según ese valor. Imagina que añades un campo personalizado stock_status (ver Añadir campos personalizados) con valores como in_stock, low_stock y out_of_stock:

{{#stock_status:out_of_stock}}<span class="ss-badge ss-badge--muted">Sin stock</span>{{/stock_status:out_of_stock}}
{{#stock_status:low_stock}}<span class="ss-badge ss-badge--warning">Pocas unidades</span>{{/stock_status:low_stock}}

Para in_stock no se renderiza nada —la insignia solo busca llamar la atención sobre los otros dos estados. Puedes combinar tantos bloques {{#campo:valor}} como valores tengas; cada uno es independiente, así que exactamente uno (o ninguno) acaba renderizándose por producto.

💡 Cuidado con los campos que guardan "1"/"0" como texto (habitual si el origen es Magento u otra plataforma similar). {{#campo}} hace una comprobación de truthiness normal, y el string "0" es truthy en JavaScript —así que {{#campo}} se renderizaría incluso cuando el valor es "0". Usa un condicional de igualdad en su lugar: {{#campo:1}}...{{/campo:1}}.