Przeniesienie loga w lewy górny róg Presta 1.7, oraz Menu boczne

[Godlike87]

W jaki sposób uzyskać efekt jak na zrzucie poniżej, zamiast tego który aktualnie widnieje na stronie (zdjęcie dolne). I jeszcze mam pytanie czy na szablonie domyślnym presty (clasic), możliwe jest zrobienie bocznego menu tak jak np na tej stronie https://www.e-lesnik.pl/ ?

 

 

 

Edited August 24, 2021 by Godlike87 (see edit history)

[endriu107]

Musisz przenieść w szablonie logo powyżej kontenera header-nav np. do header-banner, jak przenieść logo na środek pokazuje w jednym z moich poradników na YT więc tutaj zasada będzie podobna.

Na domyślnym szablonie jest w zasadzie możliwe wszystko, tylko pewne zmiany będą wymagać więcej prac a pewne mniej. W standardzie masz blok kategorii który możesz uruchomić w lewej kolumnie i dostosować sobie wygląd.

[Godlike87]

A gdzie znajdę ten blok kategorii bo nigdzie go nie widzę? A co do loga to owszem po edycji header.tpl logo zmieniło położenie ale po dodaniu CSS:

 

#_desktop_logo {
	text-align: left;
	margin-bottom: 20px;
}

Logo ani drgnie.

[endriu107]

Jest to moduł drzewo kategorii, zobacz czy jest aktywny oraz do jakich hooków jest podpięty.

 

[Piotr3qx]

Cześć, 

Aby przenieść logo nad pomarańczowy header ze zdjęcia, należy zmodyfikować plik w szablonie classic/templates/_partials/header.tpl. Musisz znaleźć kod odpowiadający za wyświetlanie loga i przenieść go do nowo utworzonego kontenera nad blokiem header_nav. Należy pamiętać aby logo pozostawało w divie o id="_desktop_logo" ponieważ w innym przypadku zmieni Ci się wygląd headera na mobilce. Poniżej kod z pliku header.tpl który daje Twój efekt  Kod nie wymaga dodatkowego css aby działało. Jeżeli nie pracujesz na swoim własnym szablonem tylko na domyślnym classicu to takie zmiany powinno się wprowadzać w motywie potomnym ponieważ w przypadku update'u szablonu możesz stracić wszystkie zmiany

{block name='header_banner'}
    <div class="header-banner">
        {hook h='displayBanner'}
    </div>
{/block}

<div class="container hidden-sm-down" id="_desktop_logo">
    {if $page.page_name == 'index'}
        <h1>
            <a href="{$urls.base_url}">
                <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
            </a>
        </h1>
    {else}
        <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
        </a>
    {/if}
</div>

{block name='header_nav'}
    <nav class="header-nav">
        <div class="container">
            <div class="row">
                <div class="hidden-sm-down">
                    <div class="col-md-5 col-xs-12">
                        {hook h='displayNav1'}
                    </div>
                    <div class="col-md-7 right-nav">
                        {hook h='displayNav2'}
                    </div>
                </div>
                <div class="hidden-md-up text-sm-center mobile">
                    <div class="float-xs-left" id="menu-icon">
                        <i class="material-icons d-inline">&#xE5D2;</i>
                    </div>
                    <div class="float-xs-right" id="_mobile_cart"></div>
                    <div class="float-xs-right" id="_mobile_user_info"></div>
                    <div class="top-logo" id="_mobile_logo"></div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </nav>
{/block}

{block name='header_top'}
    <div class="header-top">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 position-static">
                    {hook h='displayTop'}
                    <div class="clearfix"></div>
                </div>
            </div>
            <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
                <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
                <div class="js-top-menu-bottom">
                    <div id="_mobile_currency_selector"></div>
                    <div id="_mobile_language_selector"></div>
                    <div id="_mobile_contact_link"></div>
                </div>
            </div>
        </div>
    </div>
    {hook h='displayNavFullWidth'}
{/block}

 

Jeżeli chodzi o listę kategorii... To moduł o którym kolega wyżej wspominał nazywa się Łącza drzewa kategorii. W panelu tego modułu należy zaznaczyć opcję Kategoria główna - Kategoria główna. Następnie wchodzisz z poziomu panelu Presty w Wygląd->Szablony, na dole strony wybierasz Wybierz układy. Znajdujesz stronę index i wybierasz układ Two Columns, small left column - Two columns with a small left column. I to tyle Tylko miej na uwadze że po zmianie szablonu i powrocie do oryginalnego classica wyżej wprowadzone zmiany zostaną utracone. Dla bezpieczeństwa należałoby utworzyć szablon potomny i w nim edytować plik konfiguracyjny theme.yml aby zawsze mieć lewą kolumnę na stronie głównej 

[Godlike87]

Wkleiłem powyższy kod ale logo wraz z numerem owszem przemieściły się trochę na lewo, ale nie całkowicie w lewą stronę:

A odnośnie bocznego menu to zrobiłem tak jak opisałeś i faktycznie działa, a w jaki sposób mógłbym ustawić to boczne menu żeby po kliknięciu na kategorie główną poniżej wyświetliły się pod kategorie? Tak jak np na https://www.e-lesnik.pl/

Edited August 30, 2021 by Godlike87 (see edit history)

[Piotr3qx]

Co do nagłówka, czy Kontakt oraz selektory języka, przyciski koszyka i logowania muszą być w jednym wierszu (na jednej linii)? Screeny z pierwszego posta są niewyraźne i ciężko mi to stwierdzić. Jeżeli nie muszą być na jednej linii to ten kod działa

 

<div class="container-fluid hidden-sm-down" id="_desktop_logo">
    {if $page.page_name == 'index'}
        <h1>
            <a href="{$urls.base_url}">
                <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
            </a>
        </h1>
    {else}
        <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
        </a>
    {/if}
    {hook h='displayNav1'}
</div>

{block name='header_nav'}
    <nav class="header-nav">
        <div class="container">
            <div class="row">
                <div class="hidden-sm-down">
                    <div class="offset-md-5 col-md-7 right-nav">
                        {hook h='displayNav2'}
                    </div>
                </div>
                <div class="hidden-md-up text-sm-center mobile">
                    <div class="float-xs-left" id="menu-icon">
                        <i class="material-icons d-inline">&#xE5D2;</i>
                    </div>
                    <div class="float-xs-right" id="_mobile_cart"></div>
                    <div class="float-xs-right" id="_mobile_user_info"></div>
                    <div class="top-logo" id="_mobile_logo"></div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </nav>
{/block}

 

Co do drzewka kategorii, czy można przyjąć że każda kategoria ma tylko jeden poziom głębokości? 

[Godlike87]

Raczej nie bo np. na leśniku podkategoria, pilarki specjalistyczne ma kilka innych pod kategorii i w moim przypadku też tak będzie, natomiast jeszcze co do menu bocznego to na głównej stronie owszem menu jest ale produkty mam tylko w dwóch rzędach a nie w 3, i wygląda to dziwnie, a jak sobie wejdę w kategorię to mam 3 rzędy produktów co już wygląda fajnie, oraz boczne menu. Jeszcze pytanie jak wstawić to boczne menu aby wyświetlało się na każdej pod stronie, bo np na stronie "O nas" jest ono nie widoczne, i jak usunąć pod kategorię z górnego menu aby mi się wyświetlały jedna pod drugą a nie obok siebie? Tak jak np tutaj https://silver.pl/ i tło zamiast szarego pomarańczowe? Tak jest u mnie aktualnie:

[Piotr3qx]

Dość dużo skomplikowanych poprawek. 

Na ten moment mam kod który dodaje działanie rozwiniętego lewego bocznego menu na kategoriach. Nie jest to najpiękniejszy kod ani najbardziej poprawny programistycznie ale daje radę. Takie zaawansowane poprawki należałoby jednak wprowadzać w swoich ręcznie pisanych modułach. Poniżej kod który u mnie działa. Kod należy podmienić w pliku /modules/ps_categorytree/views/templates/hook/ps_categorytree.tpl

 {function name="categories" nodes=[] depth=0}
  {strip}
      {if $nodes|count}
          <ul class="category-sub-menu">
              {foreach from=$nodes item=node}
                  <li data-depth="{$depth}">
                      {if $depth===0}
                          <a href="{$node.link}">{$node.name}</a>
                          {if $node.children}
                              <div class="navbar-toggler collapse-icons"
                                  data-toggle="collapse" data-target="#exCollapsingNavbar{$node.id}"
                                  {if isset($breadcrumb.links.{$depth+1}.title)} {if $breadcrumb.count >= {$depth + 1} &&
                                  {$breadcrumb.links.{$depth + 1}.title}=={$node.name}} aria-expanded="true" {/if}{/if}>
                                  <i class="material-icons add">&#xE145;</i>
                                  <i class="material-icons remove">&#xE15B;</i>
                              </div>
                              <div class="collapse {if isset($breadcrumb.links.{$depth+1}.title)}{if $breadcrumb.count >= {$depth + 1} &&
                              {$breadcrumb.links.{$depth + 1}.title}=={$node.name}}in{/if}{/if}"
                                  id="exCollapsingNavbar{$node.id}" {if isset($breadcrumb.links.{$depth+1}.title)}{if $breadcrumb.count >= {$depth + 1} &&
                                  {$breadcrumb.links.{$depth + 1}.title}=={$node.name}} aria_expanded="true" {/if}{/if}>
                                  {categories nodes=$node.children depth=$depth+1}
                              </div>
                          {/if}
                      {else}
                          <a class="category-sub-link" href="{$node.link}">{$node.name}</a>
                          {if $node.children}
                              <span class="{$breadcrumb.count} {$depth + 1} arrows" data-toggle="collapse" data-target="#exCollapsingNavbar{$node.id}" {if isset($breadcrumb.links.{$depth+1}.title)}{if $breadcrumb.count >= {$depth + 1} &&
                              {$breadcrumb.links.{$depth}.title}=={$node.name}} aria-expanded="true" {/if}{/if}>
                                  <i class="material-icons arrow-right">&#xE315;</i>
                                  <i class="material-icons arrow-down">&#xE313;</i>
                              </span>
                              <div class="collapse {if isset($breadcrumb.links.{$depth+1}.title)}{if $breadcrumb.count >= {$depth + 1} &&
                              {$breadcrumb.links.{$depth+1}.title}=={$node.name}}in{/if}{/if}"
                                  id="exCollapsingNavbar{$node.id}" {if isset($breadcrumb.links.{$depth+1}.title)}{if $breadcrumb.count >= {$depth + 1} &&
                                  {$breadcrumb.links.{$depth+1}.title}=={$node.name}}aria_expanded="true"{/if}{/if}>
                                  {categories nodes=$node.children depth=$depth+1}
                              </div>
                          {/if}
                      {/if}
                  </li>
              {/foreach}
          </ul>
      {/if}
  {/strip}
{/function}

 

[Godlike87]

Dzięki za podesłanie kodu, ale w moim przypadku nie działa i nie rozwijają mi się pod kategorię  (wyczyściłem pamięć podręczną przeglądarki oraz presty). Odnośnie pojawiania się podkategori jedna pod drugą w przypadku górnego menu a nie obok siebie to rozwiązałem sobie to za pomocą instalacji tego modułu:

https://mypresta.eu/modules/front-office-features/top-horizontal-menu-with-dropdowns.html

 

Pozostaje tylko kwestia ustawienia kolorów.

 

A w jaki sposób mógłbym uzyskać efeket podobny jak na zrzucie poniżej:

 

Z tym że Numer telefonu i adres wyśrodkowany i w kolorze pomarańczowym a obok rejestracja i logowania oraz koszyk, ewentualnie koszyk logowanie i rejestracja niżej, a w ich miejsce adres sklepu oraz godziny otwarcia?

Edited September 1, 2021 by Godlike87 (see edit history)