# Tienda

El escaparate de la tienda del proyecto directamente en la app: el catálogo, la tarjeta de un producto, el carrito, el pago del pedido y los pedidos del cliente. Los elementos toman de la tienda los productos, los precios, el stock, la entrega y el pago: no se configuran en la app. Cómo funciona la tienda y cómo se une el escaparate con los bloques «Realizar el pedido» y «Pago del pedido» se explica en la sección [Tienda](https://support.jetbot24.ru/es/shop/sales).

En cada elemento se elige primero la **«Tienda»**: la tienda del proyecto cuyos productos muestra el elemento. En el editor, los elementos muestran los productos reales de esa tienda.

Cómo añadir elementos y qué tienen en común se explica en la página [Elementos de pantalla](https://support.jetbot24.ru/es/mini-apps/elements).

| Elemento | Qué muestra | Salida |
|---|---|---|
| [«Categorías de la tienda»](https://support.jetbot24.ru/es/mini-apps/elements/shop#categorías-de-la-tienda) | Las categorías del catálogo | Siempre: «Categoría N» |
| [«Productos de la tienda»](https://support.jetbot24.ru/es/mini-apps/elements/shop#productos-de-la-tienda) | Una lista de productos con búsqueda y filtros | Con «Abrir el producto al tocarlo» marcado: «Producto N» |
| [«Tarjeta de producto»](https://support.jetbot24.ru/es/mini-apps/elements/shop#tarjeta-de-producto) | Un producto: fotos, precio, variantes, descripción | — |
| [«Carrito»](https://support.jetbot24.ru/es/mini-apps/elements/shop#carrito) | Los productos del carrito y el total | Siempre: el texto del botón para finalizar el pedido |
| [«Pago del pedido»](https://support.jetbot24.ru/es/mini-apps/elements/shop#pago-del-pedido) | Campos del cliente, entrega, pago, total | Siempre: el texto del botón |
| [«Mis pedidos»](https://support.jetbot24.ru/es/mini-apps/elements/shop#mis-pedidos) | Los pedidos de este cliente | Con «Abrir el pedido al tocarlo» marcado: «Pedido N» |

El camino habitual del cliente: categorías → productos de la categoría → tarjeta de producto → carrito → pago del pedido → el bloque «Realizar el pedido». La elección en cada pantalla va a una variable, y la pantalla siguiente la lee con una plantilla.

## Categorías de la tienda

Las categorías del catálogo, entre las que el cliente elige una sección.

![El elemento «Categorías de la tienda»: categorías como mosaico y la configuración del elemento](https://support.jetbot24.ru/_media/es/02-mini-apps/15-elements/_images/shop-categories.webp?v=1792562451)

- **«Mostrar subcategorías de»**: la categoría cuyas subcategorías se muestran. Si está vacío, las categorías de nivel superior.
- **«Vista»**: «Filas» o «Mosaico».
- **«Mostrar el número de productos»**: cuántos productos hay en la categoría.
- **«Id de la categoría en una variable»**: `categoryId` por defecto. La pantalla siguiente lo usa para mostrar los productos de esa categoría.
- **«Texto cuando no se encuentra nada»**.

La salida «Categoría N» siempre está: una categoría siempre lleva más allá.

## Productos de la tienda

Una lista de productos: todo el catálogo o una categoría, con búsqueda, un panel de filtros y un botón «Añadir al carrito».

![El elemento «Productos de la tienda»: productos como mosaico con una barra de búsqueda y la configuración del elemento](https://support.jetbot24.ru/_media/es/02-mini-apps/15-elements/_images/shop-products.webp?v=1792562451)

**Qué mostrar:**

- **«Categoría»**: si está vacío, todo el catálogo. Una categoría se muestra junto con sus subcategorías.
- **«Categoría desde una variable»**: una plantilla con el id de la categoría, por ejemplo, `{{ categoryId }}` del elemento «Categorías de la tienda». La variable tiene prioridad sobre la categoría elegida arriba; si está vacía, se muestra todo el catálogo.
- **«Vista»**: «Filas», «Tarjetas» o «Cuadrícula».
- **«Esquinas redondeadas de las fotos»** y, para las tarjetas y la cuadrícula, **«Altura de la foto, px»** (la foto cabe entera en esta altura, sin recortes; 0, su propia altura) y **«Deslizar fotos en la tarjeta»**: varias fotos del producto se pueden deslizar directamente en la lista.

**«Selección»:**

- **«Orden»**: «Más nuevos primero», «Más baratos primero», «Más caros primero», «Por nombre».
- **«Productos a la vez»**: hasta 50; los siguientes se cargan al desplazarse con «Cargar más al desplazarse» marcado. «Texto de carga» es el texto que se muestra mientras tanto.
- **«Solo en stock»**.

**«Búsqueda y filtros»:**

- **«Barra de búsqueda»**: busca por nombre y descripción y tolera errores de escritura. «Texto de ejemplo de la búsqueda» es el texto gris de la barra vacía.
- **«Panel de filtros»**: filtrado por las características de la tienda, con contadores. Se abre en una ventana con el botón junto a la búsqueda; «Título de la ventana de filtros» es su nombre. El panel muestra las características que tienen activado «Mostrar en los filtros»: [Categorías, características y filtros](https://support.jetbot24.ru/es/shop/catalog).

**«Tarjeta de producto»** en la lista:

- **«Mostrar el precio anterior»**: un precio tachado si es mayor que el actual.
- **Botón «Añadir al carrito»** y «Texto del botón». Para un producto con variantes, el botón dice «Elegir»: la variante se elige en la tarjeta de producto.
- **«Abrir el producto al tocarlo»** e **«Id del producto en una variable»**: `productId` por defecto. La pantalla del producto lo usa para mostrar la tarjeta.
- **«Texto cuando no se encuentra nada»**.

## Tarjeta de producto

Un producto completo: fotos, precio, elección de variante por opciones, descripción y características, el botón «Añadir al carrito».

![El elemento «Tarjeta de producto»: fotos, precio y el botón «Añadir al carrito», y la configuración del elemento](https://support.jetbot24.ru/_media/es/02-mini-apps/15-elements/_images/shop-product.webp?v=1792562451)

- **«Qué producto mostrar»**: normalmente, la variable en la que el elemento «Productos de la tienda» pone el producto elegido: `{{ productId }}`.
- **«Qué mostrar»**: «Fotos» (con las casillas «Fotos a ancho completo, sin márgenes laterales» y «Esquinas redondeadas de las fotos»), «Descripción», «Características», «Mostrar el precio anterior».
- **«Texto del botón»**: en lugar de «Añadir al carrito».
- **«Texto cuando no hay producto»**: puede que el producto se haya retirado de la venta o eliminado. Si está vacío, «Producto no encontrado».

Cómo elige el cliente una variante (de una lista, con botones, por color o por imagen) se define en la ficha del producto en la tienda.

En el editor, el elemento muestra como ejemplo el primer producto de la tienda: no se sabe de antemano qué producto abrirá el cliente.

## Carrito

Los productos del carrito del cliente: cantidades, el total y el botón para finalizar el pedido.

![El elemento «Carrito»: dos productos, el total y el botón «Finalizar pedido», y la configuración del elemento](https://support.jetbot24.ru/_media/es/02-mini-apps/15-elements/_images/shop-cart.webp?v=1792562451)

- **«Tienda»**: el carrito del cliente es común con los demás canales de esta tienda: un producto añadido en el chatbot también se ve aquí.
- **«Mostrar fotos de los productos»** y «Esquinas redondeadas de las fotos».
- **«Pago del pedido»**: «Texto del botón» («Finalizar pedido» por defecto) y «Color». Desde este botón sale una conexión hacia la pantalla de pago del pedido.
- **«Texto del carrito vacío»**: si está vacío, «El carrito está vacío».

En el editor, el carrito muestra como ejemplo los primeros productos de la tienda.

La salida del carrito es el botón para finalizar el pedido, y siempre está.

## Pago del pedido

Los campos del cliente, la elección de la entrega y del pago, y el total del pedido.

![El elemento «Pago del pedido»: campos del cliente, el total y el botón «Realizar el pedido», y la configuración del elemento](https://support.jetbot24.ru/_media/es/02-mini-apps/15-elements/_images/shop-checkout.webp?v=1792562451)

- **«Tienda»**: el pedido se forma con el carrito de esta tienda.
- **«Qué pedir»**: «Nombre», «Teléfono», «Email», «Comentario». Los campos obligatorios y el importe mínimo se definen en la configuración de la tienda. Aquí puedes omitir lo que esta pantalla no necesita: un nombre, un teléfono y un email conocidos se rellenan automáticamente.
- **«Mostrar el total»**.
- **«Texto del botón»** («Realizar el pedido» por defecto) y «Color». Desde este botón sale una conexión hacia el bloque «Realizar el pedido».
- **«Texto cuando el carrito está vacío»**.

La entrega y el pago son los métodos de la configuración de la tienda. El cliente introduce una dirección si la entrega elegida lo requiere.

## Mis pedidos

Los pedidos de este cliente con el número, la fecha, el estado y el importe.

![El elemento «Mis pedidos»: los pedidos del cliente y la configuración del elemento](https://support.jetbot24.ru/_media/es/02-mini-apps/15-elements/_images/shop-orders.webp?v=1792562451)

- **«Cuántos pedidos mostrar»**: de 1 a 20.
- **«Abrir el pedido al tocarlo»** e **«Id del pedido en una variable»**: `orderId` por defecto. La pantalla del pedido lo usa para mostrar los detalles, y el bloque «Pago del pedido», para dar un enlace de pago.
- **«Texto cuando no hay pedidos»**: si está vacío, «Aún no hay pedidos».