# Productos, cupones y el carrito

> Añade cuadrículas de productos y recomendaciones, códigos de cupón únicos, el carrito del contacto y sus datos de compra a los emails de campañas y automatizaciones. Alfa: solo para el equipo de Emailit.

Con los productos y los pedidos de tu tienda en Emailit (consulta [Comercio electrónico](/es/docs/commerce/)), los emails de campañas y automatizaciones pueden mostrar productos, dar a cada destinatario su propio código de cupón, listar lo que hay en su carrito y usar su historial de compras. Todas las etiquetas de esta página funcionan en el asunto, en el HTML y en la versión de texto plano, y se rellenan para cada destinatario cuando se crea el email.

> **Comercio electrónico está en alfa:** Comercio electrónico solo está abierto al equipo de Emailit mientras lo probamos. Consulta [Quién puede usar Comercio electrónico](/es/docs/commerce/#who-can-use-commerce).

## Añadir un bloque en el editor

En el paso **Content** del asistente de campañas, selecciona **Products & coupons**. Elige productos, un cupón, el carrito o datos del cliente, ajusta las opciones, selecciona **Copy** y pega la etiqueta en tu contenido. En los editores de texto enriquecido y Dragit, el menú de variables también lista etiquetas de comercio electrónico ya preparadas.

El resto de esta página describe las propias etiquetas, para el editor HTML, la API y las plantillas de automatización.

## Cuadrículas de productos

`{{products}}` inserta una cuadrícula de tarjetas de producto con una imagen, el título, el precio (con el precio anterior tachado cuando el producto está en oferta) y un botón:

```handlebars
{{products source="best_sellers" limit="3"}}
{{products source="recently_viewed" limit="4" fallback="best_sellers" button="View"}}
{{products "on_sale"}}
```

Una palabra entre comillas al principio es una forma abreviada de `source`.

| Atributo | Valor por defecto | Significado |
| --- | --- | --- |
| `source` | `best_sellers` | De dónde salen los productos; consulta más abajo. |
| `limit` | `4` | Cuántos productos, hasta 12. |
| `category` | | Con `source="category"`, la categoría. Con `best_sellers` o `newest`, los limita a ella. |
| `ids` | | Con `source="ids"`, los ID de tus productos separados por comas, en el orden en que se muestran. |
| `days` | `30` | Periodo de tiempo para `best_sellers` y `recently_viewed`, hasta 365. |
| `fallback` | | Un origen común a todo el espacio de trabajo que se usa cuando un origen personal no encuentra nada para un destinatario. |
| `columns` | 3, o menos si hay menos productos | Tarjetas por fila, de 1 a 4. |
| `button` | `Shop now` | Texto del botón. `button=""` oculta el botón. |
| `button_color` | `#111111` | Color del botón como código hexadecimal. |
| `show_price` | `true` | `false` oculta los precios. |
| `show_description` | `false` | `true` añade la descripción del producto. |

Los feeds omiten los productos archivados y los productos con un inventario de 0, salvo `last_order`.

### Orígenes

| Origen | Igual para todos | Productos |
| --- | --- | --- |
| `best_sellers` | Sí | Los que más unidades han vendido en los últimos `days`. Se completan con los productos más nuevos cuando no hay ventas suficientes. |
| `newest` | Sí | Los últimos productos añadidos a tu catálogo. |
| `on_sale` | Sí | Productos cuyo precio de comparación es superior al precio. |
| `category` | Sí | Los más vendidos de una `category` y, después, sus productos más nuevos. |
| `ids` | Sí | Los productos que indicas en `ids`. |
| `recently_viewed` | No | Los productos que el destinatario ha visto en tu web en los últimos `days`, del más reciente al más antiguo. Necesita el [script de seguimiento](/es/docs/commerce/connect-your-shop/#the-tracking-script). |
| `recommended` | No | Los más vendidos de las categorías que el destinatario ha visto o comprado, sin lo que ya ha comprado. Si no encuentra ninguno, recurre a los más vendidos. |
| `bought_together` | No | Productos que se suelen comprar junto con lo que ha comprado el destinatario. |
| `last_order` | No | Los artículos del pedido más reciente del destinatario. |

### Tu propia maquetación

Para diseñar tú las tarjetas, recorre un feed con `{{#each}}`. Dentro del bucle, usa los campos del producto:

```handlebars
{{#each products.recommended limit="3" fallback="best_sellers"}}
  <a href="{{url}}"><img src="{{image_url}}" alt="{{title}}" width="180"></a>
  <p>{{title}}: {{price_formatted}}{{#if on_sale}} <s>{{compare_at_price_formatted}}</s>{{/if}}</p>
{{/each}}
```

| Campo | Valor |
| --- | --- |
| `id`, `sku` | El ID y el SKU de tu producto. |
| `title`, `description`, `brand` | Textos del producto. |
| `url`, `image_url` | Enlaces a la página del producto y a la imagen. |
| `price`, `price_formatted` | El precio como número y con el formato de su moneda, por ejemplo `€139.00`. |
| `compare_at_price`, `compare_at_price_formatted` | El precio anterior. |
| `on_sale` | `true` cuando el precio de comparación es superior al precio. |
| `currency`, `categories` | El código de moneda y la lista de categorías. |
| `index`, `number` | La posición en el bucle, empezando por 0 y por 1. |

Usa `{{#if products.recently_viewed}}...{{/if}}` para mostrar una sección solo cuando un destinatario tiene productos en un feed. Los datos de los productos se escapan como HTML, así que el título de un producto no puede romper tu email.

## Códigos de cupón

`{{coupon "key"}}` inserta un código del [cupón](/es/docs/commerce/coupons/) con esa clave:

```handlebars
<p>Here's 10% off your next order: <strong>{{coupon "welcome10"}}</strong></p>
```

- Un cupón de **códigos únicos** da a cada destinatario su propio código de su pool. Un destinatario conserva el mismo código en todos los emails de la misma campaña o automatización, incluida la versión web.
- Un cupón de **un código para todos** inserta su código para todos.
- Cuando el pool de un cupón único se ha agotado o el cupón ha caducado, los destinatarios reciben su código alternativo, o nada si no tiene.
- Las vistas previas y los envíos de prueba muestran un ejemplo como `WELCOME10-PREVIEW` y no gastan códigos.
- Una clave desconocida no muestra nada.

`{{coupon.welcome10}}` es el mismo código como variable, por ejemplo en `{{#if coupon.welcome10}}`.

## El carrito

`{{cart}}` inserta el carrito abierto del destinatario: cada artículo con su imagen, su cantidad y su precio, el total y un botón **Return to your cart** que enlaza a la URL de pago del carrito. Define `button` y `button_color` igual que en las cuadrículas de productos. Cuando el destinatario no tiene ningún carrito abierto, no muestra nada.

Para tu propia maquetación, usa las variables del carrito:

```handlebars
{{#if cart}}
  <p>You left {{cart.item_count}} items ({{cart.total_formatted}}) in your cart.</p>
  {{#each cart.items}}<p>{{quantity}} × {{title}}: {{line_total_formatted}}</p>{{/each}}
  <a href="{{cart.checkout_url}}">Complete your order</a>
{{/if}}
```

`cart` tiene `id`, `total`, `total_formatted`, `currency`, `checkout_url`, `item_count` e `items`. Cada artículo tiene los campos de producto anteriores, además de `quantity`, `line_total` y `line_total_formatted`. El carrito es el carrito activo o abandonado más reciente del contacto, así que en una [automatización de carrito abandonado](/es/docs/automations/recipes/#abandoned-cart-reminder) es el carrito que se abandonó.

## Datos del cliente

| Etiqueta | Valor |
| --- | --- |
| `{{customer.orders_count}}` | Número de pedidos. |
| `{{customer.total_spent}}`, `{{customer.total_spent_formatted}}` | Gasto total, como número y con formato. |
| `{{customer.average_order_value}}`, `{{customer.average_order_value_formatted}}` | Valor medio del pedido. |
| `{{customer.first_order_at}}`, `{{customer.last_order_at}}` | Fechas del primer y del último pedido, `YYYY-MM-DD`. |
| `{{customer.expected_next_order_at}}` | Cuándo se espera el próximo pedido, a partir del segundo pedido. |
| `{{customer.churn_risk}}` | `low`, `medium` o `high`, o vacío si no hay pedidos. |
| `{{customer.is_customer}}` | `true` cuando el contacto ha hecho algún pedido. |

```handlebars
{{#if customer.is_customer}}Thanks for being a customer since {{customer.first_order_at}}.{{else}}Your first order ships free.{{/if}}
```

## Versión web

`{{webview_url}}` enlaza a una versión web del email, renderizada para ese destinatario con los mismos productos, el mismo carrito y el mismo código de cupón. Úsala para un enlace «Ver en el navegador».

## Ver también

  - [Comercio electrónico](/es/docs/commerce/): Conecta tu tienda y consulta los ingresos que generan tus emails.
  - [Temple](/es/docs/templates/temple/): Variables, valores alternativos y condicionales.

---
Fuente: https://emailit.com/es/docs/campaigns/products-and-coupons/