Jump to content
  • 0

Budowa menu górnego prestashop 1.7.5.1

world4players

Asked by world4players,

 Share

Question

world4players Rookie

world4players

Posted
Posted (edited)

Witam, mam problem otóż mam sobie podstawowe menu np:

Kategorie | serwis | promocje | strefa marek

 

I teraz chciałbym zrobić coś takiego:

Kategorie  -  1 stopień

 *laptopy  -  2 stopień

    *podzespoły do laptopów  -  3 stopień

      *Dyski  -  4 stopień

         *HDD  -  5 stopień

         *SSD  -  5 stopień

      *pamięć ram  -  4 stopień

      *napędy optyczne  -  4 stopień

    *akcesoria do laptopów  -  3 stopień

 

 

Jak tego dokonać? Bo aktualnie mam tak:

Kategorie  -  1 stopień

 *laptopy  -  2 stopień

    *podzespoły do laptopów  -  3 stopień

    *Dyski  -  3 stopień

    *HDD  -  3 stopień

    *SSD  -  3 stopień

    *pamięć ram  -  3 stopień

    *napędy optyczne  -  3 stopień

 

Oczywiście podczas tworzenia kategorii w katalog - > kategorie dobrze je tworzę. Np. kategorie -> podzespoły do laptopów -> dyski -> HDD | SSD

 

Zdjęcie poglądowe jak mam teraz:

https://imgur.com/a/WEWgHlY

Presta: 1.7.5.1

Edited by world4players (see edit history)
Link to comment
Share on other sites

19 answers to this question

Recommended Posts

  • 0
world4players Rookie

world4players

Posted
  • Author
Posted (edited)
3 minuty temu, () Maciej () napisał:

Ok, ale w czym masz problem ? Dałeś opis, ale bez opisu problemu. Albo informacji co chcesz osiągnąć.

Przecież opisałem  jak chcę mieć stopniowane menu by było 5 stopni kategorie->laptopy->podzespoły do laptopów->dyski->SSD | HDD

a nie 3 stopnie kategorie->laptopy->podzespoły do laptopów | dyski | SSD | HDD

 

Załączyłem też zdjęcia

Edited by world4players (see edit history)
Link to comment
Share on other sites
  • 0
world4players Rookie

world4players

Posted
  • Author
Posted
Przed chwilą, () Maciej () napisał:

Ok,  ale to akurat jest już problem kodowania szablonu, a nie ustawień presty.

Presta sama w sobie tak właśnie będzie wyświetlać Ci każde menu. Musisz poprawić CSSy z formatowaniem submenu, tak by uwzględniało więcej niż 3 poziomy.

gdzie ten plik edytować? I wystarczy że skopiuję fragment CSS'a i go powielę?

Link to comment
Share on other sites
  • 0
world4players Rookie

world4players

Posted
  • Author
Posted

Ogólnie to znalazłem taki plik CSS:

 

/themes/gearbest/_dev/css/components/categories.scss

 

Postaram się go edytować. Znalazłem takie coś co wydaje mi się że odpowiada za stopniowanie:

  

.block-categories {
  @include box-shadow;
  background: white;
  padding: rem(25px) rem(20px);
  margin-bottom: rem(25px);
  .category-sub-menu {
    margin-top: $small-space;
    .category-sub-link{
      font-size: $font-size-sm;
    }
    li{
      position: relative;
      &[data-depth="1"]{
        margin-bottom: $small-space;
      }
    }
    li[data-depth="0"] > a {
      font-weight: 600;
      border-bottom: $gray-light 2px solid;
      width: 100%;
      display: inline-block;
      margin: 0.3125rem 0 0;
      padding-bottom: rem(3px);
    }
    li:not([data-depth="0"]):not([data-depth="1"]) {
      padding-left: rem(5px);
      &::before {
        content: "-";
        margin-right: rem(5px);
      }
    }
  }

 

Link to comment
Share on other sites
  • 0
() Maciej () Enthusiast

() Maciej ()

Posted
Posted
46 minut temu, world4players napisał:

dobra znalazłem plik ale jest tego cała masa bo w jednym pliku CSS jest cały motyw. Ponad 10k linii a ja nawet nie wiem jak to menu nazwali ;) dobra metodą prób i błędów może dotrę. Jeśli chcesz wiedzieć co to za szablon to ten: 

https://addons.prestashop.com/pl/high-tech/27983-gearbest-high-tech-shop.html

Co to za szablon dowiedziałem się z lokalizacji jaką podałeś. Jest tam pięknie napisana nazwa szablonu.

 

To co podał Design4VIP uzupełniłbym jeszcze o jedną informację, a mianowicie nie każdy element tak wyłapiesz, bo jeśli to jest menu, które się chowa po zjechaniu kursora to będzie Ci ciężej. Choć nie zawsze. W tym przypadku uzyskasz bez problemu nazwę pliku do edycji (o ile masz wyłączony cache).

Link to comment
Share on other sites
  • 0
world4players Rookie

world4players

Posted
  • Author
Posted (edited)
13 godzin temu, () Maciej () napisał:

Co to za szablon dowiedziałem się z lokalizacji jaką podałeś. Jest tam pięknie napisana nazwa szablonu.

 

To co podał Design4VIP uzupełniłbym jeszcze o jedną informację, a mianowicie nie każdy element tak wyłapiesz, bo jeśli to jest menu, które się chowa po zjechaniu kursora to będzie Ci ciężej. Choć nie zawsze. W tym przypadku uzyskasz bez problemu nazwę pliku do edycji (o ile masz wyłączony cache).

Tak cache mam wylaczony. Znalazlem to:

 

https://pastebin.com/RrrWqHsd

EDIT

 

Dobra udało mi się ogarnąć co do czego i gdzie. Zaczynam przerabiać, pochwalę się potem wynikiem pracy :D 

Edited by world4players (see edit history)
Link to comment
Share on other sites
  • 0
world4players Rookie

world4players

Posted
  • Author
Posted

Mam pytanie czy ktoś wie co muszę edytować by zrobić:

 

kreska po najechaniu na zakładkę "dyski" jest tak oddalona od tego wyrazu. Chciałbym by była bliżej ale również była schowana zanim najedzie się na nią. Wiecie co mam zmienić w tym? Poniżej wklejam fragment CSS który odpowiada za ten element. 

#_desktop_top_menu ul.top-menu[data-depth="3"] {
    padding-top: 0;
}
ul.top-menu[data-depth="3"]>li {
    overflow: hidden;
}
.top-menu a[data-depth="3"] {
    position: relative;
    color: #000;
    margin-bottom: 10px;
    padding: 0 0 0 15px;
    margin-left: -5px;
    transition: all .3s;
}
.top-menu a[data-depth="3"]:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    display: inline-block;
    margin: auto;
    width: 10px;
    height: 1px;
    border-bottom: 1px solid #000; 
}
.top-menu a[data-depth="3"]:hover {
    margin-left: 10px;
}

ewentualnie bym chciał również by zamiast takiej kreski rozwijały się dalsze etapy tego menu w dół. Tzn po najechaniu na "Kategorie: wysuwa się pierwsza część potem po najechaniu na podzespoły do laptopów kolejne i po najechaniu na dyski ostatnie menu. Żeby nie było wszystko już rozwinięte. (oczywiście to tylko moje zastanowienie czy lepiej by to nie wyglądało i czy dużo przeróbek z tym). Jak za dużo roboty to już by mogły zostać te kreski ale żeby lepiej to wyglądało i odróżniało się od wyższego stopnia

Link to comment
Share on other sites
  • 0
design4VIP Newbie

design4VIP

Posted
Posted
21 hours ago, () Maciej () said:

To co podał Design4VIP uzupełniłbym jeszcze o jedną informację, a mianowicie nie każdy element tak wyłapiesz, bo jeśli to jest menu, które się chowa po zjechaniu kursora to będzie Ci ciężej. Choć nie zawsze. W tym przypadku uzyskasz bez problemu nazwę pliku do edycji (o ile masz wyłączony cache).

Bynajmniej. Kazdy element mozesz zaznaczyc jak ma dobrac style.... action, hover.... i nawey jak kest chowane odznaczyc odpowedni blok hoover i masz dostep do styli po najechaniu

Link to comment
Share on other sites
  • 0
() Maciej () Enthusiast

() Maciej ()

Posted
Posted
5 godzin temu, world4players napisał:

Mam pytanie czy ktoś wie co muszę edytować by zrobić:

 

kreska po najechaniu na zakładkę "dyski" jest tak oddalona od tego wyrazu. Chciałbym by była bliżej ale również była schowana zanim najedzie się na nią. Wiecie co mam zmienić w tym?  (..... )

ewentualnie bym chciał również by zamiast takiej kreski rozwijały się dalsze etapy tego menu w dół. Tzn po najechaniu na "Kategorie: wysuwa się pierwsza część potem po najechaniu na podzespoły do laptopów kolejne i po najechaniu na dyski ostatnie menu. Żeby nie było wszystko już rozwinięte. (oczywiście to tylko moje zastanowienie czy lepiej by to nie wyglądało i czy dużo przeróbek z tym). Jak za dużo roboty to już by mogły zostać te kreski ale żeby lepiej to wyglądało i odróżniało się od wyższego stopnia

Wszystko określają style CSS. Wystarczy żebyś trochę z nimi pokombinował by osiągnąć efekt jakiego oczekujesz.

Może ze względu na obecną gorączkę nie łapie do końca dalszych problemów. Jeśli chcesz się tego nauczyć to wystarczyłoby odpalić jakikolwiek kurs CSS i poczytać o poszczególnych jego funkcjach. Owszem mógłbym Ci napisać gotowca, ale wtedy nie zrozumiesz tego co robisz :)Poza tym jestem za bardzo padnięty by myśleć teraz o takich rzeczach :)

 

1 godzinę temu, design4VIP napisał:

Bynajmniej. Kazdy element mozesz zaznaczyc jak ma dobrac style.... action, hover.... i nawey jak kest chowane odznaczyc odpowedni blok hoover i masz dostep do styli po najechaniu

Tak, pod warunkiem, że ten element nie zniknie nam z pola widzenia. Mam na myśli sytuację kiedy chcesz wyłapać nie bezpośrednio element konkretny a np kontener elementu, ale ten zdążył zniknąć po przesunięciu myszki poza obszar. Styl wtedy też się zmienia.

 

 

Link to comment
Share on other sites
  • 0
design4VIP Newbie

design4VIP

Posted
Posted (edited)
On 3/21/2019 at 6:39 PM, () Maciej () said:

Wszystko określają style CSS. Wystarczy żebyś trochę z nimi pokombinował by osiągnąć efekt jakiego oczekujesz.

Może ze względu na obecną gorączkę nie łapie do końca dalszych problemów. Jeśli chcesz się tego nauczyć to wystarczyłoby odpalić jakikolwiek kurs CSS i poczytać o poszczególnych jego funkcjach. Owszem mógłbym Ci napisać gotowca, ale wtedy nie zrozumiesz tego co robisz :)Poza tym jestem za bardzo padnięty by myśleć teraz o takich rzeczach :)

 

Tak, pod warunkiem, że ten element nie zniknie nam z pola widzenia. Mam na myśli sytuację kiedy chcesz wyłapać nie bezpośrednio element konkretny a np kontener elementu, ale ten zdążył zniknąć po przesunięciu myszki poza obszar. Styl wtedy też się zmienia.

 

 

Ok. Styl sie zmienia, ale namierzasz element na ktory najezdzasz myszka, zeby wywolac akcje (rozwiniecie bloku) i uzywasz hover czy action i masz juz na stale rozwiniety blok i bawisz sie stylami. 

A jak nie mozesz znalesc bloku to masz tez podglad kaskadowy (tzw 3D) i wszystko mozna wyciagnac do zbadania stylu i namierzenia miejsca ostylowania, rowniez pseudoclasy before i after... 

Juz lata siedze na firebugu a i tak z kazdym dniem znajduje jakas nowa fukcje, nierzadko bardzo przydatna :) warto poznac to narzedzie bo naprawde pomaga, a czas stylowania skraca o min. 90% :)

a i kazda przegladka daje cos innego, cos nowego. Ale jak nie lubie Firefoxa to... nie wiem czy to kwestia przyzwyczajenia... ale firebuga ma najlepszego. Jakos w chrome to dziwne to wszystko i nie w tym miejscu co byc powinno :)

Edited by design4VIP (see edit history)
Link to comment
Share on other sites
  • 0
world4players Rookie

world4players

Posted
  • Author
Posted

Dobra mam jeszcze jedno pytanie co do tego menu, to w czym trzeba zmienić i co by moje menu po rozwinięciu pokazywało jakąś część a resztę dopiero po naciśnięciu np. Rozwiń dalej? Bo teraz mam tego całą masę bez sensu. Lepiej by było na połowę ekranu a później ten kto chce to sobie rozwinie dalej.

Link to comment
Share on other sites
  • 0
design4VIP Newbie

design4VIP

Posted
Posted

tak na szybkiego jak to masz zrobione z opisami kategorii: 

{if Tools::strlen($category->description) > 350}
                                <div id="category_description_short" class="rte">{$description_short}</div>
                                <div id="category_description_full" class="unvisible rte">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div class="rte">{$category->description}</div>
                            {/if}

i do tego mala javka: 

$(document).on('click', '.lnk_more', function(e){
	e.preventDefault();
	$('#category_description_short').hide();
	$('#category_description_full').show();
	$(this).hide();
});

 

Link to comment
Share on other sites
  • 0
world4players Rookie

world4players

Posted
  • Author
Posted
2 godziny temu, design4VIP napisał:

tak na szybkiego jak to masz zrobione z opisami kategorii: 


{if Tools::strlen($category->description) > 350}
                                <div id="category_description_short" class="rte">{$description_short}</div>
                                <div id="category_description_full" class="unvisible rte">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div class="rte">{$category->description}</div>
                            {/if}

i do tego mala javka: 


$(document).on('click', '.lnk_more', function(e){
	e.preventDefault();
	$('#category_description_short').hide();
	$('#category_description_full').show();
	$(this).hide();
});

 

Dzieki :), a do ktorego pliku to wrzucić? 

Link to comment
Share on other sites
  • 0
design4VIP Newbie

design4VIP

Posted
Posted (edited)

Ale tu podalem tylko przyklad jak wykonac taki zabieg. Bynajmniej to jest kod do CTRL+C > CTRL+V w twoim wypadku. Zapomnialem, ze z kategoriami moze byc troche trudniej, bo te tworzone sa dynamicznie, ale przy generowaniu forech mozesz uzyc np. @count przez niego ograniczyc wyswietlanie. 

Edited by design4VIP (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to question listing
×
×
  • Create New...