Designs

Code Designs

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

Clerk.io bruger Liquid til at administrere kodede designs. Det er et sikkert og fleksibelt templating-sprog, der gør det muligt at skabe enhver slags design, du ønsker til dine Clerk.io-elementer.

Du kan opbygge designs ved at skrive HTML, CSS og Liquid direkte i kodeeditoren – eller ved at beskrive, hvad du ønsker, til en AI, der skriver koden for dig.

Clerk.io designs understøtter hele Liquid templating-sproget. Eksemplerne nedenfor giver et overblik over brugen af Liquid i Code Designs.
For den komplette reference til Liquid syntaks, tags og filtre, se Liquid dokumentation.

AI Designer #

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

AI Designer er en indbygget assistent, der lader dig opbygge og redigere designs ved at beskrive ændringer med 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å Designs-siden skal du vælge AI designer for at åbne et design i AI-assisteret editor.

Sådan fungerer det #

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

Skriv din anmodning – for eksempel, “gør produktkortene større” eller “tilføj et tilbudsbadge i øverste højre hjørne”. AI’en opdaterer koden tilsvarende.

Du kan se resultatet før du gemmer, så intet bliver live, før du er tilfreds med det. Du kan også fortsætte med at redigere koden manuelt når som helst sammen med AI-forslagene.

Objekter #

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

{{ product.price }}

I dette eksempel får Liquid adgang til produktobjektet og gengiver pris-attributten, der er indeholdt i det.

Designs består af en HTML-markup kombineret med attributter, der viser info om dine products, categories og pages objekter.

Her er et simpelt design, som 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, så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 oprette 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 det samme design, kan du gøre det med:

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

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

Logik #

Bruges til at skabe funktionalitet i designet, såsom at vise en HTML-blok under en bestemt betingelse eller iterere over lister. De er omgivet af {% og %}.

If-statements #

Bruges til at gengive dele af et design, baseret på én eller flere betingelser. De består af en åbning {% if %} og en lukning {% endif %}.

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

If-statements kan også inkludere else-blokke til at vise, hvis den oprindelige betingelse evalueres til false:

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

Booleske 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. Designs indeholder generelt mindst én for-loop til at iterere over listen med objekter, der skal vises.

De består af en åbning {% for %} og en lukning {% 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å være nestede for at vise listeattributter 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 %}

Formattere #

Disse er brugerdefinerede Javascript-funktioner, der tilføjer ny funktionalitet til dine designs. Clerk.js leveres allerede med et udvalg af forskellige, 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å konfiguration af Clerk.js med 3 forskellige formattere:

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 designs 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 pipen, og eventuelle yderligere attributter skrives efter formatter-navnet:

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

Hosting #

Designs kan hostes i my.clerk.io eller i din sides kildekode. Den bedste tilgang afhænger af dit webshop-setup og dine behov.

I Clerk #

Designs er opdelt i HTML og CSS, hvilket giver dig mulighed for at lave selvstændige designs, der injiceres på din side ved pageload.

Dette er et godt valg, hvis du ønsker at have al funktionalitet samlet ét sted, da det også gør det muligt at opdatere dine Clerk-elementer med Content uden at skulle indsætte snippets igen.

Designs administreres på butiksniveau og oprettes individuelt til Search, Recommendations og Email.

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

På siden #

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

At hoste designs selv er en god idé, hvis du ønsker at genbruge de samme designs på tværs af flere forskellige sider, da du sandsynligvis allerede deler kildekoden mellem dem.

Med denne tilgang bruger du ikke Content-funktionaliteten, hvilket betyder, at du også skal konfigurere API endpoint, limit og labels i dine snippets.

Inde i snippet #

Tilføj blot designet mellem snippets’ åbne og lukkende tags.

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

Med reference #

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

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

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

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">På tilbud</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">Køb nu</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.