Topics

iedereen"Kantoor GroenBent u bekend met de website genaamd...?

Alle content die we publiceren, inclusief onze bedrijfswebsite, is in principe een testomgeving. (Behalve de toegankelijkheidsapplicatie van meneer Futamata! Deze site voldoet trouwens nog niet aan de WCAG-richtlijnen 😭)

Het begon allemaal zo'n 5-6 jaar geleden tijdens de COVID-19-pandemie, toen een verveelde CEO besloot om zelf wat groenere dingen in zijn kantoor te doen.https://yurulog.liberogic.jp/posts/qx9nibr59）

Het eerste onredelijke verzoek @2023

Vereisten

• Ik had een klant die een affiliate website wilde starten, dus ik dacht dat het leuk zou zijn om een ​​klein experimentje te doen! (De klant gaf het uiteindelijk op, dus het bleef bij een experiment.)
• Wat dacht je ervan om te proberen in aanmerking te komen voor Amazon Associates zonder daadwerkelijk een pagina te hebben, door de pagina die in het pop-upvenster wordt geopend te indexeren? (We hebben veel spullen gekocht om ons kantoor te vergroenen, dus laten we die als voorbeeld gebruiken!)
• Ik heb niet echt veel ervaring met klussen waarbij 360°-beelden worden geroteerd. Er zijn bibliotheken en het lijkt makkelijk, dus laten we het eens proberen!
• Winst of zoiets interesseert me niet, dus ik breng het gewoon uit als het werkt, als experiment en leerervaring!
• Onze website is een proefkonijn voor onze klanten, weet je? Begrijp je dat? (❓)

Dat waren de eisen die me werden voorgelegd kort nadat ik bij het bedrijf in dienst trad.

De implementatie is in februari 2023 van start gegaan en dit document beschrijft de geschiedenis van de verbeteringen en de toevoegingen aan de inhoud tot op heden.
Laten we Liberogic Office Green de aandacht geven die het verdient! ☀️

Technologie-stack

• Vanilla JS (ES Modules)— Geen kader,import/exportvoor het opsplitsen van aangepaste modules
• Pannellum- Bibliotheek met 360-graden panoramafoto's (lokaal)pannellum/(Geïnstalleerd als een map, zelf gehost, niet via een CDN)
• HTML / Sass- Opmaakstijl

Externe API's en services

Het belangrijkste kenmerk van deze website is de 360°-rotatie van de content. We gebruiken een RICOH "THETA SC2"-camera om het kantoor te fotograferen.

Hier is de originele foto die genomen is.

360°-implementatie isPannellunDeze bibliotheek wordt gebruikt. Door simpelweg de vastgelegde afbeelding in te stellen, kunt u deze in 360° bekijken.

Ik heb de bibliotheek zelf gedownload maar een een CDN te gebruiken, omdat ik verschillende aanpassingen wilde doorvoeren.

Aanpassing

Plaats een "i" naast het product dat u wilt introduceren. Wanneer u de muis eroverheen beweegt, verschijnt de productnaam in een pop-upvenster.

Door te klikken verschijnt een pop-upvenster met een productintroductie, dat doorverwijst naar een Amazon Associates-link. In de rechterbenedenhoek van het kantoor worden sterretjes weergegeven die de plaatsingslocatie aangeven.

Productrecensies zijn volledig onpartijdig en bevatten de eerlijke mening van de CEO!

Je kunt ook overschakelen naar een weergave met de kamerverlichting uit door de schakelaar linksboven te gebruiken en op de pijl te klikken om naar het bureau van de CEO te gaan!

We beheren onze producten met behulp van spreadsheets maar een een CMS, om het bewerken en aanpassen te vereenvoudigen.

De reden is,

"Klanten geven de voorkeur aan een soepelere bedrijfsvoering, toch? Laten we eens proberen om alles te integreren met behulp van spreadsheets!"

Ik haal gegevens uit een spreadsheet en laad ze in een modaal venster, maar... het werkt, maar...

"Deze site is zo traag~"

…………

De API isAangepaste hotspotIk heb de broncode van [bronnaam] als basis gebruikt. De oorspronkelijke referentie bood alleen de mogelijkheid om een ​​markering op een willekeurige locatie te plaatsen en tekst weer te geven wanneer je er met de muis overheen ging, maar ik heb diverse eigen elementen toegevoegd, zoals het weergeven van modals en het wisselen van weergaven.

Het is eindelijk klaar! 🎉
Ik was zo blij toen het klaar was dat ik de site steeds opnieuw bleef bezoeken!

Amazon-partners

Dit is, zoals je waarschijnlijk al weet, een affiliate-service voor Amazon-producten.

De procedure is als volgt.

• De website-inhoud moet recent zijn (doorgaans bijgewerkt in de afgelopen 60 dagen / de site moet aantoonbaar functioneel zijn).
• Het aantal artikelen en contentitems is 10 of meer.
• Zodra we productlinks kunnen toevoegen, zullen we een melding over het gebruik van Amazon Associates opnemen in ons privacybeleid.
• Binnen 180 dagen na registratie zijn drie verkopen vereist (hetzelfde account of accounts van familieleden zijn niet toegestaan).
• De ingevoerde URL is correct en de site kan worden geverifieerd.

Enzovoort.

Zodra je binnen 180 dagen drie verkopen hebt gerealiseerd, wordt je aanvraag beoordeeld. Indien goedgekeurd, kun je als partner commissies verdienen.

Ze maken hun beoordelingscriteria niet bekend, dus je krijgt geen antwoord, zelfs niet als je ernaar vraagt. Het lijkt erop dat hun beoordelingsproces strenger is dan bij andere affiliate-websites!

En ik heb het Amazon Associates-programma met succes afgerond! ㊗️
De belangrijkste bron van inkomsten is de affiliate-website van mijn moeder en de directeur van het bedrijf, waar zij samen een webshop runnen.En zo is het ontstaan! 💥

* Ik weet dat het geen goed idee is om dit voor familieleden te kopen, maar... het spijt me als hierdoor mijn Amazon Associates-account wordt ingetrokken m(_ _;)m

De verkopen verlopen momenteel tergend langzaam, maar de samenvattingen en conversiepercentages zijn behoorlijk interessant!

Volgende missie @2024

Ik liet het een tijdje met rust, waardoor er een stilte viel in mijn werk. En toen kwam de volgende opdracht...

Vereisten

• Is de pagina-indexering niet wat gebrekkig?
• Laten we er ook wat kantoorruimte bij maken.
• Waarom niet meteen overstappen op Next.js?

Alweer een onredelijk verzoek.

Technologie-stack

Ik gebruik de JS- en CSS-bestanden van Panellum in een openbare map, maar is het gebruikelijker om ze via npm te importeren?
Het lijkt erop dat er onlangs een bibliotheek voor Next.js is uitgebracht; de implementatie zou een stuk eenvoudiger zijn geweest als ik die tijdens het proces tot mijn beschikking had gehad.

Ik heb ook rekening gehouden met webtoegankelijkheid en het mogelijk gemaakt om de website met een toetsenbord te bedienen.

Modals worden door Google SEO geïndexeerd./item/{num}De parameter wordt toegevoegd en geïmplementeerd met behulp van Next.js' Parallel Routes, zodat deze als één pagina wordt geteld.

Zal de overstap van CSR naar ISR leiden tot verbeterde SEO?

De bestellingen worden voortgezet.

Vereisten

• Sorry, maar ik kreeg problemen met de beveiliging, dus ik heb de kantoorruimte verwijderd! (Voltooid: ik heb hem toegevoegd, maar ik heb hem gemarkeerd met een 🈲.)
• Het gaat veel te langzaam... Is er iets mis met de rendering? (Bijna klaar)
• Nu we LLM hebben, waarom zouden we niet iets automatiseren? Ik wil een compleet ander concept integreren! (ImaKoko: Wat bedoel je daarmee?)
• Als je een aantal producten toevoegt...

Een rustig evoluerende, experimentele affiliate-websiteLiberogic office green En dat is alles!

Ik vind de confetti in het openingsscherm en de illustratie van de CEO in het pop-upvenster geweldig, het geeft het de sfeer van een kleine, onafhankelijke winkel! Ik vind het ook leuk om zelf af en toe kleine aanpassingen te maken als ik wat vrije tijd heb, met de gedachte: "Dit zou wel eens leuk kunnen zijn!" Het zal zich waarschijnlijk blijven ontwikkelen!

Samenvatting?

Toen ik het voor het eerst bouwde met Vanilla JS, heb ik het meeste zelf geïmplementeerd, maar naarmate ik verschillende revisies maakte, werd de structuur van de geneste functies complexer. Het zou misschien makkelijker zijn geweest als AI al zo geavanceerd was geweest als nu toen ik het opnieuw maakte met Next.js, maar aan de andere kant heb ik inmiddels wel meer kennis opgedaan."We zullen AI gebruiken met een volledig begrip van de mogelijkheden ervan."Ik vraag me af of het werkt.

Het is een van mijn favoriete websites, maar wat vinden jullie ervan?

U bent van harte welkom om rond te kijken en een rondleiding door ons kantoor te krijgen!