Warenkorb-Button Product-Listing mit Select

Thema wurde von Anonymous, 10. August 2017 erstellt.

  1. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    29. Dezember 2016
    Beiträge:
    53
    Danke erhalten:
    9
    Danke vergeben:
    21
    Hallo,
    ich habe einen Warenkorb-Button im Product-Listing eingefügt. Das funktioniert auch soweit.
    Bei manchen Artikel haben wir aber auch Staffelpreise mit festen Verkaufseinheiten. Das haben wir früher immer über eine Select-Box gelöst. Leider funktioniert das im Honeygrid wegen dem Hover-Effekt nicht.
    Wenn ich über die Select-Box einen Wert auswähle wird dieser nicht übernommen. Es ist so wie ob ein zweites Select über dem ersten liegt und dieses beim verlassen des Divs wieder ausgeblendet wird. Wenn ich z.B. 25 Stück wähle dann funktioniert es, da ich das Div nicht verlasse aber wenn ich 300 Stück wähle nicht mehr.
    Ein Beispiel findet ihr hier:
    http://neu.creative-sumico.de/de/ka...mschlaege-1149/din-c6-nobr-114-x-162-mm-nobr/

    Hat jemand eine Erklärung und kann mir sagen wie ich das Problem löse?

    Zur Info: da die Warenkorb Funktion nur über "ein" Mengenfeld funktioniert, kalkuliere ich über eine Javascript Funktion mit onchange bei dem Select und der angezeigten Menge die Menge in dem Hiddenfeld und das funktioniert wegen dem Effekt auch nicht.
    Wenn ich den Hovereffekt abschalte geht es ohne Probleme aber ich möchte diesen gerne aktiv lassen.

    Ich hoffe mir kann jemand helfen oder hat vielleicht eine andere Lösung wie ich es umsetzen könnte?
     
  2. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    29. Dezember 2016
    Beiträge:
    53
    Danke erhalten:
    9
    Danke vergeben:
    21
    Ich habe eine Lösung für mich gefunden!
    Es wird mit der Flyover wirklich ein Layer über den bestehenden Artikel gesetzt.
    Also habe ich den Flyover deaktiviert:

    .product-container.flyover{
    visibility: hidden;
    }
    und anschließend den Hover-Effekt nachgestellt.


    .product-container:hover {
    display:block;
    z-index:1000;
    box-sizing:content-box;
    margin:-15px;
    padding:15px;

    background-color:#fff;
    border-bottom-color:transparent;
    border-right-color:transparent;
    border-bottom:0px;

    box-shadow:0 0 25px rgba(0, 0, 0, .35);
    border-radius:2px;
    }
    .product-container:hover .inside{
    margin-right:15px;
    margin-left:15px;
    }

    Der Nachteil ist, dass die weiteren Produktfotos nicht angezeigt werden. Deswegen mache ich es nur bei den Artikeln die eine Selectbox haben. Da ist es für mich auch nicht so schlimm.
    Vielleicht sucht ja irgendwann jemand mal nach dem Problem und hilft die Antwort ;)