Designs

Code Designs

Kontroller den visuelle repræsentation af Clerk-elementer.

Code Designs
Clerk bruger Liquid til at håndtere kode-designs. Det er et sikkert og fleksibelt templating-sprog, der gør det muligt for dig at lave præcis det design du ønsker til dine Clerk-elementer. Denne artikel gennemgår det grundlæggende.

Du kan se den fulde dokumentation i vores udvikler-dokumentation.

Clerk bruger et delmængde af Liquid. Kun de funktioner, der er angivet i vores Clerk.js Template Language, er understøttet i Code Designs.

Se den understøttede syntaks og formattere.

Objekter #

Datapunkter der bliver vist, 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.

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å gengives med udtryk, såsom brug af matematik til at udregne en procentvis rabat:

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

Variabler #

Ved at bruge syntaksen {{ VARIABLE_NAME }} kan du oprette variabler, som kan konfigureres for hvert enkelt Content der benytter designet. F.eks. hvis du vil tilføje en unik overskrift til alle bannere med samme design, kan du gøre det således:

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

Dette vil vise et tekstfelt med variabelnavnet på Content-indstillinger siden. Hvilket som helst tekst, der indtastes her, vil blive vist for det pågældende Content. Variabler kan have hvilket som helst ønsket navn.

Dynamic values

Logik #

Bruges til at lave funktionalitet i designet, f.eks. at vise en HTML-blok ud fra en bestemt betingelse, eller gennemløbe lister. De er omgivet af {% og %}.

If-statements #

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

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

If-statements kan også inkludere else blokke til at vise indhold, hvis den oprindelige betingelse ikke er opfyldt:

{% 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 gennemløbe lister. Designs indeholder typisk mindst ét for-loop til 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 liste-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 %}

Formattere #

Dette er custom 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å lave 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 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 pipe-tegnet, 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 kildekoden på dit website. Den bedste tilgang afhænger af din webshop-opsætning og dine behov.

I Clerk #

Designs opdeles i HTML og CSS, så du kan lave selvstændige designs, der indsættes på dit site ved sidelast.

Dette er et godt valg, hvis du ønsker at have al funktionalitet samlet ét sted, da du også kan 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å 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 sites, da du sandsynligvis allerede deler kildekode på tværs.

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

Inde i snippet #

Tilføj blot designet mellem snippet’ets åbning og afslutningstag.

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

Lav en blok med <script type=text/x-template>, som har et ID du kan referere til i snippet.

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

Fuldt eksempel #

Nedenfor er et Recommendations-design, som 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">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.