Webshop via CSS für mobile Geräte anpassen

    Hallo an alle,

    mir wäre fürs erste am wichtigsten die "normale" Ansicht im mobilen Shop, innerhalb von Produktkategorien, zu einer ansprechenderen Ansicht hinzubekommen. Sprich weg von einem Produkt mit einem kleinem Produktbild und Produktnamen / Preis rechts neben dem Produktbild, hin zu einer Ansicht bei der zwei Spalten mit Produkten angezeigt werden, die Produktbilder schön groß, Name/Text/Preis dann unterm Bild. Eben so wie man es aus den meisten aktuellen Shops auf mobilen Geräten kennt. Das Pic vom Uhrenshop ist ein fremder Shop, so stelle ich mir die Darstellung unseres Shops aber auf dem Handy vor. Unser Shop ist der mit den Skateboards :|

    Hat jemand eine Idee wie man das hinbekommen könnte ?

    unser shop: mob-skateboards.com

    Beste Grüße und vielen Dank

    Karsten

    Zitat

    Ich kann leider die Darstellung mit den Skateboards, wo der Text rechts ist, nicht finden. Beschreibe doch Mal, wie man dahin kommt oder poste einen direkten Link.

    meinst du die

    Ich glaube du meinst die

    Achsen

    http://mob-shop.de/epages/b2b_…hop_de/Categories/ACHSEN/"POLSTER%20Street%20Achsen"

    Code
    http://mob-shop.de/epages/b2b_mob-shop_de.mobile/de_DE/?ObjectPath=/Shops/b2b_mob-shop_de/Categories/ACHSEN/"POLSTER%20Street%20Achsen"

    bild 2

    http://mob-shop.de/epages/b2b_…b_mob-shop_de/Categories/"SKATEBOARD%20DECKS"/"Street%20Decks"

    Code
    http://mob-shop.de/epages/b2b_mob-shop_de.mobile/de_DE/?ObjectPath=/Shops/b2b_mob-shop_de/Categories/"SKATEBOARD%20DECKS"/"Street%20Decks"


    Komische Links die führen da gar nicht hin.

    wenn man sie kopiert und wieder einfügt dann geht es aber der verlinkte teil führt ein da nicht komplett hin

    In der Tat, da sind sie, ich muss blind gewesen sein.

    Die Lösung ist dann einfach:

    Code
    ul.Products li {
    clear: both;
    overflow: hidden;
    margin: 0 0 6px;
    padding-bottom: 6px;
    display: flex;
    flex-direction: column;
}

    Und dann kannst Du mit einer Mediaquery zwischen flex-direction: column; und flex-direction: row; umschalten.

    Heyho!

    Erstmal tausend Dank für eure Hilfe!

    Es hat tatsächlich funktioniert, die Produktnamen, Preise usw. werden jetzt unter den Produktbildern angezeigt.

    Aber zwei Probleme gäbe es ja noch.

    1) ist es möglich via Code zu beeinflussen, dass pro Produktseite auf dem Handy zwei Spalten anstatt nur einer angezeigt werden ?

    2) falls ja, wäre es dann auch möglich die Produkte bzw. Produktbilder so einzurichten, dass sie deutlich größer angezeigt werden ? Eben wie bei diesem Beispielshop mit den Uhren, responsive vllt. um die ~45% der Seite in Anspruch nehmen, quasi 90% bei zwei Produktspalten und die restlichen 10% sind dann für Rand links, rechts und kleine Trennlinie mittig, zwischen den zwei Produktspalten.

    In der mobilen Ansicht sind die Produktbilder einfach ultra klein und ich habe keine Ahnung wieso.

    Beste Grüße

    Smaddi

    Zitat

    In der mobilen Ansicht sind die Produktbilder einfach ultra klein und ich habe keine Ahnung wieso.

    Hier:

    http://mob-shop.de/epages/b2b_…ies/KOMPLETTBOARDS/Street

    sind bei mir die Bilder auch im Desktop-Browser recht klein und das liegt daran, dass die Breite durch das CSS auf 50px begrenzt wird:

    Code
    .Products .ProductSmallImage {
    max-width: 50px;
    height: auto;
    float: left;
}

    Vergrößere das max-width und die Bilder werden größer.

    Zitat

    1) ist es möglich via Code zu beeinflussen, dass pro Produktseite auf dem Handy zwei Spalten anstatt nur einer angezeigt werden ?

    Ja, das ist kein Problem und wieder einmal ist Flexlayout die Lösung:

    Code
    ul.Products {
    clear: both;
    padding-left: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}
    Code
    ul.Products li {
    clear: both;
    overflow: hidden;
    margin: 0 0 6px;
    padding-bottom: 6px;
    display: flex;
    flex-direction: column;
    flex: 0 0 45%;
}

    Durch den Prozentwert bei flex kannst Du steuern, wie viele Elemente in einer Zeile angezeigt werden und ggf. mit Mediaqueries die Anzahl umschalten.

    Am besten informierst Du dich grundlegend über Flexlayout, dann kannst Du solche Problem sebständig lösen und auf float verzichten:

    https://www.html-seminar.de/css-flexbox.htm

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Heyho,


    bin leider null Programmierer, nur Buchhalter.
    Die Desktopansicht über viel trial and error halbwegs hinbekommen.
    Bei den einfacheren Sachen wie Schrift zentrieren, Farbe bearbeiten, Rahmen oder Hintergrundfarbe hinterlegen brauche ich keine Hilfe, denke ich.
    Wobei ich aber nochmal Hilfe gebrauchen könnte, wenn es nicht zuviel Stress macht, wäre das zentrierte ausrichten der Produktbilder.

    1) Ich habe jetzt zwei Produktspalten. Dadurch, dass die Bilder in ihrem Block nicht zentriert sind, wirken die Produktspalten aber auch nicht zentriert. Gibt es da die Möglichkeit alle Bilder, egal welche Größe und Format, zentriert auszurichten ?

    2) kann man noch beeinflussen wie viele Produkte pro Seite angezeigt werden ? Aktuell zeigt er nur 5 oder so an. Im Idealfall sollte er ruhig 20-30, wenn nich sogar alle anzeigen, oder ?

    Beste Grüße

    Smaddi

    1) ist kein Problem: Durch align-items: center; kannst Du es zentrieren:

    Code
    ul.Products li {
    clear: both;
    overflow: hidden;
    margin: 0 0 6px;
    padding-bottom: 6px;
    display: flex;
    flex-direction: column;
    flex: 0 0 50%;
    align-items: center; /* <== */
}

    Heyho,


    unglaublich !
    Hab nen Java Script gefunden, welches die Anzahl der Objekte pro Seite erhöhte.
    Ich weis nich wer sowas überhaupt schreibt bzw. schreiben kann, für mich sah das komplett nach Hieroglyphen aus.
    Tatsächlich funktionierte es aber!!
    (Im Adminbereich des Shops kann man nämlich quasi gar nichts für die mobile Ansicht einstellen...)

    Soweit sogut.
    Habe jetzt noch eine border für die Produkte eingefügt.
    Was aber komisch ist ... beim letzten Produkt pro Seite wird die Border nicht angezeigt.
    Was könnte das für einen Grund haben bzw. wie könnte man das vllt. fixen ?

    Dass zwischen den Rahmen der Produkte, in der Mitte zwischen den zwei Spalten, etwas frei ist, die Rahmen sich nicht berühren, habe ich mit "margin-right: 6px" gemacht, flex: 0 0 47%. Das ist okay so oder könnte das dann die responsive Darstellung auf manchen Geräten zerballern ?

    EDIT:
    kann man eigentlich diesen ganzen Bereich unter den Produktbildern ansprechen ? Also den Bereich in dem Produktname und Preis stehen ? Dem würde ich gerne noch eine Top Border geben, Hintergrund farblich hinterlegen, Schriftstyle und Farbe verändern usw. Glaub das würde ich alles hinbekommen bzw. die Befehle kenne ich schon alle vom Bearbeiten der Ansicht beim Desktop. Finde gerade nur nich heraus wie ich den Bereich überhaupt ansteuere :(

    Beste Grüße

    Smaddi

    Zitat

    kann man eigentlich diesen ganzen Bereich unter den Produktbildern ansprechen ? Also den Bereich in dem Produktname und Preis stehen ? Dem würde ich gerne noch eine Top Border geben, Hintergrund farblich hinterlegen, Schriftstyle und Farbe verändern usw.

    Das ist kein Problem, denn beides ist schon in einem div-Container zusammen gefasst:

    Code
    ul.Products li div {
    border-top: 2px solid black;
    background-color: lightblue;
    /* usw. */
}
    Zitat

    Dass zwischen den Rahmen der Produkte, in der Mitte zwischen den zwei Spalten, etwas frei ist, die Rahmen sich nicht berühren, habe ich mit "margin-right: 6px" gemacht, flex: 0 0 47%. Das ist okay so oder könnte das dann die responsive Darstellung auf manchen Geräten zerballern ?

    margin ist ein gängiges Verfahren, um einen Abstand zu erzeugen, ich erwarte dabei keine Probleme. Auf jeden Fall besser als Leerzeichen, wie man es manchmal sieht.

    Zitat

    beim letzten Produkt pro Seite wird die Border nicht angezeigt.
    Was könnte das für einen Grund haben bzw. wie könnte man das vllt. fixen ?

    Das wird durch dieses CSS in package-mobilesf.css verursacht:

    Code
    ul.Products li:last-child {
    border: 0;
}

    Du kannst das Überschreiben durch deine eigene Definition erzwingen, indem Du ein !important dahinter schreibst:

    CSS
    border: 1px solid grey !important;

    Nicht schön, aber ich nehme an, diese Datei gehört zum Shop und Du kannst sie nicht verändern.

    Hi,


    muss leider doch nochmal schreiben.
    Also ... der Rahmen beim letzten Produkt pro Seite wird jetzt tatsächlich angezeigt. Top!

    Beim farblichen Hinterlegen und dem oberen Rahmen für den Bereich mit Produktname, Preis usw. gibt es aber noch diverse Probleme:


    1) mit dem Code hinterlegt er wirklich nur Produktname plus Preis farblich. Würde es gerne hinbekommen, dass er quasi ab Produktnamen den ganzen restlichen unteren Teil innerhalb der Produktborder ausfüllt, zum unteren Rand sowie zu den beiden seitlichen Rändern hin (siehe Beispielshop mit den Uhren im ersten Post)

    2) außerdem bekomme ich es doch nicht hin die Farbe von Produktname und Produktpreis zu verändern. color: #XXXXX funktioniert irgendwie nicht. Vllt. weil es Links sind ? Gibt es einen Befehl um Farbe für Name und Preis trotzdem zu verändern ?

    3) kann man nur den Preis etwas kleiner machen und NICHT bold ? Hatte ich mit font-weight: lighter probiert, funktionierte aber irgendwie nicht

    Versuche echt immer einen ganzen Schwung aus, um möglichst viel selbst hinzubekommen, aber manche Sachen verstehe ich nicht.
    Mal eine prinzipielle Frage: gibt es am Handy eigentlich irgendwie einen Trick wie ich, so wie ich es am PC konnte, einzelne Elemente prüfen kann, um selbst herauszufinden wie ich z.B. gewisse Bereiche ansteuere ?

    Grüße

    Smaddi

    Zitat von Smaddi

    Hab nen Java Script gefunden, welches die Anzahl der Objekte pro Seite erhöhte.
    Ich weis nich wer sowas überhaupt schreibt bzw. schreiben kann, für mich sah das komplett nach Hieroglyphen aus.

    Mit anderen Worten: Du nutzt ein Script, von dem Du keine Ahnung hast, was es eigentlich tut, Hauptsache es macht augenscheinlich das, was Du erwartest?!

    Das ist wohl der schlechteste Ansatz, Probleme lösen zu wollen...


    Dazu wundert es mich nicht, dass so einfache Dinge solche Schwierigkeiten machen, wenn ich sehe, dass WordPress ( ein Blog-System! ) für eine eCommerce-Seite zweckentfremdet wird. Nur weil ich an ein Motorrad Stützräder anbringen kann, ist das nicht sinnvoll!


    Für eCommerce gibt es haufenweise Shopsysteme, die zudem meistens eine kostenfreie Community-Version haben, bereits responsive Templates mitbringen und auch im Backend deutlich bessere Einstellmöglichkeiten haben, wie die ganzen WP-Plugins.


    Mit einer passenden Shopsoftware hättest Du die Probleme gar nicht erst.

    In wiefern ist dein Beitrag konstruktiv oder zumindest intelligent ?
    Hättest Du nur eine Minute nachgedacht, hätte dir in den Kopf kommen können,
    dass

    a) nicht jeder der rund ~8 Milliarden Menschen Programmierer ist und
    b) die Entscheidung für oder gegen Shopsysteme hundert Gründe haben kann und teilweise von der Geschäftsführung getroffen wird, wodurch man gezwungen ist aus der gegebenen Situation das beste rauszuholen

    Trotzdem danke für den Hinweis, dass es bessere Shopsysteme gibt oder Leute die sich mit Java besser auskennen.
    Sehr geistreich. Vielleicht solltest Du anstatt Programmierer lieber Psychologe werden... "Sie haben Probleme mit ihrer Frau ? Häh ? Wieso haben sie sich früher nicht einfach eine andere ausgesucht ? Dann hätten sie jetzt keine Probleme!"

    Zitat von Smaddi

    In wiefern ist dein Beitrag konstruktiv oder zumindest intelligent ?

    Zitat von Arne Drews

    Für eCommerce gibt es haufenweise Shopsysteme, die zudem meistens eine kostenfreie Community-Version haben, bereits responsive Templates mitbringen und auch im Backend deutlich bessere Einstellmöglichkeiten haben, wie die ganzen WP-Plugins.


    Mit einer passenden Shopsoftware hättest Du die Probleme gar nicht erst.

    Was ist daran nicht konstruktiv?! Du solltest solche Hinweise richtig lesen und Dich nicht persönlich angegriffen fühlen.

    Hätte ich nur geschrieben: Nutze eine neue Shopsoftware, hättest Du gefragt: Warum? WP kann das auch...

    Die Begründung habe ich halt gleich mit dazu geschrieben.


    Zitat von Smaddi

    Hättest Du nur eine Minute nachgedacht

    boingflip...


    Zitat von Smaddi

    nicht jeder der rund ~8 Milliarden Menschen Programmierer ist

    Musst Du auch nicht sein... Du solltest aber deutlich mehr davon in dir haben, wenn Du WP für sowas nutzt, als ein echtes Shopsystem.


    Zitat von Smaddi

    die Entscheidung für oder gegen Shopsysteme hundert Gründe haben kann und teilweise von der Geschäftsführung getroffen wird, wodurch man gezwungen ist aus der gegebenen Situation das beste rauszuholen

    Genau das sehe ich anders. Gerade die Geschäftsführung hat i.d.R. wenig technisches Verständnis, was nicht schlimm ist, denn dafür haben Sie IT Angestellte. Und die haben eine Beratungspflicht gegenüber der Geschäftsführung. Wenn diese am Ende entscheidet, dass sie es trotzdem mit WP machen wollen, habe ich bei der Beratung versagt, muss das dann aber mit entsprechendem KnowHow kompensieren, anstatt Scripte einzufügen, von denen ich nicht weiß, was die wirklich tun.


    Was antwortest Du denn, wenn die Geschäftsführung Dich fragt: Was macht denn das Script genau, dass Sie dafür verwenden?


    Zitat von Smaddi

    Trotzdem danke für den Hinweis, dass es bessere Shopsysteme gibt oder Leute die sich mit Java besser auskennen.

    Gerne. Nur um das nochmal konstruktiv hervorzuheben, es sind nicht nur bessere Shopsysteme, sondern relevant ist, dass es überhaupt erstmal Shopsysteme sind. Ach so und Java ist nicht JavaScript, das hat bis auf die Namensähnlichkeit nichts miteinander zu tun!


    Und das Fazit bleibt: Wenn Du dich selber als Nicht-Programmierer betitelst, solltest Du sowieso die Finger von diesen Systemen lassen!


    Zitat von Smaddi

    Sehr geistreich.

    Wenn man den Beitrag #15 mit einer gewissen Objektivität liest, ist es das sicherlich...


    Bitte gerne

    Nochmal für dich:


    a) wir sind ein 3 Mann Unternehmen
    b) ich bin kein IT-ler
    c) trotzdem sind wir auf einen Webshop angewiesen, weil die größe des Unternehmens irrelevant für das Kaufverhalten von Konsumenten ist

    D.h. es gibt nunmal aus diversen Gründen diese Shop anbindung und keine Ressourcen diese jetzt zu wechseln oder gar für viel Geld Verbesserungen durch einen Programmierer umsetzen zu lassen. Was wiederum heist, dass ich jetzt als Laie Verbesserungen in CSS hinbekommen MUSS, weil ich schlichtweg keine Alternative dazu habe. Ich würde wohl nicht nach Hilfe fragen, wenn ich es so einfach selbst hinbekommen würde oder wenn es als Alternative ein Wechsel zu einem anderen Shopsystem in Frage kommen würde.

    Hab mittlerweile noch mehr hinbekommen.
    Bräuchte nur noch bei zwei Dingen vllt Hilfe.

    1) wenn ich bei ul.Products li div { eine dünne top border einfüge, welche nur über dem hellblauen Kästchen (über dem Produktnamen) sein soll, dann fügt er aber auch eine dünne Linie in die Mitte ein, zwischen Produktnamen und Produktpreis

    2) die Farbe vom Produktpreis mit ul.Products li div a { verändert. Für den Produktnamen funktionierte es aber irgendwie noch nicht. Wie kann ich für den noch den Namen verändern ? Und kann ich für den Produktpreis noch "bold" rausnehmen + die Schriftgröße reduzieren ? Font Size small usw. funktionierte irgendwie nicht.

    Damit sollte dann das wichtigste hinterlegt sein.

    Grüße

    EDIT:
    hab das jetzt doch alles hinbekommen.
    Sieht jetzt direkt viel besser aus.
    Noch paar Produktnamen und Bilderformate vereinheitlichen, aber im Prinzip sieht es jetzt schon ganz anders aus als noch vor einer Woche!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden