Designs

Code Designs

Steuern Sie die visuelle Darstellung von Clerk-Elementen.

Code Designs
Clerk.io verwendet Liquid zur Verwaltung von Code Designs. Es handelt sich um eine sichere und flexible Template-Sprache, mit der Sie beliebige Designs für Ihre Clerk.io-Elemente erstellen können.

Sie können Designs erstellen, indem Sie HTML, CSS und Liquid direkt im Code-Editor schreiben – oder indem Sie einer KI beschreiben, was Sie möchten, die dann den Code für Sie schreibt.

Clerk.io-Designs unterstützen die komplette Liquid-Template-Sprache. Die nachstehenden Beispiele geben einen Überblick zur Verwendung von Liquid in Code Designs.

Die vollständige Referenz zu Liquid-Syntax, Tags und Filtern finden Sie in der Liquid documentation.

AI Designer #

Beta: Der AI Designer steht nur HQ-Nutzern zur Verfügung.

Der AI Designer ist ein integrierter Assistent, der es Ihnen ermöglicht, Designs zu erstellen und zu bearbeiten, indem Sie Änderungen in einfacher Sprache beschreiben. Die KI kümmert sich um den Code, Sie um die Umsetzung Ihrer Vision.

Zugriff #

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

Funktionsweise #

Der Editor zeigt auf der linken Seite das HTML und CSS Ihres Designs an. Auf der rechten befindet sich das KI-Panel, in dem Sie beschreiben, was Sie ändern möchten.

Geben Sie Ihre Anfrage ein – zum Beispiel “mache die Produktkarten größer” oder “füge ein Verkaufs-Badge in der rechten oberen Ecke hinzu”. Die KI aktualisiert den Code entsprechend.

Sie können das Ergebnis vor dem Speichern in der Vorschau ansehen, sodass keine Änderungen live gehen, bevor Sie zufrieden sind. Sie können den Code auch jederzeit weiterhin manuell neben den KI-Vorschlägen bearbeiten.

Objekte #

Datenpunkte, die angezeigt werden, wenn das Design gerendert wird. Sie sind mit {{ und }} umschlossen, z.B.:

{{ product.price }}

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

Designs bestehen aus HTML-Markup, kombiniert mit Attributen, die Informationen über Ihre products, categories und pages Objekte 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 gerendert werden, zum Beispiel, wenn Sie Mathematik verwenden, um einen Rabattprozentsatz zu berechnen:

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

Variablen #

Mit der Syntax {{ VARIABLE_NAME }} können Sie Variablen erstellen, die für jedes Content, das das Design verwendet, konfigurierbar sind. Wenn Sie beispielsweise allen Bannern mit demselben Design eine individuelle Überschrift hinzufügen möchten, könnten Sie dies wie folgt tun:

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

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

Dynamic values

Logiken #

Dienen dazu, Funktionalitäten im Design zu erstellen, z.B. einen HTML-Block unter bestimmten Bedingungen anzuzeigen oder Listen zu durchlaufen. Sie sind mit {% und %} umschlossen.

If-Anweisungen #

Werden verwendet, um Teile eines Designs auf Basis einer oder mehrerer Bedingungen anzuzeigen. Sie bestehen aus einer eröffnenden {% if %}- und einer abschließenden {% endif %}-Anweisung.

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

If-Anweisungen können auch else Blöcke enthalten, die angezeigt werden, wenn die erste Bedingung als falsch ausgewertet wird:

{% if product.price < 100 %}
	<div class="price-desc">A cheap product!</div>
{% else %}
	<div class="price-desc">A high-end product!</div>
{% endif %}

Boolesche Attribute können auch ohne explizite Angabe von true oder false verwendet werden:

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

For-Schleifen #

Werden verwendet, um über Listen zu iterieren. Designs enthalten in der Regel mindestens eine for-Schleife, um über die anzuzeigenden Objektlisten zu iterieren.

Sie bestehen aus einer eröffnenden {% for %}- und einer abschließenden {% endfor %}-Anweisung:

{% 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 anzuzeigen:

{% 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 %}

Formatierer #

Dies sind benutzerdefinierte Javascript-Funktionen, die Ihren Designs neue Funktionalitäten hinzufügen. Clerk.js beinhaltet bereits eine Reihe unterschiedlicher Formatierer, die Sie verwenden können.

Sie können auch eigene Formatierer auf zwei Arten erstellen:

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

Hier ein Beispiel, wie Clerk.js mit drei unterschiedlichen Formatierern 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 Ihren Designs mit der Syntax {{ ATTRIBUTE | FORMATTER }} verwendet:

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

Erfordern Ihre Formatierer mehrere Attribute, steht das erste vor dem Pipe und alle weiteren nach dem Formatierer-Namen:

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

Hosting #

Designs können in my.clerk.io oder im Quellcode Ihrer Seite gehostet werden. Die beste Methode hängt von Ihrem Webshop-Setup und Ihren Anforderungen ab.

In Clerk #

Designs sind in HTML und CSS unterteilt, sodass Sie eigenständige Designs erstellen können, die beim Laden der Seite in Ihre Website eingefügt werden.

Dies ist eine gute Wahl, wenn Sie sämtliche Funktionalität an einem Ort bündeln möchten – insbesondere, da Sie so Ihre Clerk-Elemente mit Content aktualisieren können, ohne Snippets erneut einzubinden.

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

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

Auf der Website #

Designs werden direkt im Quellcode Ihrer Seite, innerhalb von Clerk-Snippets oder als referenzierbare Blocks gehostet.

Das eigene Hosting von Designs ist sinnvoll, wenn Sie dieselben Designs auf mehreren unterschiedlichen Websites wiederverwenden möchten und vermutlich ohnehin schon den Quellcode teilen.

Mit diesem Ansatz nutzen Sie die Content-Funktionalität nicht, das heißt, Sie müssen zusätzlich den API endpoint, limit und labels in Ihren Snippets konfigurieren.

Innerhalb des Snippets #

Fügen Sie 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 }}">Buy Now</a>
      </li>
    {% endfor %}
  </ul>
</span>

Mit Referenz #

Erstellen Sie einen Block mit <script type=text/x-template>, der eine ID besitzt, auf die Sie im Snippet verweisen können.

<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>

Komplettes Beispiel #

Im Folgenden sehen Sie ein Recommendations-Design, das alle oben genannten Konzepte kombiniert. Sie können dies als Ausgangspunkt für Ihre eigenen 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">On Sale</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;
}

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