Propojení internetového obchodu Shoptet s webem zákazníka

Výchozí situace

Původní internetový obchod již zákazníkovi z více důvodů nevyhovoval. Požadoval zavedený a profesionálně podporovaný e-shop. Volba padla na řešení Shoptet, které nabízí zavedené prostředí pro správu produktů, objednávek a internetového prodeje s možností propojení s interním ekonomickým software POHODA.

HaPe sport ale potřeboval řešit více než samotný prodej zboží. Na webu představuje servis, testování kol a sedel, průvodce výběrem kol Orbea, zakázkové stavby, aktuality a další obsah. Důležitá byla také možnost spravovat vybrané části webu vlastními pracovníky a dále jej rozvíjet podle budoucích požadavků.

Projekt proto zahrnoval:

• realizaci webové prezentace na míru,

• vytvoření administrační části webu,

• zprovoznění a přizpůsobení e-shopu Shoptet,

• převod produktů a kategorií z původního řešení,

• propojení Shoptetu s účetním systémem Pohoda,

• sjednocení navigace a vzhledu e-shopu s vlastním webem.

Návrh řešení

Navrhli jsme architekturu složenou ze tří hlavních částí. Prezentační web byl vytvořen ve frameworku Symfony, využívá vlastní databázi a jeho obsah lze spravovat prostřednictvím administrace vytvořené na straně klienta v Angularu. Internetový prodej zajišťuje Shoptet na samostatné subdoméně.

Toto rozdělení kombinuje výhody hotové e-shopové platformy s možnostmi vlastního vývoje webové prezentace. Shoptet poskytuje standardní prodejní procesy, zatímco u webové prezentace máme přístup ke zdrojovým šablonám i datům. Můžeme proto měnit strukturu stránek, přidávat nové sekce a vytvářet funkce podle konkrétních potřeb zákazníka bez závislosti na řešení Shoptet.

Z pohledu návštěvníka však měly všechny části působit jako jeden web. Návrh proto od začátku počítal také s jejich vizuálním a navigačním propojením.

Společné menu a sjednocený vzhled

Do prostředí Shoptetu jsme doplnili hlavní menu, které je vizuálně stejné jako navigace vlastního webu. Návštěvník tak může i z prostředí Shoptet přejít na libovolnou část firemního webu například na servis, aktuality, průvodce výběrem kol nebo kontakt.

Menu zahrnuje také rozbalovací nabídky a zobrazení pro mobilní zařízení. Logo v Shoptetu odkazuje na hlavní web zákazníka.

Sjednotili jsme písmo, barevnost, ikony a podobu zápatí. Upravili jsme také některé výchozí vlastnosti šablony, například automatický převod textů na velká písmena nebo zobrazování vybraných bloků na úvodní stránce.

Web a e-shop používají rozdílné technologie, ale návštěvník se v nich orientuje podle stejných prvků a nemusí řešit, ve které části řešení se právě nachází.

Vlastní administrace v Angularu

Součástí projektu byla také administrační aplikace vytvořená v Angularu. Oprávnění pracovníci HaPe sport mohou spravovat aktuality, titulní obrázek i související fotogalerie.

Běžná aktualizace obsahu proto nevyžaduje zásah do zdrojového kódu. Administrace odděluje práci redaktorů od technické části webu a zákazníkovi umožňuje samostatně udržovat prezentované informace.

Vlastní administrace zároveň poskytuje základ pro doplňování dalších obsahových modulů, pokud se potřeby webu v budoucnu rozšíří.

Žádná šablona Shoptetu nesplnila všechny potřeby zákazníka

Při přípravě e-shopu jsme posuzovali dostupné šablony Shoptetu. Zajímalo nás například zobrazení krátkých popisů produktů, práce s variantami, technickými parametry, kontaktními informacemi a dalšími prvky.

Každá šablona nabízela jinou kombinaci vlastností. Některá vyhovovala v jedné oblasti, ale chyběla jí funkce potřebná jinde. Žádná z existujících šablon proto sama nesplnila všechny požadavky zákazníka.

Jako nejvhodnější základ jsme vybrali šablonu Step. Chybějící nebo nevyhovující části jsme upravili vlastním JavaScriptem a CSS vloženými do existujících šablon Shoptetu. Protože standardní řešení neposkytuje přístup ke kompletním zdrojům šablony, skripty pracují s existujícím HTML, přesouvají prvky, doplňují nové bloky a mění jejich chování.

Úpravy produktového detailu

Prodej jízdních kol klade specifické požadavky na prezentaci parametrů, velikostí a souvisejících služeb. Rozsáhlý seznam technických údajů ve výchozí šabloně prodlužoval úzký sloupec vedle fotografie, vznikal zde velký prázdný prostor na stránce a návštěvník se k popisu dostával až po dlouhém posouvání stránky.

Parametry jsme proto přesunuli do samostatné záložky. Tam, kde Shoptet poskytuje tabulkový výpis variant, jsme jej umístili do viditelného bloku, aby bylo možné rychleji porovnat velikosti, ceny a dostupnost.

Doplnili jsme také společné bloky „Individuální nastavení“ a „Garanční servis“. Informace se vkládají k odpovídajícím produktům z jednoho místa, takže není nutné udržovat stejný obsah v mnoha samostatných kopiích.

Převod dat do nového e-shopu

Pro přechod z původního řešení jsme vytvořili nástroje, které připravily data pro import ze starého internetového obchodu do Shoptetu. Zpracování zahrnovalo názvy a popisy produktů, kategorie, výrobce, technické parametry, obrázky i podklady pro varianty. Zákazník tak nemusel všechna data zadávat znovu a manuálně.

Oba systémy používaly odlišné datové modely. Lišily se identifikátory kategorií a produktů, způsob propojení produktů s jejich variantami i další vazby mezi daty. Převodní program proto při exportu ze starého e-shopu převedl data do struktury požadované Shoptetem a připravil je k importu do nového obchodu.

Napojení na účetní systém Pohoda

E-shop jsme propojili s účetním a skladovým systémem Pohoda. Ze Shoptetu se do Pohody předávají objednávky a faktury. Opačným směrem se přenášejí informace o skladových zásobách, cenových akcích a změnách stavů objednávek.

Produkty a varianty se spravují v Shoptetu. Potřebné produktové údaje se do Pohody přenesou při objednání a párování probíhá podle čárového kódu EAN.

Při zavádění jsme ověřovali změny cen, slevové akce, naskladnění a opravy příjemek, odečtení prodaného zboží i změny stavů objednávek. Nový e-shop tak navazuje na účetní a skladové procesy používané zákazníkem.

Výsledek

Firma HaPe sport získala řešení, které spojuje vlastní webovou prezentaci, administrační aplikaci, e-shop Shoptet a účetní systém Pohoda. Nešlo tedy pouze o připojení obchodu k existujícím stránkám. Web, jeho administraci, konfiguraci e-shopu, individuální úpravy šablony i integrace jsme realizovali jako součást tohoto projektu.

Zákazník využívá podporovanou prodejní platformu a současně není při rozvoji firemního obsahu omezen jejími možnostmi. Návštěvník získal společnou navigaci, sjednocený vzhled a přehlednější informace o produktech. Provozní data e-shopu zároveň navazují na Pohodu.

Kompletní realizace společností ORAX

Pro projekt jsme zajistili:

• analýzu požadavků a návrh celkové architektury,

• realizaci webové prezentace v Symfony,

• vytvoření administrační aplikace v Angularu a PHP,

• zprovoznění a nastavení e-shopu Shoptet,

• porovnání šablon a vlastní úpravy vybrané šablony,

• sjednocení navigace a vzhledu webu a e-shopu,

• převod produktů, kategorií a souvisejících dat,

• spolupráce při napojení a testování komunikace se systémem Pohoda,

• další technickou podporu zákazníka.