Designs

Code Designs

Steuern Sie die visuelle Darstellung von Clerk-Elementen.

Code Designs
Clerk verwendet Liquid zur Verwaltung von Code-Designs. Es ist eine sichere und flexible Template-Sprache, die es Ihnen ermöglicht, jede Art von Design für Ihre Clerk-Elemente zu erstellen, die Sie möchten. Dieser Artikel behandelt die Grundlagen.

Sie können die vollständige Dokumentation in unseren Entwicklerdokumenten einsehen.

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 Produktobjekt zu und rendert das Preis-Attribut, das darin enthalten ist.

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

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

Ausdrücke #

Objekte können auch mit Ausdrücken gerendert werden, wie z.B. mit Mathematik, 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 Inhalt, das das Design verwendet, konfigurierbar sind. Z.B. Wenn Sie allen Bannern, die dasselbe Design verwenden, eine einzigartige Überschrift hinzufügen möchten, könnten Sie dies mit:

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

Dies zeigt ein Textfeld mit dem Variablennamen auf der Seite der Inhaltseinstellungen an. Jeder hier hinzugefügte Text wird für diesen Inhalt gerendert. Variablen können jeden Namen Ihrer Wahl haben.

Dynamische Werte

Logik #

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

If-Anweisungen #

Verwendet, 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, um zu rendern, 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 #

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

Formatter #

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

Sie können auch Ihre eigenen auf zwei Arten erstellen:

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

Hier ist ein Beispiel zur Konfiguration von Clerk.js mit 3 verschiedenen Formatters:

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 Formatter mehrere Attribute benötigen, wird das erste vor dem Pipe geschrieben, und alle zusätzlichen Attribute werden nach dem Namen des Formatters 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 Bedürfnissen 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 alle Funktionen von einem einzigen Ort aus verfügbar haben möchten, da es Ihnen auch ermöglicht, Ihre Clerk-Elemente mit Inhalt zu aktualisieren, ohne Snippets erneut einfügen zu müssen.

Designs werden auf Store-Ebene verwaltet und individuell für Suche, Empfehlungen und E-Mail erstellt.

Sie werden hier erstellt: Designs > Neues Design > Andere Designs > Leer > Mit Code.

Clerk Gehostet

Auf der Website #

Designs werden direkt in Ihrem Quellcode innerhalb von Clerk-Snippets oder als Blöcke gehostet, die referenziert werden können.

Das Hosting von Designs selbst ist eine gute Idee, wenn Sie dieselben Designs über mehrere verschiedene Websites hinweg wiederverwenden möchten, da Sie wahrscheinlich bereits den Quellcode zwischen ihnen teilen.

Mit diesem Ansatz verwenden Sie nicht die Inhalt Funktionalität, was bedeutet, dass Sie auch den API-Endpunkt, Limit und Labels in Ihren Snippets konfigurieren müssen.

Innerhalb des Snippets #

Fügen Sie das Design einfach zwischen den öffnenden und schließenden Tags des Snippets hinzu.

<span
  id="popular"
  class="clerk"
  data-api="recommendations/popular"
  data-labels='["Startseite / Beliebt"]'
  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 #

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

<div 
  id="popular"
  class="clerk"
  data-api="recommendations/popular"
  data-labels='["Startseite / Beliebt"]'
  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>

Vollständiges Beispiel #

Im Folgenden finden Sie ein Empfehlungsdesign, das all diese Konzepte kombiniert. Sie können dies als Ausgangspunkt für Ihre 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">Heiß</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.