Designs

Code Designs

Controlla la rappresentazione visiva degli elementi Clerk.

Code Designs
Clerk.io utilizza Liquid per la gestione dei code designs. È 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 design scrivendo direttamente HTML, CSS e Liquid nell’editor di codice — oppure descrivendo cosa vuoi a una AI che scrive il codice per te.

I design di Clerk.io supportano l’intero linguaggio di template Liquid. Gli esempi seguenti forniscono una panoramica sull’uso di Liquid nei Code Designs.

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

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 descrivendo le modifiche in linguaggio naturale. Si occupa del codice, tu della visione.

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’AI.

Come Funziona #

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

Digita la tua richiesta — ad esempio, “rendere le schede prodotto più grandi” o “aggiungi un badge saldi in alto a destra”. L’AI aggiorna il codice di conseguenza.

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

Oggetti #

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

{{ product.price }}

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

I design sono composti da un markup HTML combinato con attributi che visualizzano le informazioni sui tuoi oggetti products, categories e pages.

Ecco un semplice design che usa le variabili del 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 l’uso della 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 ogni Content che utilizza il design. Es. Se vuoi aggiungere un titolo unico a tutti i banner che usano lo stesso design, puoi farlo con:

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

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

Dynamic values

Logiche #

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

If Statements #

Usate per visualizzare 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 saldo!</div>
{% endif %}

Le if statements possono includere anche blocchi else da visualizzare se la condizione iniziale restituisce falso:

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

Usate per iterare su elenchi. I design includono generalmente almeno un for-loop per iterare sull’elenco degli oggetti da visualizzare.

Sono composte 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 for loop possono anche essere annidati per visualizzare 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 #

Queste sono funzioni Javascript personalizzate che aggiungono nuove funzionalità ai tuoi design. Clerk.js include già una gamma di diverse che puoi usare.

Puoi anche crearne di tue in due modi:

  • In my.clerk.io sotto Developers > Formatters.
  • Come una 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 diversi attributi, il primo viene scritto prima della pipe, e gli eventuali altri attributi dopo il nome del formatter:

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

Hosting #

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

Su Clerk #

I design sono divisi tra HTML e CSS, permettendoti di creare design autosufficienti che vengono inseriti nel sito al caricamento della pagina.

Questa è una buona scelta se desideri avere tutta la funzionalità disponibile da un’unica posizione, dato che ti permette anche di aggiornare i tuoi elementi Clerk con Content senza reinserire gli snippet.

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

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

Sul Sito #

I design vengono ospitati direttamente nel codice sorgente all’interno degli snippet Clerk o come blocchi che possono essere referenziati.

Hostare i design in autonomia è una buona idea se vuoi riutilizzare gli stessi design su diversi siti, dato che probabilmente condividi già il codice sorgente tra loro.

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

All’interno dello snippet #

Aggiungi semplicemente 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> con un ID che puoi referenziare 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 un design di Recommendations 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 Saldo</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.