Theme-Entwicklung in Shopify

Für das Content-Element soll zunächst geprüft werden, ob die Konfiguration leer ist oder nicht. Hierfür wird die if - Bedingung von Liquid eingesetzt, welche mit der vordefinierten ID abgefragt wird. Das sieht dann so aus:

 {%- if section.settings.title != blank -%}
  ....
 {% endif %}

Innerhalb dieser Bedingung ist das div definiert, sodass der Code-Teil nur Anwendung findet, wenn er benötigt wird.
Weiterhin sollte der Titel pflegbar sein, also brauchen wir hier einen Platzhalter.

{{ section.settings.title | escape }}

Dieser Platzhalter wird später mit dem Inhalt des Elements ersetzt. Da es sich hierbei um eine Überschrift handelt, sollte hier noch ein h2-HTML-Tag eingesetzt werden.

Der gesamte Code-Abschnitt sieht dann wie folgt aus:

{%- if section.settings.title != blank -%}
 <div class="section-header logo-bar-headline">
  <h2 class="section-header__title">{{ section.settings.title | escape }}</h2>
 </div>
{% endif %}

Für den Text kann beinahe die gleiche Abfrage erstellt werden wie für die Headline:

{% if section.settings.text != blank %}
  <div class="rte">
    <p>
      {{ section.settings.text }}
    </p>
   </div>
{% endif %}

Im HTML-Bereich soll wieder geprüft werden, ob die Konfiguration gesetzt ist oder nicht. Innerhalb der Abfrage kann das Bild dargestellt werden. Shopify bietet hier schon eine gute Lösung:

{%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

Hier werden neue Variablen deklariert, in welche das hochgeladene Bild eingesetzt wird, plus weitere Konfigurationen. Hierzu gibt es einen Blogbeitrag von Shopify selbst.

Der HTML-Code für das Bild sieht dann so aus:

<img class="feature-row__image lazyload"
   data-src="{{ img_url }}"
   data-widths="[180, 360, 540, 720, 900, 1080]"
   data-sizes="auto">

In diesem Beispiel werden Lazysizes verwendet. Unserer Empfehlung nach sollte nach Möglichkeit immer Lazy Loading verwendet werden, um die Performance der Seite zu verbessern. Lazy Loading kann ganz einfach durch Lazysizes eingesetzt werden.

Des Weiteren gibt es die Möglichkeit, einen Platzhalter einzubinden, welcher erscheint, wenn noch kein Bild hochgeladen wurde. Dafür gibt es eine vorgefertige Funktion:

{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}

Der gesamte Teilabschnitt sieht so aus:

<div class="feature-row__item">
    {% if section.settings.image != blank %}
      <div class="image-wrap" style="height: 0; padding-bottom: {{ 100 | divided_by: section.settings.image.aspect_ratio }}%;">
        {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
        <img class="feature-row__image lazyload"
            data-src="{{ img_url }}"
            data-widths="[180, 360, 540, 720, 900, 1080]"
            data-sizes="auto">
      </div>
    {% else %}
      <div class="image-wrap">
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {% endif %}
</div>
 

Das Content-Element ist nun fertig erstellt. Der gesamte Code des Elements sieht so aus:
 

<div class="page-width">
 {%- if section.settings.title != blank -%}
  <div class="section-header logo-bar-headline">
   <h2 class="section-header__title">{{ section.settings.title | escape }}</h2>
  </div>
 {% endif %}
 <div class="feature-row">
  {% if section.settings.text != blank %}
   <div class="rte">
    <p>
     {{ section.settings.text }}
    </p>
   </div>
  {% endif %}
 </div>
 <div class="feature-row__item">
  {% if section.settings.image != blank %}
   <div class="image-wrap" style="height: 0; padding-bottom: {{ 100 | divided_by: section.settings.image.aspect_ratio }}%;">
    {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
    <img class="feature-row__image lazyload"
       data-src="{{ img_url }}"
       data-widths="[180, 360, 540, 720, 900, 1080]"
       data-aspectratio="{{ section.settings.image.aspect_ratio }}"
       data-sizes="auto">
   </div>
  {% else %}
   <div class="image-wrap">
    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
   </div>
  {% endif %}
 </div>
</div>

Zum Template:

Die Sections sind alle in zwei Teile gesplittet, bestehend aus HTML/Liquid und JSON.
Während der HTML-Code für den Aufbau des Elements zuständig ist, sorgt der JSON-Code für die Konfiguration des Elements.

Hier kann eine Kopie eines bereits bestehenden Templates verwendet werden, wie beispielsweise page-sections-template.liquid. Danach muss lediglich unter schema der Name zu "About Us" geändert werden.
Um das neue Content-Element zu nutzen, sollte der HTML-Code in das Template inkludiert und die Konfiguration dafür erstellt werden.

Jetzt wird es ein wenig schwieriger: Das neue Snippet muss in die Section-Konfiguration hinzugefügt werden. Dafür muss unter Blocks der folgende Code hinzugefügt werden:

 {
        "name": "Image with text",
        "type": "image_with_text",
        "settings": [
              {
                "type": "text",
                "id": "title",
                "label": "Heading",
                "default": "Image with text"
            },
            {
              "type": "image_picker",
              "id": "image",
              "label": "Image"
            },
            {
                "type": "richtext",
                "id": "text",
                "label": "Text",
                "default": "<p>Pair large text with an image to tell a story, explain a detail about your product, or describe a new promotion.</p>"
           }
         ]
  }

Für jedes konfigurbare Feld werden Type, Label und ID benötigt. Außerdem muss für das gesamte Content-Element ein neuer Type definiert werden.