Mit welchem Twig-Befehl kann auf Kategorieseiten Bildern ab dem 5. Bild loading="lazy" hinzufügen?
Es handelt sich um Shopware 6.4.20.2.
@Max_Shop weißt du den Twig-Befehl, den man dafür braucht?
Wieso sollte es dafür ein Twig Befehl geben? Das ist normales HTML.
Wenn du innerhalb eines for Loop bist, kannst du mit loop.index die aktuelle Iteration abfragen und dann mit if das HTML hinzufügen.
loading=„lazy“ hat probleme mit Safari/iOS, es gibt aber bereits eine Lösung.
Würde diesen Ansatz probieren: {% set load = (loop.index < 5) %}
Dieses Template extenden: Resources/views/storefront/component/product/listing.html.twig
{% block element_product_listing_box %}
{% set load = (loop.index < 5) %}
{% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
layout: boxLayout,
displayMode: displayMode
} %}
{% endblock %}
@Max_Shop das ist schon klar, dass loading="lazy" normales HTML ist. Aber in HTML kann ich nicht schreiben: Füge ab dem 5. Bild "XXX" ein.
Welchen Code sollte man deiner Meinung nach nehmen?
@Moorleiche vielen Dank.
Welche Probleme hat Safari mit lazy="loading" und wie sieht die Lösung aus?
Wenn ich Resources/views/storefront/component/product/listing.html.twig so extende, werden auf der Kategorieseite nur die ersten 4 Thumbnails geladen, die weiteren Thumbnails nicht mehr.
Wo genau muss ich lazy="loading" hinzufügen?
Die Lösung habe ich im Bild rot markiert. Es gibt die data-Attribute, die Inhalte werden - sobald das Bild-Element im Viewport des Browsers ist - nachgeladen! Diese Lösung ist via JavaScript, weil es eben Porbleme mit loading=„lazy“ gibt.
Das ist ein Denkanstoß, mein Beispiel behandelt eher Produkt-Listings in Kategorieseiten. Aber es gibt auch Wege innerhalb einer CMS Seite die Grafiken zu zählen und ab Grafik X l"load = false" im Thumbnail Template zu übergeben.
Ich gehe davon aus, dass Grundkenntnisse in Shopware 6 und Twig vorhanden sind, ansonsten müsstest du dich damit erstmal vertraut machen. Bringt ja nichts, wenn ich dir eine fertige Lösung hier liefere und du hast keine Ahnung warum.
@Moorleiche ich habe meinen Post gerade angepasst, als du schon beim Schreiben warst.
Ich suche eine Lösung für Kategorieseiten.
Kenntnisse in Shopware 6 und Grundkenntnisse in Twig sind vorhanden.
Kannst du dir bitte meinen Post nochmal ansehen, weil mit dem Code-Beispiel stimmt etwas nicht?
Wenn nicht zwei if-Abfragen wären, wäre es einfach loading="lazy" an der richtigen Stelle hinzuzufügen.
Wie Moori es geschrieben hat, mit loop.index in der if.
Ansonsten würde ich eher auf JavaScript setzen und lazy zu eager wandeln, wenn die Bilder in der Nähe der View sind.
Danke @Max_Shop und @Moorleiche, vor allem für den Hinweis auf loop.index.
Ich habe /storefront/Resources/views/storefront/component/product/listing.html.twig in den ursprünglichen Zustand versetzt und /storefront/Resources/views/storefront/utilities/thumbnail.html.twig so extended:
{% block thumbnail_utility_img %}
<img {% if load %}src="{{ media|sw_encode_media_url }}" {% else %}data-src="{{ media|sw_encode_media_url }}" {% endif %}
{% if loop.index > 4 %} loading="lazy" {% endif %}
{% if media.thumbnails|length > 0 %}
{% if load %}srcset="{{ srcsetValue }}" {% else %}data-srcset="{{ srcsetValue }}" {% endif %}
{% if sizes['default'] %}
sizes="{{ sizes['default'] }}"
{% elseif sizes|length > 0 %}
sizes="{{ sizesValue }}"
{% endif %}
{% endif %}
{% for key, value in attributes %}{% if value != '' %} {{ key }}="{{ value }}"{% endif %}{% endfor %}
/>
{% endblock %}
Damit klappt es.
Ist loop.index so richtig eingebunden?
Passt es eurer Meinung nach so oder sollte ich noch etwas ändern?