2 Artikel nebeneinander in der Mobilen Ansicht anzeigen

Shopware 6 (German) Themes & Design
1

Hallo Zusammen,

ich suche eine Lösung oder Plugin für die Möglichkeit in der Mobilen Ansicht 2 Artikel nebeneinander Anzeigen zu lassen. 

Die Mobile Darstellung bei vielen Artikeln in der Kategorie ist meiner Meinung nach nicht optimal. Bei den Vergleichen mit vielen anderen Shops sind mir sehr wenige aufgefallen die auch nur 1 Artilen anzeigen wie im Shopware Standard. 

 

Wäre euch für einen Tipp sehr dankbar.
Beste Grüße

NeoRetro

1 „Gefällt mir“
2

Hallo,

bei dem Problem stehe ich auch gerade. Zumindest bei meinem Theme von Themeware zwingt er alle Bootstrap Columns auf 100% in der mobilen Ansicht, obwohl ich im Template bereits die Bootstrap columns auf col-sm-6 gesetzt habe. Das ist eine CSS Geschichte. Ich werd das heute mal in Angriff nehmen und sag dir dann bescheid, wenn ich eine Lösung habe. Lg

1 „Gefällt mir“
3

@AlexBS schrieb:

Hallo,

bei dem Problem stehe ich auch gerade. Zumindest bei meinem Theme von Themeware zwingt er alle Bootstrap Columns auf 100% in der mobilen Ansicht, obwohl ich im Template bereits die Bootstrap columns auf col-sm-6 gesetzt habe. Das ist eine CSS Geschichte. Ich werd das heute mal in Angriff nehmen und sag dir dann bescheid, wenn ich eine Lösung habe. Lg

Hallo Alex, vielen Dank für deine Antwort. Ich verwende aktuell noch das Standard Theme. Hast du schon etwas rausgefunden? Bin gespannt auf deine Erfahrung. lg 

4

Geht leider nicht ohne Eingriff in die TWIG Template Dateien. Dort muss man “cms-listing-col col-sm-6 col-lg-6 col-xl-4” noch die Klasse “col-6” hinzufügen.

5

Ich würde das auch gut finden, da fast alle Shops zwei Artikel nebeneinander darstellen, wodurch man als User nur halb so viel scrollen bzw. nach unten swipen muss. Gibt es hier schon eine Lösung, wie das im Standard-Theme gehen könnte?

6

Wobei ich finde, dass es dann auf dem Smartphone doch recht “eng” wirkt.

7

Stimmt, man muss dann auch die Margins und Paddings anpassen, sonst ist das echt nicht optimal.

8

So ungefähr könnte es klappen :slight_smile:

.row.cms-listing-row.js-listing-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.cms-element-product-listing .cms-listing-col {
    flex-basis: 50%;
    width: 50%;
}

@media all and (max-width: 467px){
    
    .product-image-wrapper {
        height: auto;
        margin-top: 12%;
    }
    
    .product-box {
        padding: 0px;
    }
    
    .cms-element-product-listing .cms-listing-col {
        padding-right: 7px;
        padding-left: 7px;
    }
    
    .col-12{
        padding-right: 13px;
        padding-left: 13px;
    }
}
9

Hi,

danke, ich hab ein custom Theme installiert und das erweitert mit dein css code und ich kann die 2 Produkten auf mobile Seite jetzt sehen.

Ich hab das css code in public/theme/…/all.css abgespeichert.
So bald ich was auf Backend ein Update durchführe oder Storefront build eingebe, die css code wird nicht eingespielt.

Kannst du mir hier helfen?

Ich bin relative anfänger.

VG
Prash

1 „Gefällt mir“
10

Hallo Prash,

die all.css ist die kompilierte Version aller SCSS Files aus Shopware. Sobald also ein Backend Update durchgeführt wird, wird die all.css durch das Compiling neu generiert. Sie dient dazu, eine schlanke einheitliche Datei aller CSS Dateien für den Client auszuliefern um Performance zu gewehrleisten. Deine Änderung über die all.css einzubauen ist somit nicht korrekt.

Du müsstest also eine eigene SCSS Datei erstellen und diese dann über die base.scss includieren.

Beispiel:

1.) Suche den SCSS Pfad zu deinem Theme Plugin (in der Regel sollte der so aussehen)
custom/plugins/DEINTHEMEPLUGIN/src/Resources/app/storefront/src/scss

2.) Lege dort eine Datei an, z.B. custom.scss

3.) Füge in die custom.scss deinen gewünschten SCSS Code ein

4.) suche die base.scss (sollte im oben genannten Verzeichnis liegen)

5.) Füge @import 'custom'; am besten direkt nach dem vorhandenen Import @import 'variables'; ein.

Danach muss ein Compiling durchgeführt werden. Entweder mittels CLI / SSH oder einfach im Shopware Backend in die Theme Optionen gehen und dort einmal auf Speichern drücken.

Falls du mit dieser Thematik nicht ganz vertraut bist, und/oder dich unsicher fühlst, gäbe es auch eine Custom CSS/JavaScript Extenstion als Alternative. Diese ist kostenfrei und funktioniert super:

1 „Gefällt mir“
11

Hallo Steve,

ich hatte die Listings.scss erweitert, dort habe ich „.“ vergessen, deswegen nach der Compiling die css datei wurden nicht mit „.“ genommen.

Jetzt hat sich geklappt.

vielen Dank

1 „Gefällt mir“
12

Hallo Steve,

kannst du mir auch sagen wie ich die 2 Artikel in Produkt Slider hinbekommen kann?

vielen Dank
Prashanth

13

Das geht in den Einstellungen des Sliders in der Erlebniswelt. Hier musst du die Mindestgröße runterschrauben, beispielsweise auf 150px.

Hier ist noch ne Option wie man 2 Artikel nebeneinader in den Listings anzeigen kann:

Ich hab’s noch etwas angepasst, so dass man auch auf den Tablet schon mehr hat:

{% sw_extends '@Storefront/storefront/component/product/listing.html.twig' %}

{% block element_product_listing_col %}
    {% for product in searchResult %}
        {# col-6 rein  #}
        <div class="cms-listing-col col-6 col-sm-6 col-md-4">
            {% block element_product_listing_box %}
                {% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
                    'layout': boxLayout,
                    'displayMode': displayMode
                } %}
            {% endblock %}
        </div>
    {% endfor %}
{% endblock %}

Good luck - have fun.