Code Designs

Clerk.io utilizza Liquid per la gestione dei design del codice. È un linguaggio di template sicuro e flessibile che ti permette di creare qualsiasi tipo di design desideri per i tuoi elementi Clerk.io.

Puoi creare design scrivendo HTML, CSS e Liquid direttamente nell’editor di codice — oppure descrivere ciò che desideri a un’IA che scrive il codice per te.

Per le Chat product cards, inserisci HTML e Liquid in Chat > Configuration > Product card template. Aggiungi le regole di stile in Custom styling nella stessa pagina. Questo campo CSS stila sia le product cards sia la finestra Chat.

I design Clerk.io supportano l’intero linguaggio di template Liquid. Gli esempi qui sotto forniscono una panoramica sull’utilizzo di Liquid nei Code Design.

Per la documentazione completa su sintassi, tag e filtri Liquid, consulta la Liquid documentation.

AI Designer #

Beta: L’AI Designer è disponibile solo per gli utenti HQ.

L’AI Designer è un assistente integrato che ti permette di creare ed editare i design semplicemente descrivendo le modifiche in linguaggio naturale. Tu pensi la visione, lui gestisce il codice.

Come accedere #

Apri l’AI Designer da Search / Recommendations / Email > Designs. In alto nella pagina Designs, seleziona AI designer per aprire un design nell’editor assistito dall’IA.

Come funziona #

L’editor mostra l’HTML e CSS del tuo design a sinistra. A destra c’è il pannello IA, dove puoi descrivere cosa desideri cambiare.

Digita la tua richiesta — ad esempio, “rendi le product card più grandi” o “aggiungi un badge sconto nell’angolo in alto a destra”. L’IA aggiorna il codice di conseguenza.

Puoi visualizzare l’anteprima prima di salvare, così niente verrà pubblicato finché non sei soddisfatto. Puoi anche continuare a modificare manualmente il codice in qualsiasi momento, insieme ai suggerimenti dell’IA.

Layout dell’editor #

I design del codice Search e Recommendation hanno controlli differenti nell’editor:

• Modifica il nome del design sopra l’editor di codice.
• Nei design del codice Search, usa le tab HTML, CSS, HTML - Mobile e CSS - Mobile sopra l’editor. Scorri sotto l’editor per Available Designs and Components.
• Nei design del codice Recommendation, usa le tab HTML e CSS. Questo editor non mostra Available Designs and Components.
• Apri Preview dall’intestazione della pagina o dal suo menu azioni.
• Trova Design ID nel menu azioni. L’intestazione offre anche accesso alle informazioni sugli Element che usano questo design.

Oggetti #

Punti dati visualizzati quando il design viene renderizzato. Sono racchiusi da {{ e }}. Es.:

{{ product.price }}

In questo esempio, Liquid accede all’oggetto product e visualizza l’attributo price in esso contenuto.

I design sono costituiti da markup HTML combinato con attributi che mostrano informazioni sugli oggetti products, categories e pages.

Ecco un semplice design che usa variabili 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 tramite espressioni, ad esempio usando la 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 configurabili per ciascun Content che utilizza il design. Ad esempio, se desideri aggiungere un titolo unico a tutti i banner che usano lo stesso design, puoi farlo con:

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

Verrà mostrato un campo di testo con il nome della variabile nella pagina di impostazioni Content. Qualsiasi testo aggiunto qui sarà visualizzato per quel Content. Le variabili possono avere qualsiasi nome a tua scelta.

Logiche #

Utilizzate per creare funzionalità nel design, come mostrare un blocco HTML in base a una certa condizione o iterare sulle liste. Sono racchiuse da {% e %}.

If Statements #

Utilizzate per rendere visibili parti di un design in base a una o più condizioni. Sono composte da un’apertura {% if %} e una chiusura {% endif %}.

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

Gli if statements possono includere anche blocchi else per visualizzare contenuti se la condizione iniziale risulta falsa:

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

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

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

For Loops #

Utilizzati per iterare su liste. I design generalmente includono almeno un ciclo for per scorrere la lista di oggetti da mostrare.

Sono composti da 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 essere annidati per mostrare attributi lista 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 %}

Formatter #

Sono funzioni Javascript personalizzate che aggiungono nuova funzionalità ai tuoi design. Clerk.js viene già fornito con una varietà di formatter che puoi usare.

Puoi anche creare i tuoi in due modi:

• In my.clerk.io sotto Developers > Formatters.
• Come configuration aggiunta a Clerk.js.

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

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 formatter richiedono più attributi, il primo viene scritto prima della pipe, e ogni attributo aggiuntivo dopo il nome del formatter:

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

Hosting #

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

In Clerk #

I design sono separati in HTML e CSS, permettendoti di creare design auto-contenuti che vengono iniettati nel tuo sito al caricamento della pagina.

Questa è una buona scelta se vuoi avere tutte le funzionalità in un unico luogo, in quanto ti consente anche di aggiornare i tuoi elementi Clerk con Content senza reinserire gli snippet.

I design vengono gestiti a livello Store e creati singolarmente per Search, Recommendations ed Email.

Si creano qui: Designs > New Design > Other Designs > Blank > With code.

On Site #

I design vengono ospitati direttamente nel codice sorgente all’interno degli snippet Clerk o come blocchi referenziabili.

Ospitare tu stesso i design è un’ottima scelta se vuoi riutilizzare gli stessi design su più siti diversi visto che probabilmente già condividi il codice sorgente tra essi.

Con questo approccio, non utilizzerai la funzionalità Content, il che significa che dovrai anche configurare API endpoint, limit e labels nei tuoi snippet.

All’interno di uno snippet #

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

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

Qui sotto un design per Recommendations che unisce 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 offerta</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;
}