Encender y apagar una función de un sitio estático sin redesplegarlo
La página de precios de este sitio ofrecía comprar con tarjeta. Por razones comerciales, el cobro en línea tuvo que pasar a solicitudes por correo, con la posibilidad de volver a encenderlo más adelante. El sitio es estático: HTML generado al compilar. Si el modo se decidía al compilar, cada cambio de modo exigía recompilar y desplegar todo el sitio. Hay una forma mejor.
La idea
El modo no lo decide el HTML sino el backend, que ya existe para procesar los pagos. El sitio consulta un endpoint de configuración y ajusta lo que muestra. Encender o apagar la función pasa a ser cambiar una variable de entorno en el servidor y reiniciar, sin tocar el repositorio del sitio.
Paso 1: el backend expone el modo
El endpoint público de configuración devuelve si los pagos en línea están activos y, solo si lo están, la llave pública de la pasarela. El valor sale de una variable de entorno. Cuando está apagado, la ruta de cobro sigue existiendo pero responde que el servicio no está disponible.
Paso 2: el HTML trae los dos textos
La página se escribe en el modo por defecto, el
apagado, que es el seguro. El texto del otro modo ya está en el HTML,
pero oculto con el atributo hidden. Cada fragmento se marca
con un atributo de datos que indica a qué modo pertenece. Las etiquetas
de los botones funcionan igual: el texto visible es el de solicitud, y el
de compra viaja en un atributo de datos.
Paso 3: el JavaScript solo actúa si hay que encender
Al cargar la página, un script consulta la configuración. Si el modo de pago está apagado, no hace nada: la página ya está correcta. Si está encendido, invierte los fragmentos ocultos, cambia las etiquetas de los botones y carga el script de la pasarela.
Por qué funciona bien
- Sin parpadeo: como el estado inicial ya es el correcto para el modo por defecto, nadie ve "Comprar" y un instante después "Solicitar".
- Falla hacia el lado seguro: si el backend está caído, la consulta falla y la página se queda en modo solicitud. No aparece un botón de pago que no funcionaría.
- No carga lo que no usa: con los pagos apagados, el script de la pasarela ni siquiera se descarga.
- El camino apagado no se pierde: el código de cobro sigue en el repositorio, probado, en vez de borrarse y tener que reescribirse.
- El retroceso no toca git: volver al modo anterior es cambiar la variable otra vez.
El orden de despliegue
Cuando se introduce el patrón por primera vez, el backend se despliega antes que el sitio. Si el sitio sale primero, sus consultas al endpoint nuevo reciben un 404 hasta que llega el backend. En este diseño eso no rompe nada, porque la página se queda en el modo seguro, pero conviene que la ventana no exista.
Cuándo no usarlo
Si la diferencia entre modos es grande, como páginas enteras distintas, duplicar todo el contenido en el HTML deja de ser práctico y conviene otro enfoque. Tampoco sirve para ocultar información sensible: el texto oculto está en el HTML y cualquiera puede leerlo. El patrón es para alternar entre dos presentaciones públicas de algo que cambia de estado, como un formulario abierto o cerrado, una promoción activa o una función en pausa.