Moin!
Gibt es mittlerweile eine Erweiterung mit der ein Mobiles Listing 2-spaltig (COL-6) möglich ist?
Ich kenne mich selbst nicht gut mit CSS aus und würde hierfür lieber eine Erweiterung nutzen, bevor ich mir den Code zerschieße.
Beste Grüße
Das geht zwar auch mit CSS, dafür müsstest du aber ziemlich viel überschreiben.
Per twig Template-Anpassung ist das aber schnell erledigt.
Welche Shopware-Version nutzt du denn?
Hi Vax, wir planen da tatsächlich aktuell gerade was in die Richtung und bringen ein mobiles Menü raus wo man unterschiedliche Styles nutzen kann.
Ich kann mir nur noch nicht ganz vorstellen, wie du das meinst. Gibt es eine Seite die du kennst, bei der es so gemacht wird?
Oder kannst du es einmal für Dummies umschreiben oder evtl einfach einen Zeichnung hochladen.
Dann kann ich mal sehen, was sich da machen läßt.
Herzliche Grüße,
Atilla
Dafür braucht man eigentlich kein zusätzliches Twig. Lässt sich alles per CSS lösen.
Mit ‚@media (min-width: xxxpx)‘ oder ‚@media (max-width: xxxpx)‘ kann man einiges steuern. Wobei im Standard teilweise ein 2-spaltiges Listing bereits vorkommt. Erst unter 576px Breite wird es einspaltig, aber alles mit CSS anpassbar. Ok, setzt natürlich voraus das ein eigenes Theme benutzt wird.
Moin,
ja, das geht grundsätzlich auch ohne zusätzliche Erweiterung per CSS.
Zum schnellen Testen kann man den Code auch direkt in einen HTML-Block auf der Kategorieseite / Erlebniswelt setzen, also mit <style>...</style>. Sauberer wäre es später natürlich im eigenen Theme bzw. in der eigenen SCSS/CSS-Datei, damit es zentral gepflegt bleibt.
Der Code ist am Shopware-6-Standard-Theme orientiert. Je nach Theme oder bereits vorhandenen Anpassungen kann es sein, dass man einzelne Selektoren oder Abstände noch leicht anpassen muss.
Beispiel:
<style>
/* Shopware 6 Kategorie-Listing mobil 2-spaltig / Praxisanpassung von borban.de */
@media (max-width: 767.98px) {
body.is-ctl-navigation .cms-listing-row {
margin-left: -5px;
margin-right: -5px;
}
body.is-ctl-navigation .cms-listing-row > .cms-listing-col {
flex: 0 0 50% !important;
max-width: 50% !important;
padding-left: 5px !important;
padding-right: 5px !important;
margin-bottom: 10px !important;
}
body.is-ctl-navigation .product-box,
body.is-ctl-navigation .product-box.card {
height: auto !important;
min-height: 0 !important;
}
body.is-ctl-navigation .product-box .card-body {
padding: 8px !important;
}
body.is-ctl-navigation .product-image-wrapper {
height: 105px !important;
min-height: 105px !important;
margin-bottom: 6px !important;
}
body.is-ctl-navigation .product-image {
max-height: 100px !important;
object-fit: contain !important;
}
body.is-ctl-navigation .product-name,
body.is-ctl-navigation .product-name a {
font-size: 14px !important;
line-height: 1.28 !important;
min-height: 36px !important;
margin-bottom: 6px !important;
font-weight: 600 !important;
}
body.is-ctl-navigation .product-rating,
body.is-ctl-navigation .product-cheapest-price,
body.is-ctl-navigation .product-variant-characteristics,
body.is-ctl-navigation .product-variant-characteristics-text {
display: none !important;
}
body.is-ctl-navigation .product-price-info,
body.is-ctl-navigation .product-price-wrapper {
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin-bottom: 6px !important;
}
body.is-ctl-navigation .product-price {
font-size: 14px !important;
line-height: 1.25 !important;
}
body.is-ctl-navigation .product-price-unit,
body.is-ctl-navigation .price-unit-content,
body.is-ctl-navigation .price-unit-reference {
font-size: 10.5px !important;
line-height: 1.25 !important;
color: #6f7f8f !important;
}
body.is-ctl-navigation .product-action {
margin-top: 8px !important;
padding-top: 0 !important;
}
body.is-ctl-navigation .product-action .btn {
min-height: 38px !important;
padding: 8px 10px !important;
font-size: 14px !important;
}
}
</style>
Wichtig ist nur: Nicht nur stumpf auf 50% Breite setzen. Mobil hängen da meistens direkt weitere Punkte dran, z. B. Bildhöhe, Titelhöhe, Grundpreis, Variantenanzeige, Bewertungen und Buttonhöhe. Sonst ist es zwar 2-spaltig, wirkt aber schnell ziemlich gequetscht.
Wir haben in den letzten Monaten einiges für Shopware 6 entwickelt, weil genau solche kleinen Praxisprobleme im Standard oft nerven. Ein kleines Plugin für solche mobilen Listing-Anpassungen ist bei uns auch schon in Arbeit und kommt voraussichtlich in Kürze. Bis dahin kann man es aber, je nach Theme, auch gut mit CSS lösen.
Hi Max,
wir nutzen aus diversen Gründen noch die 6.4.17.0.
Prinzipiell macht diese Erweiterung das was ich wünsche:
Die Erweiterung ist leider erst ab Shopware 6.6.0.0. verfügbar. Es ist auch eigentlich nicht gewünscht, dass der kunde die Ansicht umstellen kann, sondern dass mobile immer eine 2-Spaltige Produktlisting-Ansicht hat.