> For the complete documentation index, see [llms.txt](https://ftcoders.first-tech.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ftcoders.first-tech.com/first-tech-ttp-sdk-pt/catalogo-de-produtos-detalhes-do-produto-e-adicao-ao-carrinho.md).

# Catálogo de Produtos, Detalhes do Produto e Adição ao Carrinho

**Objetivo**

Esta seção define os requisitos mínimos para a navegação no catálogo de produtos, visualização de informações detalhadas e adição de itens ao carrinho. O fluxo deve garantir clareza na organização dos produtos, facilidade de interação e transparência nos preços.

**Diretrizes**

* A navegação deve ser fluida e acessível, com foco em conversões rápidas e visuais de produto claros.
* As imagens devem seguir diretrizes de contraste, nitidez e legibilidade em dispositivos móveis.
* Este fluxo deve estar em conformidade com as melhores práticas de usabilidade para e-commerce móvel e ambientes de venda assistida.

***

<figure><img src="/files/0LhcXU2cikUAnJrFHRPr" alt=""><figcaption></figcaption></figure>

## **Tela Principal do Catálogo**

### 01 - Filtros de categoria

Deve apresentar opções de filtro visíveis (ex.: Todos, Camisas, Calçados), com o filtro ativo claramente destacado.

### 02 - Lista de produtos

Cada produto deve exibir: imagem, nome, categoria, preço e estoque (ícone e quantidade).

### 03 - Botão de adicionar ao carrinho

O ícone do carrinho deve estar visível no canto superior de cada item e permitir a adição rápida ao carrinho sem sair da lista.

{% hint style="success" %}
**Obrigatório:**\
A categorização dos produtos deve ser clara e funcional, com indicadores visíveis de estoque e preço.
{% endhint %}

{% hint style="info" %}
**Recomendado:**\
Fornecer feedback visual imediato ao adicionar um produto (ex.: animação do carrinho).
{% endhint %}

***

## **Tela de Detalhes do Produto**

### 04 - Imagem ampliada do produto

Deve ser visualmente destacada e em alta resolução.

### 05 - Informações detalhadas

Deve incluir:

* Nome do produto
* Preço
* Estoque disponível
* Descrição funcional do produto (clara e objetiva)
* Seletor de quantidade com botões +/−

{% hint style="success" %}
**Obrigatório:**\
Todas as informações relevantes do produto devem ser exibidas antes da compra.
{% endhint %}

{% hint style="info" %}
**Recomendado:**\
Utilizar linguagem simples e funcional, com foco em benefícios e usabilidade.
{% endhint %}

***

## **Ação de Adicionar ao Carrinho**

### 06 - Botão “Adicionar ao carrinho”

Deve estar claramente visível e só ser habilitado quando a quantidade for maior que zero.

{% hint style="success" %}
**Obrigatório:**\
Após a adição, redirecionar o usuário para o carrinho ou exibir uma confirmação não intrusiva.
{% endhint %}

{% hint style="info" %}
**Recomendado:**\
Exibir um resumo rápido (ex.: “2 itens adicionados”).
{% endhint %}

***

## **Tela do Carrinho**

### 07 - Lista de itens no carrinho

Cada item deve incluir: imagem, nome, categoria, preço, seletor de quantidade e opção de remoção.

O resumo do pedido deve incluir:

* Subtotal
* Desconto (se aplicável)
* Total final com destaque visual
* **Botão “Forma de pagamento”**
* Deve ser o próximo passo claro e visualmente destacado.

{% hint style="success" %}
**Obrigatório:**\
O carrinho deve permitir uma revisão completa antes de prosseguir para o pagamento.
{% endhint %}

{% hint style="info" %}
**Recomendado:**\
Fornecer feedback claro ao modificar quantidades ou remover itens.
{% endhint %}

***

## **Mensagens Obrigatórias**

* Quando um produto for adicionado:

> Produto adicionado ao carrinho com sucesso.

* Quando o estoque for insuficiente:

> A quantidade selecionada excede o estoque disponível. Por favor, ajuste e tente novamente.

***

## **Comportamentos Esperados**

* Cada produto adicionado deve atualizar a contagem total de itens em tempo real.
* A tela de detalhes do produto deve ser acessível tanto a partir do catálogo quanto das recomendações personalizadas.
* Os campos de quantidade devem bloquear valores negativos ou inválidos.
* O botão “Forma de pagamento” deve levar ao fluxo de checkout e Tap to Pay.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://ftcoders.first-tech.com/first-tech-ttp-sdk-pt/catalogo-de-produtos-detalhes-do-produto-e-adicao-ao-carrinho.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.