Produkt Slider nur 3 Artikel statt 4 in einer Reihe anzeigen?

Shopware 6 (German) Programmierung
, ,
1

Moin,

Ich arbeite grade an einem eigene Theme für meinen neuen Shop für Shopware 6. Ich habe auf der Startseite einen Artikel Slider. Weiss einer von euch, bzw. kann mir Weiterhelfen, das dort nur 3 Artikel gleichzeitig angezeigt werden, und er dann immer einen weitergeht? Standtartmäßig, bzw. je nach bildschirmgröße schein es ja 4 zu sein, ich möchte jedoch max. 3 gleichzeitig. Habe schon viel versucht, aber rein mittels CSS scheint das ja nicht zu gehen. Irgendwas muss an der js verändert werden, nähme ich an. Soweit ich das verstanden habe wird der tiny slider (https://github.com/ganlanyuan/tiny-slider#tiny-slider-2) ja dort verwendet. Allerdings weiss ich jetzt nicht wie ich denn in SHopware jetzt so anpasse. Brauche dringend hilfe! Vielen Dank im voraus.

2

http://ganlanyuan.github.io/tiny-slider/demo/#responsive_wrapper

Anstelle der Pixel Angabe musst du die Bootstrap Breakpoints verwenden. xs sm md lg xl

Das json kannst du im twig Template anpassen.

3

Könntest du mir dafür vielleicht mal ein Beispiel zeigen? Weiss grade nicht so recht wie ich das Umsetzen soll.

4

Weil ich gerade vor dem selben Problem stehe.

Ich habe in meinem Twig Template die cms-elements-product-slider.html.twig extended und die Slider Optionen anpasst. Wie bereits @StefanPoensgen erwähnt hat kann man die Bootstrap Breakpoints in den Slider Options verwenden. Mehr dazu hier: https://github.com/ganlanyuan/tiny-slider#responsive-options

Hier das Beispiel:

{% set productSliderOptions = {
    slider: {
        productboxMinWidth: false,
        gutter: 20,
        autoplayButtonOutput: false,
        nav: false,
        mouseDrag: false,
        controls: sliderConfig.navigation.value ? true : false,
        autoplay: sliderConfig.rotate.value ? true : false,
        responsive: {
            xs: {
                items: 1
            },
            sm: {
                items: 2
            },
            md: {
                items: 3
            },
            lg: {
                items: 4
            },
            xl: {
                items: 5
            }
        }
    }
} %}

Leider übernimmt er meine definierten Responsive Options überhaupt nicht.

5

Hallo zusammen,

ich bin über den Beitrag gestolpert und wollte auf kleineren Auflösungen mehr Produkte anzeigen lassen. Mit euren Tipps bin ich erfolgreich ans Ziel gelangt.

Angepasst werden muss folgende Datei:
src/Storefront/Resources/views/storefront/element/cms-element-product-slider.html.twig

Die oben genannte Datei war leicht falsch geschrieben, eine cms-elements-product-slider.html.twig gibt es nicht, da war ein s am Ende von Element zu viel.

Die abgeleitete Datei im Child-Theme sieht dann folgendermaßen aus:

{% sw_extends '@Storefront/storefront/element/cms-element-product-slider.html.twig' %}

{% block element_product_slider %}
    {% if not sliderConfig %}
        {% set sliderConfig = element.fieldConfig.elements %}
    {% endif %}
    {% if element.data.products.elements %}
        <div
            class="cms-element-{{ element.type }}{% if sliderConfig.displayMode.value == "standard" and sliderConfig.verticalAlign.value %} has-vertical-alignment{% endif %}">
            {% block element_product_slider_alignment %}
                {% if config.verticalAlign.value %}
                    <div class="cms-element-alignment{% if sliderConfig.verticalAlign.value == "center" %} align-self-center{% elseif sliderConfig.verticalAlign.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
                {% endif %}

                {% set productSliderOptions = {
                    productboxMinWidth: sliderConfig.elMinWidth.value ? sliderConfig.elMinWidth.value : '',
                    slider: {
                        gutter: 30,
                        autoplayButtonOutput: false,
                        nav: false,
                        mouseDrag: sliderConfig.navigation.value ? false : true,
                        controls: sliderConfig.navigation.value ? true : false,
                        autoplay: sliderConfig.rotate.value ? true : false,
                        responsive: {
                            xs: { items: 1 },
                            sm: { items: 2 },
                            md: { items: 3 },
                            lg: { items: 4 }
                        }
                    }
                } %}

                {% block element_product_slider_slider %}
                    {{ parent() }}
                {% endblock %}
                {% if config.verticalAlign.value %}
                    </div>
                {% endif %}
            {% endblock %}
        </div>
    {% endif %}
{% endblock %}

Wer es so umsetzt, mag noch den Drang verspüren seinem Slider auf kleineren Viewports (gerade wenn die Slider-Pfeile aktiv sind) rechts und links etwas mehr Platz zu geben.

Das habe ich dann mit einer Extra-Portion SCSS geregelt.

Bevor dieses greift muss man der Sektion, in welcher sich der Slider befindet eine zusätzliche CSS-Klasse geben. Ich habe sie bei mir productslider2gether-morespace genannt.

Beachtet auch die anderen Tipps in den Kommentaren unten, wenn’s schön werden soll :slight_smile:

  // 1.1 Produktslider optimieren: Mehr Platz auf mobile
    // Man muss im Theme bei der jeweiigen Sektion die CSS Klasse einbinden: productslider2gether-morespace
    // In den Element Einstellungen sollte die Mindest-Breite auf 180px festgelegt werden
    // In den Block-Einstellungen müssen der linke und rechte Abstand entfernt werden
    .cms-section {
        &.productslider2gether-morespace {
            .cms-section-default {
                &.boxed {
                    padding: 0;
                    .product-slider-controls-prev {left: -5px;}
                    .product-slider-controls-next {right: -5px;}
                }
            }
            // AB 576px = SM / SMALL
            @include media-breakpoint-up(sm) {
                .cms-section-default {
                    &.boxed {
                        padding: unset;
                        .product-slider-controls-prev {left: 0;}
                        .product-slider-controls-next {right: 0;}
                    }
                }
            }
        }

Grüße an @StefanPoensgen :wink:

1 „Gefällt mir“