Shopify Sections erstes Element von erstem Block wird nicht geladen

[Floowde]

Guten Tag zusammen,

bei folgendem Code wird beim ersten Block das erste Element nicht geladen, also element-wrapper-{{block.id}}.

Hat jemand eine Idee, woran das liegen könnte?

<div class="instagram-navigation-{{ section.id }}">
<div {% if section.settings.vollebreite %}class="page-width"{% endif %}>
<div class="slider-wrapper-{{ section.id }}"
{% for block in section.blocks %}
<div>
<div class="element-wrapper-{{ block.id }}">
<div class="kreis-{{ block.id }}">
<img class="bild-{{ block.id }}" src="{{ block.settings.bild | image_url }}">
</div>
<span class="text-{{ block.id }}">
{{ block.settings.text }}
</span>
</div>
</div>
<div>

{% endfor %}
</div>
</div>
</div>

[Gabe]

Hey @Floowde 

In dem von dir gegebenen Code-Snippet scheint ein Problem mit der Struktur der for-Loop zu bestehen. Innerhalb der for-Schleife fehlt ggf. die Eröffnung des div-Elements vor dem Start der Schleife und das Schließen des div-Elements nach dem Ende der Schleife. Hier ein Vorschlag (aber ohne Gewähr):

<div class="instagram-navigation-{{ section.id }}">
  <div {% if section.settings.vollebreite %}class="page-width"{% endif %}>
    <div class="slider-wrapper-{{ section.id }}">
      {% for block in section.blocks %}
        <!-- Hier beginnt der Block -->
        <div class="element-wrapper-{{ block.id }}">
          <div class="kreis-{{ block.id }}">
            <img class="bild-{{ block.id }}" src="{{ block.settings.bild | img_url }}">
          </div>
          <span class="text-{{ block.id }}">
            {{ block.settings.text }}
          </span>
        </div>
        <!-- Hier endet der Block -->
      {% endfor %}
    </div>
  </div>
</div>

Achte darauf, dass das img_url-Filter korrekt benutzt wird. In Shopify wird üblicherweise img_url statt image_url verwendet, um eine URL für ein Bild zu erhalten. Achte zudem darauf, dass die entsprechenden settings in deinem Theme für vollebreite, bild und text korrekt konfiguriert sind und dass die block.id korrekt durchläuft.

Wenn der erste Block oder das erste Element des ersten Blocks immer noch nicht erscheint, solltest du überprüfen:

1. Sind in deinem Shopify-Adminbereich tatsächlich Blocks für diesen Abschnitt konfiguriert?
2. Gibt es irgendwelche JavaScript-Fehler in der Konsole, die die Darstellung beeinträchtigen könnten?
3. Werden CSS-Styles angewandt, die das erste Element eventuell verstecken oder ausblenden?
4. Gibt es Liquid-Render-Fehler im Shopify-Theme-Editor oder Liquid-Code, die nicht korrekt ausgeführt werden?

Es kann auch hilfreich sein, temporär statischen Inhalt einzufügen oder den Output von Variablen wie {{ block.id }} direkt im HTML zu überprüfen, um sicherzustellen, dass die Schleife wie erwartet funktioniert.

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist, wie gesagt, Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

---
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.