Vanilla JS → Next.js on Cloudflare : site expérimental « Liberogic Office Green »

Connaissez-vous le site « Office Green » ?

Tous les contenus publiés par notre entreprise, y compris notre site Web corporate, sont des terrains d'expérimentation. (À l'exception de l'application a11y de Futamata ! Au fait, ce site n'est pas conforme aux normes WCAG 😭)

Tout a commencé il y a environ 5 à 6 ans à l'époque du COVID, quand un PDG inactif a commencé à transformer le bureau en verdure par bricolage personnel. (https://yurulog.liberogic.jp/posts/qx9nibr59)

Première demande farfelue @ 2023

Exigences

• Un client voulait démarrer un site d'affiliation, et pourquoi ne pas en profiter pour faire une petite expérimentation ! (Le client a finalement abandonné, ce qui en a fait juste une expérience)
• Pourquoi ne pas tenter de passer la qualification Amazon Associates sans posséder de pages, en indexant des pages développées dans une modale ? (Puisque nous avons acheté plein de choses pour la verdurisation du bureau, utilisons-les comme matériaux !)
• On n'a pas vraiment l'occasion de faire tourner des matériaux 360°. Il y a des bibliothèques, ça semble facile, pourquoi ne pas essayer !
• Peu importe les revenus, puisque c'est pour l'expérimentation et l'apprentissage, pourquoi ne pas le publier !
• Notre site est un terrain de test pour les clients, d'accord ? Vous comprenez ? (❓)

Voici les exigences qui m'ont été confiées peu après mon intégration.

J'ai commencé la mise en œuvre en février 2023, et je vais documenter ici l'historique des modifications et des ajouts de contenu jusqu'à aujourd'hui !
Apporter la lumière à Liberogic Office Green ! ☀️

Stack technologique

• Vanilla JS (ES Modules) — sans framework, division de modules personnalisés avec import/export
• Pannellum - bibliothèque de visionneuse panoramique 360 degrés (installée localement en tant que dossier pannellum/, auto-hébergée plutôt que sur CDN)
• HTML / Sass - balisage et mise en forme

API et services externes

Le point clé de ce site est le contenu rotatif 360°. Nous avons photographié le bureau avec un appareil photo RICOH « THETA SC2 ».

Voici la photo originale capturée.

Pour l'implémentation 360°, nous utilisons la bibliothèque Pannellun. Il suffit de définir l'image capturée pour pouvoir voir 360° autour de vous.

Pour effectuer diverses personnalisations, nous avons téléchargé la bibliothèque elle-même plutôt que d'utiliser le CDN.

Personnalisation

Nous plaçons une marque « i » sur les produits présentés, et lorsque vous survolez avec la souris, le nom du produit s'affiche dans une bulle.

En cliquant, une fenêtre modale de présentation du produit s'affiche et vous redirige vers le lien d'associé Amazon. Le plan du bureau en bas à droite affiche une marque d'étoile indiquant le lieu de placement.

Les présentations de produits sont honnêtes, avec des critiques directes du PDG !!

Vous pouvez également utiliser le commutateur en haut à gauche pour basculer entre les vues avec les lumières éteintes, et cliquer sur les flèches pour vous déplacer vers le bureau du PDG !

Pour faciliter l'édition et la modification des produits, nous avons choisi de les gérer dans une feuille de calcul plutôt que dans un CMS.

La raison en est :

« Les clients préfèrent une maintenance légère, n'est-ce pas ? Essayons de l'intégrer avec Google Sheets ! »

Nous récupérons les données de Google Sheets et les injectons dans une modale... et une fois que c'était fait,

« Ce site est vraiment lent... »

…………

L'API est basée sur la source de Custom Hotspot. La référence d'origine permettait uniquement de placer des marqueurs n'importe où et d'afficher du texte au survol, mais nous avons ajouté plusieurs éléments originaux, comme l'ouverture de modales et le changement de vues.

Et voilà, c'est terminé ! 🎊
J'étais tellement content quand c'était fini que j'ai tourné en boucle sur le site pendant un moment !

Amazon Associates

Comme vous le savez sans doute, c'est le service d'affiliation pour les produits Amazon.

Voici les étapes.

• Le contenu du site Web doit être à jour (généralement mis à jour dans les 60 derniers jours / il doit être clair que le site est correctement entretenu)
• Au moins 10 articles ou contenus
• Une fois que vous pouvez placer des liens de produits, affichez les mentions obligatoires pour Amazon Associates sur votre page de politique de confidentialité
• Vous devez obtenir 3 ventes confirmées dans les 180 jours suivant l'inscription (les comptes identiques ou familiaux ne sont pas autorisés)
• L'URL saisie est correcte et le site peut être vérifié

Et cetera.

Une fois que vous avez obtenu 3 ventes confirmées dans les 180 jours, l'examen commence, et une fois approuvé, vous pouvez commencer à gagner des commissions via Associates.

Amazon n'a pas divulgué les critères d'examen et ne répondra pas aux questions. Il semble que l'examen soit plus strict que pour d'autres programmes d'affiliation !

Et Amazon Associates a également été approuvé avec succès ㊗️
La source principale de revenus est devenue le site d'affiliation d'achat de ma mère et du PDG 💥

Note : Les achats en famille ne sont pas recommandés... Si cela entraîne une suppression de mon compte Amazon Associates, je m'en excuse d'avance m(_ _;)m

Actuellement, les ventes avancent à un rythme de tortue, mais en regardant le résumé et le taux de conversion, c'est plutôt intéressant !

Prochaine directive @2024

Après une période d'inactivité, j'ai eu un creux dans mon travail. C'est alors que la prochaine directive est arrivée…

Exigences

• L'indexation des pages ne serait-elle pas insuffisante ?
• Et si on ajoutait aussi un espace de bureau ?
• Tant qu'on y est, pourquoi ne pas passer à Next.js ?

Encore une demande impossible.

Stack technologique

Je place les fichiers js et css de Pannellum dans le dossier public et je les utilise, mais est-ce que l'importation via npm est devenue la norme ?
Il paraît qu'une bibliothèque pour Next.js est sortie récemment, et j'aurais aimé l'avoir lors de l'implémentation pour que ce soit plus facile...

J'ai également tenu compte de web accessibility services, en m'assurant que la navigation au clavier est possible.

Le modal est implémenté avec Next.js Parallel Routes pour que le paramètre /item/{num} soit indexé par Google SEO et comptabilisé comme une seule page.

Le passage de CSR à ISR a également entraîné une amélioration du SEO !

Le travail continue

Exigences

• Désolé, j'ai eu des ennuis de sécurité alors j'ai supprimé l'espace bureau ! (Terminé : je l'avais pourtant ajouté mais j'ai marqué 🈲.)
• C'est un peu lourd... le rendu ne serait-il pas bizarre ? (Partiellement terminé)
• Puisqu'on a un LLM, on pourrait automatiser quelque chose, non ? J'aimerais bien incorporer une tout autre approche ! (En cours : qu'est-ce que tu veux dire par là ?)
• On pourrait ajouter des produits...

Avec des mises à jour progressives et discrètes, notre site expérimental d'affiliation est devenu Liberogic office green !

J'adore l'écran d'ouverture de style petite boutique avec ses confettis en papier et le modal avec l'illustration du PDG ! Ces petites mises à jour « ce serait sympa d'avoir ça ! » sont souvent ajoutées spontanément quand j'ai du temps libre. Cela continuera probablement à évoluer à l'avenir !

Résumé ?

Au départ, quand j'utilisais du Vanilla JS, j'implémentais pas mal de choses par moi-même, mais au fur et à mesure des modifications, l'imbrication des fonctions s'est compliquée. Si l'IA avait atteint ce niveau de développement au moment du remake avec Next.js, ça aurait probablement été plus facile, mais en contrepartie j'ai pu accumuler des connaissances et je pense que je peux maintenant « utiliser l'IA en ayant compris le sujet ».

Personnellement, c'est l'un de mes sites préférés, mais qu'en pensez-vous ??

N'hésitez pas à faire un tour complet et à visiter les bureaux !