📅 Aktualizácia 16. 9. 2024

V pôvodnom oranžovom editore Webnode fungovali tzv. katalógy. Niektorým pamätníkom chýbajú, preto som pripravila tento článok s postupom, ako si katalóg vytvoriť aj v aktuálnej verzii Webnode 2.0.

⚠️ Pozor! Tento návod nie je možné využiť, pokiaľ na projekte aktívne využívaš modul Internetový obchod. T.j. tvoj projekt naozaj skutočne funguje ako e-shop. ⚠️

⚠️ Potrebuješ mať aktívne prémiové služby kvôli možnosti vkladania vlastných kódov. ⚠️

Ako si na Webnode urobiť online katalóg - časť 1: aktivuj e-shop

1. Budeme vychádzať z funkcie/modulu e-shop. Na hornej čiernej lište prejdi do Nastavení a zapni E-shop.

2. Podukty budú suplovať položky v katalógu. Nahraj do novovzniknutej záložky Produkty svoje položky, texty, obrázky.

O zobrazenie ich ceny, tlačidlá ako napr. do Košíka a pokročilé nastavenie e-shopu sa teraz nestaraj, to vyriešime v procese.

3. Dôkladne premysli systém kategórií a podkategórií. V e-shope môžeš vytvárať kategórie produktov, ktoré využijeme ako kategórie katalógu.

4. Nastav vzhľad výpisu produktov, ktorý ti vyhovuje.

Uprav vzhľad výpisu produktov cez Nastavenia - Vzhľad - Formuláre a výpisy produktov.

Ak si s obsahom katalógu spokojný*á, poďme ďalej.

Ako si na Webnode urobiť online katalóg - časť 2: úpravy zobrazenia vďaka kódom

Teraz je čas na kódy. 

Keďže e-shop na webe nebudeš používať, je potrebné skryť z navigácie niektoré položky, napr. odkaz do košíka, ceny a tlačidlo pridať do košíka. 

To zariadime CSS kódom, ktorý sa vkladá do HTML hlavičky webu. V prípade, že si chceš niečo z toho nechať, napr. zobraziť cenu a namiesto Do košíka využívať tlačidlo Dopyt s odkazom na formulár, dostaneme sa k tomu.

Kam vkladať kódy s balíčkom Štandard a vyšším

Kódy sa vkladajú do Nastavenia webu - HTML hlavička / pätička. CSS kódy pôjdu do hlavičky a ostatné do pätičky.

Vždy, keď ich tam vložíš, nezabudni zmeny Uložiť.

Kam vkladať kódy s balíčkom Mini a Limited

Ak máš nižší balíček, bude treba kód vložiť do každej jednej stránky s produktom cez prvok HTML 🤯 Naozaj si nechceš kúpiť Štandard?

Funguje to tak, že v editore postupne otvoríš každý jeden "produkt" skrz okno s produktami. Tam klikni na 3 bodky a Prejsť na stránku produktu. 

Potom vlož HTML cez malé čierne plus.

Všetky tieto kódy môžeš použiť naraz:

<style>
.cart.cf, .product-cart, .b-e-d .prd-crt, .item-price, .item-price.cf, .eshop-detail-price.cf, .b-e-d-price.cf {
display:none;
}
</style>

Ako katalóg vyladiť k dokonalosti

Pre každú jednu kategóriu aj podkategóriu produktov odporúčam vytvoriť samostatnú stránku, na ktorú vždy umiestniš výpis produktov z danej kategórie. 

Takto vytvoríš potrebné množstvo stránok, ktoré zoradíš do stromu, aby sa zobrazovali v navigácii ako podstránky.

Na každú stránku produktu odporúčam dať výpis produktov z danej kategórie.

Úplne ideálne je na každú stránku vložiť drobečkovú navigáciu, ktorú je potrebné vytvoriť manuálne. Alebo ti ju môžem nakódovať na mieru - stačí sa ozvať 🤓

Ďalšou obˇúbenou taktikou je namiesto tlačidla Do košíka vytvoriť nové tlačidlo napr. Dopyt a to presmerovať na stránku s formulárom, alebo na formulár v rámci stránky. Všetky potrebné kódy nájdeš v rámci rôznych článkov na tomto webe. Najviac sa ti bude hodiť tento:

Ak je to na teba celé trochu too much, alebo preferuješ chytrejšie riešenie, určite mi napíš a vytvorím kódy na mieru tvojmu projektu.