Vanilla JS → Next.js op Cloudflare experimenteersite 'Liberogic Office Green'

Wist u dat er een site genaamd "Office Green" bestaat..?

Al het door ons uitgebrachte content, inclusief onze corporate website, dient als experimenteerplatform. (Met uitzondering van het a11y-applicatie van Futamata! Trouwens, deze site is niet WCAG-compliant 😭)

Het begon eigenlijk vijf tot zes jaar geleden tijdens het coronatijdperk, toen onze directeur in zijn vrije tijd het kantoor zelf groen begon in te richten. (https://yurulog.liberogic.jp/posts/qx9nibr59)

Het eerste verzoek @2023

Vereisten

• We hebben een klant die een affiliate-site wil starten, dus waarom zouden we niet iets experimenteels doen! (De klant besloot uiteindelijk niet door te gaan, dus het werd alleen maar een experiment)
• Wat als we pagina's die in een modaal zijn geopend als geïndexeerd behandelen en zien of we Amazon Associates-goedkeuring kunnen krijgen zonder daadwerkelijke pagina's? (We hebben zoveel spullen gekocht voor de kantoorinrichting, dus laten we daar iets mee maken!)
• Het is eigenlijk zeldzaam dat we 360°-materiaal kunnen draaien. Er zijn bibliotheken voor en het lijkt simpel, dus laten we het proberen!
• Inkomsten zijn niet belangrijk, dus laten we het als experiment en leerervaring doen en het publiceren!
• Onze website is eigenlijk een proefterrein voor klanten? Begrijp je? (❓)

Kort na mijn indiensttreding werd ik belast met deze vereisten en nog veel meer.

De implementatie begon in februari 2023. Hier beschrijf ik de wijzigingen en toevoegingen van inhoud tot op heden!
Liberogic Office Green in het daglicht! ☀️

Technische stack

• Vanilla JS (ES Modules) — geen framework, import/export voor eigen moduleverdelingen
• Pannellum - bibliotheek voor 360-graden panoramavieuwers (lokaal geïnstalleerd als pannellum/ map, zelf gehost in plaats van CDN)
• HTML / Sass - opmaak en styling

Externe API's en services

Het hart van deze website is een 360°-draaibaar content-element. We fotograferen het kantoor met een RICOH "THETA SC2"-camera.

Dit is de originele foto die we hebben gemaakt.

Voor de 360°-implementatie gebruiken we de Pannellun-bibliotheek. Door simpelweg de gemaakte afbeelding in te stellen, kunt u 360° rond kijken.

We hebben de bibliotheek zelf gedownload in plaats van een CDN te gebruiken, zodat we deze uitgebreid kunnen aanpassen.

Aanpassingen

We plaatsen een "i"-pictogram op de producten die we introduceren. Wanneer u met de muis erover gaat, verschijnt de productnaam in een tekstballon.

Klik erop en een productinformatieverticaal verschijnt met een link naar Amazon Associates. Op de kantoorplattegrond in de rechterbenedenhoek wordt een sterpictogram weergegeven dat de locatie aangeeft.

Productintroducties zonder complimenten – met eerlijke reviews van de CEO!!

Je kunt ook met de schakelaar linksboven de weergave van de kamer met het licht uit omschakelen, en wanneer je op de pijl klikt, kun je naar het bureau van de directeur gaan!

We beheren producten met een spreadsheet in plaats van een CMS, zodat het gemakkelijker is om ze te bewerken en aan te passen.

De reden is:

"Klanten willen liever licht beheer, toch? Probeer het met een spreadsheet!"

We fetchen de spreadsheet-gegevens en voeren ze in een modal in... maar toen het klaar was:

"Deze site is traag, zeg..."

…………

We hebben de API op basis van de Custom Hotspot bron gebruikt. De referentie stelde oorspronkelijk alleen in staat om markeringen op willekeurige locaties te plaatsen en tekst weer te geven bij hover, maar we hebben er veel originele elementen aan toegevoegd, zoals het weergeven van modals en het wisselen van weergaven.

En dan is het af! 🎊
Toen het klaar was, was ik zo blij dat ik maar bleef rondzoeken op de site!

Amazon Associates

Zoals het woord al zegt, is dit de affiliate service voor Amazon-producten.

De stappen zijn als volgt.

• De inhoud van de website is actueel (algemeen gesproken bijgewerkt binnen 60 dagen / duidelijk goed onderhouden website).
• 10 of meer artikelen en inhoud.
• Zodra u productlinks kunt plaatsen, voegt u de Amazon Associates-exploitatievermelding toe op de privacybeleid-pagina.
• Binnen 180 dagen na registratie zijn 3 verkoopsresultaten vereist (hetzelfde account of familie is niet toegestaan).
• De ingevoerde URL is correct en de website kan worden bevestigd.

Enzovoort.

Zodra u 3 verkoopsresultaten binnen 180 dagen hebt behaald, begint de beoordeling. Wanneer u deze doorstaat, kunt u via Associates commissie verdienen.

Ze zeggen dat ze de beoordelingscriteria niet openbaar maken, en zelfs als u vragen stelt, krijgt u geen antwoord. Het lijkt erop dat de beoordeling strenger is dan bij andere affiliates!

En Amazon Associates is ook succesvol geapproved ㊗️
De belangrijkste bron van omzet is de affiliate-website voor winkelen van mijn moeder en de bedrijfsleider is als een bliksem ontstaan 💥

* Aankopen binnen de familie zijn niet ideaal, maar... als hierdoor mijn Amazon Associates-account wordt opgeheven, mijn excuses m(_ _;)m

De huidige verkoop gaat in een slakkengang, maar de samenvattingen en conversiepercentages zijn eigenlijk behoorlijk interessant!

Volgende opdracht @2024

Na enige tijd niets doen ontstond er een gat in mijn werkschema. En toen kwam de volgende opdracht...

Vereisten

• Is de indexering van de pagina niet sterk genoeg?
• Laten we ook een kantoorruimte toevoegen
• Waarom zouden we het niet tegelijk naar Next.js converteren?

Alweer een onmogelijk verzoek.

Technische stack

De js- en css-bestanden van Pannellum zet ik in de public-map, maar is het importeren via npm de standaardpraktijk?
Er is onlangs een bibliotheek voor Next.js uitgebracht, en ik vraag me af of de implementatie veel makkelijker zou zijn geweest als die al beschikbaar was geweest..

Ik heb bovendien aandacht besteed aan web accessibility services en zorgde ervoor dat je ook met het toetsenbord kunt navigeren.

De modale is geïmplementeerd met Next.js Parallel Routes, met de parameter /item/{num} zodat deze wordt geïndexeerd door Google's SEO en als één pagina wordt geteld.

Door over te schakelen van CSR naar ISR heeft dit ook geleid tot SEO-verbeteringen!

De opdrachten gaan door.

Vereisten

• Sorry, we zijn in de problemen gekomen met beveiliging, dus heb ik de kantoorsruimte verwijderd! (Voltooid: we hebben het net toegevoegd, maar ik heb het gemarkeerd.)
• Dit voelt zwaar.... klopt de weergave niet? (Gedeeltelijk voltooid)
• Als we toch een LLM hebben, waarom automatiseren we niet iets? Ik wil graag iets totaal anders proberen! (HUIDGE PLEK: wat betekent dit?)
• We kunnen producten toevoegen, enz.~

Door geleidelijke updates is het uitgegroeid tot een experimenteel affiliate-site Liberogic office green!

Ik hou erg van het openingsscherm met confetti en het modale illustratiedialoogvenster van de directeur, dat op een kleine winkel lijkt! We voegen dergelijke kleine aanpassingen soms zomaar toe als we tijd hebben en denken 'dit zou leuk kunnen zijn!' Het zal waarschijnlijk nog verder evolueren!

Samenvatting?

In het begin, toen ik het in Vanilla JS had gebouwd, implementeerde ik veel zelf. Maar naarmate je meer aanpassingen maakt, wordt de nesting van functies steeds complexer. Toen ik het herontwerp met Next.js deed, was het fijn geweest als AI op dit niveau was ontwikkeld, maar anderzijds heb ik veel kennis opgebouwd en kan ik nu "AI gebruiken met echt begrip".

Ik vind het persoonlijk een favoriete site, maar wat vinden jullie ervan??

Bekijk het gerust van alle kanten en kom een rondleiding door het kantoor doen!