gelöst Ungleiche scheinbar willkürliche Verteilung von Kategorien

Anonymous · 26. Mai 2017

Hallo zusammen,

mal wieder ein blödes Problem,
vllt könnt ihr mir sagen warum die Verteilung hier so aussieht:

im Navbar alles top!

In den Kategorien selber eher nicht:

habe schon diverse Einteilungsoptionen im Honeygrid versucht ohne Erfolg und stehe auch CSS mäßig etwas auf dem Schlauch

Kann mir jemand sagen, was ich hier wieder falsch gemacht habe?

Danke schon einmal im Voraus!

Anonymous · 26. Mai 2017

Hmm keiner eine Idee?

Anonymous · 26. Mai 2017

Weil deine Bilder untersch. hoch sind und dann hauts den Container aus der Bahn weil er kein Platz hat - und daher ist das dann so.
Mach Bilder für Kategorien und so IMMER exact gleich bei höhe und breite in den Pixeln nicht mal 68 hoch und mal 60 hoch usw.

Anonymous · 26. Mai 2017

Dennis hat recht, wenn du unterschiedlich hohe Bilder als Kategoriebilder hast, dann werden diese immer mit Abstand angezeigt. Wenn du das alles auf eine einheitliche Höhe bringen möchtest füge im StyleEdit als "eigenes CSS" folgenden Code ein:
Code:
.subcategories-listing-container .subcategories-listing .subcategory-item {
    height: 90px;
}

Anonymous · 26. Mai 2017

Mach am besten alle Bilder exakt quadratisch, dann sieht es am schönsten aus. So sieht es bei mir bspw aus mit quadratischen Bildern: https://www.matchashop.de/de/Matcha-von/

Aber verrate mir doch bitte mal, wie Du die Bilder in der Topnavi bei den Unterkategorien reinbekommen hast.... Da suche ich schon lange nach einer Lösung.

Anonymous · 27. Mai 2017

Hey Klasse danke an Dennis und Till! @florian Meinst du in die Navbar? Da gabs schon mal was im Forum wenn du das meinst, da habe ich das her:

(Link nur für registrierte Nutzer sichtbar.)

Zitat von Anonymous: ↑

Hallo.. soweit ich mich entsinnen kann...

in die templates/Honeygrid/boxes/box_categories_top.html einfügen

HTML:

<!-- mod Kategoriebild -->
  <img src="{$child_item.data.image}" alt="{$child_item.data.name}"/>
  </br>
<!-- mod Kategoriebild -->

so wie hier

HTML:

                                                    {foreach name=ele_data item=child_item from=$categories_item.children}
                                                                               <li class="{if $child_item.children|@count > 0}dropdown {/if}level-2-child{if $content_data.category_id == $child_item.data.id} active{/if}">
                                                                                        <a href="{$child_item.data.url}" title="{$child_item.data.name}">
<!-- mod Kategoriebild -->
                                                                                               <img src="{$child_item.data.image}" alt="{$child_item.data.name}"/>
                                                                                                </br>
<!-- mod Kategoriebild -->
                                                                                                {$child_item.data.name}
                                                                                        </a>

und bei eigenes CSS im StyleEditor einfügen:

Code:

.navbar-categories > ul {
  > li {
    @media (min-width: $screen-xs-min) {
      position:static !important;
      > ul.dropdown-menu {
        border-bottom:1px solid #00ff00;
        border-left:1px solid #00ff00;
        border-right:1px solid #00ff00;
        > li a {
          @media (min-width: $screen-lg-min){
          > img {        
            height: 60px;
            }
          }
          > img {
            height: 40px;
            }
          border:1px solid #ccc !important;
          border-radius: 5px;
          box-shadow: 0 5px 5px #888;
          &:hover,
          &:focus {
             box-shadow: 0 5px 5px #fff;
             transition: box-shadow .2s ease-in-out;
             border:1px solid #00ff00 !important;
          }
        }
      }
    }
    @media (max-width: $grid-float-breakpoint-max) {
      > ul.dropdown-menu {
        > li a {
          > img, br {
            display:none;
          }
        }
      }
    }
  }
}
@if ($gx-categories-mobile-icons == true) {
  .navbar-categories > .navbar-nav {
    li {
      text-align:center;
    }
  }
}
.navbar-collapse .navbar-categories ul.navbar-nav > li > ul.dropdown-menu {
    overflow-y: auto;
    max-height: $screen-xs-min;
}

glaube das müßte es gewesen sein.. aber sicher bin ich mir leider nicht.. ist schon wieder zu lang her und habe natürlich mal wieder nichts notiert!

Ah doch noch was vergessen:
in der Megadropdown.php habe ich noch die $coo_content_view->set_tree_depth(2) auf 1 geändert!
zu finden in templates/Honeygrid/source/boxes

Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Du musst aber noch die Tiefe beschneiden falls gewünscht, müsste aber alles da drin sein.
Sollte das passen, dann freut es mich ansosten melde dich nochmal bei mir und ich helfe dir da gerne weiter!

Anonymous · 27. Mai 2017

Danke, probier ich mal

Anonymous · 10. Juni 2017

So, hab das jetzt endlich mal in meinem produktiven Shop so umgestellt: www.matchashop.de

Gefällt's oder könnte ich noch was verbessern / verschönern?

Danke für die Hilfe und Unterstützung!

Anonymous · 11. Juni 2017

Das sieht doch gut aus. Ist das Absicht, dass es nur aufklappende Unterkategorien zu Matcha von, Matcha für und Japan Tee gibt?

Anonymous · 11. Juni 2017

Ja. Die anderen Kategorien haben keine Unterkategorien, daher ploppt da nix auf.