Wie baue ich eigentlich ein Content-Element, welches ich dann in Shopify nutzen kann? Wir beginnen mit einer kurzen Einführung zur Theme-Entwicklung mit Shopify und werden dann step by step die Entstehung eines neuen Content-Elements mitverfolgen. Gut aufgepasst, nachbauen erwünscht.
Shopify wurde mit der Entwicklungssprache Ruby on Rails geschrieben und arbeitet mit der Templatesprache Liquid.
Was kann man sich unter Liquid vorstellen?
"Liquid ist eine Open-Source-Templatesprache, welche von Shopify entwickelt und eingesetzt wird.
Diese wird in Ruby geschrieben, aber in starker Anlehnung an Templatesprachen wie Smarty oder TWIG.
Diese Sprache dient als Grundlage für Shopify Themes und wird verwendet, um dynamischen Inhalt für die Webseite zu laden oder auch Abfragen im Template einzubauen."
Die Template-Struktur von Shopify ist umfangreich und besteht aus:
Hierunter finden sich alle weiteren Templates. Diese werden für neu angelegte Inhaltsseiten sowie Kategorie-, Produkt- oder Blogseiten verwendet.
Um unser neu erlerntes Wissen direkt umzusetzen, soll im nachfolgenden Schritt selbst ein Inhaltselement programmiert werden.
Ziel soll sein, auf einer neuen Seite ,,Über Uns" ein Text-Bild-Element inklusive Überschrift zu erstellen.
Folgende Anforderungen gelten:
* Der Header-Titel soll redaktionell pflegbar sein.
* Der Text soll pflegbar sein.
* Das Bild soll pflegbar sein.
Zuerst legen wir uns ein neues Template an. Unter folgendem Pfad: Online-Shop > Themes > Code kann der Code bearbeitet werden.
Unter „Templates“ auf „Template hinzufügen“ erscheint eine Formularmaske, die nun wie folgt ausgefüllt werden soll:
Der Code im Template sieht folgendermaßen aus:
{% section 'about-us' %}
So kann auf eine künftige Section verwiesen werden. Nur mit Hilfe einer Section besteht die Möglichkeit, die vorgegebenen Anforderungen einzuhalten, da nur über eine Section Content-Elemente konfiguriert werden können.
Die neue Section wird für die Seite "About Us" und das Snippet für das Content Element "Text Image with Headline" angelegt.
Snippet: Im Code Editor unter Snippets kann ein neues Snippet hinzugefügt werden.
Das Snippet für das Content-Element nennen wir ,,text-image-with-headline", die Section für unsere Seite ,,about-us" (die Section muss nach der Referenzierung benannt sein).
Als erstes nehmen wir uns das Snippet ,,text-image-with-headline" vor.
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>
<tmpopup style="top: 8px; left: 327.3px;"><tmpopupcolor id="tmpopupcolor--2" style="background: rgb(246, 118, 255) none repeat scroll 0% 0%;"></tmpopupcolor><tmpopupcolor id="tmpopupcolor--3" style="background: rgb(67, 237, 255) none repeat scroll 0% 0%;"></tmpopupcolor><tmpopupcolor id="tmpopupcolor--m" style="background: rgb(45, 237, 255) none repeat scroll 0% 0%;"></tmpopupcolor><tmpopupcolor id="tmpopupcolor--v" style="background: rgb(43, 247, 255) none repeat scroll 0% 0%;"></tmpopupcolor></tmpopup><tmpopup style="top: 8px; left: 327.3px;"><tmpopupcolor id="tmpopupcolor--2" style="background: rgb(246, 118, 255) none repeat scroll 0% 0%;"></tmpopupcolor><tmpopupcolor id="tmpopupcolor--3" style="background: rgb(67, 237, 255) none repeat scroll 0% 0%;"></tmpopupcolor><tmpopupcolor id="tmpopupcolor--m" style="background: rgb(45, 237, 255) none repeat scroll 0% 0%;"></tmpopupcolor><tmpopupcolor id="tmpopupcolor--v" style="background: rgb(43, 247, 255) none repeat scroll 0% 0%;"></tmpopupcolor></tmpopup>
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.
Hier kann die folgende Shopify-Funktion genutzt werden:
{% render 'text-image-with-headline', section: block %}
Mit dem oberen Abschnitt kann das neue Snippet in die Section inkludiert werden. Hierfür wird der Dateiname des neuen Snippets verwendet.
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.
Das Ergebnis kann sich sehen lassen!
Das neue Content-Element kann nun im Theme-Editor ausgewählt werden.
Und kribbelt es schon in den Fingern?
Na dann heißt es jetzt: Loslegen!
