Designs

Code Designs

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

Code Designs
Clerk.io bruger Liquid til at håndtere code designs. Det er et sikkert og fleksibelt skabelonsprog, der giver dig mulighed for at skabe enhver slags 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, hvad du vil have til en AI, der skriver koden for dig.

Clerk.io designs understøtter det fulde Liquid-skabelonsprog. Eksemplerne nedenfor giver et overblik over brugen af Liquid i Code Designs.

For den komplette reference for Liquid syntaks, tags og filtre, se Liquid documentation.

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å Designs-siden vælger du AI designer for at åbne et design i AI-assisteret editor.

Sådan fungerer det #

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

Skriv din forespørgsel — for eksempel, “gør produktkortene større” eller “tilføj et udsalgsbadge øverst til højre”. AI’en opdaterer koden derefter.

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

Objekter #

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

{{ product.price }}

I dette eksempel tilgås product objektet af Liquid og viser price attributten, der er indeholdt i det.

Designs består af et HTML-markup kombineret med attributter, der viser info 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å vises 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 oprette variabler, der kan konfigureres for hver Content, der bruger designet. F.eks. hvis du vil tilføje en unik overskrift til alle bannere, der bruger det samme design, kunne 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 Content. Variabler kan have ethvert navn efter eget valg.

Dynamic values

Logik #

Bruges til at skabe funktionalitet i designet, som at vise en HTML-blok under en bestemt betingelse eller gentage over lister. De er omgivet 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å inkludere else blokke til at vise, hvis den oprindelige sætning 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 generelt mindst ét for-loop til gennemløb af listen over 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å nestes for at vise listeattributter 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 kommer allerede med en række 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å at konfigurere 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 ekstra 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 dit webshops setup og dine behov.

I Clerk #

Designs er opdelt i HTML og CSS, så du kan oprette selvstændige designs, der injiceres på din side ved sideload.

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

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

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

På sitet #

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 vil genbruge de samme designs på flere forskellige sider, da du sandsynligvis allerede deler kildekoden mellem dem.

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

Inden i snippet #

Tilføj blot designet mellem snippetens start- og slut-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 ved hjælp af <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>

Fuldt eksempel #

Nedenfor er et Recommendations-design, der kombinerer alle ovenstående koncepter. Du kan bruge dette som udgangspunkt for dine egne 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">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.