Breakpoints nutzung unter Twig

Shopware 6 (German) Themes & Design
, ,
1

Hallo zusammen,

ich versuche ein Block auf „header.twig.html“ komplett auszukommentieren bzw. die Logik des Blocks nicht ausführen, wenn das Display ein bestimmten breakpoint erreicht.

Auf „base.twig.html“ befindet sich den Block mit den Breakpoints. (Bring mir nicht so viel weiter, da meine Kentnisse im Bereich nicht so gut sind…)

        {% block base_script_breakpoints %}
            {# Register the available viewport breakpoints the window.breakpoints object #}
            <script>
                {% set breakpoint = {
                    'xs': theme_config('breakpoint.sm'),
                    'sm': theme_config('breakpoint.md'),
                    'md': theme_config('breakpoint.lg'),
                    'lg': theme_config('breakpoint.xl')
                } %}

                window.breakpoints = {{ breakpoint|json_encode()|raw }};
            </script>
        {% endblock %}

Leider finde ich keinen Weg um die Größe des Displays durch breakpoinst abzurufen.
Meine Idee wäre:


{# TODO: make this block disappear between breakpoint-xs & lg, so it only adds 1 item to cart #}
(da ich dieses Block auf zwei verschiedenen twig. Dateien abrufe)

{% if window.breakpoint == 'lg' or (weitere breakpoints) %}
    {% block layout_header_actions_cart %}
        <div class="col-auto hide-md">
            <div class="header-cart"
                 data-offcanvas-cart="true">
                <a class="btn header-cart-btn header-actions-btn"
                   href="{{ path('frontend.checkout.cart.page') }}"
                   data-cart-widget="true"
                   title="{{ 'checkout.cartTitle'|trans|striptags }}"
                   aria-label="{{ 'checkout.cartTitle'|trans|striptags }}">
                    {% sw_include '@Storefront/storefront/layout/header/actions/cart-widget.html.twig' %}
                </a>
            </div>
        </div>
    {% endblock %}
{% else %}
    {% block layout_header_actions_cart %}
        {#Leer um Logic nicht ausführen#}
    {% endblock %}
{% endif %}

Ich habe auch versucht mit CSS und breakpoints ein display: none zu nutzen. Leider wird die Logik trotzdem ausgeführt. Nur, wenn ich den Inhalt des Blocks lösche, funktioniert genau was ich will.

Grundsätzlich, hat jemand eine Idee wie man mit einem „if“ statement oder so ein breakpoint unter einem Twig Datei abrufen kann? :frowning:

Ich wäre MEGA dankbar für any feedback :slight_smile:

2

Hallo @jfranke!

Breakpoints kannst du innerhalb von Twig nicht abfragen; Die Generierung der Twig-Templates in HTML passiert ja Serverseitig, während die Gerätegröße nur vom Client bestimmt werden kann. Also kannst Du ergo nur CSS oder JS nutzen, um deine Breakpoints abzufragen.

Dein Weg über display: none; wäre also schon der richtige. Schau dazu mal in die Bootstrap Doku zu den Themen Display und Breakpoints.

Beste Grüße,
LA

1 „Gefällt mir“
3

Heyo LA,

danke für die Antwort! Genau sowas habe ich mir gedacht. War aber nicht sicher, ob es möglich wäre.

Richtig, ja also mit dem display:none und Breakpoints habe ich schon recherchier und nutze sie momentan bei einige Stellen.

Also wahrscheinlich muss ich noch einiges restrukturieren, aber ich rufe den „warenkorb“ Block in zwei vers. Twig Files für die Darstellung des Warenkorbs bei kleinere und großere Displays in 2 verschiedenen Stellen des Displays.

Einmal beim Header oben (default) und für kleine displays teile ich das Header in zwei. Also sticky top und sticky bottom. Das generiert dieses Problem, indem die Produkte 2x im Warenkorb landen (da den Block mit dem offcanvas-cart zweimal durchgeführt wird).

Mit dem display:none wird nur das HTML versteckt aber die Logic des Blocks wird trotzdem durchgeführt.

Ich glaube dafür muss ich wahrscheinlich die Strukturierung von alle Elementen, die beim sticky top & bottom angezeigt werden. In anderen Wörtern wieder von 0 anfangen und richtig machen XD