Designs

Code Designs

Styr den visuelle repræsentation af Clerk-elementer.

Code Designs
Clerk bruger Liquid til at håndtere code designs. Det er et sikkert og fleksibelt skabelonsprog, der gør det muligt at lave lige det design, du ønsker til dine Clerk-elementer. Denne artikel dækker det grundlæggende.

Du kan finde den fulde dokumentation i vores udviklerdokumentation.

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

Se understøttet syntaks og formattere.

Objekter #

Datapunkter, der vises, når designet gengives. De omsluttes af {{ og }}. Eksempel:

{{ product.price }}

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

Designs består af en 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å vises med udtryk, f.eks. ved at bruge matematik til at udregne en rabatprocent:

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

Variabler #

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

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

Dette viser et tekstfelt med variabelnavnet på Content-indstillingssiden. Enhver tekst tilføjet her vil blive vist for det Content. Variabler kan have ethvert navn, du vælger.

Dynamic values

Logik #

Bruges til at lave funktionalitet i designet, f.eks. at vise en HTML-blok ved en bestemt betingelse eller iterere over lister. De omsluttes af {% og %}.

If-statements #

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">On sale!</div>
{% endif %}

If-statements kan også inkludere else-blokke, hvis den oprindelige betingelse er falsk:

{% if product.price < 100 %}
	<div class="price-desc">A cheap product!</div>
{% else %}
	<div class="price-desc">A high-end product!</div>
{% endif %}

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

{% if product.in_stock %}
	<div class="product-stock">In Stock</div>
{% endif %}

For-loops #

Bruges til at iterere over lister. Designs inkluderer typisk mindst én for-loop til at vise listen af objekter.

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 indlejret for at vise listeattributter inde 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 brugerdefinerede Javascript-funktioner, der tilføjer ny funktionalitet til dine designs. Clerk.js indeholder allerede flere forskellige, som du kan bruge.

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

  • I my.clerk.io under Developers > Formatters.
  • Som en configuration, der tilføjes til Clerk.js.

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

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 formaterere 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 din hjemmesides kildekode. Den bedste løsning afhænger af din webshopopsætning og dine behov.

I Clerk #

Designs opdeles i HTML og CSS, så du kan lave selvstændige designs, der indsættes på din side ved indlæsning.

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 for 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 vil genbruge de samme designs på flere forskellige sider, da du sandsynligvis allerede deler kildekode på tværs.

Med denne løsning bruger du ikke 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 snippetens start- og slutmærker.

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

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.