Blog
ZpětJak jsem implementoval velkoobchodní e-shop s kávou na Shoptet Premium
8 minut čtení
Obsah článku:
- Informace o klientovi
- Jakým způsobem probíhalo řízení projektu
- Etapy vývoje
- Co dále jsem na projektu vyřešil
- Jak probíhalo spuštění e-shopu na ostrou doménu
Informace o klientovi
Společnost CLUB CAFE.r.o. není na poli e-commerce žádným nováčkem. Svůj e-shop na kterém nabízí skvělou kávu věhlasných italských pražíren i malých rodinných podniků provozuje již od roku 2007. Od té doby ušli pořádný kus cesty, včetně několikanásobného stěhování do větších skladových prostor.
Kromě velkoobchodního prodeje se klient zabývá i prodejem maloobchodním, na který se chtěl novým e-shopem více zaměřit.
Potíže, které potřebovali vyřešit:
- Systém, který klient používal pro správu e-shopu byl zastaralý. Provozovatel navíc ukončil jeho další rozvoj, takže zůstával v "zakonzervovaném stavu", což by do budoucna bylo pro klienta velkou překážkou.
- Design e-shopu byl moderní v době jeho vytvoření. Nebyl responzivní a díky velkému rozmachu mobilních zařízení bylo potřeba zajistit, aby se správně zobrazoval i menších zařízeních.
Jakým způsobem probíhalo řízení projektu
Tím, že rád podporuji české kolegy podnikatele a Freelo používám dlouhé roky i pro osobní účely, tak to pro mě byla jasná volba. Navíc jsem v něm již několik klientských projektů odřídil, takže jsem zde měl připravené workflow pro zakládání a správu ticketů.
Vzhledem k typu projektu a jeho projektovým omezením jsem pro realizaci zvolil waterfall přístup. Projekt jsem rozdělil na několik etap, které na sebe logicky navazovaly. Díky tomu se mi projekt podařilo odřídit v očekávaném termínu, v rámci schváleného rozpočtu a při zachování vysoké kvality.
Plně jsem zaštítil komunikaci s vývojáři, dodavateli stávajícího i nového e-shopového řešení i digitální agentury zajišťující marketingové aktivity klienta. Zajistil jsem, aby se ke každému a včas dostaly ty správné informace, které v daný moment potřeboval pro svou práci.
S klientem jsme komunikovali v pravidelných týdenních intervalech, tak abych jej informoval o aktuálním postupu a o tom co nás čeká v nadcházejícím týdnu. Vzájemně jsme si tak validovali, že jdeme správným směrem.
"Dobrá komunikace je klíčem k úspěchu při programování e-shopu. V tomto ohledu je spolupráce s panem Peťovským přímo vzorovým příkladem. Jelikož jsme se znali již z minulosti, vědel jsem, ze se mohu opřít o jeho spolehlivost a znalosti, které získal na svých předešlých pozicích. Na zacatku spolupráce jsme si nastavili pravidelné schůzky a on-line meetingy k monitorování pokroku a řešení případných problémů a díky tomu jsme měli neustalý přehled nad celým projektem. E-shop pro naši společnost nebyl nikdy stěžejní prodejní kanál, nicméně nyní po několika měsících aktivní spolupráce s panem Peťovským vidíme mnohem jasněji jeho obrovský budoucí potenciál.".
Martin Doležel
Majitel kavovnik.cz
Etapy vývoje
1. Úvodní výzkum
Pro plné navnímání klientova očekávání od nového e-shopu a potřeb jeho zákazníků jsme absolvovali několik společných sezení, kde jsme detailně rozebírali jeho business a dostupná data.
Za tímto účelem se nechala zpracovat analýza dat z Google Analytics a analýza konkurenčních webů. Díky tomu jsem měl mnohem lepší představu o zákaznících, používaných technologiích a prohlížečích, ale také třeba o tom, jaké funkcionality a dopravy používá konkurence, jakou má strukturu e-shopu a mnoho dalšího.
2. Tvorba technické specifikace a wireframe
Společně s klientem jsem pracoval na technické specifikaci, což je základní dokument popisující jednotlivé funkcionality a prvky, které budou na e-shopu použity. Po přečtení technické specifikace by každému mělo být jasné: Co se bude na e-shopu zobrazovat a jak to bude fungovat.
Mimo to se v technické specifikaci detailně rozebírají třeba tyto aspekty:
- Jak bude bude fungovat skladové hospodářství.
- Odkud se budou čerpat data (ERP nebo e-shop).
- Jak se bude řešit cenotvorba.
- Jaké budou použity dopravy a platby.
- Na jaké systémy bude e-shop napojen a jak. Např. účetní, skladový apod.
- Budou se na e-shopu prodávat varianty?
- a mnoho a mnoho dalšího.
Když už se vědělo, Co by se na e-shopu mělo zobrazovat, tak bylo třeba určit, Jak se to bude zobrazovat. K tomuto účelu slouží právě wireframy (drátěné modely).
Wireframy se vytvořily pro všechny klíčové stránky vždy ve dvou variantách: desktop a mobil. Ty poté sloužili jako hlavní podklady designerovi pro vytvoření grafických návrhů.
3. Výběr vhodného e-shopového řešení a sestavení vývojového týmu
Na základě zjištěných informací o požadovaných funkcionalitách nedávalo úplně ekonomický ani časový smysl pouštět se do tvorby e-shopu na míru (tím myslím e-shop na míru včetně tvorby administrace atd.).
Věděli jsme, že e-shop chceme stavět na nějakém existujícím a léty prověřeném e-shopové řešení, které se bude dát dostatečně přizpůsobit klientským potřebám. Protože....proč znovu vynalézat kolo, když už existuje?
Zároveň jsme pro e-shop chtěli originální grafické návrhy, tak abychom co nejvíce zvýraznili značku klienta a odlišili se od konkurence.
Po analýze dostupných možností jsme se rozhodli e-shop stavět na platformě Shoptet Premium, která zajišťovala vše potřebné:
- Možnost grafických návrhů na míru.
- Podporované dopravy a platby, které klient potřeboval.
- Stabilní, přehledná a dostatečně robustní administrace.
- Dostupná technická podpora a bohatý WIKI systém, ve kterém najdete pomoc se vším, co je potřeba.
- Otevřené API pro komunikaci přímo s databází (tímto se odlišuje od klasického Shoptet).
Byť jsem cca 8 let pracoval v několika digitálních agenturách, tak jsem byl velmi mile překvapen rychlostí a férovou komunikací ze strany Shoptet Premium, kde jsme v průběhu úvodního callu probrali všechny podmínky spolupráce.
Následoval podpis smlouvy - elektronicky. V průběhu pár dní jsme tak obdrželi přístupy do testovací administrace a mohli jsme začít s nastavováním.
Dále také oceňuji možnost bezplatného pronájmu řešení po dobu implementace. Reálně jsme se tak domluvili na tom, že po následující 3 měsíce budeme mít platformu k dispozici zdarma a můžeme kódovat grafiku, nastavovat a testovat vše potřebné. Řada agentur by se z tohoto prozákaznického přístupu mohla učit.
"Spolupráce s panem Peťovským probíhala naprosto bezproblémově. Využili jsme komunikační kanály, na kterých jsme se od začátku spolupráce dohodli. Díky tomu byla tato součinnost věcná a efektivní, a také přispěla k poměrně rychlému nasazení nového e-shopu kavovnik.cz".
Jan Rogos
Premium Onboarding Manager
Vývojový tým tvořili:
- Webový designer Roman Holba: https://www.romanholba.cz/
- Front-end Shoptet kodér Jakub Turský: https://www.jakubtursky.sk/
4. Tvorba grafických návrhů
S Romanem se známe několik let a za tu dobu jsme společně realizovali celou řadu různorodých projektů (vytvořil mimo jiné i grafiku mého webu). Díky vzájemně vyladěnému procesu spolupráce a přímé komunikaci jsem tak měl jistotu kvalitně odvedené práce.
Grafiku zpracovává ve Figmě, kde se dá vše přehledně připomínkovat a významně to usnadňuje práci kodérovi.
5. Import dat ze stávajícího řešení
Separátně s tvorbou grafiky jsem již pracoval na přenosu dat ze stávajícího e-shopu k Shoptet. Jednalo se o přenos kategorií, produktových dat, zákazníků, SEO popisků, článků blogu apod.
Chtěl jsem totiž mít v systému připravená reálná data ještě předtím než se kodér pustí do implementace grafiky. Díky tomuto přístupu se poté vše lépe "ladí", než když jsou použity obecné lorem ipsum textace.
Samotný import jsem realizoval pomocí dumpu databáze stávajícího e-shopu a bylo zde potřeba vyřešit několik oříšků:
- Poskládat URL adresy produktů a obrázků.
- Rozdílná datová struktura
- Jméno, Příjmení zvlášť ve sloupcích vs. Jméno a příjmení v 1 sloupci.
- Ulice a čp vs. Ulice, ČP.
- Promazání fake účtů.
- Tím, že se jedná o velkoobchod, tak opravit spoustu DIČ, které byly v chybném stavu (mezery, pomlčky, lomítka apod.)
Zkrátka nic s čím by si neporadilo pár SQL dotazů nebo funkce v Google Sheets.
6. Implementace grafických návrhů
Po konzultaci nad grafikou Jakub navrhnul, aby se při implementaci vycházelo ze Shoptet šablony Classic, kterou postupně přetvořil do nové podoby. Díky tomuto postupu se ušetřilo poměrně hodně vývojového času a rozpočtu projektu oproti tomu, kdyby se grafika měla implementovat tzv. "na zelené louce".
Co dále jsem na projektu vyřešil
- Napojení e-shopu na další systémy
- Money S3
- Ecomail
- Foxentry
- Shoptet Pay
- Nastavení doprav včetně váhových limitů a plateb.
- Nastavení stavů objednávek a emailových notifikací. Zde jsem pro návrh textů využil ChatGPT a z výsledků jsem byl velmi mile překvapen.
- Přesměrování starých URL adres na nové. Některé stránky na stávajícím e-shopu měli trochu jinou strukturu URL adres než na novém e-shopu. Vytvořil jsem tedy přesměrovací tabulku, tak aby po spuštění nového e-shopu klient nepřišel o již zaindexové stránky a neztratil pozice ve výsledcích vyhledávání.
- Vytvoření velkoobchodního ceníku a zákaznických skupin.
- Nastavení parametrických kategorií
- Propojení kategorie e-shopu s kategoriemi zbožových srovnávačů.
- Přesun a nastavení emailových schránek.
- Zajistit přístup do administrace starého e-shopu i po spuštění nového e-shopu.
Jak probíhalo spuštění e-shopu na ostrou doménu
V podstatě bez jediného problému. To bylo dáno také předchozím důsledným otestováním všech funkcionalit. Stačilo správně nasměrovat DNS záznamy u správce domény, podle Shoptet nápovědy a zapnout SSL certifikát, který se automaticky vygeneroval.
