Vanilla JS → Next.js en Cloudflare. Sitio experimental "Liberogic Office Green"

¿Sabían que existe un sitio llamado Office Green?

Todo el contenido que lanzamos en nuestra empresa, incluidos los sitios web corporativos, es un banco de pruebas. (¡Excepto la aplicación de a11y de Futamata! Por cierto, este sitio no cumple con WCAG 😭)

En realidad, comenzó hace 5-6 años durante la era del COVID, cuando un presidente desocupado decidió hacer un proyecto DIY de reforestación en la oficina. (https://yurulog.liberogic.jp/posts/qx9nibr59)

La solicitud inesperada inicial @2023

Requisitos

• Un cliente quería comenzar un sitio de afiliados, así que pensamos que sería una buena oportunidad para hacer un pequeño experimento. (El cliente finalmente desistió, así que terminó siendo solo un experimento.)
• ¿Por qué no intentamos expandir páginas dentro de un modal en estado indexado y pasar la calificación de Amazon Associates sin tener un sitio propio? (¡Ya que compramos un montón de productos para la reforestación de la oficina, usémoslos como material!)
• No tenemos mucha oportunidad de trabajar con rotaciones de material en 360°. Hay bibliotecas disponibles y parece fácil, ¡así que intentémoslo!
• No nos importa mucho los ingresos, así que si podemos hacerlo como un experimento y aprendizaje, ¡lo hacemos público!
• ¿Nuestro sitio es un campo de pruebas para clientes? ¿Entiendes? (❓)

Estos son los requisitos que me lanzaron poco después de ingresar a la empresa.

Comenzamos la implementación en febrero de 2023 y documentaremos el historial de revisiones y adiciones de contenido hasta hoy.
¡Que vea la luz Liberogic Office Green! ☀️

Stack tecnológico

• Vanilla JS (ES Modules) — Sin framework, división de módulos personalizados con import/export
• Pannellum — Librería de visor de panorama 360 grados (instalada localmente como carpeta pannellum/, con alojamiento propio en lugar de CDN)
• HTML / Sass — Marcado y estilos

API y servicios externos

El punto clave de este sitio es el contenido con pantalla giratoria de 360°. Fotografiamos la oficina con una cámara RICOH THETA SC2.

La foto original tomada se ve así.

Para la implementación de 360° utilizamos la librería Pannellun. Solo configurando la imagen fotografiada, puedes ver 360° alrededor.

Descargamos la librería en lugar de usar un CDN para realizar varias personalizaciones.

Personalización

Colocamos un ícono «i» en los productos introducidos, y al pasar el mouse aparece el nombre del producto en un globo de texto.

Al hacer clic, se abre un modal de presentación del producto que enlaza a un enlace de asociado de Amazon. En el plano de la oficina en la esquina inferior derecha se muestra una marca de estrella que indica la ubicación.

¡Presentación de productos sin rodeos, con reseña honesta del presidente!

¡También puedes cambiar de vista apagando las luces de la habitación con el interruptor de la esquina superior izquierda, y hacer clic en las flechas para moverte hacia el escritorio del presidente!

Para que la gestión de productos sea fácil de editar y modificar, hemos optado por usar una hoja de cálculo en lugar de un CMS.

La razón es que

«¿No preferirían los clientes una operación más ligera? ¡Prueba a integrar con una hoja de cálculo!»

Hemos usado fetch para obtener datos de la hoja de cálculo e inyectarlos en un modal, pero… una vez que funcionó

«Este sitio es bastante lento, ¿eh?»

…………

Usamos la API basada en hot spots personalizados. El manual de referencia original solo permitía colocar marcas en ubicaciones arbitrarias y mostrar texto al pasar el ratón, pero añadimos varios elementos originales, como mostrar modales y cambiar de vista.

En fin, ¡está terminado! 🎊
¡Fue tan emocionante que estuve navegando por el sitio constantemente cuando se completó!

Amazon Associates

Es el famoso servicio de afiliación de productos de Amazon.

Los pasos son los siguientes.

• El contenido del sitio web es reciente (generalmente actualizado dentro de 60 días / es un sitio que se ve claramente mantenido).
• 10 o más artículos y contenido.
• Una vez que puedas colocar enlaces de productos, debes mostrar la divulgación operativa del Programa de Asociados de Amazon en la página de política de privacidad.
• Se requieren 3 ventas dentro de 180 días después del registro (no se permiten cuentas de la misma persona ni familiares).
• La URL ingresada es correcta y el sitio se puede verificar.

Y así sucesivamente.

Una vez que logres 3 ventas dentro de 180 días, comienza la revisión, y si la apruebas, podrás obtener recompensas a través del Programa de Asociados.

Al parecer, no divulgan los criterios de revisión, así que no obtendrás respuestas incluso si preguntas. ¡Parece que la revisión es más estricta que la de otros programas de afiliados!

Y así el Programa de Asociados de Amazon también fue aprobado exitosamente㊗️
El sitio de afiliados de compras de mi madre y del presidente se convirtió en la fuente principal de ventas nació de repente💥

*Nota: No debería hacer compras entre familiares, pero... si esto causa que me eliminen del programa de Asociados de Amazon, disculpen m(_ _;)m

Actualmente las ventas van a paso de tortuga, pero cuando veo el resumen y la tasa de conversión, ¡resulta bastante interesante!

Siguiente encargo @ 2024

Después de estar un tiempo sin hacer nada, surgió una brecha en el trabajo. Y entonces llegó el siguiente encargo...

Requisitos

• ¿No está siendo lo suficientemente exhaustivo el indexado de la página?
• ¿Por qué no añadimos también un espacio de oficina?
• ¿Y si aprovechamos para cambiar todo a Next.js?

De nuevo una petición desmesurada.

Pila de tecnología

Los archivos js y css de Pannellum los tengo en la carpeta public, pero supongo que lo más común ahora es importarlos con npm.
Parece que hace poco salió una librería para Next.js, y me habría gustado tenerla disponible durante la implementación para que hubiera sido más sencilla...

Por cierto, también tuve en cuenta la accesibilidad web para que se pudiera operar mediante teclado.

El modal se implementó con Parallel Routes de Next.js para que Google lo indexe como SEO con el parámetro /item/{num} y se cuente como una página.

¿El cambio de CSR a ISR también ayudó con la mejora de SEO!

Las órdenes continúan.

Requisitos

• Disculpa, nos regañaron por seguridad, así que removemos el espacio de oficina. (Completado: lo agregué con esfuerzo, pero lo marqué con 🈲.)
• Se siente muy pesado... ¿Acaso el renderizado está mal? (Parcialmente completado)
• Ya que tenemos LLM, ¿por qué no automatizamos algo? Queremos incorporar un concepto completamente diferente. (Aquí ahora: ¿qué significa?)
• Podemos agregar productos y cosas así~

Con actualizaciones graduales, se convirtió en un sitio de afiliados experimental Liberogic office green.

¡Me encanta la pantalla de apertura como tienda individual con confeti de papel y el modal de ilustración del director! Solemos agregar este tipo de pequeñas revisiones cuando pensamos "¡esto podría ser divertido!" en ratos libres. ¡Probablemente seguirá evolucionando!

¿Resumen?

Inicialmente, cuando lo construimos con Vanilla JS, implementé bastante por cuenta propia, pero a medida que hicimos varias revisiones, el anidamiento de funciones se volvió más complejo. Cuando lo rehicimos con Next.js, habría sido más fácil si la IA estuviera tan desarrollada como ahora, pero por otro lado hemos acumulado conocimiento y creo que podemos «utilizar la IA de manera informada».

Personalmente es uno de mis sitios favoritos, pero ¿qué les parece a ustedes?

¡Háganse pasar por el sitio y visiten nuestra oficina!