gelöst Mengeneingabefeld ändern

Willkommen im Forum.
Diese Änderung geht nur über eigene css, Gambio hat aber ab ca. v3.12.x.x dem Warenkorb einen Javascript verpasst:
"1 Artikel in den Warenkorb gelegt", so das man den Button "In den Warenkorb" mit Maus-Rechtsklick nicht mehr untersuchen und anpassen kann, sondern der Shop sich dabei aufhängt. Kommst du mit css klar oder ist das Neuland?

 

Habe ich schon verstanden, lade mal testweise den Ordner GXModules in den Testshop.
Und dann beide oberen Caches im Adminbereich/Cache leeren.

 

Zufällig jemand eine aktuelle Lösung für Themes/Malibu am Start?

Sitze auf Basis der hier zur Verfügung gestellten Datei (Danke an Postel!) leider immer noch dran und bekomme es im aktuellen Theme nicht so wie gewünscht hin.

Das hier wäre das angestrebte Resultat:

 

Ich habe das so seit langer Zeit schon (nur mit CSS), ohne die GXModules Datei von Postel:


Wäre gut zu wissen, wie das aktuell bei dir aussieht, damit ich schauen kann, welche CSS Anpassung notwendig ist.
Hast Du einen Link zum Shop?

 

Oh, das sieht wunderbar aus.
Magst du mir den CSS Code zur Verfügung stellen? Dann kann ich das als Ausgangslage für meine Anpassungen verwenden.
Reine CSS Lösung wäre natürlich super.
Aktuell sind keine Änderungen von uns an dem Button vorgenommen und Standard Malibu.

 

@DrGuu, hab den folgenden Code gerade in einem Testshop getestet, und das sieht so aus:

Müsste also auch bei dir so aussehen, wenn sonst noch nichts an den Elementen geändert wurde.

Code:

.page-product-info .fa.fa-minus, .page-product-info .fa.fa-plus {
    font-size: 10px;
    color: #5c5c5c !important;
    vertical-align: top;
  padding-top: 6px;
}
.page-product-info .input-number .btn-plus, .page-product-info .input-number .btn-minus {
    padding-right: 5px;
    padding-left: 5px;
    background-color: #ffffff;
    transition: background-color 0.2s ease-in-out;
}
.page-product-info .input-number .btn-plus:hover, .page-product-info .input-number .btn-minus:hover {
    background-color: #f2f2f2;
}
.page-product-info .input-number .btn-minus {
    border-radius: 6px 0 0 6px;
    border: 1px solid silver;
    border-right: none;
}
.page-product-info .input-number .btn-plus {
    border-radius: 0 6px 6px 0;
    border: 1px solid silver;
    border-left: none;
}
.page-product-info .input-number #attributes-calc-quantity {
    min-width: 20px;
    font-size: 14px;
    border: 1px solid silver;
    border-right: none;
  border-left: none;
    text-align: center;
}
.page-product-info .product-info-details .input-number {
    width: 22%;
    padding-right: 10px !important;
}
.page-product-info .input-number .form-control {
  padding-left: 1px;
  padding-right: 1px;
}
.product-info .product-info-details .button-container {
  padding: 0 15px 0 0;
  display: flex;
}
.product-info .product-info-details .button-container .btn-buy.btn-lg {
    padding: 12px 16px 12px 50px;
    height: 45px;
}

Zusatz:
Zwischen 991px & 1200px kann es schon eng werden. Deswegen würde ich empfehlen, die Elemente dann wieder untereinander anzuzeigen:

Am besten mal selbst testen mit der Breite, ob alles passt. Sonst einfach wie unten anpassen.

Code:

@media (min-width: 991px) and (max-width: 1200px) {
.product-info .product-info-details .button-container {
    display: block;
    padding: 0 15px;
}
.page-product-info .product-info-details .input-number {
    width: 100%;
    padding-right: 15px !important;
}}

 

Das ist perfekt! Danke dir vielmals für die Bereitstellung.
Sieht schon auf Anhieb sehr gut aus

 

Sehr gerne