Designs

Code Designs

Kontrollér den visuelle repræsentation af Clerk-elementer.
Search code editor with desktop and mobile HTML and CSS tabs

Clerk.io bruger Liquid til at håndtere kodede designs. Det er et sikkert og fleksibelt templating sprog, der gør det muligt at skabe præcis det design, du ønsker til dine Clerk.io-elementer.

Du kan bygge designs ved at skrive HTML, CSS og Liquid direkte i kodeeditoren — eller ved at beskrive dine ønsker til en AI, som skriver koden for dig.

For Chat produktkort, indsæt HTML og Liquid i Chat > Configuration > Product card template. Tilføj styling-regler i Custom styling på samme side. Dette CSS-felt styler både produktkort og Chat-vinduet.

Clerk.io designs understøtter hele Liquid templating sproget. Eksemplerne nedenfor giver et overblik over brug af Liquid i Code Designs.

For den komplette reference til Liquid syntaks, tags og filtre, se Liquid-dokumentationen.

AI Designer #

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

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

Sådan får du adgang #

Åbn AI Designer fra Search / Recommendations / Email > Designs. Øverst på Designs-siden vælges 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 vil ændre.

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

Du kan forhåndsvise resultatet før du gemmer, så intet bliver live, før du er tilfreds. Du kan til enhver tid fortsætte med at redigere koden manuelt sideløbende med AI forslag.

Editor-layout #

Search og Recommendation kodede designs har forskellige editor-kontroller:

  • Redigér designnavnet over kodeeditoren.
  • I Search kodede designs bruges HTML, CSS, HTML - Mobile og CSS - Mobile faner over editoren. Rul ned under editoren for Available Designs and Components.
  • I Recommendation kodede designs bruges HTML og CSS fanerne. Denne editor viser ikke Available Designs and Components.
  • Åbn Preview fra sidehovedet eller dens handlingsmenu.
  • Find Design ID i handlingsmenuen. Sidehovedet giver også adgang til information om Elements, der bruger designet.
Recommendation code editor with HTML and CSS tabs

Objekter #

Datafelter, der vises, når designet bliver gengivet. De omsluttes af {{ og }}. Fx:

{{ product.price }}

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

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

Her er et simpelt design, der bruger produkt-variabler:

<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å vises med udtryk, som fx ved 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 hver Content, som bruger designet. Fx hvis du vil tilføje en unik overskrift til alle bannere, der bruger samme design, kan du gøre det således:

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

Dette viser et tekstfelt med variabelnavnet på Content indstillingssiden. Alt tekst der tilføjes her, vil blive vist for det Content. Variabler kan have hvilket som helst navn, du ønsker.

Logik #

Bruges til at skabe funktionalitet i designet, som at vise en HTML-blok på en bestemt betingelse, eller gennemløbe lister. De omsluttes af {% og %}.

If-sætninger #

Bruges til at vise dele af et design baseret på en 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-sætninger kan også indeholde else blokke, der renderes hvis det oprindelige udtryk evalueres til falsk:

{% if product.price < 100 %}
	<div class="price-desc">Et billigt produkt!</div>
{% else %}
	<div class="price-desc">Et high-end 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 gennemløbe lister. Designs inkluderer som regel mindst ét for-loop for at gennemløbe listen af 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 indlejrede for vise liste-attributter i objekterne:

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

Disse er tilpassede Javascript-funktioner, der tilføjer ny funktionalitet til dine designs. Clerk.js kommer 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 configuration tilføjet til Clerk.js.

Her er et eksempel på konfiguration af Clerk.js med 3 forskellige formatteringer:

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 formatteringer kræver flere attributter, skrives den første før pipen, og alle 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 hjemmesides kildekode. Den bedste tilgang afhænger af din webshop opsætning og dine behov.

I Clerk #

Designs deles op i HTML og CSS, så du kan lave selvstændige designs, der bliver injiceret i din side ved indlæsning.

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 sætte snippets ind igen.

Designs styres på Store-niveau og oprettes individuelt for Search, Recommendations og Email.

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

På hjemmesiden #

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

At hoste dine designs selv er en god idé hvis du ønsker at genbruge samme designs på flere forskellige sider, da du formentlig allerede deler kildekoden mellem dem.

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

Inde i snippet #

Tilføj blot designet mellem snippet’ens åbne og lukkede 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 }}">Køb nu</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 snippet’et.

<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 }}">Køb nu</a>
    </div>
  {% endfor %}
</script>

Fuld eksemp el #

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.