Jupiter Planet — sajt sa konfiguratorom majica i upitom umesto korpe
Radionica koja štampa i veze majice u Kragujevcu, a ceo posao vodi preko poruka na Instagramu. Trebao joj je sajt na kom kupac sam sklopi dizajn — prednja i zadnja strana, tekst i logo — pa pošalje upit sa gotovom slikom. Cena se ne ispisuje jer zavisi od količine, materijala i tehnike, pa je korpa zamenjena upitom.
- Klijent
- Jupiter Planet
- Delatnost
- Proizvodnja, štampa i vez konfekcije
- Grad
- Kragujevac
- Područje
- Cela Srbija
- Tip
- Višestrani sajt sa konfiguratorom
- Tehnologije
- PHP 8.3 · SQLite · Fabric.js · bez build koraka
- Sajt
- jupiterplanet.rs
- Status
- Živ sajt, u aktivnom održavanju
U ovom tekstu
Čime se Jupiter Planet bavi
Jupiter Planet je radionica u Kragujevcu koja proizvodi, štampa i veze mušku konfekciju — majice, polo majice, dukseve sa kapuljačom i bez nje, trenerke, šorceve i kape. Radi se i na veliko i na malo, iz sopstvene radionice u Liparskoj 16, a šalje se širom Srbije.
Poslovi se ponavljaju u nekoliko oblika: reklamne majice i duksevi sa logom firme, maturantske majice sa imenima i godinom, dresovi i trenerke sa brojevima i grbom kluba, majice i sportske suknjice za KUD-ove i folklorna društva, i veće serije za veleprodaju. Prag je štampa od deset komada po dizajnu.
Tri tehnike pokrivaju sve to: DTF štampa u punom koloru za fotografije i kolorne motive, mašinski vez za logoe i grbove, i termo-transfer za imena i brojeve koji se razlikuju od komada do komada. Oprema je njihova — industrijska vez mašina sa deset glava, mašina za DTF preslikače i automatska termo-presa sa dve glave.
Do sajta je ceo posao išao preko Instagrama. Nalog i dalje nosi galeriju radova i i dalje je glavni izvor poruka, ali poruka u sanduku nije mesto na kom se objašnjava razlika između veza i DTF-a, niti se tu vidi kako će nečiji logo stajati na leđima duksa.
Šta je trebalo rešiti
Prvi sajt, još na poddomenu, bio je praktično kopija jedne druge prodavnice majica — ista struktura, isti crveni identitet, isti katalog proizvoda. Za proizvođača koji radi po narudžbini to je bilo pogrešno na dva nivoa: vizuelno se nije razlikovao ni od koga, a funkcionalno je nudio korpu tamo gde korpe nema.
Zato je sajt rađen iznova, a ne dorađivan. Zadatak se sveo na četiri stvari:
- Sopstveni identitet — zlatno na dubokoj crnoj, po logu sa Instagrama, sa planetom i prstenom u zaglavlju. Ništa sa starog sajta nije preuzeto.
- Konfigurator sa obe strane — kupac bira predmet i boju, dodaje tekst i svoj logo posebno na prednju i zadnju stranu, i vidi rezultat pre nego što pošalje upit.
- Upit umesto korpe — cena zavisi od količine, materijala i tehnike, pa se ne može ispisati kao cifra pored proizvoda.
- Objašnjene tehnike — DTF, vez i termo-transfer su tri različite stvari sa tri različite namene i tri različite cene, i kupac to mora negde da pročita.
Peta stvar se podrazumevala: sve mora da radi na telefonu, jer skoro sav dolazni saobraćaj stiže sa Instagrama. Pomeranje dizajna prstom po majici je drugačiji problem od pomeranja mišem i tako je i tretiran.
Zašto upit, a ne korpa
Ovo je bila prva prava odluka na projektu i vredi je objasniti, jer ide suprotno od onoga što se obično radi.
Kod štampe po narudžbini cena nije osobina proizvoda nego osobina posla. Deset majica sa jednobojnim natpisom i sto dukseva sa vezom na tri mesta nemaju ni približno istu cenu po komadu. Korpa sa fiksnom cenom bi tu ili lagala, ili bi uz sebe morala da nosi cenovnik sa deset uslova koji niko ne čita do kraja.
Zato ceo sajt vodi ka jednoj radnji — poslati upit. Do njega postoje dva puta. Ko hoće da vidi kako mu dizajn stoji, ide kroz konfigurator i šalje upit sa gotovim slikama prednje i zadnje strane. Ko već zna šta hoće, ide na klasičnu formu, opiše posao i priloži logo. Oba puta završavaju u istom sanduku i istom panelu.
Praktična posledica je jednostavna: vlasnik odgovara ponudom, a ne ispravkom pogrešno naplaćene porudžbine. Kupac dobija cifru koja važi za njegov posao, ne prosek.
Struktura sajta
Sajt ima devet javnih strana i nijednu suvišnu. Naslovna vodi u dva pravca odmah ispod zaglavlja — Dizajniraj odmah za one koji hoće da probaju i Zatraži ponudu za one koji hoće da pitaju. Ispod toga stoji sam konfigurator, pa šest tipova posla, pa tehnike, pa četiri koraka od ideje do majice, pa pitanja i odgovori.
Usluge i štampa razlažu šta se sve radi: reklamne majice i duksevi za firme, maturantske majice, oprema za sportske klubove, veleprodaja, štampa loga i vez, i posao za KUD-ove i đačke generacije. Svaka celina ima svoje tri konkretne stavke, ne spisak prideva.
Tehnike i mašine su strana koja najviše radi i za pretragu i za kupca koji ne zna šta traži. Tu piše šta je DTF, kada vez ima smisla, a kada termo-transfer, i šta zapravo znači vez mašina sa deset glava.
Ostalo je kratko: O nama, Kontakt sa formom i podacima o radnji, Zatraži ponudu, uslovi korišćenja i politika privatnosti. Galerija nije pravljena na sajtu — dugme Galerija vodi pravo na Instagram, jer se radovi ionako objavljuju tamo i tamo su uvek sveži. Sajt koji drži galeriju od pre godinu dana gori je od sajta koji je nema.
Konfigurator — prednja i zadnja strana
Središnji deo sajta je konfigurator majica, a isti alat stoji i na naslovnoj, odmah ispod zaglavlja.
Redosled je namerno kratak: prvo predmet, pa boja, pa dizajn. Predmeta je sedam — majica, polo, duks sa kapuljačom, duks bez kapuljače, donji deo trenerke, šorc i kapa. Boja se bira iz palete, a prednja i zadnja strana su dve kartice, svaka sa svojim slojem dizajna.
Alati su svedeni na ono što kupac stvarno koristi: dodavanje teksta sa izborom fonta, boje i konture, otpremanje loga ili slike, pomeranje i skaliranje, poništavanje i vraćanje poteza posebno po strani, dupliranje i centriranje. Tekst se automatski uklapa u površinu da ne bi izašao iz komada. Kontura na tekstu nije ukras nego rešenje — isti natpis mora da se vidi i na beloj i na crnoj majici.
Za najčešće poslove postoje brzi šabloni: maturanti, ime i broj za dres, natpis za firmu i slogan. Klik napuni platno, a kupac dalje samo menja reči.
Na dodir je posebno rađeno. Kontrola za brisanje stoji na samom objektu, jer na telefonu nema tastera Delete. Vodič linija se pojavi kada dizajn priđe vertikalnoj osi komada, pa se centriranje ne pogađa naslepo. Platno se skalira sa širinom ekrana, što zvuči trivijalno dok se ne vidi da biblioteka za rad sa platnom upisuje fiksnih 600 sa 720 piksela u sam element i time izbaci sadržaj van ekrana na telefonu.
Štampa bilo gde i kako je to izvedeno
Jedna stvar razlikuje ovaj konfigurator od većine domaćih: dizajn nije zaključan u pravougaonik na grudima. Štampa se radi po celoj površini komada, pa i po rukavu, i alat to mora da pokaže.
Rešenje je isecanje po samoj silueti. Podloga svakog predmeta je bela fotografija sa providnom pozadinom, a dizajn se seče na njen alfa kanal — sve što izađe van komada jednostavno nestaje, umesto da se zaustavi na ivici izmišljenog okvira. Tekst na rukavu se vidi, tekst pored majice ne postoji.
Boja komada se ne crta ponovo za svaku nijansu. Preko bele podloge ide filter množenja, pa senke i nabori sa fotografije ostaju vidljivi u svakoj boji. Jedna slika po predmetu daje celu paletu, a bela je jedini slučaj bez filtera.
Predmeti se ne upisuju u kod. Konfigurator gleda da li u folderu postoji slika za prednju i zadnju stranu, i dugme se pojavljuje samo ako je slika tu. Kada je stigao novi mockup, predmet se pojavio na sajtu bez ijedne izmene u kodu — što je važno, jer se garderoba širila u nekoliko navrata.
Zlatno isprekidano polje pokazuje površinu za štampu dok je platno prazno i nestaje čim se doda prvi element. Ono nije granica nego objašnjenje: natpis iznad njega kaže da se štampa bilo gde, a polje pokazuje odakle da se krene.
Od dizajna do ponude
Dugme Zatraži ponudu sa dizajnom radi više nego što izgleda. Obe strane platna se renderuju u slike, uz njih ide izbor veličina i količina po veličini, izbor između štampe i veza, i kontakt podaci. Sve to odlazi na server u jednoj poruci.
Na serveru upit dobija referentni broj, upisuje se u bazu i istog trenutka stiže na mejl vlasniku — sa obe strane dizajna u prilogu. To je važno zbog brzine odgovora: vlasnik može da odgovori ponudom sa telefona, bez otvaranja panela.
Upiti i poruke sa kontakt forme završavaju u zajedničkom panelu, istom onom koji koristi i Shadow Style Shop, jer je vlasnik isti čovek. Upiti sa Jupitera nose zlatnu oznaku i svoju oznaku reference, a odgovor na takav upit odlazi potpisan imenom Jupiter Planet, ne imenom prodavnice. Jedan panel, dva brenda, bez mešanja.
Forma prihvata mejl ili telefon, ne oba obavezno. Deo kupaca ostavi samo broj i to je sasvim legitiman način da se javi; forma koja to odbija je forma koja gubi posao. Provera se radi na serveru, ne samo u brauzeru.
Jedan kvar iz ovog lanca vredi zapisati. Poruka se šalje sopstvenim SMTP klijentom, a u tekstu upita kupac može da otkuca red koji sadrži samo tačku. Po SMTP standardu takav red znači kraj poruke — sve posle njega server pokušava da čita kao komande. Upit sa tačkom u zasebnom redu tako bi stigao presečen. Ispravka je udvajanje početne tačke u svakom redu, kako standard i traži, i od tada poruka stiže cela bez obzira šta je kupac otkucao.
Tehnička izvedba
Sajt je pisan u PHP-u 8.3, bez WordPress-a i bez ijednog dodatka. Nema build koraka — nema paketa koji zastare za pola godine i nema koraka koji jednog dana ne prođe. Podaci stoje u SQLite bazi: upiti, poruke i podešavanja.
Biblioteka za rad sa platnom (Fabric.js) smeštena je na sam server, ne na tuđi CDN. Konfigurator koji zavisi od strane adrese je konfigurator koji se jednog jutra ne otvori zbog nečega van naše kontrole.
Adrese su čiste — /konfigurator, /usluge, /tehnike — kroz pravila servera, a stare adrese sa nastavkom .php trajno se preusmeravaju na čiste, sa zaštitom od beskonačne petlje.
Sajt je počeo na poddomenu, a kada je klijent zakupio jupiterplanet.rs, preselio se na svoj domen. Stari poddomen i dalje preusmerava na novi i pritom čuva putanju, pa nijedan stari link ne pada na naslovnu. DNS zona stoji na našem paru servera imena. Pošto se sa ovog domena ne šalje pošta, zona je zatvorena za tuđu upotrebu: SPF koji odbija sve, DMARC na odbijanje i prazan MX zapis. To je pet minuta posla koji sprečava da neko šalje lažne ponude u ime firme.
Osetljive tačke su tretirane kao osetljive. Prilog iz forme dobija ekstenziju iz stvarnog tipa sadržaja, ne iz imena fajla koje je poslao posetilac. Slika dizajna se pre slanja proverava da je zaista slika. Prijava u panel ima zaključavanje po IP adresi koje preživljava novu sesiju, pa pogađanje lozinke iz čistog brauzera nema efekta. Baza i folder sa podacima nisu dostupni spolja, a iz foldera za otpremljene fajlove se ne izvršava kod.
Brzina i šta se dešava kada nešto padne
Najteži deo su slike predmeta. Prva verzija podloge za majicu imala je 1,36 MB — na mobilnoj vezi to je bio ceo prvi utisak. Prevođenjem u WebP pala je na oko 85 KB, sa istim izgledom u konfiguratoru.
Drugi trošak je sama biblioteka za platno. Na naslovnoj se ona ne učitava odmah, nego tek kada konfigurator priđe ekranu — do tada strana nosi samo ono što joj treba. Na strani Konfigurator učitava se odmah, jer je posetilac tu upravo zbog nje.
Onda je bio kvar koji je naučio nešto vredno. Sajt se jednom prikazao kao prazna pozadina sa jednim ogromnim dugmetom. Uzrok nije bio kod nego splet okolnosti: kratak prekid na serveru, brauzer je uhvatio prazan stilski fajl, a fajl se servira sa dugim kešom — pa je prazna strana ostala zapamćena. Uz to je sav sadržaj bio sakriven dok ga skripta ne otkrije pri skrolovanju, što znači da pad skripte ostavlja belu stranu.
Rešenja su tri i sva su jednostavna. Kritični stilovi za zaglavlje, hero i dugmad upisani su direktno u stranu, pa nešto uvek izgleda kao sajt. Sakrivanje sadržaja se uključuje samo ako je skripta stvarno živa. I postoji tajmer od 2,6 sekundi koji prikaže sve bez obzira na sve. Od tada takva prazna strana nije moguća.
Animacije su pisane ručno i sve idu u jednom kadru — zlatna linija koja se iscrtava skrolom, traka sa pojmovima koja klizi bez šava, kometa u zvezdanom polju i postepeno otkrivanje sekcija. Ko je u sistemu isključio animacije, ne dobija nijednu. Na užim ekranima se deo efekata gasi sam, jer mobilni ekran nema mesta za ukrase pored sadržaja.
SEO, merenje i pravni tekstovi
Sajt nosi strukturirane podatke za samu radnju (tip ClothingStore), za sajt, za pitanja i odgovore, za spisak usluga i za putanju kroz sajt. Adresa, koordinate, radno vreme i telefon su u tim podacima, jer je to ono što Google prikazuje kada neko traži štampu majica u Kragujevcu.
Pitanja i odgovori dolaze iz jednog izvora — ista lista se ispisuje na strani i upisuje u strukturirane podatke. Kada se vidljivi sadržaj i podaci za pretraživač pišu odvojeno, razlikuju se već posle prve izmene.
U kasnijem prolazu ispravljeno je nekoliko stvari koje se ne vide golim okom: strana Kontakt je prijavljivala još jednu firmu bez identifikatora, pa je za Google izgledalo kao dva različita preduzeća na istom domenu; strana 404 je emitovala putanju kroz sajt koja ne postoji i bila je otvorena za indeksiranje; naslovi i opisi su svedeni na dužinu koja se ne seče u rezultatima pretrage. Sitemap uzima datum poslednje izmene iz samog fajla, pa ne laže.
Merenje je postavljeno tako da saglasnost ide prva: dok posetilac ne pritisne Prihvatam, analitika je isključena. Tu je usput uhvaćena greška koju je lako propustiti — bezbednosno pravilo servera nije dozvoljavalo sliku sa domena za merenje, pa merenje nije radilo ni posle pristanka. Popravljeno je u konfiguraciji i provereno na živom sajtu.
Uslovi korišćenja i politika privatnosti napisani su za ovaj posao — upiti i ponude, autorska prava na dizajn koji kupac pošalje, rokovi, dostava i reklamacije — a ne prekopirani sa tuđeg sajta.
Šta klijent na kraju ima
Sajt koji je njegov. Bez mesečne pretplate platformi, bez provizije, bez dodataka koje treba ažurirati. Kod i baza stoje na serveru i mogu se prekopirati i preseliti.
Praktično, dan izgleda ovako: kupac sam sklopi dizajn, upit stiže na mejl sa slikom prednje i zadnje strane i referentnim brojem, a odgovor se piše iz panela ili iz mejl programa — svejedno je. Ko ne želi da crta, popuni formu na strani Kontakt ili pozove broj koji na telefonu stoji kao dugme na dnu ekrana, zajedno sa Viberom.
Konfigurator je posle ovog projekta prenet i na Shadow Style Shop, prodavnicu istog vlasnika, i tamo povezan sa korpom i porudžbinama umesto sa upitom. Alat napravljen za Jupiter Planet danas radi na dva sajta sa dva različita poslovna modela — što je najbolji dokaz da je izveden kao alat, a ne kao ukras jedne strane.
Sajt je i dalje u održavanju. Ono što se menja, menja se na živom sajtu, uz rezervnu kopiju pre svake izmene.
Sajt u slikama
Jupiter Planet
Konfigurator majica, objašnjene tehnike štampe i veza, i upit sa gotovim dizajnom — direktno iz Kragujevca.
jupiterplanet.rsČesto postavljana pitanja
Zašto konfigurator, a ne obična korpa sa cenama?
Da li konfigurator radi na telefonu?
Šta se dešava kada kupac pošalje dizajn?
Može li se dodati novi odevni predmet u konfigurator?
Gde vlasnik vidi upite i poruke?
Može li se isti konfigurator staviti na drugi sajt?
Treba vam ovakav sajt?
Recite mi čime se bavite i šta sajt treba da uradi za vas — dobijate fiksnu ponudu i rok, u pisanoj formi.