Obrázkový rozcestník

Uživatelský manuál

Zde se dozvíte, jak pracovat s nainstalovaným rozšířením Obrázkový rozcestník pro Magento 2 od GetReady.

Než začneme

Máme funkční Magento 2 e-shop.
Příklad, na kterém si ukážeme fungování modulu 'Obrázkový rozcestník', vyžaduje,
abychom měli tzv. 'Nadřazenou kategorii' a 'Podkategorie' s obrázky.

Co to znamená si ukážeme vzápětí.

Jak nastavit modul 'Obrázkový rozcestník'

Tento návod pracuje s fiktivním e-shopem OVOCE-ZELENINA s tématem Magento Luma.
Popisované nastavení je samozřejmě třeba přizpůsobit konkrétní struktuře kategorií a vzhledu vašeho obchodu.

Struktura kategorií

Máme takovouto strukturu kategorií:
(administrace e-shopu: KATALOG > Kategorie)

categories.png

Zajímají nás jen aktivní kategorie, a z nich nejvíce kategorie 'OVOCE'.

Termíny použité v tomto návodu

Pro účely tohoto návodu používáme termíny 'Nadřazená kategorie' a 'Podkategorie'.

V tomto případě jsou nadřazenými (aktivními) kategoriemi 'OVOCE' a 'ZELENINA'.

Nadřazená kategorie OVOCE má tyto podkategorie:
Pomeranče, Jablka, Hrušky, Švestky,...

a podobně i kategorie ZELENINA je nadřazená vůči svým podkategorím,
kterými jsou: Brambory, Papriky a Mrkev.

Stav PŘED instalací modulu

Naše kategorie 'OVOCE' před instalací modulu vypadá takto:

modul-inactive-category-fruit.png

Vlevo je sloupec s filtry, mimo jiné s filtrem podkategorií. Vpravo jsou zobrazeny produkty všech podkategorií.

Ale my to chceme jinak...

Cílový stav

Na dalším obrázku je opět kategorie 'OVOCE'
tentokrát již po instalaci a nastavení modulu 'Obrázkový rozcestník'.

Rozdíl je zřejmý. Nejsou zde žádné produkty ani filtry, jen obrázky podkategorií.

modul-active-category-fruit.png

Jak na to?

Nastavení kategorie jako obrázkový rozcestník

  1. nainstalujte a aktivujte modul Obrázkový rozcestník pro Magento 2 od GetReady
    (instalace je popsána v admin manuálu - kontaktujte vašeho administrátora)

  2. Přihlašte se do administrace

  3. Přejděte na nastavení nadřazené kategorie.
    (V našem příkladu je to 'OVOCE' nebo 'ZELENINA')

  4. Rozklikněte záložku Nastavení zobrazení a přepněte způsob zobrazení ('Display mode') na
    Category Pods GR

    display-mode.png

  5. Rozklikněte záložku Vzhled a přepněte Rozložení na 1 column

    vzhled-1-column.png

  6. Uložte kliknutím na Uložit

    ulozit.png

  7. Chcete-li nastavit další kategorii jako rozcestník, opakujte postup od kroku 3

Související nastavení

Přidání obrázku ke kategorii

Jak píšeme výše, výchozím stavem pro instalaci tohoto modulu jsou existující nadřazené kategorie a podkategorie s obrázky. Pokud nemáte u podkategorií obrázky, zde je postup, jak na to.

  1. Připravte si tématický obrázek ke každé podkategorii. Formát souboru PNG nebo JPEG, poměr stran může být čtverec nebo obdélník. (Lépe bude, když všechny vaše obrázky budou mít již odpočátku stejné rozměry a stejný poměr stran.)

  2. Přihlašte se do administrace a přejděte na nastavení 'podkategorie'.

    V našem případě je 'podkategorie' jedna z těchto: Pomeranče, Jablka,
    Hrušky, Švestky,...
    nebo z těchto Brambory, Papriky a Mrkev.

  3. Rozklikněte záložku Obsah
    add-category-image-1.png

  4. Jedním z několika způsobů (přetažením, kliknutím na ikonu fotoaparátu nebo na tlačítka 'Nahrát' nebo 'Vybrat z galerie') přiřadíte obrázek ke kategorii.

    add-category-image-2.png

  5. Potvrďte kliknutím na Uložit

    add-category-image-3.png

Zákaz zobrazení obrázku v podkategorii

Toto nastavení by měla provádět pověřená a zkušená osoba.
Kontaktujte vašeho administrátora.

Jakmile podkategoriím nastavíme obrázky standardní Magento funkcionalitou, budou se tyto obrázky automaticky zobrazovat na stránce příslušné kategorie.

Příklad:

category-image-active.png

Pokud nám toto chování nevyhovuje, můžeme zobrazení obrázku kategorie na stránce kategorie zakázat úpravou layoutu (rozvržení), nejlépe v custom tématu.

soubor: Magento_Catalog/layout/catalog_category_view.xml
úprava: <referenceBlock name="category.image" remove="true"/>

Nyní již obrázek není na stránce podkategorie (ani žádné jiné kategorie) vidět, ale stále je k dispozici pro použití v 'Obrázkovém rozcestníku'.

category-image-removed.png

Úprava vzhledu

Toto nastavení by měla provádět pověřená a zkušená osoba.
Kontaktujte vašeho administrátora.

Úprava CSS stylů

Vzhled rozcestníku můžete přizpůsobit pomocí změny stylu. Nakopírujte potřebný soubor (soubory) z tohoto modulu, ze složky src/view/frontend/web

do příslušné složky modulu ve vašem tématu a upravte. src/app/design/frontend/<výrobce>/<téma>/Getready_CategoryPods/web

Úprava .phtml šablony

Pokud to nestačí, upravte obdobným způsobem šablonu, která je v modulu zde: src/view/frontend/templates/category_pods.phtml

Nakopírujte ji do příslušné složky modulu ve vašem tématu a upravte. src/app/design/frontend/<výrobce>/<téma>/Getready_CategoryPods/templates/category_pods.phtml