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.120
    Danke erhalten:
    88
    Danke vergeben:
    89
    #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:
    404
    Danke erhalten:
    172
    Danke vergeben:
    137
    #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.120
    Danke erhalten:
    88
    Danke vergeben:
    89
    #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:
    1.759
    Danke erhalten:
    704
    Danke vergeben:
    254
    #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:
    1.759
    Danke erhalten:
    704
    Danke vergeben:
    254
    #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:
    1.759
    Danke erhalten:
    704
    Danke vergeben:
    254
    #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:
    404
    Danke erhalten:
    172
    Danke vergeben:
    137
    #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!