Umzug der Artikel-Filter-Box auf Main-Inside

Thema wurde von Cyrus (LeGong), 4. Dezember 2016 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Dezember 2020
    Beiträge:
    126
    Danke erhalten:
    52
    Danke vergeben:
    12
    #321 Anonymous, 3. März 2021
    Zuletzt bearbeitet: 3. März 2021
    Verstehe ich jetzt nicht, es sind doch alle Informationen da die ausgewählt sind.
    Ich bin für mehr Übersicht bei der Produkt-Listing und gestalte die Seiten so, das man ohne langes scrollen die ersten Produkte sieht. Bei den Shops mit Filter oben die ich so betrachtet habe, sieht man z.B. auf dem Desktop nach Filterauswahl keine Produkte sondern den Filter mit Filter-Auswahl und die Kategoriebeschreibung. Man muss lange scrollen um zu den gewählten Artikeln zu kommen. Über hässlich lässt sich streiten.
    Ich habe dabei auch auf Mobile Ansicht geachtet, da die Kunden die per Handy bestellen immer mehr zunimmt.

    Nachtrag:
    für die mobile Ansicht habe ich erstmal im Testshop den Filter bei Mobile (Modal-Fenster) genutzt. Schau dir das mal an, wenn du deine Version mit Handy betrachtest, drücke mal auf den Filter <i class="fa fa-filter"></i>
     

    Anhänge:

  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Dezember 2020
    Beiträge:
    126
    Danke erhalten:
    52
    Danke vergeben:
    12
    Habe die mobile Anzeige mal als gif angehangen.
    Dabei nutze ich von Gambio vorhandene mobile Filteranzeige, habe nur den Botton verändert.
     

    Anhänge:

  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.696
    Danke erhalten:
    524
    Danke vergeben:
    403
    @Cyrus (LeGong)
    Es gibt ein Css Problem mit der Klasse .form-control.
    Durch die festen Pixelbreiten werden zahlreiche Smartphoneansichten "verhunzt".
    Code:
    @media (min-width: 360px){.form-control {width:300px;}}
    @media (min-width: 375px){.form-control {width:315px;}}
    @media (min-width: 376px){.form-control {width:335px;}}
    @media (min-width: 414px){.form-control {width:350px;}}
    @media (min-width: 667px){.form-control {width:300px;}}
    @media (min-width: 735px){.form-control {width:334px;}}
    @media (min-width: 740px){.form-control {width:336px;}}
    @media (min-width: 768px){.form-control {width:340px;}}
    @media (min-width: 1024px){.form-control {width:300px;}}
    @media (min-width: 1280px){.form-control {width:300px;}}
    @media (min-width: 1338px){.form-control {width:324px;}}
    upload_2021-3-4_22-14-43.png

    upload_2021-3-4_22-15-19.png

    upload_2021-3-4_22-16-55.png

    Ich glaube, .form-control für die Filter sollte eine eigene Css Klasse bekommen.
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Dezember 2020
    Beiträge:
    126
    Danke erhalten:
    52
    Danke vergeben:
    12
    Habe bei mir das präziser angegeben:
    #filterbox-container .form-control{
    .....}
    und das auch für alle anderen, die auf andere übergreifen könnte.
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.696
    Danke erhalten:
    524
    Danke vergeben:
    403
    Super. Funktioniert. Vielen Dank!
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Dezember 2020
    Beiträge:
    126
    Danke erhalten:
    52
    Danke vergeben:
    12
    Da sind noch einige css Angaben in der filter.css die präziser angegeben werden müssen.
    Beispiel:
    .filter-form-control option
    #filterbox-container form fieldset
    #filterbox-container form fieldset:first-of-type
     
  7. Cyrus (LeGong)

    Cyrus (LeGong) Erfahrener Benutzer

    Registriert seit:
    21. Dezember 2011
    Beiträge:
    1.382
    Danke erhalten:
    314
    Danke vergeben:
    162
    Hallo Jan,
    in solche Fällen es reicht, wenn man wie Gerd schreibt die "id-Selector" von dem übergeordneten "<div>" für eine präzisere Angabe verwendet. Natürlich kann man auch die Methode von Gerd verwenden. "Allgemeine Bootstrap-Selektoren" wie:
    Code:
    col-xs-
    col-sm-
    col-md-
    col-lg-
    
    Die sind auch gut, decken halt größere Bereiche als meine:
    Code:
    @media (min-width: 360px){.form-control {width:300px;}}
    @media (min-width: 375px){.form-control {width:315px;}}
    @media (min-width: 376px){.form-control {width:335px;}}
    @media (min-width: 414px){.form-control {width:350px;}}
    @media (min-width: 667px){.form-control {width:300px;}}
    @media (min-width: 735px){.form-control {width:334px;}}
    @media (min-width: 740px){.form-control {width:336px;}}
    @media (min-width: 768px){.form-control {width:340px;}}
    @media (min-width: 1024px){.form-control {width:300px;}}
    @media (min-width: 1280px){.form-control {width:300px;}}
    @media (min-width: 1338px){.form-control {width:324px;}}
    
    Ich habe die Bootstrap-Selektoren auch am Anfang getestet. Mir hat es halt nicht gefallen, da die bei Smartphones, egal ob Hoch-Format oder Quer-Format, pro Zeile nur einen Filter-Feld anzeigen.
    Da ich momentan mehr als mir lieb ist arbeiten muss, habe ich wenig Zeit die evtl. Konflikte zu kontrollieren. Daher die Codes sind nur als Hinweis zu betrachten, wie man ungefähr mit der Problematik umgehen muss. Den Rest muss wie Gerd jeder selbst anpassen.

    Viele Grüße und Erfolgswünsche Cyrus
     
  8. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.696
    Danke erhalten:
    524
    Danke vergeben:
    403
    @Cyrus (LeGong)
    Problematisch ist doch zB aber der Warenkorb auf dem Smartphone, der plötzlich x mal so breit ist. Sieht man an dem horizontalen Scrollbalken im ersten Bild.
    Und das das Eingabefeld für die Emailadresse beim Newsletter da so unschön nach rechts rauslungert, sieht auch nicht schön aus.
     
  9. Cyrus (LeGong)

    Cyrus (LeGong) Erfahrener Benutzer

    Registriert seit:
    21. Dezember 2011
    Beiträge:
    1.382
    Danke erhalten:
    314
    Danke vergeben:
    162
    Immer noch? Oder vor der Änderung?
     
  10. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.696
    Danke erhalten:
    524
    Danke vergeben:
    403
    Vor der Änderung.
    Das sind ja Sachen, da schaut man erstmal nicht hin. Ich hatte mich dann nur gewundert, warum die Eingabefelder auf einmal alle so "aus der Form" sind.
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Dezember 2020
    Beiträge:
    126
    Danke erhalten:
    52
    Danke vergeben:
    12
    Das hatten wir schon mal weiter oben, so ist das css von @Cyrus (LeGong) richtig:
    Code:
    @media (min-width: 360px){#filterbox-container .form-control {width:300px;}}
    @media (min-width: 375px){#filterbox-container .form-control {width:315px;}}
    @media (min-width: 376px){#filterbox-container .form-control {width:335px;}}
    @media (min-width: 414px){#filterbox-container .form-control {width:350px;}}
    @media (min-width: 667px){#filterbox-container .form-control {width:300px;}}
    @media (min-width: 735px){#filterbox-container .form-control {width:334px;}}
    @media (min-width: 740px){#filterbox-container .form-control {width:336px;}}
    @media (min-width: 768px){#filterbox-container .form-control {width:340px;}}
    @media (min-width: 1024px){#filterbox-container .form-control {width:300px;}}
    @media (min-width: 1280px){#filterbox-container .form-control {width:300px;}}
    @media (min-width: 1338px){#filterbox-container .form-control {width:324px;}}
    
     
  12. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.696
    Danke erhalten:
    524
    Danke vergeben:
    403
    Ich weiß. Darum ging es ja auch nicht mehr.
     
  13. dmun

    dmun Erfahrener Benutzer

    Registriert seit:
    2. Juni 2019
    Beiträge:
    258
    Danke erhalten:
    25
    Danke vergeben:
    5
    Hallo,
    ich habe mir die Lösung aus Beitrag #296 von Anonymous auf GX 3.14 installiert und diese Lösung funktioniert problemlos im Testshop.
    Gibt es bei dieser Anpassung noch eine einfache Möglichkeit, dass die einzelnen Dropdowns für die Filterauswahl neben einander sind und nicht alle unter einander ? In der ursprünglichen Version für die Templates waren die Dropdowns ebenfalls neben einander, was mir etwas besser gefällt.

    Grüße, Dirk
     
  14. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Dezember 2020
    Beiträge:
    126
    Danke erhalten:
    52
    Danke vergeben:
    12
    Da gibt es zwei Lösungen, eine von @Cyrus (LeGong) Betrag: #327 per css,
    bei meiner Lösung musst du in der box_filter_form_content.html mit Notepad++ in Zeile col-sm- oder col-lg... anpassen:
    <div class="filter-box col-xs-12 col-sm-6 col-lg-3 ........... .
    Beispiel:
    (Link nur für registrierte Nutzer sichtbar.)
     
  15. dmun

    dmun Erfahrener Benutzer

    Registriert seit:
    2. Juni 2019
    Beiträge:
    258
    Danke erhalten:
    25
    Danke vergeben:
    5
    Da tut sich nix bei mir. Ich habe jetzt mit verschiedenen Werte gespielt aber alles ohne Effekt.
    Darf ich fragen welche Werte Du bei Dir eingestellt hast um die gezeigte Aufteilung zu erreichen ? col-xs-12 müsste doch einfach halbiert werden, oder ?

    Grüße, Dirk
     
  16. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Dezember 2020
    Beiträge:
    126
    Danke erhalten:
    52
    Danke vergeben:
    12
    Mal wieder schnell und kurz das Bootstrap System erklären:
    Da gibt es 12 Spalten,
    col-xs ist für Handy (bis 767px),
    col-sm ist für Tablets (768-991px),
    col-md ist kleine Dektops (992--1199px),
    col-lg ist für Desktop (>1200px).

    col-xs-12 ist auf dem Handy volle Breite,
    col-xs-6 ergibt auf dem Handy 2 Spalten,
    col-lg-6 ergibt auf dem Desktop 2 Spalten.
    col-lg-4 ergibt auf dem Desktop drei Spalten,
    col-lg-3 ergibt auf dem Desktop vier Spalten.
    Schau mal im Internet unter bootstrab.
     
  17. Anonymous

    Anonymous Aktives Mitglied

    Registriert seit:
    20. November 2019
    Beiträge:
    39
    Danke erhalten:
    0
    Danke vergeben:
    9

    Hallo @Gerd_P Mega gute Umsetzung im moertel-schlauch.de Shop!
    Finde ich klasse, dass die linke Spalte in deiner Variante vorhanden bleibt und auch optisch macht das echt was her.
    Ich wünschte, ich wüsste, wie ich das im Malibu Theme so hinbekomme wie im genannten Shop.
     
  18. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.696
    Danke erhalten:
    524
    Danke vergeben:
    403
    1. Im genannten Shop ist es kein Malibu Theme sondern Honeygrid. Das sind 2 unterschiedliche Themes. Das eine kann nicht aussehen wie das andere.
    2. Falls du die Boxen meinst. Starte den Styledit4 (Admin: Inhalt - Theme bearbeiten im Admin) und suche dir die Boxen aus, die du angezeigt haben willst. Man kann die dort auch stylen und Boxen mit eigenem Inhalt erstellen.
     
  19. Anonymous

    Anonymous Aktives Mitglied

    Registriert seit:
    20. November 2019
    Beiträge:
    39
    Danke erhalten:
    0
    Danke vergeben:
    9
    Mir ist klar, dass Gerd in dem Shop Honeygrid nutzt - deswegen habe ich ja extra geschrieben, ich wünschte ich wüsste, wie ich das im Malibu Theme umsetzen könnte ;)

    Wie ich Boxen aktiviere, erstelle und style ist mir auch klar. Nur möchte ich eben die Filterbox wie in Gerd's Beispiel lieber unterhalb der Kategoriebeschreibung (main-inside) statt links in der Sidebar.
     
  20. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    33.452
    Danke erhalten:
    10.372
    Danke vergeben:
    1.495
    Das geht in Malibu genauso wie im Honeygrid.- Theme