Vanilla JS → Next.js auf Cloudflare – Experimentelle Website „Liberogic Office Green"

Wissen Sie, dass es eine Website namens "Office Green" gibt...?

Alle von uns veröffentlichten Inhalte – einschließlich unserer Corporate-Website – dienen als Experimentierplattform. (Mit Ausnahme von Futamatasa's a11y-Anwendung! Aber ehrlich gesagt ist diese Website noch nicht WCAG-konform 😭)

Alles begann eigentlich vor 5 bis 6 Jahren während der Corona-Zeit, als ein gelangweilter Geschäftsführer das Büro aus eigener Initiative mit Grünanlagen selbst umgestaltete. ((https://yurulog.liberogic.jp/posts/qx9nibr59))

Die erste unerwartete Anfrage @2023

Anforderung

• Es gibt einen Kunden, der ein Affiliate-Site starten möchte, und da wollten wir natürlich auch ein kleines Experiment durchführen! (Der Kunde gab letztlich auf, sodass es nur ein Experiment blieb)
• Möchte nicht testen, ob man die Amazon Associates-Qualifizierung bestehen kann, wenn die in einem Modal expandierten Seiten indiziert sind, aber keine Seite vorhanden ist? (Das Büro ist so voll mit Grünpflanzen-Dekorationskram, den wir gekauft haben – warum machst du nicht einfach etwas daraus!)
• Mit 360°-Materialien herumzudrehen ist eigentlich gar nicht so häufig, oder? Es gibt Bibliotheken, und es sieht einfach aus – lass uns das doch einfach mal ausprobieren!
• Einkommen und dergleichen sind mir egal – ich werde es einfach veröffentlichen, um zu experimentieren und dabei zu lernen!
• Unsere Website ist ein Testlabor für Kunden, verstehst du? (❓)

Die Anforderungen, die mir kurz nach meinem Eintritt übertragen wurden, überschreiten das normale Maß.

Die Implementierung begann Februar 2023 und seitdem haben wir verschiedene Überarbeitungen und Inhaltsergänzungen vorgenommen. Hier dokumentieren wir diese Entwicklung!
Liberogic Office Green ins Rampenlicht! ☀️

Technologie-Stack

• Vanilla JS (ES Modules) — Kein Framework, import/export für eigene Modulteilung
• Pannellum – 360-Grad-Panorama-Viewer-Bibliothek (lokal als pannellum/-Ordner installiert, Self-Hosting statt CDN)
• HTML / Sass – Markup und Styling

Externe APIs und Services

Der Kern dieser Website ist ein 360°-Inhaltsbereich, der sich dreht. Das Büro wird mit einer Kamera namens RICOH THETA SC2 fotografiert.

Hier ist das ursprüngliche Foto der Aufnahme.

Für die 360°-Implementierung verwenden wir eine Bibliothek namens Pannellum. Mit einfach eingestelltem Foto können Sie die gesamte 360°-Ansicht durchsuchen.

Um verschiedene Anpassungen vorzunehmen, haben wir die Bibliothek selbst heruntergeladen, anstatt ein CDN zu verwenden.

Anpassung

Ein "i"-Symbol wird auf dem vorgestellten Produkt platziert. Wenn Sie mit der Maus darüber fahren, wird der Produktname in einer Sprechblase angezeigt.

Beim Anklicken wird ein Produktvorstellungsmodal angezeigt, das zu einem Amazon-Affiliate-Link führt. Die Bürogrundrisse in der unteren rechten Ecke zeigen einen Stern, der die Platzierung angibt.

Produktbesprechungen ohne Kompromisse – mit ehrlichen Bewertungen des CEOs!!

Mit dem Schalter oben links können Sie die Raumbeleuchtung ausschalten und die Ansicht wechseln. Wenn Sie auf den Pfeil klicken, können Sie sich auch zum Schreibtisch des Geschäftsführers bewegen!

Zur Produktverwaltung verwenden wir bewusst ein Spreadsheet statt eines CMS, da dies Bearbeitungen und Änderungen erleichtert.

Der Grund dafür ist:

"Der Kunde möchte einen leichteren Betrieb, oder? Versuchen Sie, es mit einem Spreadsheet zu verbinden!"

Wir fetchen die Daten aus dem Spreadsheet und laden sie in ein Modal... Wenn es funktioniert, dann funktioniert es.

"Diese Website ist irgendwie langsam~"

…………

Wir haben die API basierend auf der Quelle von Custom Hotspot verwendet. Im ursprünglichen Referenzmaterial konnten Sie an beliebigen Stellen Markierungen platzieren, und beim Hovern würde nur Text angezeigt. Wir haben jedoch Modals hinzugefügt, Ansichten gewechselt und verschiedene Original-Elemente ergänzt.

Und voilà, es ist fertig! 🎊
Als es fertig war, habe ich mich so gefreut, dass ich immer wieder auf der Website herumgeklickt habe!

Amazon Associates

Ein bekanntes Affiliate-Service-Programm für Amazon-Produkte.

Die Schritte sind wie folgt.

• Der Website-Inhalt ist aktuell (in der Regel innerhalb der letzten 60 Tage aktualisiert / Es ist eine Website, die zeigt, dass sie ordnungsgemäß gepflegt wird).
• Mindestens 10 Artikel oder Inhalte vorhanden.
• Sobald Sie Produktlinks einfügen können, fügen Sie auf der Datenschutzseite die Amazon Associates-Offenlegungserklärung ein.
• Innerhalb von 180 Tagen nach der Registrierung sind 3 Verkäufe erforderlich (dasselbe Konto oder Familienangehörige sind nicht zulässig).
• Die eingegebene URL ist korrekt und die Website kann verifiziert werden.

Und so weiter.

Wenn Sie innerhalb von 180 Tagen 3 Verkäufe erzielen, beginnt die Überprüfung. Wenn Sie bestehen, können Sie als Associates Provisionen verdienen.

Amazon Associates gibt die Überprüfungskriterien nicht offen an, daher erhalten Sie keine Antwort auf Fragen. Die Überprüfung scheint strenger zu sein als bei anderen Affiliate-Programmen!

Und so bin ich erfolgreich das Amazon Associates-Programm durchgedrungen ㊗️
Der Hauptumsatz kommt jetzt von der Einkaufs-Affiliate-Website meiner Mutter und des Geschäftsführers, die gerade entstanden ist 💥

* Ich bin mir nicht sicher, ob Käufe von Familienmitgliedern in Ordnung sind… Wenn das dazu führt, dass mein Amazon-Partnerprogramm deaktiviert wird, entschuldige ich mich im Voraus m(_ _;)m

Derzeit läuft der Umsatz langsam, aber wenn man sich die Zusammenfassung und die Konversionsrate ansieht, ist das ziemlich interessant!

Nächste Anforderung @ 2024

Nachdem ich das Projekt eine Weile stehen gelassen hatte, tauchte eine neue Aufgabe auf…

Anforderungen

• Ist die Index-Abdeckung der Seite nicht ausreichend?
• Warum nicht auch einen Büroraum hinzufügen?
• Und während wir dabei sind, können wir auch zu Next.js wechseln?

Schon wieder eine unmögliche Forderung.

Technologie-Stack

Ich verwende die Pannellum-JavaScript- und CSS-Dateien aus dem public-Ordner, aber ist der Import über npm der Standard?
Es scheint, dass kürzlich eine Bibliothek für Next.js veröffentlicht wurde – wenn sie zur Implementierungszeit verfügbar gewesen wäre, hätte die Umsetzung einfacher sein können.

Zusätzlich habe ich auch auf Web-Accessibility-Compliance geachtet und die Bedienung über die Tastatur ermöglicht.

Das Modal wird mit dem Parameter /item/{num} implementiert, damit es von Googles SEO indexiert wird und als eine Seite gezählt wird. Die Implementierung erfolgt mit Next.js Parallel Routes.

Der Wechsel von CSR zu ISR hat sich auch positiv auf die SEO-Verbesserung ausgewirkt!

Die Anweisungen werden fortgesetzt

Anforderungen

• Entschuldigung, ich bin bei der Sicherheit durchgefallen, also habe ich den Bürobereich entfernt! (Fertig: Ich habe das hinzugefügt, aber ich habe es mit einem 🈲-Zeichen versehen.)
• Irgendwie viel zu schwer.... Das Rendern läuft nicht richtig, oder? (Teilweise fertig)
• Wenn wir schon ein LLM haben, sollten wir doch etwas automatisieren, oder? Ich würde gerne ein ganz neues Konzept einführen! (Momentan hier: Was soll das bedeuten?)
• Wir könnten einfach Produkte hinzufügen~

Nach stetigen, unscheinbaren Aktualisierungen ist es zu einer experimentellen Affiliate-Website Liberogic office green geworden!

Mein Favorit ist der Konfettiregen im Eröffnungsbildschirm wie in einem kleinen Geschäft und das Modal mit der CEO-Illustration! Bei solchen kleinen Änderungen füge ich in meiner Freizeit einfach hinzu, was ich für interessant halte. Es wird sich wahrscheinlich weiterhin weiterentwickeln!

Fazit?

Am Anfang, als ich mit Vanilla JS entwickelte, habe ich vieles noch selbst implementiert. Aber je mehr Überarbeitungen vorgenommen wurden, desto komplexer wurden die verschachtelten Funktionen. Bei der Zeit der Next.js-Überarbeitung wäre es vielleicht einfacher gewesen, wenn KI in diesem Ausmaß schon so weit entwickelt wäre. Aber dafür konnte ich Wissen ansammeln und „KI bewusst und mit echtem Verständnis einzusetzen" – das funktioniert jetzt ganz gut, denke ich.

Persönlich ist es meine Lieblingswebseite, aber was denkt ihr – wie findet ihr sie?

Bitte schaut euch gerne um und besucht uns im Büro!