Designs

Code Designs

Controllare la rappresentazione visiva degli elementi di Clerk.

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

Code Designs
Clerk utilizza Liquid per la gestione dei progetti di codice. È un linguaggio di template sicuro e flessibile che consente di creare qualsiasi tipo di design per gli elementi di Clerk. Questo articolo ne copre le basi.

È possibile consultare la documentazione completa in i nostri documenti per gli sviluppatori.

Oggetti #

Punti di dati che vengono visualizzati durante il rendering del disegno. Sono avvolti da {{ e }}. Ad esempio

{{ product.price }}

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

I disegni consistono in un markup HTML combinato con attributi che mostrano informazioni sugli oggetti products, categories e pages.

Ecco un semplice disegno 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 essere resi anche con espressioni, come l’uso di matematica per calcolare una percentuale di sconto:

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

Variabili #

Utilizzando la sintassi {{ VARIABLE_NAME }} si possono creare variabili configurabili per ogni Contenuto che utilizza il disegno. Ad esempio, se si vuole aggiungere un titolo unico a tutti i banner che utilizzano lo stesso design, si può fare con:

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

Questo mostrerà un campo di testo con il nome della variabile nella pagina delle impostazioni del contenuto. Qualsiasi testo aggiunto qui sarà reso per quel Contenuto. Le variabili possono avere qualsiasi nome a scelta.

Dynamic values

Logiche #

Utilizzate per creare funzionalità nel progetto, come mostrare un blocco HTML a una certa condizione o iterare su elenchi. Sono avvolte da {% e %}.

Dichiarazioni If #

Servono a rendere parti di un disegno in base a una o più condizioni. Sono costituiti da un’apertura {% if %} e da una chiusura {% endif %}.

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

Le istruzioni If possono anche includere blocchi else per eseguire il rendering se l’istruzione iniziale è valutata come falsa:

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

Gli attributi booleani possono essere usati senza scrivere esplicitamente true o false:

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

Cicli For #

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

Sono costituiti da un ciclo di apertura {% for %} e uno di 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 degli elenchi 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 #

Si tratta di funzioni Javascript personalizzate che aggiungono nuove funzionalità ai progetti. Clerk.js viene già fornito con un gamma di diversi che si può usare.

È anche possibile crearne di propri in due modi:

  • Nel mioclerk.io sotto Settings > Formatters.
  • Come PLACEHOLDER_35 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 progetti con la sintassi {{ ATTRIBUTE | FORMATTER }}:

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

Se i formattatori richiedono più attributi, il primo viene scritto prima della pipe, mentre gli attributi aggiuntivi vengono scritti dopo il nome del formattatore:

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

Hosting #

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

In Clerk #

I progetti sono suddivisi in HTML e CSS, in modo da creare progetti autonomi che vengono inseriti nel sito al caricamento delle pagine.

Questa è una buona scelta se si desidera avere tutte le funzionalità disponibili da un unico punto, in quanto consente anche di aggiornare gli elementi di Clerk con Contenuto senza dover reinserire gli snippet.

I design sono gestiti a livello di negozio 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 disegni sono ospitati direttamente nel codice sorgente all’interno degli snippet di Clerk o come blocchi a cui si può fare riferimento.

Ospitare i disegni da soli è una buona idea se si desidera riutilizzare gli stessi disegni su più siti diversi, in quanto è probabile che il codice sorgente sia già condiviso tra di essi.

Con questo approccio, non si utilizzerà la funzionalità Contenuto, il che significa che si dovranno configurare anche le funzioni APunto finale PI, limite e etichette nei propri snippet.

All’interno dello snippet #

È sufficiente aggiungere il design tra i tag di apertura e chiusura dello snippet.

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

Con riferimento #

Creare un blocco usando <script type=text/x-template> che abbia un ID a cui fare riferimento nello 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 }}">Buy Now</a>
    </div>
  {% endfor %}
</script>

Esempio completo #

Di seguito è riportato un progetto di Raccomandazioni che combina tutti i concetti sopra esposti. Potete usarlo come punto di partenza per i vostri progetti.

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