Kategorien und Filter ausblenden

Deutsch Spreadshop
,
#1

Hi,

weiß vielleicht jemand, wie man auf der Übersichtsseite (die mit den Produkten zu einem Design) die Anzeige der Kategorien (Männer/Frauen etc. am linken Bildrand) und die “Aktive Filter” Anzeige ausblenden kann?

Ich halte beides, zumindest in meinen Shops, für vollkommen unnötig, grafisch schlecht gelöst und noch dazu eher verwirrend.

Leider ist der “Shoppen” - Button immer noch nicht geändert worden (“Home” wäre meines Erachtens deutlich besser), aber immerhin gelangt man jetzt durch einen Klick auf den Header auf die Startseite.

#2

Keiner ne Idee?

#3

Schade, trotzdem vielen Dank.

#4

Hi! Du meinst also im Grunde die komplette linke Sidebar?

.SprdMain .sprd-filterpane {
display: none;
}

Gruß David

#5

Ja, Super! Mensch, jetzt nur noch diese komische Filteranzeige weg und ich bin total happy!

1 Like
#6

Be happy :slight_smile:

.SprdMain .sprd-department-filter {
display: none;
}

Wenn du in deinem Browser auf einer Website ein Objekt rechtsklickst, dann hast Du im Kontextmenü die Option “Untersuchen” oder “Element untersuchen” oder “Element-Informationen”. Das sich anschließend öffnende Fenster markiert automatisch das gesuchte Element im HTML-Code und zeigt dir rechts dazu den dazugehörigen CSS-Code an, den Du dort sogar schon bearbeiten und kopieren kannst. So findest Du immer alles was Du brauchst, um die CSS eines Elements nach Belieben zu verändern.

Gruß David

1 Like
#7

Hammer! Funktioniert zwar irgendwie nicht, klingt aber einleuchtend. Muss ich irgendwas beachten beim Eintrag in die CSS-Seite? Die Sidebar ist weg, aber der Filterkram will nicht weichen…
Hab das einfach so in die Seiten CSS kopiert:

.SprdMain .sprd-filterpane {
display: none;
}

.SprdMain .sprd-department-filter {
display: none;
}

Sorry, ich verstehe echt Null davon…

#8

Probier noch ein !important ranzuhängen, dann müßte es greifen.

.SprdMain .sprd-department-filter {
display: none !important;
}

Kein Problem, jeder fängt mal an und es ist wirklich chinesisch am Anfang. Ist aber einfacher als scheint, wirst du noch merken.

Gruß David

#9

Wir hatten ein Blog-Eintrag über CSS-Kniffe:

Dies ist auch drin.

#10

Ah, prima. Danke.

2 Likes
#11

konnte die sidebar auch erfolgreich ausblenden, allerdings sieht die produktdarstellung jetzt was komisch aus wenn ich über die home seite auf eins meiner designs klicke… es werden nur 3 produkte anstatt 4 produkte in einer reihe gezeigt. finde die ansicht mit 4 produkten allerdings besser…

daher habe ich die linke sidebar wieder eingeblendet, jedoch stört es was, dass dort trotzdem noch die kategorien wie arbeitsbekleidung, bioprodukte,… angezeigt werden. habe diese kategorien im drop-down menu entfernt bekommen und in der Sidebar sind sie halt noch da…

Ist das ein anderer CSS Befehl? Kann da wer weiterhelfen, wie ich die einzelnen kategorien entfernen kann?

#12

Hallo @User_EU-3b8ef47e-59c1-492e-9cd2-ab9668a12606 User_EU

Blende die Sidebar wieder aus, denn eine leere Sidebar macht wenig Sinn.

Anschließend fügst du noch dieses CSS hinzu und es werden wieder 4 Produkte nebeneinander angezeigt. Bei kleineren Bildschirmen redzuiert sich die Anzahl dann auf 3 oder mobil auf 2.

.SprdMain .sprd-product-list-item {
width: calc(25% - 20px) !important;
}

@media(max-width: 768px){
.SprdMain .sprd-product-list-item {
width: calc(33% - 20px) !important;
}
}

@media(max-width: 480px){
.SprdMain .sprd-product-list-item {
width: 50% !important;
}
}

Solltest du es dennoch so haben wollen mit aktiver Sidebar aber ohne Kategorien, dann sag Bescheid und dann können wir auch die Kategorien ausblenden. Aber dann hättest Du immer links eine leere Sidebar :wink:

Gruß David

#13

Danke David, das werde ich bei nächster Gelegenheit mal ausprobieren. Irgendwie schon schade, dass wir uns immer wieder selbst behelfen müssen, wenn es um so etwas Unnötiges wie z.B. diese überflüssige Sidebar geht. Aber zum Glück gibt es hier ja ein paar Leute, die sich auskennen, sonst wär zumindest ich vollkommen aufgeschmissen.

Hat vielleicht jemand eine Idee, wie man den “Shoppen”-Button in “Home” umbenennen könnte?

#14

Zuerst Shoppen “unsichtbar” machen:

#sprd-view-list {
color: transparent !important;
position: relative;
}

Dann mit “Home”-Text ersetzen

#sprd-view-list::after {
content: “Home”;
color: #000000;
position: absolute;
width: 100%;
text-align: center;
}

Das dürfte ausreichen.

Gruß David

#15

Tausend Dank!