Designs

Code Designs

Steuern Sie die visuelle Darstellung von Clerk-Elementen.

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

Code Designs
Clerk verwendet Liquid für die Verwaltung von Code-Designs. Es ist eine sichere und flexible Schablonensprache, mit der Sie jede Art von Design für Ihre Clerk Elemente erstellen können. Dieser Artikel behandelt die Grundlagen.

Sie können die vollständige Dokumentation unter unsere Entwickler-Dokumente.

Objekte #

Datenpunkte, die angezeigt werden, wenn der Entwurf gerendert wird. Sie sind mit {{ und }} umhüllt. Z.B.:

{{ product.price }}

In diesem Beispiel greift Liquid auf das Attribut Produktobjekt zu und stellt das darin enthaltene Attribut Preis dar.

Entwürfe bestehen aus einem HTML-Markup in Kombination mit Attributen, die Informationen über Ihre products, categories und pages Objekte anzeigen.

Hier ist ein einfacher Entwurf 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, z. B. mit Mathe, 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 Inhalt, das das Design verwendet, konfigurierbar sind. Wenn Sie z. B. allen Bannern, die dasselbe Design verwenden, eine eindeutige Überschrift hinzufügen möchten, können Sie dies mit tun:

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

Dadurch wird auf der Seite mit den Inhaltseinstellungen ein Textfeld mit dem Variablennamen angezeigt. Jeder Text, der hier hinzugefügt wird, wird für diesen Inhalt gerendert. Variablen können einen beliebigen Namen haben.

Dynamic values

Logik #

Wird verwendet, um Funktionen im Design zu erstellen, wie z.B. die Anzeige eines HTML-Blocks bei einer bestimmten Bedingung oder die Iteration über Listen. Sie werden mit {% und %} umhüllt.

If-Anweisungen #

Werden verwendet, um Teile eines Entwurfs auf der Grundlage einer oder mehrerer Bedingungen darzustellen. Sie bestehen aus einer öffnenden {% if %} und einer schließenden {% endif %}.

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

If-Anweisungen können auch else Blöcke enthalten, die gerendert werden, wenn die anfängliche Anweisung als falsch bewertet 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-Schleifen #

Werden verwendet, um über Listen zu iterieren. Entwürfe enthalten in der Regel mindestens eine for-Schleife zur Iteration über die Liste der anzuzeigenden Objekte.

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 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 Funktionen hinzufügen. Clerk.js wird bereits mit einem Auswahl an verschiedenen ausgeliefert, das Sie verwenden können.

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

  • In meinem.clerk.io unter Settings > Formatters.
  • Als PLACEHOLDER_35 zusätzlich zu Clerk.js.

Hier ist ein Beispiel für die Konfiguration von Clerk.js mit 3 verschiedenen Formatierern:

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 erfordern, wird das erste vor die Pipe geschrieben, und alle weiteren Attribute werden nach dem Formatierernamen 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 aufgeteilt, so dass Sie in sich geschlossene Designs erstellen können, die bei jedem Seitenaufruf in Ihre Website eingefügt werden.

Dies ist eine gute Wahl, wenn Sie alle Funktionen an einem einzigen Ort zur Verfügung haben möchten, da Sie so auch Ihre Clerk Elemente mit Inhalt aktualisieren können, ohne erneut Snippets 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 > New Design > Other Designs > Blank > With code.

Clerk Hosted

On Site #

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

Es ist eine gute Idee, Designs selbst zu hosten, wenn Sie dieselben Designs auf mehreren verschiedenen Websites wiederverwenden möchten, da Sie den Quellcode wahrscheinlich bereits gemeinsam nutzen werden.

Bei diesem Ansatz werden Sie die Funktion Inhalt nicht nutzen, d. h. Sie müssen auch die API-Endpunkt, Grenze und Etiketten in Ihren Snippets konfigurieren.

Innerhalb des Snippets #

Fügen Sie das Design einfach zwischen den öffnenden und schließenden Tags der 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 Verweis #

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 #

Nachfolgend finden Sie eine Design-Empfehlung, die alle oben genannten Konzepte kombiniert. Sie können dies als Ausgangspunkt für Ihre Entwürfe 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;
}