Mengenbuttons im Produkttemplate

erstellt: 6. April 2017, zuletzt geändert: 6. April 2017 unter Tutorials

Mit der wpShopGermany-Version 3.12.4 wurde eine grafische Veränderung im Produkttemplate vorgenommen. Es wurden Buttons am Mengenfeld integriert, die es ermöglichen, die Mengenanzahl zu erhöhen / verringern, ohne eine neue Menge in das Inputfeld eintragen zu müssen. Für eine mobile Nutzung des Shops auf dem Smartphone oder dem Tablet ist diese Bedienbarkeit schon bekannt. Aus Kompatibilitätsgründen wurden diese Buttons vorsorglich ausgeblendet.

Aktuell hält sich die Beliebtheit dieser Neuerung in Grenzen und für den Fall, dass diese Buttons gewünscht sind, zeigen wir in diesem Tutorial einmal, wie schnell und unkompliziert die Buttons angezeigt werden können.

Abhängig vom Theme erscheinen die mitgelieferten Buttons passend oder unpassend. Um die Buttons im Produkt anzuzeigen, ist es ratsam, das Ganze mittels css-Regeln einfach einzublenden. Hierfür öffnet man die frontend.css unter wp-content/plugins/wpshopgermany/views/css. Dort findet man folgenden Code:

.wpsg_basket_updown_buttons a { display:none;}

Damit wurden die Darstellungen des Plus- und des Minusbuttons einfach ausgeblendet. Entfernt man nun diese Zeile, werden die Buttons im Produkttemplate neben dem Eingabefeld für die Mengeneingabe angezeigt.

Wem die Buttons aus funktioneller Sicht zusagen, hat die Möglichkeit über die frontend.css die Buttons und das Eingabefeld grafisch anzupassen. Eine Voreinstellung liefern wir mit folgendem Code bereits mit:

.wpsg_produkt_wrapper .wpsg_basket_updown_buttons {position: relative; overflow: hidden;}

.wpsg_produkt_wrapper .fa-caret-down:before, .fa-caret-up:before {content:"" !important;}

.wpsg_produkt_wrapper .fa-caret-up, .fa-caret-down { width:30px; height:30px; float:left; border:1px solid #fff; background-color:#fff; }

.wpsg_produkt_wrapper .fa-caret-up img, .fa-caret-down img { position:absolute; padding:10px; }

.wpsg_produkt_wrapper .wpsg_basket_mengenanzeige { float:left; width:50px; }
.wpsg_produkt_wrapper .wpsg_basket_mengenanzeige input { background:#fff !important; height:30px; border-radius:0 !important; text-align:center; }

Die Buttons selbst wurden als Grafiken hinterlegt und werden im Produkttemplate aufgerufen. Die Originalgrafiken befinden sich unter wp-content/plugins/wpshopgermay/views/gfx/ und können nach Belieben mit anderen Grafiken ausgetauscht werden. Hierbei sollte beachtet werden, dass die Namen der Grafiken im standard.phtml mit den Namen der Grafiken übereinstimmen.

Wichtig ist, dass die gespeicherte und damit veränderte frontend.css nicht im wpshopgermany-Ordner unter wp-content/plugins/wpshopgermany/views/css/ verweilt, sondern in die user_views unter wp-content/uploads/wpsg/user_views/css abgelegt wird. Natürlich gelten die gleichen Regelungen für die neu hinterlegten Grafiken, die unter wp-content/uploads/wpsg/user_views/gfx gespeichert werden müssen. Näheres zu diesem Thema findet man im Abschnitt: Anpassen von Templates.

 

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (noch keine Bewertung)
Loading...

Kommentare

  • ThoGoe sagt:

    Hallo Petra,

    unter Umständen kann auch die Regel von deinem Theme überschrieben werden. In deinem Fall reicht

    .wpsg_basket_updown_buttons a { display:none; }

    vollkommen aus. Ich habe es gerade eben temporär auf deiner Seite einmal ausprobiert und es hat funktioniert. Das Thema behandelten wir bereit ausführlich im Forum. Daher würde ich dich bitten, technische Anfragen bitte dort im Forum zu stellen. Danke schön!

    Liebe Grüße

  • Petra sagt:

    Hallo,

    bei mir werden die Updown-Buttons seit dem Update angezeigt, obwohl die Zeile „.wpsg_produkt_wrapper .wpsg_basket_updown_buttons a { display:none; }“ im Frontend vorhanden ist.

    Wie kann man die Anzeige mit dem Plus-Minus-Button ausblenden?

    Viele Grüße,
    Petra

Dein Kommentar (KEINE Supportanfrage):

Supportanfragen werden gelöscht oder nicht frei gegeben.

Diese beantworten wir persönlich, gern und schnell in unserem Support-Forum

Bitte respektiere das. Danke!