Designs

Code Designs

Controlla la rappresentazione visiva degli elementi Clerk.
Backend in the Clerk.io backend

Clerk.io utilizza Liquid per gestire i code designs. È un linguaggio di templating 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 del codice — oppure descrivendo ciò che vuoi a un’IA che scrive il codice per te.

I design Clerk.io supportano l’intero linguaggio di templating Liquid. Gli esempi sotto 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 costruire e modificare i design descrivendo le modifiche in linguaggio naturale. Si occupa del codice, tu pensi alla 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 cosa vuoi modificare.

Scrivi la tua richiesta — ad esempio, “rendi le schede prodotto più grandi” oppure “aggiungi un badge sconto in alto a destra”. L’IA aggiorna il codice di conseguenza.

Puoi visualizzare l’anteprima del risultato prima di salvare, così nulla viene pubblicato finché non sei soddisfatto. Puoi anche continuare a modificare manualmente il codice 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 mostra l’attributo price in esso contenuto.

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

Ecco un semplice design 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 visualizzati con espressioni, ad esempio utilizzando la matematica per calcolare la 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’intestazione unica 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 del Content. Qualsiasi testo aggiunto qui verrà mostrato per quel Content. Le variabili possono avere qualsiasi nome tu desideri.

Logiche #

Utilizzate per creare funzionalità nel design, ad esempio mostrare un blocco HTML a una certa condizione o iterare su liste. 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 da una chiusura {% endif %}.

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

Le if statements possono includere anche blocchi else per mostrare qualcosa se la prima condizione è 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 includono generalmente almeno un for-loop per ciclare sulla lista degli oggetti da visualizzare.

Sono composti da un’apertura {% for %} e da 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 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 #

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

Puoi anche crearne di tuoi in due modi:

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

Ecco un esempio su come configurare Clerk.js con 3 formatter differenti:

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 si scrive prima del pipe, e tutti gli altri dopo il nome del formatter:

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

Hosting #

I design possono essere ospitati in my.clerk.io oppure nel codice sorgente dei tuoi siti. Il miglior approccio dipende dalla configurazione del tuo webshop e dalle tue esigenze.

In Clerk #

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

Questa è una buona opzione se vuoi gestire tutte le funzionalità da un unico posto, poiché consente anche di aggiornare i tuoi elementi Clerk con Content senza reinserire gli snippet.

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

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

Sul sito #

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

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

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

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

Con riferimento #

Crea un blocco usando <script type=text/x-template> che abbia un ID richiamabile 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 }}">Acquista ora</a>
    </div>
  {% endfor %}
</script>

Esempio completo #

Qui sotto trovi un design 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 sconto</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">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.