Responsive Warenkorb


Tommy57

Erfahrenes Mitglied
#1
Hallo,

ich baue zur Zeit einen Shop um und möchte gerne, dass der Warenkorb bei mobilen Geräten ausgeblendet wird und erst bei Klick auf einen Button in den Bildschirm rein fährt. Am Besten von unten nach oben. Ich habe dahin gehend keine Erfahrung, worauf man bei sowas achten muss, was man darf und was man vermeiden sollte. Hat da jemand Tipps für mich?

Hab hier mal ne kleine Demo aufgebaut:

Edit fiddle - JSFiddle
EDIT: Oben rechts kann man zwischen Desktop und Mobil wechseln.

Gruß, Tommy
 

EuroCent

Erfahrenes Mitglied
#2
Du musst mit Media Queries arbeiten :)
Um zu prüfen ob geklickt wurde, prüfst du dann mit JS :)

Erst einmal musst Du deinem CSS mitteilen was er wie machen soll.
Wenn der gewünschte Effekt da ist, dass dein Warenkorb nicht mehr vorhanden ist, sondern nur noch der Button, dann geht es zu JS.

Mit JS manipulierst es dann, bzw. reagierst dann auf das Event Klick etc... :)
 

Tommy57

Erfahrenes Mitglied
#3
Hi EuroCent,

danke für die Antwort. Ich hatte eigentlich an Tipps und Tricks gedacht. Wie man das technisch umsetzt, weiß ich prinzipiell. Nur es gibt halt so was wie Best Practice. Dachte, vllt kennt da jemand was bzgl. einem Warenkorb.
 

Sempervivum

Erfahrenes Mitglied
#6
Dein Fiddle funktioniert doch einwandfrei und gefällt mir gut.

"Dat's all so'n Saak" - mit Best Practice. Die Ansichten sind da häufig sehr konträr: Es gibt z. B. auf der einen Seite Entwickler, die Bibliotheken wie jQuery rundweg ablehnen und im Extremfall den Einsatz von Javascript überhaupt. Und auf der anderen Seite solche, die voll darauf setzen. Oder es werden Dinge einfach gefordert, ohne eine schlüssige Begründung ("macht man so" - "macht man nicht so", "ist schlau" - "ist nicht schlau").

Dennoch einige Anmerkungen aus meiner Sicht:

Ich empfehle, statt float Flexlayout zu verwenden. In diesem Fall, eines links, das andere rechts, ist es mit float noch kein Problem, aber wenn das Layout etwas komplexer wird, hat man häufig mit unerwünschten Effekten zu kämpfen, z. B. dass sich die Abmessungen von Containern nicht an ihren Inhalt anpassen. Mit Flex wird alles einfacher, z. B. auch die vertikale Zentrierung.

So etwas:
Code:
function getArticle(id) {
    return $('<div/>', {class: 'article'}).append(
      $('<span/>', {class: 'pull-left'}).text('Item ' + id),
      $('<span/>', {class: 'btn btn-success pull-right'}).text('+ Add to Cart').on('click', function() {
      addToCart(id);
    })
  );
}
ist zwar elegant und funktioniert, erschwert aber die Lesbarkeit. Ich ziehe es vor, wenn die Elemente schrittweise aufgebaut werden. IMO muss man nicht alles ausreizen, was die Programmiersprache hergibt.

Bei diesem:
Code:
$('#shoppingcartbutton').on('click', function() {
    if ($('#shoppingcart-wrapper').hasClass('open')) $('#shoppingcart-wrapper').removeClass('open');
  else $('#shoppingcart-wrapper').addClass('open');
});
könntest Du vorteilhaft die Funktion toggleClass() verwenden, dann reduziert sich das Toggeln der Klasse auf eine Anweisung.
 

Tommy57

Erfahrenes Mitglied
#7
Hi Sempervivum,

danke für die ausführliche Antwort. Die JavaScript Codes habe ich nur auf die Schnelle dahin geklatscht, um einen lebhafteren Warenkorb zu haben. Mir ging es tatsächlich in erster Linie um das CSS. Interessant mit dem flex Ansatz. Bin damit vertraut, aber hatte eigentlich etwas Bedenken bezüglich der Browserkompatibilität und dass es eigentlich genau da, zu unerwünschten Effekten kommen kann bei unterschiedlichen Browsern. Ich werde mich da noch mal etwas schlau lesen. Eventuell sollte ich echt mal von diesem float System weg. Bin irgendwie auch noch an Bootstrap 3 kleben geblieben. Der 4er arbeitet ja auch mit dem flex Model.

Danke für den Hinweis.
 

Neue Beiträge