iskraproducts.com: od klasične strani do platforme, pripravljene na trgovino

Katalog Iskra in Iskra ERO — 591 izdelkov v 10 skupinah in 62 kategorijah — je živel na klasični spletni strani: dolg seznam izdelkov, urejan prek starega skrbniškega sistema in ločeno od podatkov o izdelkih. Postavili smo ga na novo, od temeljev.

Nova iskraproducts.com je hitra stran, vnaprej zgrajena iz podatkov Inventory Managerja. Okoli nje smo zgradili modularni urejevalnik, CRM z garancijskim portalom in nadzorno ploščo za vodstvo, prodajo, marketing in servis. Spletna trgovina je že zgrajena in preizkušena — čaka na eno stikalo.

Izhodišče: klasična stran, urejana po težji poti

Stara stran je svoje delo opravljala kot brošura. Katalog pa je bil dolga, ravna mreža s seznamom povezav ob strani, vsebina o izdelkih se je vzdrževala ločeno od podatkov podjetja, za menjavo ene slike pa je bilo treba po izkušnjah ekipe skozi več zaslonov skrbniškega sistema — naloži, shrani, osveži, preveri. Spletna trgovina na takih temeljih ni bila realna.

• Raven katalog — ena dolga mreža izdelkov brez občutka za celoten program.
• Vsebina, vnesena posebej, mimo podatkov o izdelkih.
• Slike, vezane na imena map — ob preimenovanju mape so izginile s strani.
• Brez baze kupcev, registracije naprav in poročil.

PREJZDAJ

Del 1: Zgodba na naslovnici namesto težkega videa

Domača stran se odpre s petimi prizori iz slik in gibanja — hitri rezi, »igralni avtomat«, mozaik, prehod iz hladnega v toplo, prižig luči. Vsak ima svoj naslov in gumbe, spodaj je trak s poglavji in tipka za pavzo. Deluje kot film, nalaga se kot slike.

Del 2: Dva drsnika, polnjena z desnim klikom

»Izbrano za sezono« in »Najbolj prodajano v vrtnem programu« pokažeta natanko to, kar je ekipa izbrala v Inventory Managerju. Desni klik na izdelek tam — Show on website — in izdelek se pojavi v pladnju »Označeni« v urejevalniku, pripravljen, da ga spustite v drsnik in povlečete na pravo mesto. Izbor se shrani nazaj v jedro.

Del 3: Katalog po segmentih, z navigatorjem, ki ve, kje ste

Vseh 591 izdelkov je na eni strani, razdeljeno v pasove: skupine, kategorije, podkategorije. Levi navigator sledi pomikanju — odpre trenutno skupino, poudari kategorijo in pokaže števce. Vpišite »x-cross« v njegov filter in se skrči na zadetke: 40 od 591 izdelkov v 9 kategorijah.

• Mega meni po skupinah in kategorijah s številom izdelkov in izpostavljeno sliko.
• Iskanje sproti iz glave strani (tipka /): predlogi kategorij in izdelkov med tipkanjem, iz statičnega kazala brez strežnika.
• Premik izdelka v drugo kategorijo nikoli ne podre povezave — naslov izdelka ni vezan na kategorijo.

Del 4: Dva sveta, vsak s svojim mozaikom kategorij

»Za dom« in »Za delo in vrt« se odpreta z naslovno sliko, ki skoči neposredno na skupine, nato vsaka skupina dobi pasico in mozaik kategorij — ploščice, velike po pomembnosti, s številom izdelkov. Mozaik se ureja kar na sami strani.

Del 5: 591 strani izdelkov, ustvarjenih iz podatkov

Galerija s sličicami in povečavo, tehnične lastnosti z ikonami ter specifikacije, embalaža, garancija in navodila v PDF — vse iz Inventory Managerja. Primerjava zmogljivosti z drsniki pokaže, kje je izdelek med ostalimi v kategoriji: moč, prostornina, dolžina meča. Ničesar ni treba pretipkati za splet, zato se stran s katalogom ne more razlikovati.

Del 6: En zaslon namesto labirinta skrbniških strani

To je del, ki ga obiskovalec ne vidi, ekipa pa ga uporablja vsak dan. Levo je predogled osnutka v živo — za namizje ali telefon — desno predal. Klik na katerokoli sekcijo v predogledu odpre njeno orodno vrstico: Uredi, gor, dol, Podvoji, Skrij, Izbriši. Besedila, slike, gumbi, izdelki in SEO ene sekcije so v enem predalu, predogled se osveži sam.

Sekcijo premaknete z enim klikom ali z vlečenjem v seznamu sekcij. Predogled se takoj posodobi, osnutek se shrani sam — brez shranjevanja, osveževanja in preverjanja na ločenih zaslonih.

PREDPO KLIKU ↑

• 42 vrst sekcij v knjižnici: naslovni drsnik, naslovna zgodba, drsnik akcij, pasice s popustom, družina X-Cross, dva svetova, najbolj prodajano, kartice, besedilo v dveh stolpcih, številke, koraki, lokacije, znamke, obrazec … »+« med sekcijami vstavi novo točno tja.
• Izdelki v sekcijah pridejo iz izbora v Inventory Managerju: iskanje po jedru, pladenj »Označeni«, vrstni red z vlečenjem.
• Postavitev in vidnost brez kode: odmiki, notranji razmik, ozadje, vidna od–do za sezonske vsebine, samo namizje ali samo telefon.
• Samodejno shranjevanje osnutka; na spletu se nič ne spremeni do Objavi. Objava zgradi samo prizadete strani — na spletu so v minuti ali dveh.

Del 7: Slike — povlecite, spustite, koda naredi ostalo

Spustite JPG, PNG, TIF ali WebP do 150 MB. Strežnik sliko poravna, pomanjša na največ 2.400 px, pretvori v WebP in odstrani metapodatke (EXIF z GPS-om, XMP, IPTC, C2PA). V preizkusu je nestisnjen TIF s 65 MB postal WebP s 416 KB v približno dveh sekundah in bil takoj v predogledu.

Ob objavi se vsaka slika zapiše kot AVIF (glavni format) in WebP (rezerva) — v točno tistih širinah, ki jih potrebuje njeno mesto na strani:

• Vsako mesto ima svojo prednastavitev — naslovna slika, polovica, kartica, galerija, ploščica, kartica izdelka, sličica, izrez — s svojimi širinami in velikostmi.
• Pri obrezanih slikah koda izračuna velikost iz okvirja, razmerja slike in povečave izreza: pokončen okvir z ležečo sliko potrebuje širšo datoteko od širine okvirja.
• Brskalnik izbere sam: naslovna slika domače strani ima na iPhonu 56 KB, na namizju 1440 px z zaslonom Retina 100 KB; kartica izdelka 4–14 KB.
• Skupaj 18.578 različic AVIF in 20.514 WebP; ob vsaki gradnji se pretvorijo samo nove slike.

Del 8: Izrez na sliki, urejanje na strani, različice

Izrez se nastavi kar v predogledu: premik z vlečenjem, povečava s koleščkom ali + −, ločen izrez za telefon. Kolaž kategorij na straneh svetov in vrstni red slik v zgodbi izdelka se urejata neposredno na strani. Vsaka objava pa ostane kot različica — kdo, kdaj, opomba — s povrnitvijo z enim klikom.

Del 9: CRM, ki ga vprašate v slovenščini

Vpišite »kupci, ki so kupili verižno žago, iz Ljubljane«. CRM pokaže, kaj je razumel — kraj, kategorije — sam napolni pogoje in vrne seznam. Shranite ga kot segment, izvozite ali mu pošljite kampanjo.

• Garancijski portal: kupon s kodo QR v škatli, registracija naprave z računom, pregled osebja (potrdi ali zavrni z razlogom), podaljšana garancija. Serije kuponov z 9-mestno kodo in kontrolnim znakom, CSV za tiskarno.
• Kontakt na eni kartici: podatki, soglasja, nakupi, naprave, zahtevki, poslana pošta in časovnica z opombami; izvoz in izbris podatkov na zahtevo.
• Zahtevki za servis, rezervne dele in kontakt — oštevilčeni, z dodelitvijo, interno opombo in odgovorom kupcu po e-pošti. Priloge kupcev se pregledajo s protivirusnim programom in shranijo kot čiste kopije v ločenem, zaprtem procesu.
• E-pošta: predloge iz blokov z živim predogledom, kampanje segmentom prek Mailchimpa in samodejna sporočila — potrdila, opomnik 30 dni pred iztekom garancije, nasveti po nakupu, sezonska sporočila.

Pošiljanje e-pošte, Mailchimp, prijava kupcev in protivirusni pregled so zgrajeni in preizkušeni; vklopijo se s postavitvijo produkcijskega strežnika.

Del 10: Nadzorna plošča za štiri ekipe

Štirje pogledi na iste podatke — Vodstvo, Prodaja, Marketing, Servis — vsak kazalnik s primerjavo s prejšnjim obdobjem. Pogled se da poslati kot povezavo, vsaka tabela se izvozi v CSV. Merjenje obiska je lastno, brez piškotkov in brez shrambe v brskalniku; IP se ne shrani.

Del 11: Hitrost, izmerjena pošteno

Lighthouse 12, mediana treh meritev na zgrajeni strani. To so laboratorijske meritve — podatki pravih obiskovalcev pridejo po objavi, ko jih bo začelo zbirati lastno merjenje Core Web Vitals.

• Namizje: zmogljivost 100 na domači strani, katalogu, strani izdelka in strani sveta; dobre prakse in SEO 100.
• Telefon (simulirana počasna povezava in 4× počasnejši procesor): zmogljivost 90–97, LCP 2,5–2,7 s.
• Premiki postavitve 0–0,014.
• 21 KB JavaScripta na domači strani, 11–12 KB drugod — brez ogrodja v brskalniku, brez sledilnikov, brez kode tretjih oseb.
• Pisave na lastnem strežniku: 76 KB v treh datotekah.

Kaj je naslednje

• Zaloga in cene iz poslovnega sistema, sinhronizacija izdelkov v Shopify.
• Plačila in dostava po teži; najprej Slovenija, nato Hrvaška.
• Hrvaška in angleška različica — prevodi so že v Inventory Managerju.

Kaj to pomeni za vaše podjetje

Lepa spletna stran je polovica dela. Druga polovica je, kdo jo bo urejal čez leto dni in od kod pridejo podatki. Če se izdelki na strani posodabljajo sami in ekipa ureja strani brez razvijalca, stran ostane živa. Če ne, čez leto dni spet potrebujete novo.

Namesto stare, dolgočasne strani na WordPressu podjetje dobi cel sistem, napisan po meri — za celostno podobo podjetja, njegov način dela in njegove zahteve. To je obsežen in zmogljiv sistem, s katerim je delo hitro in učinkovito. Ko se sčasoma pokažejo nove potrebe in nove ideje vodstva, jih je mogoče uresničiti dokaj hitro in zelo učinkovito.

Sistem se lahko poveže tudi z drugimi aplikacijami. Nič več ročnega izvažanja računov iz spletne trgovine in vnašanja v ERP: prek povezav API se računi samodejno pojavijo v vašem ERP sistemu, kjer jih lahko takoj tudi davčno potrdite.