Designs

Code Designs

Kontroller den visuelle repræsentation af Clerk-elementer.

Code Designs
Clerk bruger Liquid til at administrere kode designs. Det er et sikkert og fleksibelt skabelonsprog, der gør det muligt for dig at skabe enhver form for design, du ønsker til dine Clerk-elementer. Denne artikel dækker det grundlæggende.

Du kan tjekke den fulde dokumentation i vores udviklerdokumenter.

Objekter #

Datapunkter, der vises, når designet gengives. De er indkapslet med {{ og }}. F.eks:

{{ product.price }}

I dette eksempel tilgår Liquid produktobjektet og gengiver prisen-attributten, der er indeholdt i det.

Designs består af en HTML-markup kombineret med attributter, der viser information om dine produkter, kategorier og sider 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>

Udtalelser #

Objekter kan også gengives med udtalelser, 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 er konfigurerbare for hver Indhold, der bruger designet. F.eks. Hvis du 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å indholdsindstillingssiden. Enhver tekst, der tilføjes her, vil blive gengivet for det indhold. Variabler kan have ethvert navn, du vælger.

Dynamiske værdier

Logik #

Bruges til at skabe funktionalitet i designet, som at vise en HTML-blok under en bestemt betingelse eller iterere over lister. De er indkapslet med {% og %}.

If-sætninger #

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

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

If-sætninger kan også inkludere else-blokke til at gengive, hvis den indledende erklæring 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 %}

Boolean-attributter kan bruges uden eksplicit at skrive sandt eller falsk:

{% if product.in_stock %}
	<div class="product-stock">På lager</div>
{% endif %}

For-løkker #

Bruges til at iterere over lister. Designs inkluderer generelt mindst én for-løkke til at iterere over listen af objekter, der skal vises.

De består af en åbnings {% for %} og en luknings {% 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å være indlejret 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 %}

Formaterere #

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

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

  • I my.clerk.io under Indstillinger > Formaterere.
  • Som en konfiguration tilføjet 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 røret, og eventuelle yderligere attributter skrives efter formatternavnet:

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

Hosting #

Designs kan hostes i my.clerk.io eller i din sites kildekode. Den bedste tilgang afhænger af dit webshop-setup og dine behov.

I Clerk #

Designs er opdelt i HTML og CSS, hvilket giver dig mulighed for at skabe selvstændige designs, der injiceres i din side ved indlæsning.

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.

Designs administreres på butiksniveau og oprettes individuelt til Søgning, Anbefalinger og E-mail.

De oprettes her: Designs > Nyt Design > Andre Designs > Tomt > Med kode.

Clerk Hosted

På stedet #

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

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 vil du ikke bruge Indhold funktionaliteten, hvilket betyder, at du også skal konfigurere API-endepunktet, grænse og etiketter i dine snippets.

Inden for snippet #

Tilføj blot designet mellem snippetens åbne og lukkede tags.

<span
  id="popular"
  class="clerk"
  data-api="recommendations/popular"
  data-labels='["Hjemmeside / Populære"]'
  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 ved hjælp af <script type=text/x-template> der har en ID, du kan referere til i snippetet.

<div 
  id="popular"
  class="clerk"
  data-api="recommendations/popular"
  data-labels='["Hjemmeside / Populære"]'
  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 anbefalingsdesign, der kombinerer alle ovenstående koncepter. Du kan bruge dette som et 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å udsalg</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.