gelöst Filterauswahl Farben als kleines Bild anzeigen

Thema wurde von rainer_amend, 30. April 2024 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.874
    Danke erhalten:
    782
    Danke vergeben:
    294
    #21 Anonymous, 8. Juni 2024
    Zuletzt bearbeitet: 22. August 2024
    Das geht alles nicht ohne "basteln".
    Wenn dann müsste das komplett programmiert werden. Wenn du keinen Cloudshop hast, kann dir da eine Agentur bestimmt etwas programmieren.


    Ich habe gerade nochmal ein bisschen rumprobiert.
    Mit diesen CSS Codes sieht es glaube ganz gut aus.
    Aber wie gesagt, das ist wirklich nur ein "basteln". :)

    Wichtig wäre, dass du die Texte entfernst. Also nicht blau, lila usw schreiben. Sondern lieber nur einen Punkt. Den machen wir dann per CSS transparent, also unsichtbar. Diesen Teil bitte vergessen. Ich habe den Code angepasst.

    Diese Codes brauchst, damit das Wort "Farben" über den Checkboxen stehen bleibt, und nicht in der selben Zeile steht:
    Code:
    @media (max-width: 768px){
    .box-filter fieldset .option-heading{
    margin-right: 650px !important;
    }}
    
    .box-filter fieldset .option-heading{
    margin-right: 140px;
    }
    

    Dieser Code spricht das fieldset an, in dem filter_24_ vorhanden sind. Ich habe nachgeschaut, deine Farben haben alle filter_24_ .. bekommen (hier nichts verändern)

    Code:
    fieldset:has(label[for^="filter_24_"]) {
        display: flex;
        flex-wrap: wrap;
    }
    


    Dieser Code spricht alle checkboxen an die ein filter_24_ beinhalten.
    Code:
    .checkbox:has(label[for^="filter_24_"]) {
       font-size: 0px;
       margin-right: 8px;
    }

    Diese Codes kannst du genau so in dein eigenes CSS speichern. Nichts daran verändern.
     
  2. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    218
    Danke erhalten:
    13
    Danke vergeben:
    56
    Moin, das sieht doch sehr gut aus, vielen Dank dafür.
    Da braucht man keine externe Agentur.

    Mit diesem Code könnte man ja auch Bilder für Größen platzieren. Wie zum Beispiel: [36] als Bild folge.

    Kann man in den Codes eine Farbinfomation eingeben damit man weiß welche Farbe das ist:

    .checkbox label[for="filter_24_76"] .single-checkbox {
    # Grün
    background-color: #20a5d1;
    height: 30px;
    width: 30px;
    }
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.874
    Danke erhalten:
    782
    Danke vergeben:
    294
    wie meinst du genau?

    Das machst du so:

    Code:
    .checkbox label[for="filter_24_76"] .single-checkbox {
    background-color: #20a5d1;  /* grün */
    height: 30px;
    width: 30px;
    Ich habe beim ersten Code im Beitrag #21 das !important vergessen. Das musst noch nachtragen, sonst passt es mobil nicht.
     
  4. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    218
    Danke erhalten:
    13
    Danke vergeben:
    56
    Ich meine...

    [​IMG] [​IMG] [​IMG] [​IMG]
    [​IMG]

    infolge...


    statt... das ginge dann schon in Richtung SW.
    upload_2024-6-9_10-55-22.png

    Der Vorteil wäre natürlich, dass man nicht soweit nach unten scrollen müsste für einen Klick und würde auch optisch vielmehr hermachen.

    Warum gibt es hierfür keine Lösung von Gambio direkt.
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.874
    Danke erhalten:
    782
    Danke vergeben:
    294
    Da muss ich leider passen. Sorry. :)

    Das mit den Farben passt jetzt soweit?
     
  6. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    218
    Danke erhalten:
    13
    Danke vergeben:
    56
    Farben passen, danke.
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.874
    Danke erhalten:
    782
    Danke vergeben:
    294
     
  8. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    218
    Danke erhalten:
    13
    Danke vergeben:
    56
    Jetzt gibt es dennoch ein Problem, wenn die Farben festgelegt sind und man neue Produkte einfügt und diese Produkte neue oder schon vorhandene Farben im Produkte unter...

    upload_2024-6-9_14-21-0.png

    eingeben möchte, findet man die vorhandene Farbe und auch die neue Farbe nicht. Was klickt man dann an wenn nur der [punkt] . sichtbar ist?
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.874
    Danke erhalten:
    782
    Danke vergeben:
    294
    #29 Anonymous, 9. Juni 2024
    Zuletzt bearbeitet: 22. August 2024
    ich habe eine andere Idee:

    suche bei den CSS Codes diesen Code:

    Code:
    .checkbox:has(label[for^="filter_24_"]) {
        color: transparent;
    }
    und ersetze ihn mit diesem:
    Code:
    .checkbox:has(label[for^="filter_24_"]) {
        font-size: 0px;
        margin-right: 8px;
    }
    Dann kannst du die Farben ganz normal schreiben und musst keinen Punkt schreiben. (Diesen Teil habe ich im Beitrag #21 schon geändert)
     
  10. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    218
    Danke erhalten:
    13
    Danke vergeben:
    56
    Su sieht es gut aus, und die Punkte, die oben im Filter stehen kann man mit der Farbschrift gut lesen.

    Statt 1 | 2 steht dann oben Blau < Gelb etc.

    upload_2024-6-9_19-3-27.png

    Und wenn nichts angeklickt ist, steht da auch nichts. So wie es sein soll.

    Vielen Dank nochmal, ich werde demnächst mal alle eintippen.
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.874
    Danke erhalten:
    782
    Danke vergeben:
    294
    Aber das hier musst noch machen. Sonst passt es mobil nicht.
     
  12. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    218
    Danke erhalten:
    13
    Danke vergeben:
    56
    Beitrag 21

    Diesen Code...

    .checkbox:has(label[for^="filter_24_"]) {
    color: transparent;
    }

    muss wie rein oder im anderen Code von mehreren?
     
  13. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.874
    Danke erhalten:
    782
    Danke vergeben:
    294
    Der erste Code im Beitrag 21 hat jetzt ein !important;
    Das habe ich nachträglich hinzugefügt.

     
  14. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    218
    Danke erhalten:
    13
    Danke vergeben:
    56
    Perfekt, habe es eingegeben.

    Vielen Dank und alle Daumen nach oben :)
     
  15. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.874
    Danke erhalten:
    782
    Danke vergeben:
    294
    Sehr gerne. Freut mich das es geklappt hat.
     
  16. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    218
    Danke erhalten:
    13
    Danke vergeben:
    56
    Da ja alle Bezugspunkte für Größen auf einer Größentabelle liegen kann man doch alle Größen in Bildern auch rechts nebeneinander wie Farben platzieren - könnte ich dafür auch wie die Farben als Größen definieren?

    Der CSS Code würde doch nahezu auch so eingetragen werden oder nicht?

    Was meint ihr, würde das gehen bzw. was wäre zu beachten?

    <input type="checkbox" id="filter_22_34" name="filter_fv_id[22][]" value="34" data-single_checkbox="" checked="checked" style="position: absolute; left: -100000px;">
     
  17. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    218
    Danke erhalten:
    13
    Danke vergeben:
    56
    @Michaela Klaiber

    Ich muss mich nochmal bedanken für deine Unterstützung.
    Für mich, sind ist die Filtereinstellung zwar nicht schlecht im Bereich der Farben, aber löst nicht das komplette Problem mit den Farben, Größen und weiteren Variationen.

    Ebenfalls ist der Filter, der derzeit zur Verfügung steht, ein Horror. Alles muss Stepp bei Stepp eingetragen werden, welches eigentlich im System automatisch erkennt werden sollte, so wie ich es jetzt habe.

    Ich könnte noch einiges Erzählen, was mir nicht gefällt und was geändert werden sollte. Aber ist nicht meine Baustelle ;).

    Vielen Dank nochmal und gute Verkäufe.