Designs

Code Designs

Styr den visuelle repræsentation af Clerk-elementer.

Code Designs
Clerk bruger Liquid til at styre kodedesigns. Det er et sikkert og fleksibelt skabelonsprog, som giver dig mulighed for at skabe ethvert design, du ønsker, til dine Clerk elementer. Denne artikel dækker det grundlæggende.

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

Objekter #

Datapunkter, der vises, når designet gengives. De er pakket ind i {{ og }}. F.eks:

{{ product.price }}

I dette eksempel tilgår Liquid Produktobjekt og gengiver attributten pris, der er indeholdt i den.

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 med 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, f.eks. ved at bruge matematik til at beregne en rabatprocent:

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

Variabler #

Ved hjælp af syntaksen {{ VARIABLE_NAME }} kan du oprette variabler, som kan konfigureres for hver Indhold, der bruger designet. Hvis du f.eks. 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å siden med indholdsindstillinger. Enhver tekst, der tilføjes her, vil blive gengivet for det pågældende indhold. Variabler kan have et hvilket som helst navn efter eget valg.

Dynamic values

Logik #

Bruges til at skabe funktionalitet i designet, som f.eks. at vise en HTML-blok på en bestemt betingelse eller at iterere over lister. De er pakket ind i {% og %}.

Hvis-sætninger #

Bruges til at gengive dele af et design baseret på en eller flere betingelser. De består af en indledende {% if %} og en afsluttende {% endif %}.

{% if product.on_sale == true %}
	<div class="product-discount">On sale!</div>
{% endif %}

If-sætninger kan også indeholde else -blokke, der skal gengives, hvis den indledende sætning evalueres til false:

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

Boolske attributter kan bruges uden eksplicit at skrive true eller false:

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

For-løkker #

Bruges til at iterere over lister. Design inkluderer generelt mindst én for-løkke til at iterere over 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-løkker kan også indlejres for at vise listeattributter inden for 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 %}

Formattering #

Dette er brugerdefinerede Javascript-funktioner, der tilføjer ny funktionalitet til dine designs. Clerk.js leveres allerede med en en række forskellige, som du kan bruge.

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

  • I min.clerk.io under Settings > Formatters.
  • Som en PLACEHOLDER_35 tilføjelse 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 piben, og eventuelle yderligere attributter skrives efter formatternavnet:

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

Hosting #

Design kan hostes på my.clerk.io eller i kildekoden på dit websted. Den bedste tilgang afhænger af din webshops opsætning og dine behov.

I Clerk #

Design er opdelt i HTML og CSS, så du kan oprette selvstændige designs, der indlæses på dit websted ved pageload.

Dette er et godt valg, hvis du vil have al funktionalitet tilgængelig fra et enkelt sted, da det også giver dig mulighed for at opdatere dine Clerk elementer med Indhold uden at genindsætte snippets.

Design administreres på butiksniveau og oprettes individuelt til søgning, anbefalinger og e-mail.

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

Clerk Hosted

På webstedet #

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

Det er en god idé at hoste designs selv, hvis du vil genbruge de samme designs på flere forskellige websteder, da du sandsynligvis allerede deler kildekoden mellem dem.

Med denne tilgang bruger du ikke Indhold -funktionaliteten, hvilket betyder, at du også skal konfigurere API-slutpunkt, grænse og etiketter i dine snippets.

Inde i snippet #

Du skal blot tilføje designet mellem snippets åbnings- og lukningstag.

<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, som du kan henvise til i uddraget.

<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 ses et Recommendations-design, der kombinerer alle ovenstående koncepter. Du kan bruge det 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.