Designs

Code Designs

Kontrollér den visuelle repræsentation af Clerk-elementer.

Code Designs
Clerk.io bruger Liquid til at håndtere codedesigns. Det er et sikkert og fleksibelt skabelonsprog, der gør det muligt for dig at skabe enhver form for design, du ønsker, til dine Clerk.io-elementer.

Du kan bygge design ved at skrive HTML, CSS og Liquid direkte i kodeeditoren — eller ved at beskrive, hvad du vil have, til en AI, der skriver koden for dig.

Clerk.io bruger et undersæt af Liquid. Kun de funktioner, der er listet i vores Clerk.js Template Language, understøttes i Code Designs.

Se den understøttede syntaks og formattere.

AI Designer #

Beta: AI Designer er kun tilgængelig for HQ-brugere.

AI Designer er en indbygget assistent, der lader dig bygge og redigere designs ved at beskrive ændringer på almindeligt sprog. Den håndterer koden, du håndterer visionen.

Sådan får du adgang #

Åbn AI Designer fra Search / Recommendations / Email > Designs. Øverst på designsiden skal du vælge AI designer for at åbne et design i den AI-assisterede editor.

Sådan fungerer det #

Editoren viser dit designs HTML og CSS til venstre. Til højre er AI-panelet, hvor du beskriver, hvad du gerne vil ændre.

Skriv din anmodning — for eksempel, “gør produktkortene større” eller “tilføj et udsalgsmærke i øverste højre hjørne”. AI’en opdaterer derefter koden.

Du kan forhåndsvise resultatet, før du gemmer, så intet går live, før du er tilfreds. Du kan også fortsætte med at redigere koden manuelt når som helst sammen med AI’ens forslag.

Objekter #

Datapunkter, der vises, når designet gengives. De er omgivet af {{ og }}. F.eks.:

{{ product.price }}

I dette eksempel tilgår Liquid product-objektet og gengiver attributten price, som findes i det.

Design består af et HTML-markup kombineret med attributter, der viser information om dine products, categories og pages objekter.

Her er et simpelt design, der bruger produktvariabler:

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

Udtryk #

Objekter kan også gengives med udtryk, som at bruge matematik til at beregne en rabatprocent:

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

Variabler #

Ved at bruge syntaksen {{ VARIABLE_NAME }} kan du skabe variabler, der kan konfigureres for hvert Content, der bruger designet. F.eks. Hvis du vil tilføje en unik overskrift til alle bannere, der bruger samme design, kan du gøre det med:

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

Dette vil vise et tekstfelt med variabelnavnet på Content-indstillingssiden. Alt tekst, der tilføjes her, vil blive vist for det pågældende Content. Variabler kan have ethvert navn, du vælger.

Dynamic values

Logik #

Bruges til at skabe funktionalitet i designet, som f.eks. at vise et HTML-blok ud fra en bestemt betingelse eller iterere over lister. De er omgivet af {% og %}.

If-sætninger #

Bruges til at vise dele af et design baseret på én eller flere betingelser. De består af en åbnende {% if %} og en afsluttende {% endif %}.

{% if product.on_sale == true %}
	<div class="product-discount">På udsalg!</div>
{% endif %}

If-sætninger kan også inkludere else-blokke, der vises, hvis den første betingelse evalueres til falsk:

{% if product.price < 100 %}
	<div class="price-desc">Et billigt produkt!</div>
{% else %}
	<div class="price-desc">Et kvalitetsprodukt!</div>
{% endif %}

Boolean-attributter kan bruges uden eksplicit at skrive true eller false:

{% if product.in_stock %}
	<div class="product-stock">På lager</div>
{% endif %}

For-loops #

Bruges til at iterere over lister. Design inkluderer typisk mindst én for-loop for at gennemgå listen af objekter, der skal vises.

De består af en åbnende {% for %} og en afsluttende {% 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-loops kan også indlejres for at vise lister af attributter inden i objekter:

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

Formateringer #

Dette er brugerdefinerede Javascript-funktioner, der tilføjer ny funktionalitet til dine design. Clerk.js kommer allerede med et udvalg af forskellige formateringer, du kan bruge.

Du kan også oprette dine egne på to måder:

  • I my.clerk.io under Developers > Formatters.
  • Som en konfiguration tilføjet til Clerk.js.

Her er et eksempel på at konfigurere Clerk.js med 3 forskellige formateringer:

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;
		}
	}
});

De bruges i dine design med syntaksen {{ ATTRIBUTE | FORMATTER }}:

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

Hvis dine formattere kræver flere attributter, skrives den første før pipe-symbolet, og eventuelle ekstra attributter skrives efter formatterens navn:

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

Hosting #

Design kan hostes i my.clerk.io eller i din hjemmesides kildekode. Den bedste tilgang afhænger af din webshopopsætning og dine behov.

I Clerk #

Design er opdelt i HTML og CSS, hvilket lader dig skabe selvstændige designs, der indsættes på din side ved indlæsning.

Dette er et godt valg, hvis du gerne vil have al funktionalitet tilgængelig ét sted, da det også giver dig mulighed for at opdatere dine Clerk-elementer med Content uden at skulle indsætte snippets igen.

Design håndteres på butiksniveau og oprettes individuelt for Search, Recommendations og Email.

De oprettes her: Designs > New Design > Other Designs > Blank > With code.

På siden #

Design hostes direkte i din kildekode inde i Clerk-snippets eller som blokke, der kan refereres til.

At hoste design selv er en god idé, hvis du gerne vil genbruge de samme designs på tværs af flere forskellige sites, da du sandsynligvis allerede deler kildekode mellem dem.

Med denne metode vil du ikke bruge Content-funktionen, hvilket betyder, at du også skal konfigurere API endpoint, limit og labels i dine snippets.

Inde i snippet #

Tilføj blot designet mellem snippet-taggens åbning og lukning.

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

Ved reference #

Opret et blok med <script type=text/x-template>, der har et ID, du kan referere til i snippeten.

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

Fuldstændigt eksempel #

Herunder er et Recommendations-design, der kombinerer alle ovenstående koncepter. Du kan bruge dette som udgangspunkt for dine design.

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

Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.