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".
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 Nachher 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; }
Wow - eine tolle Idee.... Haben ähnliche Probleme mit Kunden... Wo muss ich den Code hinzufügen? Danke
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
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?
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...
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!