Inor
Ett långt webbsamarbete kring en stor produktkatalog på fyra språk
Inor arbetar med temperaturmätning. Kärnan i siten är ett stort arkiv av produkter och dokument som är länkade till varandra, med hela siten och varje produkt på fyra språk. Vi har arbetat tillsammans sedan 2015.
Prova produktfiltretSignalomvandlare, en av produktkategorierna, avgränsad steg för steg (opens in new tab)- Hitta rätt produkt bland hundratals. Tillsammans med Inor utvecklade jag ett produktfilter, så att en besökare kan avgränsa hundratals produkter i många kategorier steg för steg.
- Partner på en karta, utan Google Maps. Den tidigare kartan byggde på ett Google Maps-tillägg där nya versioner ofta slutade fungera och filtreringen föll bort. Jag föreslog en egen karta och tog fram den från grunden, från wireframes till färdigt tillägg, med tester tillsammans med Inor. Besökaren väljer världsdel eller land, eller söker på partnerns namn, och listan under kartan visar rätt kontakt.
- En webbutik, redo när den behövs. Jag byggde en komplett webbutik med produktkatalog, produktsidor och flera språk. Den är förberedd för lansering men används inte ännu.
- Hela bilden. Utveckling, kundutbildning, innehåll och support genom åren, och under långa perioder även hostingen: serveruppsättning, domäner och rådgivning kring e-post.
- WordPress
- PHP
- JavaScript
- WooCommerce
- Linux/hosting
Teknik
Arkitektur och förmågor
Arkitekturprinciper
- Inget kartbibliotek och ingen extern karttjänst: världskartan är en SVG vektoriserad från Natural Earth, öppen kartdata. Det finns inga API-nycklar att hantera och inga uppdateringar från tredje part som kan bryta kartan
- Eget JavaScript för kartan, med jQuery bara för DOM och ajax
- Byggd som ett WordPress-tillägg. Partnerna redigeras i WordPress och laddas till kartan via ajax. De importerades från den tidigare Google Maps-lösningen
Förmågor
- Zoom till världsdel och land genom att animera SVG:ns viewBox med easing och requestAnimationFrame, och panorering med pekaren
- En egen projektion från latitud och longitud till kartans koordinater, så att varje partner placeras utifrån sin position
- Markörer som skalas med zoomnivån, så att de går att klicka på även inzoomat
- Landsväljare med antal partner per land, och sökning på partnernamn
- Listan under kartan är ett dragspel som följer det som valts på kartan
Tillgänglighet
- Allt som går att välja på kartan går också att nå med landsväljaren, sökningen och listan
- Markörerna är knappar med beskrivande etiketter, listan använder aria-expanded och aria-controls, och ändringar meddelas via aria-live
Arbetssätt
- Byggd hösten 2025 i Cursor, med ChatGPT som stöd i utvecklingen