Kalkulačka ve WordPress od Zeni

Kalkulačka ve WordPress od Zeni

Během redesignu webu pro A-technology jsme byli požádání o přepracování jejich technologické kalkulačky. Pro kalkulačku jsme neudělali jen redesign, ale přidali i novou funkcionalitu.

Jak jsme realizovali kompletně nový návrh webové stránky si můžete přečíst v článku Rychlost a spolehlivost webové stránky pro A-technology.

Kde lze kalkulačku využít?

Kalkulačku mohou využít lidé, kteří se rozhodují stavět dům a rádi by věděli, jaké mají možnosti v oblasti vytápění a dalších moderních technologií. Kalkulačka je aktuálně nastavena jen pro ukázkový dům o velikosti 160 m2, ale je v plánu přidat i další. To ale nebrání tomu, aby si uživatelé udělali přehled o technologiích a jejich přibližných cenách.

Jakou kalkulačku jsme vytvořili

Nová kalkulačka v základu funguje podobně jako ta stará, takže se pro uživatele nic nezměnilo a není potřeba, aby se naučil něco nového pro její používání. Klientovi ale přibily nové možnosti. Jednou z nich je možnost zadání rozšíření. Pokud zákazník zaškrtne nějakou z hlavních technologií, nabídnou se mu na výběr rozšíření. Kalkulačka tak získala na přehlednosti a zákazník přesně ví, jaké technologie jsou k čemu navázány. Může si díky tomu i lépe specifikovat svůj požadavek.

Možnosti rozšíření - Kalkulačka ve WordPress od Zeni
Možnosti rozšíření – Kalkulačka ve WordPress od Zeni

Další novinkou jsou povinná rozšíření. Některé technologie obsahují rozšíření, která je nutné přidat, aby vše vůbec fungovalo. Proto se může stát, že něktérá rozšíření budou už zaškrtlá a nepůjde je odebrat.

Povinná rozšíření - Kalkulačka ve WordPress od Zeni
Povinná rozšíření – Kalkulačka ve WordPress od Zeni

Poslední a asi největší rozšíření původní kalkulačky jsou Dotace. Zákazník si může v kalkulačce vybrat jednu z nabízených dotací a automaticky se mu k ní navolí všechny potřebné technologie pro její splnění. Díky tomu je hezky vidět, s čím vším musí počítat, pokud má o danou státní dotaci zájem.

Možnosti dotací - Kalkulačka ve WordPress od Zeni
Možnosti dotací – Kalkulačka ve WordPress od Zeni

Chcete-li poslat svou kalkulaci na e-mail, je třeba vyplnit několik základních údajů. Na žádost klienta jsme formulář rozšířili o možnost nahrání dokumentů spojených s vaším projektem. Díky těmto podkladům vám mohou v A-technology připravit návrh na mírů, přesně podle vašich požadavků.

A-technology chce svým klientům dát náhlednout do možností, které mají, a umoňuje jim vybrat si řešení podle svých představ. Přesné řešení je pak možné konzultovat s lidmi z A-technology, kteří vám dodají přesnější informace.

Pokud se vám naše řešení kalkulačky zalíbilo nebo potřebujete pomoci s webem, neváhejte se nám ozvat

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Menu na míru pro Engeto bez JavaScriptu

Menu na míru pro Engeto bez JavaScriptu

Před nedávnem jsme pro našeho klienta Engeto dělali zajímavé řešení. Vytvořili jsme menu na míru bez použití JavaScriptu, díky čemuž jsme nezpomalili výkon jejich webové stránky. Jak jsme pracovali na tvorbě menu a jaké výhody přináší menu bez JavaScriptu, si můžete přečíst v dnešním článku.

Seznamte se s Engetem

Engeto, pořádá IT kurzy pro začátečníky a pokročilé, kterým pomáhá najít uplatnění v IT oboru. Spolupracují s partnerskými firmami a na jejich webu najdete příběhy absolventů, kteří vypráví, jak se – někdy i z ne IT oborů – dostali přes Engeto k práci v IT

Engetu jsme již pomohli s vytvořením stránek Absolventi a Termíny, které jsme vytvořili podle jejich grafiky, a přidali filtrování, které předtím nebylo možné. Umožnili jsme tak jejich zákazníkům jednodušší filtrování kurzů a absolventů.

Engeto nás požádalo o lepší rozdělení stránky pro jednotlivce a firemní návštěvníky. Původní web ani šablona to neumožňovaly v takto velkém rozsahu. Začali jsme se tedy podílet na vytvoření řešení na míru pro ně.

Výhody menu bez JavaScriptu

Menu funguje, jak jsem se již zmínil, bez použití JavaScriptu. Rozhodli jsme se JavaScript nepoužívat, protože podle nás není vždy potřeba a jen zbytečně zdržuje načítání stránky. Byla to pro nás i taková výzva, jestli něco takového zvládneme udělat. Nejvíce jsem asi hrdý na mobilní verzi menu, která má i tlačítko zpět, které se z podmenu vrací do hlavní nabídky.

Mobilní verze menu
Mobilní verze menu
  • Díky tomu, že nebyl použit JavaScript, se stránka nijak nezpomalila při načítání.
  • Zákazníkovi tato úprava umožňuje vyvořit menu přesně podle jeho představ a lépe tak svým studentům představit nabídků kurzů a obsah webu.
  • Každá stránka má ve své administraci možnost nastavit, jaké menu chce v hlavičce zobrazit. V nastavení se pak spravují dvě menu. Jedno pro stránky jednotlivců a druhé pro firemní. To umožňuje velice jednoduchou správu a případné výměny menu za jiné.
  • Hlavní menu je jednoduše upravitelné. Všechny prvky jsou v něm nastavitelné přes WordPress administraci, takže není potřeba zásahu programátora do kódu při nějakém požadavku na změnu. 
WordPress administrace menu na míru
WordPress administrace menu na míru

Abych vás neklamal, tak jeden JavaScriptový kód jsem musel napsat. Divi šablona, která je na tomto webu využita, totiž blokovala používání našeho přístupu na mobilech. Museli jsme tedy napsat JavaScript, který jejich JavaScript obejde. Menu vlastně funguje nejlépe, pokud na celé stránce vypnete JavaScript. Pak vám ale nepojede zbytek stránky.

Jak vzniklo menu na míru

Pro vytvoření menu jsem využil kombinace elementu <label> a checkbox inputů. Díky jejich pojmenování lze tyto dva elementy provázat, i když jsou na úplně jiných místech ve stránce. A co je ještě lepší, že to stejné funguje i pro více <label> elementů navázaných na jeden input. Tak jsem dosáhl možnosti dostat se na mobilech na podmenu a zpátky.

Abych všechny tyto informace dostal do standardního WordPress menu, bylo potřeba napsat vlastní MenuWalker. To je třída, kterou předáte vašemu menu a podle ní se vypisují jednotlivé části menu. Ve třídě si pak můžeme upravit jeho funkce a přidat tak do menu nějaké vlastní položky.

Využití WordPress pluginu

Poslední technologii, kterou jsem použil pro tuto práci, byl WordPress plugin Advance Custom Fields (ACF). 

Jeho možnost přidávání vlastních položek na různá místa WordPress administrace mě stále baví. Narazil jsem ale na jeden drobný problém.

ACF nemá možnost definovat, do jaké úrovně menu chcete nové editovatelné položky přidat.  

Vytvořil jsem tedy kód, který zjišťuje, v jaké úrovni se daná menu nachází, a pak povoluje, případně vypíná ACF položky. To mi umožnilo zpříjemnit administrátorovi práci s editací, protože se mu tam nepletou položky, které by neměl nastavovat a nic by ve výsledku nedělaly.

Pokud máte také zájem o řešení na míru či zrychlení svých webových stránek nebo potřebujete poradit, napište nám, jsme tu pro vás. 

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Serial Killer – Proč je dobré mít webovou stránku vytvořenou na Sage?

Serial Killer – Proč je dobré mít webovou stránku vytvořenou na Sage? 

I Zeni team měl možnost podílet se na mezinárodním festivalu TV a web seriálů – Serial Killer. Vytvořili jsme pro něj webovou stránku, jejíž téma je postavena na Sage. Jak jsme při tvorbě webové stránky postupovali a také výhody stránky vytvořené na Sage šabloně se dozvíte v článku.

Co je Serial Killer?

Určitě už tušíte, že festival Serial Killer potěší všechny nadšence seriálové kultury. Tvůrci nejlepších seriálových novinek ze střední a východní Evropy se každoročně setkávají na mezinárodním soutěžním festivalu televizních a webových seriálů. Na velkém plátně si návštěvníci mohou zhlédnout premiéry, které jinde nemají možnost vidět. Navíc, v sekci Fokus se festival každým rokem zaměří na jinou zemi a představí její seriálovou tvorbu.

Tvorba webové stránky

Festival nás zaujal, a také proto jsme se rozhodli zapojit do tvorby jejich webové stránky.

HTML strukturu nejprve vytvořil grafik Martin Pecina, následně bylo nutné ji rozdělit na menší části a vytvořit za ní celý web.

Z celkového zadání a grafiky jsme si stránku rozdělili na sekce:

  • seriály;
  • panely;
  • videa;
  • přednášející;
  • členové týmu.

U každé ze zmíněných sekcí jsme identifikovali, která data bude nutné vyplňovat a přidali jsme možnost jejich editace do administrace. Data bylo také nutné napasovat do připravené grafiky a pomocí nich tak oživit obsah.

Jaké funkcionality jsme dělali pro Serial Killer?

Hromadné stažení fotek z jednotlivých dní z presskit

Klient nám zadal, aby bylo možné stáhnout všechny fotky z jednotlivých dní z presskit a to v zip souboru. Připravili jsme funkcionalitu, která všechny dané fotky zazipuje a uživatel si je může stáhnout.

Předplatitelská sekce

Klient potřeboval přidat na web možnost koupit si předplatné do interní sekce webu. Připravili jsme propojení s Woocommerce a Gravity Forms, které zajišťují nákup přístupů a také přihlášení a omezení přístupů na určité stránky.

Archivace starého ročníku

Toto je jedna z nových features, které stránka obsahuje. Klient požadoval, aby bylo možné nastavit jednotlivé seriály, seriálové sekce, panely a přednášející jako archivované. Ty se pak nebudou zobrazovat na standartních místech a on si je bude moct přidat na vlastní stránky.

Proč je dobré mít šablonu stránky vytvořenou na Sage?

  • Nejlepší nástroj na tvorbu WordPress šablon

Dává programátorovi skvělé možnosti, jak udržet svůj kód přehledný a čitelný. Ať už se jedná o psaní CSS s SASS, Blade templaty, JavaScript routing nebo Controlery, ve kterých je možné specifikovat funkcionalitu pro přesně danou šablonu. S takovým nástrojem je práce mnohem zábavnější.

  • Obsahuje Laravel blade templating

Velice ulehčuje práci s vytvářením jednoduchých a přehledných šablon. My jsme si k němu ještě doinstalovali ACF Sage directives, což nám značně ulehčilo a zpřehlednilo práci s ACF fieldy. 

  • Protože JavaScript routing 

Sage už v základu obsahuje funkcionalitu, která umožňuje rozdělit JavaScript do souborů a pak ho načítat na stránkách podle vašeho určení. JavaScript je díky tomu přehlednější a nemusíte se obávat, že se na některé stránce spustí něco nechtěného.

Výkonnost webové stránky

Jestli na vaší stránce čtenář zůstane záleží hlavně na tom, zda ho dokážete co nejdříve zaujmout. Jak ho ale zaujmete, pokud se vaše stránka bude načítat nekonečné hodiny? Proto je pro vaši webovou stránku velmi důležitá její výkonnost, spolehlivost a rychlost.

Splnění těchto požadavků vám samotný Sage nezaručí. Avšak dobrý programátor ve spojení s tak dobrým nástrojem jako je Sage může udělat zázraky. Výkonnost a rychlost totiž vždy záleží na samotném programátorovi.

Stejně jako u dalších našich projektů jsme se snažili načítat vždy jen vše potřebné a připravili jsme stránku na co nejrychlejší načítání. Například jsme odstranili nepotřebné CSS a JS soubory, nastavili lazyload obrázků a mnoho jiného.

Pokud byste i vy chtěli vytvořit vaši webovou stránku na tolik kvalitním nástroji jako je Sage a přinést vaší stránce výkonnost a rychlost, neváhejte se na nás obrátit. Napište nám a my se vám ozveme v co nejkratším čase.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Nový plugin pro WordPress – Zeni mapa

Nový plugin pro WordPress – Zeni mapa

Jednou z poptávaných možností pro naše spokojené klienty je vytvoření mapy, kde si společnost či její partneři přejí zaznamenávat jejich prodejny, vzorkovny, výdejny či parkovací místa a zóny. My vám tuto možnost dáme formou nového pluginu!

Jaký byl námět k vytvoření pluginu

Jednoho dne přišel David s tím, že ho klient požádal o připsání jeho partnerů do mapy. V tu chvíli začal zapojovat celý tým a organizovat samotnou tvorbu. Je přesvědčen, stejně jako my všichni ze Zeni, že tato nová perspektiva umožní podnikatelům vyšší spokojenost ať už od zákazníků nebo partnerů.

Nejprve jsme se shodli, že nechceme žádné hardcodování do témy aby tuto možnost mohl využít i další klient. Rozhodli jsme se tedy pro vytvoření nového pluginu pro WordPress, protože dobře kódovaný plugin je daleko lepší než po každé změně témata přepisovat kódy v šabloně.

Nejzásadnější je pro nás vlastnost, že samotný plugin můžeme rozvíjet do nekonečných podob a objevit nekonečno vychytávek a možností.

Současný klient, pro kterého je plugin již hotov

Vytvořili jsme plugin dle klientova zadání a ještě jsme k němu přidali některé námi navržené vychytávky. Mapa se klientovi líbí a využívá jí na více stranách v jediném webu a to v různých provedeních. A přesně toho je daný plugin schopný viz. níže.

Další možnosti

V době Covidové jsme obdrželi další podnět, kterým je možnost dodat do mapy zóny. Možnost zónu zadat dle adres a nejlépe k ní vypsat podrobný popis, například: 

Rozvozová zóna 1 = cena 10,-

Tuto funkci máme dnes již v pluginu zakomponovanou a již přemýšlíme nad dalšími.

O tyto možnosti mají zájem především restaurace, které mají více rozvozových zón a k nim jiné ceny. Ale tento plugin má mnoho možností využití.

Rozvozové zóny - plugin zeni mapa

Tuto možnost mohou využít například:

  • Restaurace;
  • výrobní závody;
  • velkoobchodní dodavatelé;
  • kurýrní, či taxi služby.

Co o pluginu řekl klient?

reming.cz:

„Pro ukázku, s kterými e-shopy a partnery spolupracujeme při prodeji našich výrobků, jsme chtěli vytvořit mapu, do které bychom mohli zaznamenat název e-shopu/partnera, jeho adresu, logo a prolink na URL našeho produktu, a to pro každý produkt zvlášť. Toto jsme zadali našemu správci stránek společnosti Zeni team, a ten nám vytvořil plugin, který toto dokáže viz. produktové stránky na našem webu.

Ondřej Lhotský – majitel

Pokud vás plugin zeni mapa zaujal a máte o něj zájem, ozvěte se přes kontaktní formulář a my se s vámi spojíme.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.