Designs

Code Designs

Steuern Sie die visuelle Darstellung der Clerk-Elemente.

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 direkt HTML, CSS und Liquid im Code-Editor schreibst — oder indem du einer KI beschreibst, was du willst, und sie den Code für dich schreiben lässt.

Clerk.io verwendet eine Teilmenge von Liquid. Es werden nur die Funktionen unterstützt, die in unserer Clerk.js Template Language für Code Designs aufgeführt sind.

Sieh dir die unterstützte Syntax und die Formatter an.

AI Designer #

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

Der AI Designer ist ein integrierter Assistent, mit dem du Designs erstellen und bearbeiten kannst, indem du Änderungen in Alltagssprache beschreibst. Er kümmert sich um den Code, du bestimmst 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.

Funktionsweise #

Im Editor siehst du links das HTML und CSS deines Designs. Rechts befindet sich das KI-Panel, in dem du beschreibst, was du ändern möchtest.

Tippe deine Anfrage ein – zum Beispiel: „Mache die Produktkarten größer“ oder „Füge ein Angebots-Badge oben rechts hinzu“. Die KI passt daraufhin den Code entsprechend an.

Du kannst das Ergebnis vor dem Speichern in der Vorschau sehen, so dass nichts live geht, bevor du zufrieden bist. Du kannst den Code auch jederzeit weiterhin manuell neben den KI-Vorschlägen bearbeiten.

Objekte #

Datenpunkte, die beim Rendern des Designs angezeigt werden. Sie werden mit {{ und }} umschlossen. Zum Beispiel:

{{ product.price }}

In diesem Beispiel greift Liquid auf das product-Objekt zu und gibt das enthaltene price-Attribut aus.

Designs bestehen aus einem HTML-Markup in Kombination mit Attributen, die Informationen zu deinen products, categories und pages-Objekten anzeigen.

Hier ist 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 dargestellt werden, zum Beispiel mit Mathematik, um einen prozentualen Rabatt zu berechnen:

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

Variablen #

Mit der Syntax {{ VARIABLE_NAME }} kannst du Variablen erstellen, die für jedes Content, das das Design verwendet, konfigurierbar sind. Zum Beispiel, wenn du allen Bannern mit gleichem Design eine individuelle Ü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 hinzugefügte Text wird für diesen Content angezeigt. Variablen können beliebige Namen haben.

Dynamic values

Logiken #

Werden verwendet, um Funktionen im Design zu erstellen, etwa zur Anzeige eines HTML-Blocks unter bestimmten Bedingungen oder zum Durchlaufen von Listen. Sie werden mit {% und %} umschlossen.

If-Abfragen #

Wird verwendet, um Teile eines Designs basierend auf einer oder mehreren Bedingungen anzuzeigen. 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 ausgegeben werden, wenn die Bedingung falsch ist:

{% if product.price < 100 %}
	<div class="price-desc">Ein günstiges Produkt!</div>
{% else %}
	<div class="price-desc">Ein High-End-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 verwendet, um über Listen zu iterieren. Designs enthalten meist mindestens eine for-Schleife, um über die Liste der anzuzeigenden Objekte zu gehen.

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 Listen 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 Funktionen hinzufügen. Clerk.js enthält bereits eine Reihe verschiedener Formatter, die du nutzen 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 ist ein Beispiel, wie Clerk.js mit 3 verschiedenen Formattern konfiguriert wird:

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 erfordern, wird das erste vor dem Pipe-Zeichen geschrieben, weitere Attribute 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 Website gehostet werden. Der beste Ansatz hängt von deinem Webshop-Setup und deinen Anforderungen ab.

In Clerk #

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

Dies ist eine gute Wahl, wenn du alle Funktionen an einem Ort verfügbar haben möchtest, da du dadurch Clerk-Elemente mit Content aktualisieren kannst, ohne Code-Snippets neu einfügen zu müssen.

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

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

Auf der Website #

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

Das eigene Hosting von Designs ist sinnvoll, wenn du dieselben Designs auf mehreren unterschiedlichen Seiten wiederverwenden willst, da du vermutlich sowieso den Quellcode teilst.

Mit diesem Ansatz verwendest du nicht die Content-Funktionalität, was bedeutet, dass du den API-Endpunkt, limit und labels im Snippet konfigurieren musst.

Im Snippet #

Füge das Design einfach zwischen die öffnenden und schließenden Snippet-Tags ein.

<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 }}">Jetzt kaufen</a>
      </li>
    {% endfor %}
  </ul>
</span>

Mit Referenz #

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

<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 }}">Jetzt kaufen</a>
    </div>
  {% endfor %}
</script>

Komplettes Beispiel #

Nachfolgend siehst du ein Recommendations-Design, das alle oben genannten Konzepte kombiniert. Du kannst es als Ausgangspunkt für deine Designs verwenden.

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">Jetzt kaufen</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;
}

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.