Designs

Code Designs

Controlla la rappresentazione visiva degli elementi di Clerk.

Code Designs
Clerk utilizza Liquid per gestire i code designs. È un linguaggio di template sicuro e flessibile che ti permette di creare qualsiasi tipo di design desideri per i tuoi elementi Clerk. Questo articolo copre le basi.

Puoi consultare la documentazione completa nei nostri developer docs.

Clerk 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 formattatori supportati.

Oggetti #

Punti dati che vengono visualizzati quando il design è renderizzato. Sono racchiusi da {{ e }}. Ad esempio:

{{ product.price }}

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

I design consistono in un markup HTML 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 essere visualizzati anche 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 vuoi aggiungere una headline unica a tutti i banner che usano lo stesso design, puoi farlo così:

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

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

Dynamic values

Logiche #

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

If Statements #

Utilizzati per visualizzare parti di un design in base a una o più condizioni. Consistono in una apertura {% if %} e una chiusura {% endif %}.

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

Gli if statements possono anche includere blocchi else per visualizzare contenuto 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 #

Utilizzati per iterare su liste. I design includono generalmente almeno un for-loop per iterare sulla lista degli oggetti da mostrare.

Consistono in una 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 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 %}

Formattatori #

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

Puoi anche crearne di tue in due modi:

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

Ecco un esempio di configurazione di Clerk.js con 3 formattatori 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 tuoi design con la sintassi {{ ATTRIBUTE | FORMATTER }}:

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

Se i tuoi formattatori richiedono diversi attributi, il primo va scritto prima della pipe, e gli eventuali altri dopo il nome del formattatore:

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

Hosting #

I design possono essere ospitati su my.clerk.io o nel codice sorgente del tuo sito. La soluzione migliore dipende dalla struttura 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 scelta se vuoi avere tutta la funzione disponibile da un unico luogo, poiché ti permette anche di aggiornare i tuoi elementi Clerk con Content senza dover reinserire gli snippet.

I design sono gestiti a livello di Store e sono 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 di Clerk o come blocchi che possono essere richiamati.

Ospitare i design da solo è un’ottima idea se vuoi riutilizzare gli stessi design su diversi siti, poiché di solito condividerai già il codice sorgente tra essi.

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

All’interno di 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 }}">Buy Now</a>
      </li>
    {% endfor %}
  </ul>
</span>

Con riferimento #

Crea un blocco usando <script type=text/x-template> che abbia un ID da poter richiamare 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 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 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.