Hi zusammen
ich habe schon hier im Forum gesucht aber leider keine Lösung gefunden um 2 Artikel nebeneinander darzustellen in der Mobilansicht.
Gibt es dazu evtl. ein Plugin, oder gibt es zumindest ein Todo um dies zu bewerkstelligen?
Danke vorab für jegliche Hilfe
Hallo,
weißt du wie du das Template im eigenen Child-Theme anpassen kannst? Dann könntest du in der views\storefront\component\product\listing.html.twig den Block element_product_listing_col anpassen und da mithilfe der Boostrap Klassen das Listing mobile auf 2 Spalten einstellen.
Viele Grüße
Tom
Hi
danke für die schnelle Antwort aber leider bin ich erst jetzt dazu gekommen.
Habe das Child angelegt und auch die Zeile gefunden! Aber leider habe ich keine Ahnung, wo ich da was eintragen muss.
Zur vereinfachung habe ich hier mal den schnipsel angehangen …
{% block element_product_listing_col %}
{% for product in searchResult %}
<div class="cms-listing-col {{ listingColumns }}">
{% block element_product_listing_box %}
{% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
'layout': boxLayout,
'displayMode': displayMode
} %}
{% endblock %}
</div>
{% endfor %}
{% endblock %}
{% else %}
{% block element_product_listing_col_empty %}
<div class="cms-listing-col col-12">
{% block element_product_listing_col_empty_alert %}
{% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
type: 'info',
content: 'listing.emptyResultMessage'|trans|sw_sanitize
} %}
{% endblock %}
</div>
Kann mir da einer Hilfestellung geben?
Vorab schon einmal danke
Guten Morgen,
werden dir Änderungen, die du im Child-Theme machst im Frontend schon angezeigt, das ist erstmal wichtig um zu testen, ob bei der Einrichtung des Child-Themes alles funktioniert hat.
Das komplette Date müsste so aussehen: \views\storefront\component\product\listing.html.twig
{% sw_extends '@Storefront/storefront/component/product/listing.html.twig' %}
{% block element_product_listing_col %}
{% for product in searchResult %}
<div class="cms-listing-col col-6 {{ listingColumns }}">
{% block element_product_listing_box %}
{% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
'layout': boxLayout,
'displayMode': displayMode
} %}
{% endblock %}
</div>
{% endfor %}
{% endblock %}
Die einzige Änderung, die ich gemacht habe, ist in Zeile 5. Da habe ich die Bootstrap-Klasse col-6 hinzugefügt. Damit werden die Spalten (Produkte) auf 6/12 eingestellt für den Smartphone Viewport.
Die Tablet und Desktop-Ansicht werden nicht überschrieben (durch die Variabel {{ listingColumns }} danach).
Mehr zum Boostrap Grid-System hier: Grid system · Bootstrap v5.0
Evtl musst du die Abstände noch etwas mit CSS anpassen, aber mit der o.g. Änderungen sollten auf jeden Fall schonmal 2 Artikel nebeneinander angezeigt werden.
Viele Grüße
Tom