Designs

Code Designs

Steuern Sie die visuelle Darstellung von Clerk-Elementen.

Code Designs
Clerk verwendet Liquid zur Verwaltung von Code-Designs. Es handelt sich um eine sichere und flexible Template-Sprache, mit der Sie jedes gewünschte Design für Ihre Clerk-Elemente erstellen können. Dieser Artikel behandelt die Grundlagen.

Die vollständige Dokumentation finden Sie in unseren Entwicklerdokumenten.

Clerk verwendet eine Teilmenge von Liquid. Es werden nur die in unserer Clerk.js Template Language gelisteten Funktionen in Code Designs unterstützt.

Siehe die unterstützte Syntax und Formatierer.

Objekte #

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

{{ product.price }}

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

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

Hier ist ein einfaches Design, das Produktvariablen verwendet:

<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, wie z. B. mithilfe von Mathematik, um einen prozentualen Rabatt 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 z. B. allen Bannern mit demselben Design eine einzigartige Überschrift hinzufügen möchten, könnten Sie das folgendermaßen tun:

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

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

Dynamic values

Logik #

Wird verwendet, um Funktionalität im Design zu erstellen, z. B. um einen HTML-Block unter einer bestimmten Bedingung anzuzeigen oder über Listen zu iterieren. Sie werden mit {% und %} umschlossen.

If-Anweisungen #

Werden 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">Im Angebot!</div>
{% endif %}

If-Anweisungen können auch else-Blöcke enthalten, die gerendert werden, wenn die ursprüngliche Anweisung als falsch ausgewertet wird:

{% 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 verwendet, um über Listen zu iterieren. Designs enthalten in der Regel mindestens eine for-Schleife, um über die Liste der anzuzeigenden Objekte 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 %}

Formatierer #

Dies sind benutzerdefinierte Javascript-Funktionen, die Ihren Designs neue Funktionalität hinzufügen. Clerk.js wird bereits mit verschiedenen Funktionen ausgeliefert, die Sie verwenden können.

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

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

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

Wenn Ihre Formatierer mehrere Attribute benötigen, wird das erste vor dem Pipe geschrieben, und alle weiteren Attribute werden nach dem Namen des Formatierers geschrieben:

<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 Vorgehensweise hängt von Ihrer Shop-Setup und Ihren Anforderungen ab.

In Clerk #

Designs werden 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 alle Funktionen an einem Ort verfügbar haben möchten, da Sie so auch Ihre Clerk-Elemente mit Content aktualisieren können, ohne Snippets neu einzufügen.

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

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

Auf der Seite #

Designs werden direkt in Ihrem Quellcode innerhalb von Clerk-Snippets oder als Blöcke gehostet, auf die verwiesen werden kann.

Das eigene Hosting von Designs ist eine gute Idee, wenn Sie dieselben Designs auf mehreren verschiedenen Seiten wiederverwenden möchten, da Sie wahrscheinlich ohnehin den Quellcode zwischen ihnen teilen.

Bei diesem Ansatz nutzen Sie nicht die Content-Funktionalität, was bedeutet, dass Sie auch den API endpoint, limit und labels in Ihren Snippets konfigurieren müssen.

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

Mit Referenz #

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>

Vollständiges Beispiel #

Unten ist 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">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;
}

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