Designs

Code Designs

Controlla la rappresentazione visiva degli elementi Clerk.

Code Designs
Clerk utilizza Liquid per gestire i design del codice. È un linguaggio di templating sicuro e flessibile che ti consente di creare qualsiasi tipo di design desideri per i tuoi elementi Clerk. Questo articolo copre le basi.

Puoi controllare la documentazione completa nei nostri documenti per sviluppatori.

Oggetti #

Punti dati che vengono visualizzati quando il design viene renderizzato. Sono racchiusi tra {{ e }}. Esempio:

{{ product.price }}

In questo esempio, Liquid accede all’oggetto prodotto e rende l’attributo prezzo contenuto in esso.

I design consistono in un markup HTML combinato con attributi che visualizzano informazioni sui tuoi oggetti products, categories e pages.

Ecco un design semplice che utilizza variabili di prodotto:

<div class="product-card">
	<img src="{{ product.image }}" />
	<div class="product-name">{{ product.name }}</div>
	<div class="product-price">{{ product.price }}</div>
</div>

Espressioni #

Gli oggetti possono anche essere renderizzati con espressioni, come utilizzare matematica per calcolare una percentuale di sconto:

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

Variabili #

Utilizzando la sintassi {{ VARIABLE_NAME }} puoi creare variabili che sono configurabili per ogni Content che utilizza il design. Esempio. Se desideri aggiungere un titolo unico a tutti i banner che utilizzano lo stesso design, puoi farlo con:

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

Questo mostrerà un campo di testo con il nome della variabile nella pagina delle impostazioni dei contenuti. Qualsiasi testo aggiunto qui verrà visualizzato per quel contenuto. Le variabili possono avere qualsiasi nome tu scelga.

Dynamic values

Logiche #

Utilizzate per creare funzionalità nel design, come mostrare un blocco HTML in una certa condizione o iterare su elenchi. Sono racchiuse tra {% e %}.

Dichiarazioni If #

Utilizzate per rendere parti di un design basate su una o più condizioni. Consistono in un’apertura {% if %} e una chiusura {% endif %}.

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

Le dichiarazioni if possono anche includere blocchi else per rendere se la dichiarazione iniziale valuta a falso:

{% if product.price < 100 %}
	<div class="price-desc">Un prodotto economico!</div>
{% else %}
	<div class="price-desc">Un prodotto di alta gamma!</div>
{% endif %}

Gli attributi booleani possono essere utilizzati senza scrivere esplicitamente vero o falso:

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

Cicli For #

Utilizzati per iterare su elenchi. I design generalmente includono almeno un ciclo for per iterare sull’elenco degli oggetti da visualizzare.

Consistono in un’apertura {% for %} e una chiusura {% 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 %}

I cicli for possono anche essere annidati per visualizzare gli attributi dell’elenco all’interno degli oggetti:

{% 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 %}

Formattatori #

Queste sono funzioni Javascript personalizzate che aggiungono nuove funzionalità ai tuoi design. Clerk.js è già fornito con una gamma di diverse funzioni che puoi utilizzare.

Puoi anche crearne di tue in due modi:

  • In my.clerk.io sotto Settings > Formatters.
  • Come una configurazione aggiunta a Clerk.js.

Ecco un esempio di configurazione di Clerk.js con 3 diversi formattatori:

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;
		}
	}
});

Vengono utilizzati nei tuoi design con la sintassi {{ ATTRIBUTE | FORMATTER }}:

<div class="price">{{ product.price | log_price }}</div>

Se i tuoi formattatori richiedono diversi attributi, il primo viene scritto prima della pipe, e qualsiasi attributo aggiuntivo viene scritto dopo il nome del formattatore:

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

Hosting #

I design possono essere ospitati in my.clerk.io o nel codice sorgente del tuo sito. L’approccio migliore dipende dalla configurazione del tuo webshop e dalle tue esigenze.

In Clerk #

I design sono suddivisi in HTML e CSS, consentendoti di creare design autonomi che vengono iniettati nel tuo sito al caricamento della pagina.

Questa è una buona scelta se desideri avere tutte le funzionalità disponibili da un unico posto, poiché ti consente anche di aggiornare i tuoi elementi Clerk con Content senza reinserire frammenti.

I design sono gestiti a livello di Store e vengono creati singolarmente per Ricerca, Raccomandazioni ed Email.

Vengono creati qui: Designs > New Design > Other Designs > Blank > With code.

Clerk Hosted

Sul Sito #

I design sono ospitati direttamente nel tuo codice sorgente all’interno dei frammenti Clerk o come blocchi che possono essere referenziati.

Ospitare i design da solo è una buona idea se desideri riutilizzare gli stessi design su diversi siti poiché probabilmente condividerai già il codice sorgente tra di essi.

Con questo approccio, non utilizzerai la funzionalità Content, il che significa che dovrai anche configurare l’endpoint API, limite e etichette nei tuoi frammenti.

All’interno del frammento #

Aggiungi semplicemente il design tra i tag di apertura e chiusura dei frammenti.

<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 }}">Acquista ora</a>
      </li>
    {% endfor %}
  </ul>
</span>

Con riferimento #

Crea un blocco utilizzando <script type=text/x-template> che ha un ID che puoi referenziare nel frammento.

<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 }}">Acquista ora</a>
    </div>
  {% endfor %}
</script>

Esempio Completo #

Di seguito è riportato un design di Raccomandazioni che combina tutti i concetti sopra. Puoi usarlo come punto di partenza per i tuoi design.

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">In vendita</div>
            {% endif %}
            <div class="clerk-slider-tags">
              {% if true %}
                <div class="clerk-slider-tag">Caldo</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">Acquista ora</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;
}

Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.