Designs

Code Designs

Steuern Sie die visuelle Darstellung der Clerk-Elemente.

Clerk.io verwendet Liquid zur Verwaltung von Code Designs. Es ist eine sichere und flexible Template-Sprache, mit der Sie jedes beliebige Design 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, und sie schreibt den Code für Sie.

Clerk.io Designs unterstützen die vollständige Liquid Template-Sprache. Die folgenden Beispiele geben einen Überblick über die Verwendung von Liquid in Code Designs.
Die vollständige Referenz für Liquid-Syntax, Tags und Filter 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, mit dem Sie Designs erstellen und bearbeiten können, indem Sie Änderungen in einfacher Sprache beschreiben. Er übernimmt den Code, Sie übernehmen die Vision.

Zugriff #

Öffnen Sie den AI Designer über Search / Recommendations / Email > Designs. Oben auf der Designs-Seite wählen Sie AI designer, um ein Design im KI-gestützten Editor zu öffnen.

Funktionsweise #

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

Geben Sie Ihre Anfrage ein – zum Beispiel “make the product cards larger” oder “add a sale badge in the top right corner”. Die KI aktualisiert daraufhin den Code entsprechend.

Sie können das Ergebnis vor dem Speichern in der Vorschau ansehen, sodass nichts veröffentlicht wird, bevor Sie zufrieden sind. Sie können den Code jederzeit auch manuell bearbeiten, parallel zu den Vorschlägen der KI.

Objects #

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 object zu und rendert das darin enthaltene price-Attribut.

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

Hier ein einfaches Design mit Produktvariablen:

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

Expressions #

Objekte können auch mit Ausdrücken gerendert werden, wie zum Beispiel mit Mathematik, um einen prozentualen Rabatt zu berechnen:

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

Variables #

Mit der Syntax {{ VARIABLE_NAME }} können Sie Variablen erstellen, die für jedes Content, das das Design verwendet, konfigurierbar sind. Wenn Sie z.B. eine individuelle Überschrift zu allen Bannern hinzufügen möchten, die dasselbe Design nutzen, können Sie es so machen:

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

Dadurch erscheint ein Textfeld mit dem Variablennamen auf der Content-Einstellungsseite. Jeder hier eingefügte Text wird für diesen Content gerendert. Variablen können beliebige Namen tragen.

Logics #

Dient dazu, Funktionalität im Design zu erstellen, wie z.B. das Anzeigen eines HTML-Blocks unter bestimmten Bedingungen oder das Iterieren über Listen. Sie werden mit {% und %} umschlossen.

If Statements #

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

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

If-Statements können auch else-Blöcke enthalten, um etwas zu rendern, falls die ursprüngliche Bedingung auf “false” 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 verwendet werden, ohne explizit true oder false zu schreiben:

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

For Loops #

Wird zum Iterieren über Listen verwendet. Designs enthalten in der Regel mindestens eine For-Schleife, um über die anzuzeigenden Objektlisten zu iterieren.

Sie bestehen aus einem öffnenden {% for %} und einem 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 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 %}

Formatters #

Dies sind benutzerdefinierte Javascript-Funktionen, die Ihren Designs neue Funktionalität verleihen. Clerk.js wird bereits mit einer Reihe verschiedener Funktionen ausgeliefert, die Sie verwenden können.

Sie können auch eigene auf zwei Arten erstellen:

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

Hier ein Beispiel, wie Clerk.js mit 3 verschiedenen Formatters 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>

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

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

Hosting #

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

In Clerk #

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

Dies ist eine gute Wahl, wenn Sie alle Funktionen an einem Ort verwalten möchten, da Sie so auch Ihre Clerk-Elemente mit Content aktualisieren können, ohne erneut Snippets einzufügen.

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

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

On Site #

Designs werden direkt im Quellcode Ihrer Website innerhalb von Clerk-Snippets oder als Blöcke gehostet, auf die Bezug genommen werden kann.

Eigene Designs zu hosten ist eine gute Idee, wenn Sie die gleichen Designs auf mehreren verschiedenen Websites wiederverwenden möchten, da der Quellcode wahrscheinlich bereits gemeinsam genutzt wird.

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

Inside snippet #

Fügen Sie das Design einfach zwischen die öffnenden und schließenden Tags des Snippets 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>

With reference #

Erstellen Sie einen Block mit <script type=text/x-template>, der eine ID hat, 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>

Full Example #

Im Folgenden finden 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.