Společnost Vyplašto se zaměřuje na výrobu a prodej plašičů, které pomáhají chránit majetek a zahrady před nechtěnými návštěvníky (např. myši, kuny, divoká zvěř).
Ve spolupráci se Západočeskou univerzitou v Plzni vyvinuli unikátní ultrazvukové plašiče, které jsou navrženy tak, aby byly maximálně efektivní a energeticky úsporné.
Moderní a dynamický e-shop
Poptávka po novém e-shopu vzešla především z nevyhovujícího stavu původního e-shopu, který byl postaven na platformě WordPress. Omezení této platformy se stalo překážkou zejména při modernizaci grafiky a neumožňovalo snadné rozšíření e-shopu.
Bylo tedy nutné najít nové e-shopové řešení, které by bylo připravené na budoucí expanzi a růst, a zároveň by splňovalo moderní standardy grafického designu.
Výběr technologií pro vývoj e-shopu na míru
Po pečlivém zvážení bylo vybráno e-shopové řešení Shopsys Framework. Tento framework byl zvolen pro svou flexibilitu a připravenost na další rozvoj a rozšíření prodeje do dalších zemí.
Kromě toho byla použita JavaScriptová knihovna GSAP, která umožnila kompletní rozpohybování e-shopu, čímž se stal e-shop dynamickým a atraktivním pro uživatele.
Programátorské a kodérské výzvy
Na rozdíl od standardních statických e-shopů využívá nový e-shop moderní grafické prvky, efekty a animační videa. Veškeré animace jsme v Bartoň Studiu sami navrhli, vytvořili animační videa a vygenerovali 3D modely z grafických podkladů.
Pokročilé vizuální prvky: animace e-shopu a 3D modely
Zjednodušili jsme proces tvorby a také optimalizovali rozpočet projektu.
Klient požadoval na novém e-shopu výrazně vyšší úroveň dynamiky než je obvyklé u standardních e-shopů. Díky flexibilitě a širokému spektru dovedností našich programátorů jsme veškerou práci zvládli interně, bez potřeby využití externích služeb.
Čelili jsme dvěma hlavním výzvám: technické a koncepční. Projekt vyžadoval jiný způsob myšlení než běžné statické e-shopy. Obvykle se kodéři soustředí hlavně na responzivitu, ale v tomto případě museli neustále přemýšlet několik kroků dopředu. Bylo nutné zvažovat, kde se každý prvek bude nacházet, kam se přesune a jak se bude pohybovat, aby e-shop nejen fungoval, ale aby fungoval rychle a efektivně.
Na novém e-shopu jsme vytvořili nové obrázky a videa plašiček. Některé části starých modelů jsme museli přemodelovat, aby odpovídaly aktuálním požadavkům. Rendrování zahrnovalo úpravu stávajících modelů a generování nových vizuálů. Pomocí aplikace Blender jsme upravili stávající modely plašiček a vytvořili nové vizuály. Na nové modely jsme aplikovali PBR materiály, které věrně napodobují skutečný vzhled plašiček.
Pro efektivní animaci celého e-shopu jsme použili dvě externí knihovny: animační knihovnu GSAP a knihovnu Lenis.js pro ovládání scrollování. GSAP jsme vybrali díky její popularitě a bohaté technické dokumentaci. Lenis.js jsme zvolili pro její kompaktnost a schopnost využít i fixní prvky, což bylo nezbytné pro design hlavního menu.
Jednokrokový košík
Další výzvou byla implementace jednokrokového košíku. Hlavním záměrem bylo zvýšit konverze na novém e-shopu. Dosáhli jsme toho tím, že jsme umožnili zákazníkům dokončit objednávku na jedné stránce, vybrat si dárek a zvolit z doporučených produktů – vše přehledně a bez rušivých refreshů stránky.
Hlavní fáze ve vývoji e-shopu na míru
Analýza a plánování: Projekt začal důkladnou analýzou a plánováním, kde byly identifikovány klíčové požadavky a cíle e-shopu. Tento krok zahrnoval detailní pochopení potřeb klienta, stanovení časového harmonogramu a rozdělení úkolů mezi jednotlivé členy týmu.
Napojení na Pohodu: Prvním krokem technické realizace byly programátorské úpravy, včetně bezpečného napojení na účetní systém Pohoda. Tato integrace zajišťuje plynulý přenos dat a efektivní správu objednávek a zákaznických informací.
E-shop je napojen na platební bránu PayU, aby zákazníci mohli pohodlně platit online. Po dokončení objednávky je zákazník automaticky přesměrován do systému platební brány (zabezpečený režim 3D Secure) pro provedení platby a následně zpět na e-shop. Platby probíhají v CZK pro českou mutaci, v EUR pro slovenskou mutaci.
Grafický design na míru: Při tvorbě e-shopu byl důraz kladen na moderní a atraktivní vizuální prvky, které zaujmou návštěvníky online obchodu a zlepší uživatelský zážitek. Grafika e-shopu byla pro klienta prioritou, zaměřili jsme se na moderní design, dynamické prvky a integraci videí.
E-shop vyvinutý na platformě Shopsys Framework.
E-shop napojený na účetní a ekonomický systém Pohoda.
E-shop napojený na platební bránu PayU.
Grafický design na míru.
Kódování a implementace funkcionalit: Při samotném kódování e-shopu byly implementovány všechny naplánované funkce a moduly. Tato fáze zahrnovala také použití JavaScriptové knihovny GSAP pro vytvoření dynamických animačních prvků, které dodaly e-shopu živost a interaktivitu.
Testování a optimalizace: Po dokončení kódování následovalo důkladné testování celého e-shopu. Testování zahrnovalo kontrolu funkčnosti, bezpečnosti a uživatelské přívětivosti.
Naplnění obsahem a finální příprava: Posledním krokem před spuštěním bylo naplnění e-shopu produktovými daty, obrázky a texty. Následně proběhla finální kontrola a příprava na spuštění, aby bylo zajištěno, že vše funguje bezchybně a e-shop je připraven přivítat své první zákazníky.
Spuštění nového e-shopu
E-shop jsme spustili mimo sezónu, takže výsledky po spuštění byly odpovídající dané době. Nicméně po pár týdnech provozování e-shopu vidíme ve statistikách téměř dvojnásobný růst počtu objednávek oproti stavu při spuštění.
Největším přínosem nového e-shopu je pro nás zprovoznění sk mutace webu a možnost expanze do dalších zemí.
Ing. Miroslav Fleisner
Jednatel společnosti | VYPLAŠTO s. r. o.
odpracovaných hodin na projektu
zkušených členů realizačního teamu
Roztančený e-shop
Nato, jak se nám podařilo e-shop roztančit, se můžete podívat na www.vyplasto.cz. Přesvědčte se sami, jak naše inovativní řešení a moderní design zpříjemnili nákupní zážitek. Objevte dynamické animace a prozkoumejte snadný proces objednávání a platby.