# Produtos, cupons e o carrinho

> Adicione grades de produtos e recomendações, códigos de cupom únicos, o carrinho do contato e os dados de compra dele aos e-mails de campanhas e de automações. Alfa: aberto apenas à equipe do Emailit.

Com os produtos e os pedidos da sua loja no Emailit (consulte [E-commerce](/pt/docs/commerce/)), os e-mails de campanhas e de automações podem mostrar produtos, dar a cada destinatário o próprio código de cupom, listar o que está no carrinho dele e usar o histórico de compras dele. Todas as tags desta página funcionam no assunto, no HTML e na versão em texto simples, e são preenchidas para cada destinatário quando o e-mail é criado.

> **O e-commerce está em alfa:** O e-commerce está aberto apenas à equipe do Emailit enquanto o testamos. Consulte [Quem pode usar o e-commerce](/pt/docs/commerce/#who-can-use-commerce).

## Adicionar um bloco no editor

Na etapa **Content** do assistente de campanha, selecione **Products & coupons**. Escolha produtos, um cupom, o carrinho ou dados do cliente, ajuste as opções, selecione **Copy** e cole a tag no seu conteúdo. Nos editores de texto formatado e Dragit, o menu de variáveis também lista tags de e-commerce prontas.

O resto desta página descreve as próprias tags, para o editor HTML, a API e os templates de automação.

## Grades de produtos

`{{products}}` insere uma grade de cards de produtos com uma imagem, o título, o preço (com o preço antigo riscado quando o produto está em promoção) e um botão:

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

Uma palavra entre aspas no início é uma forma abreviada de `source`.

| Atributo | Padrão | Significado |
| --- | --- | --- |
| `source` | `best_sellers` | De onde vêm os produtos; veja abaixo. |
| `limit` | `4` | Quantos produtos, até 12. |
| `category` | | Com `source="category"`, a categoria. Com `best_sellers` ou `newest`, limita os produtos a ela. |
| `ids` | | Com `source="ids"`, os IDs dos seus produtos separados por vírgulas, na ordem em que devem aparecer. |
| `days` | `30` | Período para `best_sellers` e `recently_viewed`, até 365. |
| `fallback` | | Uma fonte de todo o workspace a usar quando uma fonte pessoal não encontra nada para um destinatário. |
| `columns` | 3, ou menos se houver menos produtos | Cards por linha, de 1 a 4. |
| `button` | `Shop now` | Texto do botão. `button=""` oculta o botão. |
| `button_color` | `#111111` | Cor do botão como código hexadecimal. |
| `show_price` | `true` | `false` oculta os preços. |
| `show_description` | `false` | `true` adiciona a descrição do produto. |

Os feeds ignoram os produtos arquivados e os produtos com estoque 0, exceto `last_order`.

### Fontes

| Fonte | Igual para todos | Produtos |
| --- | --- | --- |
| `best_sellers` | Sim | Os produtos com mais unidades vendidas nos últimos `days`. Quando não há vendas suficientes, a lista é completada com os produtos mais novos. |
| `newest` | Sim | Os produtos adicionados ao seu catálogo mais recentemente. |
| `on_sale` | Sim | Produtos cujo preço comparativo é maior que o preço. |
| `category` | Sim | Os mais vendidos de uma `category` e depois os produtos mais novos dela. |
| `ids` | Sim | Os produtos que você lista em `ids`. |
| `recently_viewed` | Não | Os produtos que o destinatário viu no seu site nos últimos `days`, do mais recente para o mais antigo. Precisa do [script de rastreamento](/pt/docs/commerce/connect-your-shop/#the-tracking-script). |
| `recommended` | Não | Os mais vendidos nas categorias que o destinatário viu ou comprou, sem o que ele já comprou. Usa os mais vendidos como alternativa. |
| `bought_together` | Não | Produtos frequentemente comprados junto com o que o destinatário comprou. |
| `last_order` | Não | Os itens do pedido mais recente do destinatário. |

### O seu próprio layout

Para criar os cards você mesmo, percorra um feed com `{{#each}}`. Dentro do loop, use os campos do produto:

```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` | O ID e o SKU do produto na sua loja. |
| `title`, `description`, `brand` | Textos do produto. |
| `url`, `image_url` | Links para a página e para a imagem do produto. |
| `price`, `price_formatted` | O preço como número e formatado com a moeda, por exemplo `€139.00`. |
| `compare_at_price`, `compare_at_price_formatted` | O preço antigo. |
| `on_sale` | `true` quando o preço comparativo é maior que o preço. |
| `currency`, `categories` | O código da moeda e a lista de categorias. |
| `index`, `number` | A posição no loop, a partir de 0 e a partir de 1. |

Use `{{#if products.recently_viewed}}...{{/if}}` para mostrar uma seção só quando um destinatário tem produtos em um feed. Os dados dos produtos são escapados como HTML, então um título de produto não pode quebrar o seu e-mail.

## Códigos de cupom

`{{coupon "key"}}` insere um código do [cupom](/pt/docs/commerce/coupons/) com essa chave:

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

- Um cupom do tipo **unique codes** dá a cada destinatário o próprio código, tirado do pool do cupom. Um destinatário mantém o mesmo código em todos os e-mails da mesma campanha ou automação, incluindo a versão web.
- Um cupom do tipo **one code for everyone** insere o código dele para todos.
- Quando o pool de um cupom de códigos únicos está vazio ou o cupom expirou, os destinatários recebem o código alternativo dele, ou nada, se ele não tiver um.
- As pré-visualizações e os envios de teste mostram um exemplo como `WELCOME10-PREVIEW` e não consomem códigos.
- Uma chave desconhecida não renderiza nada.

`{{coupon.welcome10}}` é o mesmo código como variável, por exemplo em `{{#if coupon.welcome10}}`.

## O carrinho

`{{cart}}` insere o carrinho aberto do destinatário: cada item com a imagem, a quantidade e o preço, o total e um botão **Return to your cart** com link para a URL de checkout do carrinho. Defina `button` e `button_color` como nas grades de produtos. Quando o destinatário não tem um carrinho aberto, a tag não renderiza nada.

Para o seu próprio layout, use as variáveis do carrinho:

```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` tem `id`, `total`, `total_formatted`, `currency`, `checkout_url`, `item_count` e `items`. Cada item tem os campos de produto acima, além de `quantity`, `line_total` e `line_total_formatted`. O carrinho é o carrinho ativo ou abandonado mais recente do contato, então, em uma [automação de carrinho abandonado](/pt/docs/automations/recipes/#abandoned-cart-reminder), ele é o carrinho que foi abandonado.

## Dados do cliente

| Tag | Valor |
| --- | --- |
| `{{customer.orders_count}}` | Número de pedidos. |
| `{{customer.total_spent}}`, `{{customer.total_spent_formatted}}` | Total gasto, como número e formatado. |
| `{{customer.average_order_value}}`, `{{customer.average_order_value_formatted}}` | Valor médio do pedido. |
| `{{customer.first_order_at}}`, `{{customer.last_order_at}}` | Datas do primeiro e do último pedido, `YYYY-MM-DD`. |
| `{{customer.expected_next_order_at}}` | Quando o próximo pedido é esperado, a partir do segundo pedido. |
| `{{customer.churn_risk}}` | `low`, `medium` ou `high`, ou vazio se não houver pedidos. |
| `{{customer.is_customer}}` | `true` quando o contato já fez algum pedido. |

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

## Versão web

`{{webview_url}}` cria um link para uma versão web do e-mail, renderizada para esse destinatário com os mesmos produtos, o mesmo carrinho e o mesmo código de cupom. Use-a em um link “Ver no navegador”.

## Veja também

  - [E-commerce](/pt/docs/commerce/): Conecte a sua loja e veja a receita gerada pelos e-mails.
  - [Temple](/pt/docs/templates/temple/): Variáveis, valores padrão e condicionais.

---
Fonte: https://emailit.com/pt/docs/campaigns/products-and-coupons/