gelöst In-den-Warenkorb- Button nicht deaktivieren

Thema wurde von sirtet, 10. April 2023 erstellt.

  1. sirtet
    sirtet Erfahrener Benutzer
    Registriert seit:
    4. Juli 2012
    Beiträge:
    1.131
    Danke erhalten:
    89
    Danke vergeben:
    90
    #1 sirtet, 10. April 2023
    Ich bekomme immer wieder Anrufe von Kunden, dass der Button "in den Warenkorb" nicht funktioniere...
    Sie übersehen jeweils, dass erst eine Option gewählt werden müsste.

    Bin ich damit alleine? Übersehe ich eine Option dazu die es schon gibt?
    Statt den Button auszugrauen und deaktivieren sollte er meiner Meinung nach eine Meldung auslösen wie "Bitte erst [Option(en) X] wählen".
     
  2. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    11. Juli 2021
    Beiträge:
    455
    Danke erhalten:
    215
    Danke vergeben:
    166
    #2 Anonymous, 10. April 2023
    Zuletzt bearbeitet: 10. April 2023
    Man könnte das vermutlich mit einem Script sehr gut lösen.

    Davon hab ich aber keine Ahnung und hab es bei mir mittels CSS gelöst.

    Sieht dann so aus

    Vorher

    upload_2023-4-10_11-0-19.png

    Nachher

    upload_2023-4-10_11-0-51.png


    Code:
    .page-product-info .btn.btn-buy.inactive::after {
  content: "Zuerst Option wählen!";
  display: block;
  background: white;
  color: red;
  border: 1px solid red;
  border-radius: 6px;
  padding: 5px;
  margin-top: 5px;
}

.page-product-info .btn.btn-buy.inactive {
  opacity: 1 !important;
}

    Oder den folgenden Code nutzen, wenn auf Desktop der Hinweis erst erscheinen soll, wenn mit der Maus auf den Button gesteuert wird, während mobil der Hinweis ohne Hover angezeigt wird.

    Code:
    @media (max-width: 997px) {
.page-product-info .btn.btn-buy.inactive::after {
  content: "Bitte Auswahl treffen";
  display: block;
  background: white;
  color: red;
  border: 1px solid red;
  border-radius: 6px;
  padding: 5px;
  margin-top: 5px;
}}
@media (min-width: 998px) {
.page-product-info .btn.btn-buy.inactive:hover::after {
  content: "Bitte zuerst Auswahl treffen";
  display: block;
  background: white;
  color: red;
  border: 1px solid red;
  border-radius: 6px;
  padding: 5px;
  margin-top: 5px;
}}

.page-product-info .btn.btn-buy.inactive {
  opacity: 1 !important;
}
     
  3. markus_gernandt
    markus_gernandt Erfahrener Benutzer
    Registriert seit:
    25. Mai 2018
    Beiträge:
    94
    Danke erhalten:
    12
    Danke vergeben:
    34
    #3 markus_gernandt, 10. April 2023
    Wow - eine tolle Idee.... Haben ähnliche Probleme mit Kunden... Wo muss ich den Code hinzufügen?
    Danke
     
  4. sirtet
    sirtet Erfahrener Benutzer
    Registriert seit:
    4. Juli 2012
    Beiträge:
    1.131
    Danke erhalten:
    89
    Danke vergeben:
    90
    #4 sirtet, 11. April 2023
    Sauber. Hast du einen Link zu deinem Shop, wo man das in Live sehen kann?
     
  5. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    5. Mai 2022
    Beiträge:
    2.335
    Danke erhalten:
    1.019
    Danke vergeben:
    389
    #5 Anonymous, 21. März 2024
    Ich würde diesen Code auch sehr gerne in meinem Shop verwenden. Aber mit der Produktansicht "links ausrichten" funktioniert es leider nicht.
    Ich teste mich da jetzt schon ewig durch. Warum klappt es bei der klassischen Ansicht aber bei "links ausrichten" nicht?
    Bitte um Hilfe :oops:
     
  6. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    5. Mai 2022
    Beiträge:
    2.335
    Danke erhalten:
    1.019
    Danke vergeben:
    389
    #6 Anonymous, 22. März 2024
    jetzt habe ich herausgefunden, dass bei der Produktansicht "links ausrichten" der "In den Warenkorb Button" kein Button ist, sondern "input". Und bei "input" funktioniert ::after und ::before nicht.
    Dies ist die HTML Zeile. Gibt es eine andere Möglichkeit den Text einzufügen?
     
  7. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    5. Mai 2022
    Beiträge:
    2.335
    Danke erhalten:
    1.019
    Danke vergeben:
    389
    #7 Anonymous, 22. März 2024
    Dann beende ich hier meinen Monolog. ;)
    Bin in meiner üblichen Weise zum Ziel gekommen. Quick and dirty per Bildhintergrund mit :hover. Ganz so quick ging es zwar nicht. Aber hab wieder was gelernt...
     
  8. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    11. Juli 2021
    Beiträge:
    455
    Danke erhalten:
    215
    Danke vergeben:
    166
    #8 Anonymous, 22. März 2024
    Sorry, ich hatte mir das heute Nacht mal angeschaut, habe aber keine Lösung gefunden. Aber Du hast es echt sehr gut gelöst. Habs mir eben angeschaut, sieht gut aus!
     
  9. Anonymous
    Anonymous Aktives Mitglied
    Registriert seit:
    31. Juli 2015
    Beiträge:
    41
    Danke erhalten:
    9
    Danke vergeben:
    13
    #9 Anonymous, 1. September 2025
    Sorry fürs Thread ausgraben ;)

    Wollte das Ganze in meinen Shop übernehmen, dabei ist mir folgendes Problem aufgefallen: (auch ohne obigen CSS Code)
    Wenn ein Artikel mehrere Varianten hat (z.B. Größe und Farbe), dann ist der Warenkorb-Button ab dem Moment aktiv, sobald eine der Varianten gewählt wurde. In den Warenkorb legen ist aber logischerweise nicht möglich, da ja noch nicht alle Varianten ausgewählt wurden.

    Kennt jemand dieses Fehlverhalten, und weiß, wie man es korrigiert?

    GX 4.9.4.2