Designs

Code Designs

Controlla la rappresentazione visiva degli elementi Clerk.

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

Puoi costruire i tuoi design scrivendo direttamente HTML, CSS e Liquid nell’editor di codice — oppure descrivendo ciò che vuoi ad un’IA che scriverà il codice per te.

Clerk.io utilizza un sottoinsieme di Liquid. Solo le funzionalità elencate nella nostra Clerk.js Template Language sono supportate nei Code Designs.

Visualizza la sintassi e i formatter supportati.

AI Designer #

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

L’AI Designer è un assistente integrato che ti permette di creare ed editare i design descrivendo i cambiamenti con linguaggio naturale. Si occupa del codice, tu ti occupi della visione.

Come accedere #

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

Come funziona #

L’editor mostra l’HTML e il CSS del tuo design a sinistra. A destra c’è il pannello AI, dove descrivi ciò che vuoi cambiare.

Digita la tua richiesta — ad esempio, “ingrandisci le schede prodotto” o “aggiungi un badge sconto nell’angolo in alto a destra”. L’IA aggiorna il codice di conseguenza.

Puoi vedere in anteprima il risultato prima di salvare, quindi nulla va online finché non sei soddisfatto. Puoi anche continuare a modificare il codice manualmente in qualsiasi momento insieme ai suggerimenti dell’IA.

Oggetti #

Punti dati che vengono mostrati quando il design viene renderizzato. Sono racchiusi da {{ e }}. Ad es:

{{ product.price }}

In questo esempio, Liquid accede all’oggetto product e mostra l’attributo price al suo interno.

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

Ecco un design semplice che utilizza 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 mostrati con espressioni, ad esempio usando operazioni matematiche per calcolare una percentuale di sconto:

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

Variabili #

Usando la sintassi {{ VARIABLE_NAME }} puoi creare variabili configurabili per ogni Content che utilizza il design. Ad esempio, se vuoi aggiungere un titolo unico a tutti i banner usando lo stesso design, puoi farlo con:

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

Questo mostrerà un campo di testo con il nome della variabile nella pagina delle impostazioni Content. Qualsiasi testo inserito qui verrà mostrato per quel Content. Le variabili possono avere qualsiasi nome tu voglia.

Dynamic values

Logica #

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

If Statements #

Usati per mostrare parti di un design in base ad una o più condizioni. Sono composti da un’apertura {% if %} e una chiusura {% endif %}.

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

Le if statements possono includere anche blocchi else da mostrare se la condizione iniziale è 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 #

Usati per iterare su delle liste. I design generalmente includono almeno un for-loop per mostrare la lista di oggetti da visualizzare.

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 loop possono anche essere annidati per mostrare attributi di 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 nuove funzionalità ai tuoi design. Clerk.js include già un elenco di diversi formatter che puoi utilizzare.

Puoi crearne di tuoi in due modi:

  • Su my.clerk.io sotto Developers > Formatters.
  • Come configurazione 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 usati nei design con la sintassi {{ ATTRIBUTE | FORMATTER }}:

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

Se i tuoi formatter richiedono diversi attributi, il primo va scritto prima della pipe, e gli altri 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 nel sorgente del sito. La scelta migliore dipende dalla configurazione del tuo webshop e dalle tue esigenze.

In Clerk #

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

Questa è un’ottima scelta se vuoi avere tutta la funzionalità da un’unica posizione, dato che ti permette anche di aggiornare i tuoi elementi Clerk con il Content senza re-inserire snippet.

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

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

On Site #

I design sono ospitati direttamente nel codice sorgente dentro gli snippet Clerk o come blocchi che possono essere richiamati.

Ospitare i tuoi design è una buona idea se vuoi riutilizzare gli stessi design su più siti diversi, poiché probabilmente condividerai già il codice tra essi.

Con questo approccio, non userai la funzionalità Content, il che significa che dovrai anche configurare l’endpoint API, il limit e le labels negli snippet.

Dentro lo snippet #

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

Crea un blocco usando <script type=text/x-template> che abbia un ID di 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 trovi un design Recommendations che combina tutti i concetti precedenti. 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;
}

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