Kiindulás
A LEXCO dél-koreai gyártó: 1998-ban alapították Tegu városában, ISO 9001 és 14001 szerint dolgozik, és Red Dot díjat is nyert. Professzionális fitneszgépeket gyárt, és a magyar forgalmazójának építettük ezt a katalógust. Az oldal elkészült, és a forgalmazó domainjén indul.
A vevők edzőtermek, szállodák, céges edzőtermek, személyi edzők stúdiói és otthoni edzőtermek tulajdonosai. Gépenként és mennyiségenként tételes árajánlatot kérnek, mert egy terem felszerelése soha nem egy darabból áll. Ezért az oldalon nincs ár és nincs pénztár. A katalógus dolga, hogy a 124 géptípus közül mindenki megtalálja, amit keres, és a kiválasztott gépekre egyetlen kéréssel ajánlatot kérjen.
Két dolog nehezítette a munkát. A vevők sokszor magyarul keresnek angol nevű gépekre, vagy úgy írják be a típusszámot, ahogy eszükbe jut. A gyári fotók pedig sokféle háttérrel, fénnyel és színtérben érkeztek.
A kosár, amelyből ajánlatkérés lesz
Minden termékoldal fejlécében és alsó sávjában ott van a „Kosárba” kapcsoló. A kosár a böngészőben él, és a nyitott lapok között is szinkronban marad. Az ajánlatkérő űrlap a gépeket tételesen viszi tovább, típussal, névvel, megnevezéssel és linkkel.
A kosár linkből is tölthető. A ?termek= egy gépet tesz a listára, az ?adatlap=1 előre beírja az adatlapkérést (méret, tömeg, helyigény), a ?targy= pedig kiválasztja az öt téma egyikét. Így egy e-mailből, egy hirdetésből vagy egy kollégától kapott linkből egy kattintással kész kérés lesz.
Ha az űrlap végpontja nincs beállítva, a kérés előre kitöltött e-mailként indul, a gépek tételes listájával. A botokat egy rejtett mező szűri ki.
A kereső
A keresőt mi írtuk, függőség és külső szolgáltatás nélkül. Az index buildkor készül a katalógus adataiból: a termékekből, a gyűjteményekből, a kategóriákból, a tartalmi oldalakból, a megoldásokból és a gyakori kérdések válaszaiból. Az index 192 bejegyzést tartalmaz, tömörítve 21 kB, és csak akkor töltődik le, amikor a látogató a keresőhöz ér: rámutat, belekattint vagy lenyomja a gyorsbillentyűt.
A találatok mezőnként súlyozott pontszámot kapnak.
| Mező | Súly |
|---|---|
| Típusszám | 10 |
| Angol és magyar név | 7 |
| Hivatalos név | 5 |
| Fókusz és kategória | 4 |
| Gyűjtemény, széria, család, testrész | 3 |
| Megjegyzés | 1 |
Az elírást eltűri, ott, ahol értelme van. Ékezet nélkül is talál, és Damerau-Levenshtein-távolsággal számol: négy betűtől egy, nyolc betűtől két hibát enged. Elírást csak a neveken és a címeken fogad el, a válaszok szövegén nem, így egy elgépelt szó nem hoz zajt.
A típusszámot bárhogy beírva megérti. Az lp318, az LP 318 és az lps1 is működik. A pontos kód 60, a kezdete 30 pontot ad, és a találatok ilyenkor a számok sorrendjében állnak.
Két nyelven ért. 89 keresési kulcs 125 katalógusszóra bomlik: az orbitrek az elliptikus géphez, a treadmill a futópadhoz, a squat a guggolóhoz, a „vállból nyomó” a shoulder presshez vezet. A szinonima kisebb súllyal számít, és csak a dolgokat megnevező mezőkben.
Javasol, ha nincs pontos találat. Az „Erre gondolt?” javaslat az oldal saját, ékezetes szavaiból készül. Ha egyetlen találat sem illik minden szóra, a kereső részleges egyezésre vált, és elhagyja azokat az eredményeket, amelyek a legjobb találat 12 százalékát sem érik el.
A kereső ablaka a ⌘K, a Ctrl+K vagy a perjel billentyűvel nyílik, élő előnézettel, és Shift+Enterrel a kijelölt gép a kosárba kerül. A 404-es oldal is ezt a motort használja: a hibás címet keresésként futtatja, és felajánlja a legközelebbi oldalakat. Az index címe a build verzióját viszi, így egy böngésző soha nem keveri a régi indexet az új oldalakkal.
A képek
A forgalmazótól 133 gyári fotót kaptunk, összesen 258 MB-ot, vegyes háttérrel és színtérrel. Egy Python-szkript mindegyikből egységes termékképet készít.
- A CMYK-fájlokat a beágyazott színprofiljuk szerint sRGB-re alakítja.
- Kiegyenlíti a hátteret. A szürke háttér fényét csak a termék körvonala körül becsüli meg, kivonja, és a fehérpontot a háttér saját értékeiből számolja. Az acél a körvonalon belül megtartja a tónusát, és a padlón az árnyék is megmarad.
- Körbevágja a terméket a puha árnyékával együtt, és minden oldalon 4,5 százalékos margót hagy.
- Kivágja a két legbeszédesebb részletet. Élintenzitás alapján keresi meg a gép két leginkább mechanikus részletét, legfeljebb 18 százalékos átfedéssel.
- Manifestet ír, és a build megáll, ha egy terméknek nincs képe.
Az eredmény 266 mesterkép: 124 fő nézet, 7 további nézet és 135 részletkivágás. Ezekből az Astro 1878 WebP-változatot készít a különböző képernyőszélességekre.
A fehér háttéren fotózott gépek szorzó keveréssel kerülnek a világos termékfelületre, így a fehér eltűnik, és a valódi padlóárnyék megmarad. Telefonon a vízszintesen görgethető gépsor saját rétegre került, és a keverés ott fehér dobozokat mutatott. Ma a sor maga viszi a felületet, így ez a hiba nem jöhet vissza. A gumipadlókhoz nem kaptunk fotót, ezért a felületüket procedurálisan rajzoltuk meg: granulátumszemcséket és színes pöttyöket, egy magasságtérképből megvilágítva.
Kategóriák a vevő szándéka szerint
A gépek ott szerepelnek, ahol a vevő keresi őket, akkor is, ha a gyártó egy másik szériába sorolja őket. A tárcsás gépek a tárcsás gépek között állnak, a Smith-gépek az állványok mellett. A szériák fölött négy termékcsalád áll, a forgalmazó kérése szerint.
A build megáll, ha egy gépnek nincs kategóriája, a fókusza nincs leképezve, vagy hiányzik a képe. Ahol egy kategóriában legalább két termék van, saját oldalt kap. Így 21 kategóriaoldal készült, például a lábgépeknek és a futópadoknak, mindegyik egy-egy konkrét keresésre.
SEO az adatokból
A címeket a gép tulajdonságaiból rakjuk össze. Egy függvény több lehetséges megfogalmazást épít, és azt választja, amelyik a legtöbbet mondja 50–60 karakterben, a leírásnál 140–155 karakterben. A magyar névelőt is a típusszámhoz igazítja, például „az LP-504”.
Minden oldal egyetlen gráfot kap. A JSON-LD-ben a WebSite keresőművelettel, az Organization, a Brand, az oldal típusa, a Product, az ItemList, a BreadcrumbList, a FAQPage és a Service szerepel, mind azonosítóval összekötve. A termékeknek szándékosan nincs ajánlatuk, mert az oldalon nincs ár. Ez érvényes séma, a termékkártyás találatot viszont ár nélkül nem adja meg a Google.
A sitemap a kész oldalakból készül. Egy saját integráció a lefordított HTML-t olvassa, és csak az indexelhető, önmagára kanonikus oldalakat veszi fel. A módosítás dátuma a tartalom ujjlenyomatából jön (cím, leírás, strukturált adat, szöveg, linkek, képek), így csak a valódi változás frissíti. Buildkor figyelmeztet, ha egy cím vagy leírás túl hosszú, vagy kétszer szerepel.
A fontos oldalak saját megosztókártyát kapnak. 159 kártya készül egy csak fejlesztéskor élő oldalról, Playwrighttal lefotózva. Az átnevezett oldalak régi címei 301-es átirányítással a helyükön maradnak.
Sebesség és stabilitás
A nyitóoldal körülbelül 6,5 kB tömörített JavaScriptet tölt be, a kereső kódja csak akkor érkezik, amikor a látogató keresni kezd. A betűkészletből csak a latin fájlokat töltjük előre, a magyar ő és ű egy kis, a CSS-be ágyazott részhalmazból jön. Egy szkript 0,01 feletti CLS-nél leállítja az ellenőrzést, egy másik lassított hálózaton és négyszer lassabb processzoron méri a legnagyobb tartalom megjelenését. A szűrt listák addig nem rajzolódnak ki, amíg az URL állapota rájuk nem került, így szűrés közben semmi nem ugrik.
Egy ajánlatkérésre épülő katalógusban a kereső a legfontosabb gomb, mert a vevő a gép nevével vagy a típusszámával érkezik.
Amit ebből Önnek érdemes tudni
Ha az Ön vevői is ajánlatot kérnek, és sok terméke van, a kereső és a kosár a legfontosabb rész. A weboldalkészítésről külön oldalon írunk, a munka menetéről pedig az Így dolgozunk oldalon.
