Cómo vender beats online con un carrito que funcione
Durante años, cada beat de mi tienda tenía un solo botón: comprar. Abría el selector de licencias, elegías una y BeatStars te llevaba a su checkout con ese único beat cargado. Funcionaba, y estaba perdiendo ventas en silencio. Si un productor quería dos beats, tenía que pagar dos veces, porque cada botón iniciaba una compra nueva. Nadie hace eso. Compra uno, dice que volverá por el otro, y no vuelve.
Así que el 22 de octubre puse un carrito de verdad en la web. No es un plugin: la tienda es un sitio estático hecho con Astro, sin base de datos y sin panel de administración propio. Es el cambio más grande que ha tenido esta tienda desde que la lancé, y así es como funciona.
El problema de un botón de compra
Una tienda de beats no es un comercio con carrito de supermercado. Es un catálogo donde cada artículo tiene seis niveles de licencia, y el precio cambia con el nivel, no con la cantidad. Por eso la mayoría de los productores nunca se molestó en poner un carrito: la plataforma te da un enlace por beat y mandas al comprador ahí.
El coste es invisible pero real. Cada checkout de más es otra oportunidad de que el comprador cambie de idea. Pasa dos veces por un formulario de pago, mete los mismos datos dos veces y recibe dos correos separados por dos archivos. Y si quería comparar una licencia básica de un beat con una licencia de stems de otro, las dos compras eran completamente independientes.
Con qué te deja trabajar BeatStars
BeatStars no publica una API de carrito, pero el front end de la tienda usa una, y es accesible. Con tres llamadas basta:
- Crear un carrito con un uuid nuevo. Cada checkout recibe uno nuevo, así un comprador nunca hereda artículos de una visita anterior.
- Añadir una línea con el id de la pista y el id del contrato de la licencia elegida. El contrato es lo que fija el nivel y el precio, no la pista sola.
- Pedir un enlace para compartir. Esa URL, cuando el comprador la abre, copia el carrito en su propio navegador y lo deja en el checkout de BeatStars con todo cargado.
Lo importante: el pago y la entrega se quedan en BeatStars. La web nunca toca una tarjeta, nunca guarda un comprador y nunca se convierte en una tienda. Solo construye el carrito y lo entrega, y por eso todo esto puede vivir en una página estática.
Mantener estático un sitio estático
El carrito vive en el navegador. Guarda dos cosas por línea: qué beat y qué licencia. Nada más. Los nombres, los precios y los ids de contrato se leen de la configuración de la web cada vez que carga la página, así que un cambio de precio no deja nunca una cifra vieja en un carrito que alguien empezó la semana pasada.
El contador de la cabecera, los botones de añadir y quitar y los totales son JavaScript puro. No hay sesión, ni login, ni servidor mío en medio. El único momento en que la web habla con alguien es cuando el comprador pulsa pagar y se construye el enlace para compartir.
Dos detalles pequeños marcaron la diferencia en las pruebas. Una licencia por beat: el carrito se niega a tener el mismo beat dos veces, porque eso es lo que hace la plataforma y un comprador que lo intenta acaba confundido, no atendido. Y cuando alguien se va al checkout y vuelve sin pagar, el carrito sigue ahí, restaurado de una copia guardada justo antes de salir. Es lo más parecido a una recuperación de carritos abandonados que se puede construir sin un sistema de cuentas.
Los descuentos son la parte que nadie acierta
Mis licencias llevan la oferta de la tienda: compra una básica y llévate dos gratis, o tres estándar y llévate dos gratis. BeatStars la aplica una vez por carrito, en el checkout, sobre las líneas más baratas. Si la web muestra un total de $65.90 y el checkout dice $32.95, el comprador no se siente afortunado, se siente engañado.
Así que el carrito reproduce la regla y enseña la misma aritmética antes de que nadie se vaya: qué es gratis, cuánto falta para desbloquear la siguiente línea gratis y cuál será el total. La escalera se ve mientras se llena el carrito en lugar de aparecer como sorpresa al final. También le dice la verdad al comprador, que es la única versión de un descuento que sobrevive al contacto con una página de pago.
Por qué probablemente no lo vas a construir tú
Esto parece una función pequeña y no lo es. La web no tiene panel de administración, ni CMS, ni plugins: cada página se genera por adelantado y se sube como HTML plano. Un carrito que solo existe en el navegador tiene que mantener el total, la licencia y el checkout de acuerdo sin ningún servidor que arbitre.
El lado de la tienda es peor. BeatStars no documenta una API de carrito, así que las tres llamadas que hay detrás se encontraron en su propio front end y se probaron una a una. Cada línea necesita el id de la pista y el id del contrato de la licencia, porque el precio vive en el contrato, no en el beat. Una licencia que la tienda ha desactivado en una pista hace fallar todo el checkout, así que el error tiene que volver con el nombre del beat que lo rompió en vez de con una pantalla en blanco.
Luego está la parte que nadie ve: reproducir la escalera de descuentos antes de que el comprador se vaya, para que el total de aquí y el total del checkout sean el mismo número. BeatStars aplica sus líneas gratis una vez por carrito, sobre las más baratas. Si te equivocas en eso, el carrito no es una función, es una queja.
Por eso la mayoría de los productores alquila una plataforma en vez de construir una. Y es la razón por la que esta web funciona en un hosting que no se cae: todo lo demás es un archivo estático, y la única pieza móvil es la plataforma que cobra.
La web que hay debajo
Nada de esto sobreviviría a un WordPress con quince plugins. La tienda es un sitio estático: 430 páginas construidas por adelantado, una hoja de estilos y un poco de JavaScript para el reproductor y el carrito. Cuando entra un visitante, no se le pide nada a ninguna base de datos.
El audio sigue la misma idea: HE-AAC a 56 kbps en lugar de un MP3 a 320 kbps, con el índice al principio del archivo para que la reproducción empiece antes de que el beat se haya descargado, y una cabecera de caché que lo mantiene en la máquina del visitante un año.
Lo que tiene que hacer un hosting después de eso es poco, pero tiene que hacerlo bien: servir archivos rápido, respetar los byte ranges y las cabeceras de caché, incluir SSL y HTTP/2. Este es el que usa esta web. Si quieres la misma base bajo tu tienda, es la única pieza que de verdad tienes que alquilar.
Si vendes en otra plataforma
Este truco concreto es de BeatStars, porque ahí están mis licencias y mis compradores. La lógica viaja: cualquier tienda que exponga un endpoint de carrito se puede manejar desde un sitio estático igual. Lo que no viaja es el atajo. Un carrito no es un botón que dice añadir al carrito; es un precio que cuadra, una licencia que cuadra y un checkout que se abre exactamente con lo que eligió el comprador.
Si sigues vendiendo un beat por checkout, empieza por el catálogo y las licencias, y construye el carrito después. El catálogo completo de beats está aquí, y si quieres oír el tipo de beat alrededor del cual está construida esta tienda, empieza por este instrumental de boom bap.
Preguntas frecuentes
¿Necesito un desarrollador para añadir un carrito a mi tienda de beats?
Para un sitio estático, sí, algo de código. Las llamadas son tres mutaciones contra el endpoint de carrito de la tienda y el resto es estado del navegador, pero alguien tiene que escribirlo y probar cada nivel de licencia contra el total del checkout.
¿Funciona el carrito si el comprador cambia de idea con la licencia?
Sí. Cada línea lleva su propia licencia y se puede cambiar desde el propio carrito. El carrito no permite el mismo beat dos veces, así que cambiar de licencia sustituye la línea en vez de añadir una segunda.
¿Dónde se hace el pago?
En BeatStars, siempre. La web solo construye el carrito y abre el checkout con él cargado. Tarjetas, facturas, entrega y el PDF de la licencia se quedan dentro de la plataforma.
¿Por qué no vender directamente en la web?
Porque entonces la web necesitaría un procesador de pagos, gestión de impuestos, facturas y una base de datos de clientes. Un catálogo estático con un carrito que se lo entrega a la plataforma mantiene rápida la parte rápida y deja la parte del dinero a quien ya lo hace legalmente.
