Vanilla JS → Next.js on Cloudflare-experimentwebsite "Liberogic Office Green"

Heeft u ooit gehoord van de website "Office Green"...?

Alles wat ons bedrijf uitbrengt, inclusief onze corporate website, is een proeftuin. (Uitgezonderd de a11y-applicatie van Futamata-san! Trouwens, deze site voldoet nog niet aan WCAG 😭)

Het begon eigenlijk vijf à zes jaar geleden, in de coronatijd, toen onze president, die wat tijd over had, zijn kantoor zelf DIY begroende. (https://yurulog.liberogic.jp/posts/qx9nibr59)

Het eerste onredelijke verzoek @2023

Vereisten

• Er was een klant die een affiliate-site wilde starten, dus dachten we: laten we er dan meteen een kleine experiment van maken! (Deze klant heeft het project uiteindelijk stopgezet, dus het bleef bij een experiment.)
• Wat dacht je ervan om te testen of we, met pagina's die binnen een modal worden geopend en zijn geïndexeerd, de Amazon Associates-kwalificatie kunnen halen zonder een echte pagina te hebben? (We hebben al veel spullen voor het kantoor gekocht, dus laten we die als materiaal gebruiken!)
• Het is eigenlijk best zeldzaam dat we werken met 360°-materiaal dat rondgedraaid moet worden. Er zijn bibliotheken voor en het lijkt simpel, dus laten we het gewoon eens proberen!
• Inkomsten maken ons niet uit. Als we het kunnen afronden als experiment en leerervaring, publiceren we het misschien gewoon!
• Onze website dient als proeftuin voor onze klanten. Snap je? (❓)

Dit waren de eisen die kort na mijn indiensttreding aan mij werden toegewezen.

De implementatie is gestart in februari 2023. Hieronder beschrijven we de ontwikkeling tot nu toe, inclusief wijzigingen en toegevoegde content!
Liberogic Office Green krijgt eindelijk de aandacht die het verdient! ☀️

Technologiestack

• Vanilla JS (ES Modules) — geen framework, modulaire opbouw met import/export
• Pannellum - 360-graden panoramaviewerbibliotheek (lokaal geplaatst als map pannellum/, zelf gehost in plaats van via een CDN)
• HTML / Sass - opmaak en styling

Externe API's en diensten

Het kernonderdeel van deze site is de inhoud met een 360°-draaiweergave. Het kantoor wordt gefotografeerd met de RICOH "THETA SC2"-camera.

Hier is de originele foto.

Voor de 360°-weergave is de bibliotheek Pannellum gebruikt. Door alleen de opgenomen afbeelding in te stellen, kan de weergave rondom in 360° worden bekeken.

Om diverse aanpassingen mogelijk te maken, is de bibliotheek zelf gedownload in plaats van via een CDN te laden.

Aanpassingen

Bij de getoonde producten wordt een "i"-markering geplaatst. Wanneer de muis erboven wordt bewogen, verschijnt de productnaam in een infobel.

Bij klikken verschijnt een modaal venster met productinformatie, dat linkt naar een Amazon-affiliatelink. In de kantoorplattegrond rechtsonder wordt een sterretje getoond dat de locatie aangeeft.

Productbesprekingen zonder omwegen, met een eerlijke recensie van de president!!

Met de schakelaar linksboven kun je wisselen naar een weergave met uitgeschakelde verlichting, en door op de pijl te klikken ga je naar de bureauzijde van de president!

Het productbeheer gebeurt bewust in een spreadsheet in plaats van in de CMS, zodat bewerken en aanpassen eenvoudig blijft.

De reden hiervoor is:

"Het beheer voor de klant moet lichtgewicht zijn, toch? Koppel het maar via de spreadsheet!"

De gegevens uit de spreadsheet worden opgehaald via fetch en in het modaal venster geladen, maar... Toen het eenmaal werkte, was het resultaat...

"Deze site is best traag, hè..."

…………

De API is gebaseerd op de broncode van aangepaste hotspots. In de referentie worden tekstlabels alleen weergegeven wanneer je met de muis over een markering in een vrij gekozen punt beweegt. Wij hebben daar echter een modaal venster aan toegevoegd, de weergave kunnen wisselen en nog allerlei eigen elementen toegevoegd.

Uiteindelijk is het af 🎊
Toen het klaar was, was ik zo blij dat ik de site steeds opnieuw bekeek!

Amazon Associates

Het is een affiliateprogramma voor Amazon-producten dat iedereen kent.

De stappen zijn als volgt.

• De websitecontent moet actueel zijn (over het algemeen recent bijgewerkt, binnen 60 dagen), zodat duidelijk is dat de site actief wordt beheerd.
• De site moet minimaal 10 artikelen of inhoudelijke pagina's bevatten.
• Zodra productlinks kunnen worden geplaatst, moet op de privacybeleidspagina de vermelding van het Amazon Associates-programma worden opgenomen.
• Binnen 180 dagen na registratie zijn 3 verkopen nodig (accounts van dezelfde persoon of familieleden zijn niet toegestaan).
• De ingevoerde URL is correct en de site is bereikbaar.

enzovoort.

Zodra je binnen 180 dagen 3 verkopen hebt gerealiseerd, start de beoordeling. Na goedkeuring ontvang je commissies via het Associates-programma.

Ze hebben aangegeven hun beoordelingscriteria niet bekend te maken, dus vragen stellen levert geen antwoord op. Het lijkt inderdaad strenger te zijn dan bij andere affiliate-programma's!

En ook Amazon Associates is goedgekeurd 🎉
Zo is een winkel-affiliatesite ontstaan waarvan de omzet voornamelijk van mijn moeder en de directeur komt 💥

Opmerking: Aankopen door familie zijn niet ideaal... Als het Amazon Associates-account hierdoor wordt opgezegd, excuses m(_ _;)m

Momenteel gaat het langzaam met de omzet, maar bij het bekijken van het overzicht en de conversieratio is het best interessant!

Volgende opdracht @2024

Na een tijdje stil te hebben gelegen, ontstond er een gat in het werk. Toen kwam de volgende opdracht...

Vereisten

• Is de indexering van de pagina's niet wat laks?
• We zouden ook een kantoorruimte moeten toevoegen.
• Waarom zouden we het ook niet meteen omzetten naar Next.js?

Weer een onredelijke eis.

Technologiestack

Ik heb de Pannellum js- en css-bestanden in de public-map geplaatst om ze te gebruiken, maar is importeren via npm tegenwoordig de gangbare werkwijze?
Er is onlangs blijkbaar een bibliotheek voor Next.js verschenen. Als die er bij de implementatie was geweest, had het werk een stuk makkelijker kunnen zijn..

Daarnaast hebben we ook rekening gehouden met webtoegankelijkheid, zodat de site met het toetsenbord bediend kan worden.

Om ervoor te zorgen dat het modaal door Google's SEO wordt geïndexeerd, hebben we de parameter /item/{num} toegevoegd en het geïmplementeerd met Parallel Routes van Next.js, zodat het als één pagina wordt geteld.

Draagt de overstap van CSR naar ISR ook bij aan een betere SEO?

De opdrachten blijven doorgaan.

Vereisten

• Sorry, beveiligingsbezwaren betekenen dat we de kantoorruimte moeten schrappen! (Voltooid: hoewel we het er net aan hadden toegevoegd, hebben we het nu doorgestreept met een 🈲-teken.)
• Het is echt te zwaar.... Zou de rendering niet kloppen? (Bijna voltooid)
• Nu we toch een LLM hebben, zouden we er iets mee moeten automatiseren, toch? We zouden ook een heel ander concept willen toepassen! (Waar we nu staan: wat bedoelen we precies?)
• Laten we ook producten toevoegen...

Door gestaag van versie te verhogen, is het uitgegroeid tot de experimentele affiliate-site Liberogic office green!

Mijn favoriet is het confetti-effect op het openingsscherm, dat doet denken aan een kleine winkel, en de modal met de illustratie van de president! Dit soort kleine verbeteringen voeg ik er in mijn vrije tijd gewoon aan toe, met de gedachte: "Zou dit niet leuk zijn?" Waarschijnlijk blijft het zich ontwikkelen!

Conclusie?

Toen we het met Vanilla JS bouwden, konden we het grotendeels zelf implementeren, maar naarmate we het op veel punten aanpasten, werden de geneste functies steeds ingewikkelder. Als AI in de tijd van de herbouw met Next.js al zo ver was als nu, was het misschien makkelijker geweest, maar dan hadden we minder kennis opgebouwd. Ik vraag me af of we nu "AI gebruiken, maar met begrip van wat we doen" echt waarmaken.

Persoonlijk vind ik het een favoriete site, maar wat denken jullie ervan??

Neem gerust even de tijd om rond te kijken en het kantoor te bekijken!