Code Designs

Clerk.io verwendet Liquid zur Verwaltung von Code-Designs. Es ist eine sichere und flexible Template-Sprache, mit der du jedes beliebige Design für deine Clerk.io-Elemente erstellen kannst.

Du kannst Designs erstellen, indem du HTML, CSS und Liquid direkt im Code-Editor schreibst – oder indem du der KI beschreibst, was du möchtest, und sie schreibt den Code für dich.

Für Chat Produktkarten gib HTML und Liquid in Chat > Configuration > Product card template ein. Füge Styling-Regeln in Custom styling auf derselben Seite hinzu. Dieses CSS-Feld stylt sowohl die Produktkarten als auch das Chat-Fenster.

Clerk.io Designs unterstützen die komplette Liquid Template-Sprache. Die folgenden Beispiele geben einen Überblick über die Nutzung von Liquid in Code Designs.

Für die vollständige Referenz zu Liquid Syntax, Tags und Filtern siehe die Liquid Dokumentation.

AI Designer #

Beta: Der AI Designer ist nur für HQ-Nutzer verfügbar.

Der AI Designer ist ein integrierter Assistent, der es dir ermöglicht, Designs zu erstellen und zu bearbeiten, indem du Änderungen in einfacher Sprache beschreibst. Er übernimmt den Code, du gestaltest die Vision.

Zugriff #

Öffne den AI Designer über Search / Recommendations / Email > Designs. Wähle oben auf der Designs-Seite AI designer, um ein Design im KI-unterstützten Editor zu öffnen.

So funktioniert es #

Der Editor zeigt das HTML und CSS deines Designs auf der linken Seite. Rechts befindet sich das KI-Panel, in dem du beschreibst, was geändert werden soll.

Gib deine Anfrage ein – zum Beispiel „mache die Produktkarten größer“ oder „füge im rechten oberen Eck ein Sale-Badge hinzu“. Die KI aktualisiert den Code entsprechend.

Du kannst das Ergebnis vor dem Speichern in der Vorschau ansehen, sodass nichts veröffentlicht wird, bevor du zufrieden bist. Außerdem kannst du den Code jederzeit weiterhin manuell bearbeiten – parallel zu den KI-Vorschlägen.

Editor-Aufbau #

Search und Recommendation Code Designs verfügen über verschiedene Editor-Steuerungen:

• Den Designnamen oberhalb des Code-Editors bearbeiten.
• In Search Code Designs die Tabs HTML, CSS, HTML - Mobile und CSS - Mobile oberhalb des Editors nutzen. Unterhalb des Editors findest du Available Designs and Components.
• In Recommendation Code Designs die Tabs HTML und CSS nutzen. In diesem Editor wird Available Designs and Components nicht angezeigt.
• Preview über den Seitenkopf oder das Aktionsmenü öffnen.
• Design ID im Aktionsmenü finden. Im Header gibt es außerdem Informationen zu den Elements, die das Design verwenden.

Objekte #

Datenpunkte, die angezeigt werden, wenn das Design gerendert wird. Sie werden mit {{ und }} umschlossen. Zum Beispiel:

{{ product.price }}

In diesem Beispiel greift Liquid auf das product object zu und rendert das darin enthaltene price-Attribut.

Designs bestehen aus HTML-Markup, kombiniert mit Attributen, die Informationen über deine products, categories und pages Objekte anzeigen.

Hier ein einfaches Design mit Produkt-Variablen:

<div class="product-card">
	<img src="{{ product.image }}" />
	<div class="product-name">{{ product.name }}</div>
	<div class="product-price">{{ product.price }}</div>
</div>

Ausdrücke #

Objekte können auch mit Ausdrücken gerendert werden, z. B. durch mathematische Berechnung eines Rabattprozentsatzes:

{{ ((product.list_price/product.price) / product.list_price) * 100 }}

Variablen #

Mit der Syntax {{ VARIABLE_NAME }} kannst du Variablen erstellen, die für jedes Content konfigurierbar sind, das das Design verwendet. Zum Beispiel, wenn du allen Bannern mit demselben Design eine eigene Überschrift hinzufügen möchtest, könntest du das so machen:

<h2>{{ headline }}</h2>

Dadurch erscheint ein Textfeld mit dem Variablennamen auf der Content-Einstellungsseite. Jeder hier hinzugefügte Text wird für dieses Content gerendert. Variablen können beliebig benannt werden.

Logiken #

Werden verwendet, um Funktionalität im Design zu schaffen, z. B. einen HTML-Block nur unter bestimmten Bedingungen anzuzeigen oder Listen zu durchlaufen. Sie werden mit {% und %} umschlossen.

If-Anweisungen #

Wird genutzt, um Teile eines Designs basierend auf einer oder mehreren Bedingungen zu rendern. Sie bestehen aus einer öffnenden {% if %} und einer schließenden {% endif %}.

{% if product.on_sale == true %}
	<div class="product-discount">Im Angebot!</div>
{% endif %}

If-Anweisungen können auch else-Blöcke enthalten, die ausgeführt werden, wenn die Anfangsbedingung falsch ist:

{% if product.price < 100 %}
	<div class="price-desc">Ein günstiges Produkt!</div>
{% else %}
	<div class="price-desc">Ein hochwertiges Produkt!</div>
{% endif %}

Boolesche Attribute können verwendet werden, ohne explizit true oder false zu schreiben:

{% if product.in_stock %}
	<div class="product-stock">Auf Lager</div>
{% endif %}

For-Schleifen #

Werden genutzt, um über Listen zu iterieren. Designs enthalten in der Regel mindestens eine For-Schleife zum Durchlaufen der anzuzeigenden Objektliste.

Sie bestehen aus einer öffnenden {% for %} und einer schließenden {% endfor %}:

{% for product in products %}
	<div class="product-card">
		<img src="{{ product.image }}" />
		<div class="product-name">{{ product.name }}</div>
		<div class="product-price">{{ product.price }}</div>
	</div>
{% endfor %}

For-Schleifen können auch verschachtelt werden, um Listenattribute innerhalb von Objekten darzustellen:

{% for product in products %}
	<div class="product-card">
		<img src="{{ product.image }}" />
		<div class="product-name">{{ product.name }}</div>
		<div class="product-price">{{ product.price }}</div>
		<ul class="product-tags">
		{% for tag in product.tags %}
			<li class="single-tag">{{ tag }}</li>
		{% endfor %}
		</ul>
	</div>
{% endfor %}

Formatter #

Dies sind benutzerdefinierte Javascript-Funktionen, die deinen Designs neue Funktionalität hinzufügen. Clerk.js wird bereits mit einer Reihe verschiedener Formatter ausgeliefert, die du verwenden kannst.

Du kannst auch eigene Formatter auf zwei Arten erstellen:

• In my.clerk.io unter Developers > Formatters.
• Als Konfiguration, die zu Clerk.js hinzugefügt wird.

Hier ein Beispiel für die Konfiguration von Clerk.js mit 3 verschiedenen Formattern:

Clerk('config', {
	key: 'O7UITkJIXqXibeQF9ONobiGGKYYKtbvh',
	formatters: {
		log_price: function(price) {
			console.log(price);
		},
		calculate_discount: function(old_price, new_price) {
			return old_price-new_price;
		},
		substring: function(text) {
			var short_string = text.substring(0,20);
			return short_string;
		}
	}
});

Sie werden in deinen Designs mit der Syntax {{ ATTRIBUTE | FORMATTER }} verwendet:

<div class="price">{{ product.price | log_price }}</div>

Wenn deine Formatter mehrere Attribute benötigen, wird das erste vor dem Pipe geschrieben und alle weiteren nach dem Formatter-Namen:

<div class="discount">{{ product.list_price | calculate_discount product.price  }}</div>

Hosting #

Designs können in my.clerk.io oder im Quellcode deiner Seite gehostet werden. Die beste Herangehensweise hängt von deinem Webshop-Setup und deinen Anforderungen ab.

In Clerk #

Designs sind in HTML und CSS unterteilt, sodass du eigenständige Designs erstellen kannst, die beim Laden der Seite in deine Website eingefügt werden.

Dies ist sinnvoll, wenn du alle Funktionen an einem Ort verwalten möchtest, da du so auch deine Clerk-Elemente mit Content aktualisieren kannst, ohne Snippets erneut einzufügen.

Designs werden auf Store-Ebene verwaltet und einzeln für Search, Recommendations und Email angelegt.

Sie werden hier erstellt: Designs > New Design > Other Designs > Blank > With code.

Auf der eigenen Seite #

Designs werden direkt im Quellcode deiner Seite innerhalb von Clerk-Snippets oder als referenzierbare Blöcke gehostet.

Das eigene Hosting von Designs eignet sich gut, wenn du dieselben Designs auf mehreren verschiedenen Seiten verwenden willst, da du vermutlich ohnehin den Quellcode teilst.

Mit dieser Methode nutzt du die Content Funktionalität nicht, was bedeutet, dass du den API endpoint, limit und labels in deinen Snippets konfigurieren musst.

Im Snippet #

Das Design einfach zwischen die öffnenden und schließenden Tags des Snippets einfügen.

<span
  id="popular"
  class="clerk"
  data-api="recommendations/popular"
  data-labels='["Home Page / Popular"]'
  data-limit="10">
  
  <ul class="product-list">
    {% for product in products %}
      <li class="product">
        <h2 class="product-name">{{ product.name }}</h2>
 
        <img src="{{ product.image }}" title="{{ product.name }}" />
 
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Buy Now</a>
      </li>
    {% endfor %}
  </ul>
</span>

Mit Referenz #

Erstelle einen Block mit <script type=text/x-template>, der eine ID hat, auf die im Snippet referenziert werden kann.

<div 
  id="popular"
  class="clerk"
  data-api="recommendations/popular"
  data-labels='["Home Page / Popular"]'
  data-limit="10"
  data-template="#clerk-template">
</div>

<script type="text/x-template" id="clerk-template">
  <h1>{{ headline }}</h1>
  
  {% for product in products %}
  	<div class="product">
      <h2>{{ product.name }}</h2>
      <img src="{{ product.image }}" />
      <a href="{{ product.url }}">Buy Now</a>
    </div>
  {% endfor %}
</script>

Komplettbeispiel #

Unten siehst du ein Recommendations-Design, das alle oben genannten Konzepte kombiniert. Du kannst dies als Ausgangspunkt für deine Designs nutzen.

HTML #

<div class="clerk-recommendations">
  <div class="clerk-recommendations-headline">{{ headline }}</div>
  <div class="clerk-slider">
    {% for product in products %} 
      <div>
        <a href="{{ product.url }}">
          <div class="clerk-slider-product">
            {% if product.price < product.list_price %}
              <div class="clerk-slider-badge">Im Angebot</div>
            {% endif %}
            <div class="clerk-slider-tags">
              {% if true %}
                <div class="clerk-slider-tag">Hot</div>
              {% endif %}
            </div>
            <div class="clerk-slider-image" style="background-image: url('{{ product.image }}');">&nbsp;</div>
            <div class="clerk-slider-name">{{ product.name }}</div>
            
            <div class="clerk-slider-pricing">
              {% if product.price < product.list_price %}
                <div class="clerk-slider-list-price">{{ product.list_price | money }}</div>
              {% endif %}
              
              <div class="clerk-slider-price">{{ product.price | money }}</div>
            </div>
            
            <div class="clerk-slider-button">Buy Now</div>
          </div>
        </a>
      </div>
    {% endfor %}
  </div>
</div>

CSS #

.clerk-recommendations {
    margin: 1em 0;
}

.clerk-recommendations-headline {
    font-weight: bold;
    font-size: 2em;

    text-align: center;
}

.clerk-slider {

}

.clerk-slider-product {
    position: relative;
    overflow: hidden;

    display: inline-block;

    width: 10em;

    margin: 1em;
    padding: 1em;

    background-color: white;

    border: 1px solid #eee;
    border-radius: 1em;

    box-shadow: 0 .1em .2em 0 rgba(0,0,0,.08);

    text-align: center;
}

.clerk-slider-badge {
    position: absolute;
    top: 5px;
    right: -35px;

    display: inline-block;

    width: 120px;

    margin: 10px auto;
    padding: 5px 0;

    border-radius: 3px;

    background-color: #fbc531;

    font-size: 10px;
    color: white;

    text-align: center;
    letter-spacing: 1px;

    transform: rotate(45deg);
}

.clerk-slider-tags {
    position: absolute;
    top: .8em;
    left: .8em;
}

.clerk-slider-tag {
    display: inline-block;

    padding: .2em .8em;

    border-radius: .3em;

    background-color: gray;

    font-size: 10px;
    color: white;

    letter-spacing: 1px;
}

.clerk-slider-image {
    width: 100%;
    height: 8em;

    margin-bottom: 1em;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.clerk-slider-name {
    overflow: hidden;

    height: 2.4em;

    margin-bottom: 1em;
}

.clerk-slider-pricing {
    display: flex;

    margin-bottom: 1em;
    
    font-size: 1.4em;
}

.clerk-slider-price {
    flex: 1;
    
    font-weight: bold;
}

.clerk-slider-list-price {
    flex: 1;
    
    opacity: .8;
    
    font-weight: normal;
    text-decoration: line-through;
    color: gray;
}

.clerk-slider-button {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: gray;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}