UX del selector de variantes en React: tallas agotadas, combinaciones inexistentes y avisos de reposición

Modela las variantes, deriva las opciones

Empieza por las variantes, porque es lo que devuelve tu API de comercio y a lo que apunta un pedido:

type Variant = {
  id: string
  options: Record<string, string>
  available: boolean
  quantity?: number
  price: Money
  imageId?: string
}

type Product = {
  options: { name: string; values: string[] }[]
  variants: Variant[]
}

Cada valor en pantalla recibe uno de tres estados, calculado a partir de las variantes y del resto de la selección actual:

• Disponible: alguna variante con este valor y las demás opciones elegidas tiene stock.
• Agotado: la combinación existe pero ahora mismo no tiene stock.
• No disponible: la combinación no se fabrica.

type ValueState = "available" | "sold-out" | "unavailable"

function getValueState(
  product: Product,
  selection: Record<string, string>,
  name: string,
  value: string
): ValueState {
  const wanted = { ...selection, [name]: value }
  const matches = product.variants.filter((variant) =>
    Object.entries(wanted).every(
      ([key, chosen]) => variant.options[key] === chosen
    )
  )
  if (matches.length === 0) return "unavailable"
  return matches.some((variant) => variant.available) ? "available" : "sold-out"
}

Esto te da el comportamiento que los clientes esperan sin casos especiales. Un color sigue disponible mientras alguna de sus tallas tenga stock. Una talla aparece tachada solo en los colores en los que está agotada. Elige otro color y las tallas se actualizan.

Es una función pura, así que también se ejecuta en el servidor. Renderiza el primer pintado con los estados correctos en lugar de mostrar todas las tallas como disponibles y luego tachar algunas.

Muestras y botones, nunca un desplegable

Un <select> oculta lo único que la gente vino a comprobar: si su talla está en stock. Muestra los colores como muestras y las tallas como botones, para que todo el panorama se vea de un vistazo.

Semánticamente, cada opción es un grupo de radio. Usa inputs de radio reales, o role="radiogroup" con roving focus, para que las flechas muevan entre valores y el grupo tenga nombre. Expón también el estado a las tecnologías de asistencia, porque una línea tachada es invisible para un lector de pantalla y fácil de pasar por alto para todos los demás:

<label className="swatch" data-state={state}>
  <input
    type="radio"
    name="size"
    value={size}
    checked={selection.size === size}
    onChange={() => select("size", size)}
    disabled={state === "unavailable"}
    aria-describedby={state === "sold-out" ? "size-sold-out" : undefined}
  />
  {size}
</label>

Encima de las muestras, muestra el valor elegido como texto ("Color: Oat"). Al pasar el cursor, previsualiza ahí el nombre del valor señalado, para que nadie tenga que adivinar un color a partir de un círculo de 32px.

Lo agotado debe seguir siendo seleccionable

El error habitual es desactivar las tallas agotadas. Eso oculta la información más útil, qué tallas existen, y elimina el camino hacia un email de reposición.

Mantén seleccionables los valores agotados. Cuando la variante elegida está agotada, sustituye Añadir a la bolsa por un formulario "Avísame cuando vuelva" que guarde el id de la variante, no el del producto, para que el email hable de Oat en Large y no de "esta camiseta".

Solo deben desactivarse las combinaciones que no existen, y deben explicar por qué en el nombre accesible: "XL, no se fabrica en Oat".

No preselecciones la talla

Preseleccionar la primera talla es como las tiendas acaban enviando muchísimas tallas S. Preselecciona el color, que es lo que ya muestra la foto, y deja la talla vacía.

Cuando alguien pulsa Añadir a la bolsa sin talla, no falles en silencio ni abras una alerta. Marca el grupo de tallas con "Selecciona una talla", mueve el foco a él y dale una pequeña sacudida que el movimiento reducido desactiva.

function addToBag() {
  const missing = product.options.find((option) => !selection[option.name])
  if (missing) {
    setError(missing.name, `Select a ${missing.name.toLowerCase()}`)
    groupRefs.current[missing.name]?.focus()
    return
  }
  add(findVariant(product, selection))
}

Cambiar a una combinación que no existe

El cliente tiene Large seleccionada y luego elige un color que solo viene en Small y Medium. Tienes dos opciones: bloquear el color, o aceptarlo y borrar la talla. Borrar la talla es mejor, porque el color suele ser la decisión más importante. Pero díselo. Una live region educada con "Large no se fabrica en Rust. Selecciona una talla." evita que los usuarios de lectores de pantalla añadan lo que no es, y el grupo de tallas visible muestra la selección vacía a todos los demás.

Las fotos y el precio siguen a la elección

Cuando cambia el color, la galería debe ir a la foto de ese color. Haz un fundido en el sitio en lugar de deslizar por todas las imágenes intermedias, y espera a que la nueva imagen se decodifique para que el marco nunca parpadee vacío. Deja que el cliente siga viendo las otras fotos después. La variante decide dónde empieza la galería, no dónde se queda bloqueada.

Los precios también pueden variar por variante. Antes de una selección completa, muestra un rango, "Desde $28". Una vez elegida la variante, muestra su precio, su precio de comparación tachado si está rebajada y su stock en palabras: "Solo quedan 3", "Preventa, se envía el 12 nov" o "Pendiente de reposición". Usa cifras tabulares en el precio para que la línea no se mueva cuando cambien los dígitos.

Pon la selección en la URL

?color=Oat&size=L hace que una variante se pueda compartir, sobrevive a una recarga y permite que anuncios y emails enlacen al producto exacto que vio el cliente. Léelo con cuidado, descartando lo que el producto no tenga:

function selectionFromSearchParams(product: Product, params: URLSearchParams) {
  const selection: Record<string, string> = {}
  for (const { name, values } of product.options) {
    const value = params.get(name.toLowerCase())
    if (value && values.includes(value)) selection[name] = value
  }
  return selection
}

En Next.js, lee searchParams en la página para que el servidor renderice la variante correcta, y actualiza la URL desde el cliente cuando cambie la selección. Decide si cada cambio debe añadir una entrada al historial o reemplazar la actual, y sé coherente.

Una checklist

• Deriva los estados de las opciones a partir de las variantes: disponible, agotado, no disponible.
• Muestras y botones en grupos de radio, con el estado en el nombre accesible.
• Los valores agotados siguen siendo seleccionables y ofrecen un email de reposición por variante.
• La talla nunca se preselecciona, y una talla que falta se marca y recibe el foco.
• Un cambio de color que invalida la talla la borra y explica por qué.
• La galería y el precio siguen a la variante sin bloquear la galería.
• La selección vive en la URL.

Los bloques de HextaUI para esto

Integré estas reglas en el bloque Variant Picker de HextaUI Pro. Calcula cada opción a partir de las variantes que le pasas, mantiene seleccionables los valores agotados con un formulario NotifyMe, nunca preselecciona tallas y marca una que falta con "Selecciona una talla". Sus helpers, findVariant, getOptionStates, getInitialSelection, getPriceRange y el par de search params, funcionan por separado, también en el servidor, y fromShopify mapea un producto de la Storefront API.

Se combina con Product Gallery, que hace un fundido a la foto de una variante cuando le pasas activeId, y con Price, que formatea cualquier moneda y anima solo los dígitos que cambian. Los tres tienen vistas previas en vivo que puedes probar antes de comprar.

Si lo siguiente que vas a construir es el carrito, ahí aplica el mismo cuidado: UX del carrito de compra en React.

Preguntas frecuentes

¿Hay que desactivar las tallas agotadas? No. Mantenlas seleccionables y ofrece un email de aviso de reposición. Desactiva solo las combinaciones que no se fabrican.

¿Debo preseleccionar una talla? No. Preselecciona el color si quieres y valida la talla cuando alguien añada a la bolsa.

¿Muestras o desplegable para las variantes? Muestras y botones. Un desplegable oculta el stock, que es la información que la gente busca.

¿Cómo guardo una variante en la URL? Usa un search param por opción, léelo en el servidor para el primer render e ignora los valores que el producto no tiene.