> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Bloque Discount code

> El bloque Discount code del Aftersell Cart: permite a los compradores ingresar y aplicar un código de descuento antes del checkout.

> El bloque **Discount code** es un campo donde los compradores pueden ingresar y aplicar un código promocional en el carrito, de modo que vean el descuento reflejado antes de comprometerse con el checkout.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-discount-code-block-input-apply.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=ac5730766b756fdf99c2fc9f65ac202b" alt="Bloque Discount code con campo de entrada y botón Apply en el drawer del carrito" width="1314" height="230" data-path="images/aftersell/cart-discount-code-block-input-apply.png" />
</Frame>

<div id="behavior">
  ## Comportamiento
</div>

* Al aplicar, el código se recorta, se convierte a mayúsculas y se envía a Shopify. Como Shopify acepta la solicitud sea o no válido el código, el bloque luego vuelve a verificar el carrito para confirmar que el código realmente se aplicó.
  * **Válido** → el campo se limpia y el descuento se aplica.
  * **Inválido** → el bloque muestra "Invalid discount code."
* Cómo se acumula un código con otros descuentos (descuentos automáticos, otros códigos) lo maneja por completo Shopify — el bloque solo aplica el código.
* Los códigos aplicados se muestran en el bloque [**Summary**](/es/aftersell/cart/summary-block), no aquí.

<div id="settings">
  ## Configuraciones
</div>

| Configuración   | Qué controla                                   | Predeterminado  |
| --------------- | ---------------------------------------------- | --------------- |
| **Placeholder** | El texto de placeholder del campo. Traducible. | `Discount code` |
| **Button text** | La etiqueta del botón de aplicar. Traducible.  | `Apply`         |

<div id="placement-and-limits">
  ## Ubicación y límites
</div>

* **Región:** cuerpo o parte inferior.
* **Máximo:** 1 por estado del carrito. El carrito con artículos y el carrito vacío tienen cada uno su propio cupo.
* **Estado:** con artículos y vacío.
* No se agrega de forma predeterminada. No está bloqueado — puedes eliminarlo u ocultarlo.

<div id="custom-template">
  ## Plantilla personalizada
</div>

Admite una [plantilla personalizada](/es/aftersell/cart/custom-templates) desde su pestaña Code, que reemplaza el marcado integrado de este bloque con tu JSX. Estas son las props que recibe.

| Prop                   | Tipo                      | Para qué sirve                                                                           |
| ---------------------- | ------------------------- | ---------------------------------------------------------------------------------------- |
| `discountCodeInput`    | `string`                  | Valor actual del campo.                                                                  |
| `placeholder`          | `string`                  | Placeholder mostrado en el campo vacío.                                                  |
| `buttonText`           | `string`                  | Etiqueta del botón de aplicar.                                                           |
| `isValidating`         | `boolean`                 | `true` mientras se verifica un código enviado. Deshabilita tu control de envío con esto. |
| `isInvalid`            | `boolean`                 | `true` cuando el último código enviado fue rechazado.                                    |
| `setDiscountCodeInput` | `(value: string) => void` | Actualiza el valor del campo.                                                            |
| `handleSubmit`         | `(event: Event) => void`  | Envía el código actual.                                                                  |
| `isLoading`            | `boolean`                 | `true` mientras el carrito sigue haciendo su primer fetch.                               |

<Warning>
  Conecta tanto `setDiscountCodeInput` como `handleSubmit`. Sin el primero, no se puede escribir en el campo; sin el segundo, un código nunca se aplica.
</Warning>

<div id="design">
  ## Diseño
</div>

Dale estilo a este bloque con su sección **Design** en el panel de configuración. Son anulaciones por bloque que se aplican encima de tu diseño global y recurren a él cuando están en blanco.

¿Qué son las configuraciones de diseño? Aprende más aquí: [Configuraciones de diseño](/es/aftersell/cart/design-settings).