Qualsiasi (webshop)

FAQ

Risposte alle domande frequenti per integrazioni personalizzate

Problemi con la tua integrazione personalizzata? Questa FAQ copre i problemi più comuni e le relative soluzioni, dalle single-page app al tracciamento delle vendite.

Single-page apps #

Queste sono anche chiamate Progressive Web Apps (PWA) e generalmente caricano il sito come una singola pagina, invece di caricare pagine individuali come normalmente accade.

Quando una pagina viene caricata per la prima volta, la libreria Clerk.js esegue automaticamente una funzione per renderizzare tutti i blocchi Element su quella pagina.

Tuttavia, per le single-page app che utilizzano framework come vue.js o next.js, le pagine vengono renderizzate con JavaScript invece che con un normale caricamento della pagina.

Adatta l’inizializzazione e gli aggiornamenti del contesto di Clerk.js in base a come la tua app carica ciascuna vista.

Includere Clerk.js #

Clerk.js deve essere caricato solo una volta, quando il sito viene inizialmente caricato.

Dopodiché, la libreria sarà disponibile per tutta la durata della sessione.

Includilo appena prima di </head> nel tuo HTML:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
    (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){w.__clerk_q.push(arguments)};
    })(window,document);

    Clerk('config', {
    key: 'INSERT_PUBLIC_API_KEY'
    });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Aggiornare il contesto #

Se un blocco di raccomandazione rimane sulla pagina mentre il visitatore naviga, aggiorna il contesto di Clerk.js per corrispondere alla vista corrente. I blocchi già inizializzati il cui ID deriva dal contesto si ricaricano automaticamente quando il valore rilevante cambia.

Ad esempio, quando il visitatore apre la categoria 276, chiama:

Clerk('context', 'category', '276');

Sostituisci 276 con l’ID della categoria dalla tua app. Impostare un valore invariato non ricarica il blocco. Questo funziona senza una modifica del DOM e anche con l’osservazione del DOM disattivata.

I blocchi i cui ID derivano dagli elementi della pagina, così come i popup, non vengono ricaricati dai cambiamenti di contesto.

Vedi Context Reloads per le chiavi supportate, valori mancanti, eventi e come disabilitare i ricaricamenti automatici.

Controllare il rendering #

Di default, Clerk.js renderizza qualsiasi elemento che ha la classe clerk, indipendentemente dal fatto che sia inserito durante il caricamento iniziale della pagina o quando il DOM si modifica.

Puoi controllare il momento dell’inserimento aggiungendo l’elemento quando è pronto per essere renderizzato.

In alternativa, puoi controllare il rendering tramite la funzione Clerk("content", "SELECTOR").

Ogni volta che una pagina viene caricata, esegui questi passaggi nell’ordine:

Aggiungi lo snippet Clerk all’HTML con un selettore unico che puoi utilizzare.
Esegui Clerk("content", "SELECTOR") per renderizzarlo.

Per questo approccio manuale, quando il visitatore lascia la pagina, distruggi lo snippet e renderizzalo nuovamente se il visitatore ritorna alla stessa pagina.

Questo serve a garantire che Clerk.js non consideri lo snippet come già renderizzato, causando la mancata visualizzazione.

Un blocco derivato dal contesto che rimane sulla pagina può invece usare i ricaricamenti automatici descritti sopra.

Esempio:

<span 
  id="clerk-custom-snippet"
  data-template="@home-page-visitor-recommendations">
</span>

<script>
  Clerk("content", "#clerk-custom-snippet")
</script>

Clerk.js può anche essere configurato per inizializzare automaticamente gli Element con i tuoi selettori personalizzati dopo la prima volta che li renderizzi.

Impatto sulla Pagespeed #

Aggiungere uno strumento esterno come Clerk.js aumenterà il tempo necessario per caricare il tuo sito, ma è trascurabile rispetto alle conversioni aggiuntive che fornirà.

La seguente sezione spiega cosa aggiunge Clerk.js al caricamento della pagina.

Prestazioni #

La libreria Clerk.js pesa solo 37.5kb, quindi si carica molto rapidamente.

Inoltre, carica gli elementi in modo asincrono, il che significa che il resto della pagina si carica mentre Clerk.js renderizza il contenuto.

Un aumento del tempo di caricamento di una pagina deriva spesso dal caricamento di più immagini rispetto a prima, poiché i risultati di search e le raccomandazioni di Clerk funzionano meglio quando sono visivamente attraenti.

Per minimizzare il tempo di caricamento aggiuntivo, si consiglia di utilizzare immagini in formato webp con una risoluzione corrispondente a quella degli elementi Clerk.

Ad esempio, se le immagini nelle raccomandazioni hanno una risoluzione di 400x400px nella visualizzazione desktop, invia immagini a risoluzione massima di 420x420px o simile.

Google Page Speed #

Se usi Google Page Speed Insights o uno strumento simile per analizzare le prestazioni del tuo sito, potresti vedere Clerk.js elencato sotto Leverage browser caching.

Lo scopo di Clerk.js è rendere estremamente semplice inserire i risultati di Clerk in qualsiasi sito.

Clerk.js contiene molte funzionalità per gestire il tracciamento e i componenti UI come la Instant Search, slider, popup e altro.

Quando aggiungiamo nuove funzionalità UI o apportiamo miglioramenti a quelle esistenti, vengono incluse in Clerk.js e devono essere scaricate dall’utente finale per poterle utilizzare.

Avere una scadenza della cache di 60 minuti significa che quando rilasciamo nuove funzionalità saranno disponibili per tutti entro un massimo di 60 minuti.

Più lunga è la durata della cache, più tempo ci vorrà perché tutti abbiano accesso alle funzionalità più recenti.

La cosa importante è che gli utenti finali devono scaricare Clerk.js solo una volta quando sono disponibili nuove funzionalità.

I 60 minuti di scadenza della cache significano solo che il browser dell’utente finale si aggiornerà con Clerk ogni 60 minuti.

Se non sono state apportate modifiche a Clerk.js, non verrà scaricato nulla.

La scadenza della cache di 60 minuti è quindi un compromesso tra la minimizzazione delle richieste web e la visualizzazione delle nuove funzionalità e dei miglioramenti.

La maggior parte delle sessioni dura meno di 60 minuti, quindi la richiesta verrà effettuata solo una volta per sessione.

Questo tipo di scadenza della cache è normale ed è utilizzato anche da servizi come Google Analytics, Facebook e Trustpilot.

Impatto CLS #

Il Cumulative Layout Shift (CLS) può influire negativamente sulla SEO e sull’esperienza utente quando il contenuto iniettato dinamicamente sposta gli elementi su una pagina.

In alcuni casi, tra gli altri fattori, Clerk può contribuire al punteggio CLS.

Puoi leggere ulteriori informazioni sul CLS qui.

Segui questa linea guida solo nel caso in cui il tuo punteggio CLS sia superiore a 0.2 e gli elementi Clerk siano above the fold.

Per evitare lo spostamento dei contenuti, è necessario riservare uno spazio vuoto per le raccomandazioni di Clerk prima che Clerk.js le inietti.

Per farlo, bisogna aggiungere un’altezza minima in base all’altezza prevista del contenuto.

Esempio di codice:

.clerk-slider-wrapper {
    min-height: 300px; /* Adatta in base all’altezza prevista del contenuto */
    width: 100%;
}

Effettuare chiamate API #

Puoi usare Clerk.js per effettuare chiamate API, utilizzando la funzione integrata Clerk("call").

Questa funzione accetta 3 argomenti:

Un endpoint API
Un dizionario JSON di parametri
Una funzione callback per gestire la risposta

Richieste #

Di seguito trovi uno script di esempio che richiede i 10 prodotti più popolari e registra la risposta nella console.

La risposta contiene un oggetto JavaScript con lo stato della chiamata API e il risultato.

Script #

function popularProducts(){
  Clerk("call",
    "recommendations/popular",
    {
      limit: 10,
      labels:["Home Page / Bestsellers"]
    },
    function(response){
      console.log(response);
    },
    function(response){
      console.error(response);
    }
  );
}

Risposta #

__clerk_cb_1(
  {
    "status":"ok",
    "count":72,
    "facets":null,
    "result":[399,410,551,338,403,439,425,402,406,456]
  }
);

Callback #

Quando effettui chiamate API, puoi utilizzare funzioni di callback per gestire la risposta come preferisci.

Le funzioni accettano response come argomento, contenente tutti i dati restituiti dall’API.

Di seguito un esempio che crea una lista di elementi HTML con link alle categorie corrispondenti alla query “men”.

Clerk("call",
  "search/categories",
  {
      'query': "men",
      'limit': "10"
  },
  function(response) {
      var cat = response.categories;
      if (cat.length > 0) {
          let heading = document.createElement('h3');
          heading.textContent = 'Related Categories';
          document.querySelector('#your-target').append(heading);
      }
      for (var index in cat) {
          var clerkName = cat[index].name;
          var clerkUrl = cat[index].url;
          let link = document.createElement('a');
          link.href = clerkUrl;
          link.textContent = clerkName;
          document.querySelector('#your-target').append(link);
      }
  }
)

Pulsanti aggiungi al carrello #

Questi pulsanti funzionano in modo diverso per ogni piattaforma e la funzionalità può cambiare a seconda dei plugin utilizzati.

Poiché i design di Clerk sono costituiti da HTML & CSS, di solito puoi aggiungere questa funzionalità se capisci come funziona sul tuo sito.

Approccio generale #

Alcuni pulsanti aggiungi al carrello richiedono l’esecuzione di JavaScript affinché funzionino.

In questi casi, puoi aggiungere la funzionalità al metodo cart esistente di Clerk.

Controlla come farlo nella nostra documentazione per sviluppatori qui.

Individua il pulsante aggiungi al carrello per identificare il codice associato, ad esempio su una pagina di categoria.

Il codice sarà solitamente un elemento <div> o button.

Copia tutto l’HTML del pulsante.

Copia e incolla questo codice nel tuo Design.

Ora devi individuare le variabili nel codice.

Nella maggior parte dei casi, devi individuare dove il codice utilizza:

Product ID
Quantità prodotto

Sostituisci i valori per l’ID prodotto con le variabili Liquid relative a questi dati.

L’ID sarà sempre {{ product.id }} e la quantità varierà a seconda di come invii il dato.

Per questo esempio potrebbe essere {{ product.qty }}.

Incolla il tuo codice nell’HTML del tuo Design e testalo per assicurarti che funzioni.

Esempio #

Il pulsante aggiungi al carrello usa un <div> con la classe button-container.

La quantità si trova all’interno del link al carrello dopo /cart?add= e l’ID prodotto si trova subito dopo &id_product=.

L’ID prodotto è anche referenziato in data-id-product e la quantità in .data-minimal_quantity.

Questi valori devono essere sostituiti con i tag Liquid nel Design, così verranno usati i corretti ID prodotto e quantità nell’output HTML.

Con queste modifiche, il pulsante aggiungi al carrello finale sarà così:

<div class="button-container">
  <a 
    class="button ajax_add_to_cart_button btn btn-default" 
    style="position: relative;" 
    href="https://www.examplelinktocart.com/cart?add={{ product.qty }}&amp;id_product={{ product.id }}&amp;" 
    rel="nofollow" 
    title="Add to Cart" 
    data-id-product-attribute="0" 
    data-id-product="{{ product.id }}" 
    data-minimal_quantity="{{ product.qty }}">
    <span style="color: orange !important">
      <i class="icon-shopping-cart" aria-hidden="true"></i>
    </span>
  </a>
</div>

Errori console #

Clerk.js registra molti errori nella console, che puoi usare per il debug.

Cliccando sul link dell’errore otterrai maggiori informazioni su cosa è andato storto. Puoi usarle per risolvere l’errore da solo, oppure inviarle al nostro supporto che ti aiuterà.

Qui sotto trovi un elenco degli errori più comuni.

Contenuto sconosciuto #

Questo errore appare se lo snippet inserito fa riferimento a un Element che non esiste, nell’attributo data-template.

Per risolverlo, assicurati che il nome nel codice di embed corrisponda a un blocco Element che hai creato in my.clerk.io.

Puoi cliccare su Edit Element per qualsiasi Element per vedere quale dovrebbe essere il riferimento.

Endpoint API non valido #

Questo errore si verifica se hai utilizzato la classe clerk da qualche parte nell’HTML.

Questa classe è riservata per l’uso con i nostri snippet, poiché Clerk.js usa questa classe per identificare gli elementi da renderizzare.

Per risolvere, assicurati di cambiare nome alla classe, ad esempio in clerk-product.

Argomento prodotto non valido #

Questo errore significa che l’ID fornito per un prodotto ha un tipo o una sintassi sbagliata.

Ad esempio, se i tuoi ID prodotto sono interi devono esserlo anche nel codice di embed.

Ricordati anche le parentesi intorno all’ID, per renderlo una lista.

<span 
  class="clerk" 
  data-template="@product-page" 
  data-products="[123]">
</span>

Argomento categoria non valido #

Questo errore significa che l’ID fornito per una categoria ha un tipo o una sintassi sbagliata.

Nella maggior parte dei casi, si verifica se il placeholder nel codice embed della categoria non è stato sostituito da un vero ID:

<span 
  class="clerk" 
  data-template="@category-page" 
  data-category="INSERT_CATEGORY_ID">
</span>

L’output del codice deve contenere l’ID della categoria:

<span 
  class="clerk" 
  data-template="@category-page" 
  data-category="257">
</span>

Se hai copiato lo snippet manualmente, assicurati di selezionare il tuo sistema di shop nel menu a discesa Choose your platform prima di copiarlo.

Cambiando, includerà la logica della tua piattaforma per selezionare il giusto ID categoria.

Se la tua piattaforma non è elencata, dovrai aggiungere manualmente la logica per selezionare il giusto ID in base alla funzionalità del tuo webshop.

Chiave API errata #

Questo errore viene visualizzato se la public API key fornita non corrisponde ad alcun account in Clerk.

Per risolverlo, accedi a my.clerk.io e vai su Developers > API Keys.

Qui puoi trovare la Public API Key che puoi poi aggiungere al tuo script di tracking Clerk.js direttamente nel codice oppure nelle impostazioni dell’integrazione, a seconda della piattaforma.

Iubenda blocking #

Se usi iubenda per il consenso cookie con blocco automatico abilitato, i visitatori che rifiutano i cookie potrebbero causare il blocco degli script o delle richieste Clerk.io da parte di iubenda.

Questo tipicamente causa due problemi:

La richiesta sale non viene mai inviata, quindi gli ordini non vengono tracciati o non sono attribuiti in Clerk.io.
Gli elementi Clerk.io potrebbero non essere renderizzati, oppure Clerk.js potrebbe registrare un errore in console riguardo il caricamento multiplo (perché iubenda riscrive o ritarda gli script).

Consentire i domini #

Per risolverlo, consenti Clerk.io tra i domini autorizzati in iubenda in modo che i suoi script e richieste non vengano bloccati quando un visitatore rifiuta i cookie.

Al minimo, aggiungi questi domini alla allowlist di iubenda:

cdn.clerk.io (Clerk.js)
api.clerk.io (richieste di tracking e vendite)

Le etichette nell’interfaccia possono variare, ma questa impostazione si trova solitamente sotto le impostazioni Cookie Solution del tuo progetto iubenda per blocco automatico.

Per la guida di iubenda, vedi il loro articolo su cosa fare se il blocco automatico blocca troppo.

Verificare la correzione #

Dopo aver aggiornato le impostazioni di iubenda:

Carica il webshop, rifiuta i cookie e apri la console del browser.
Conferma che Clerk.js sia disponibile — typeof Clerk non deve restituire "undefined".
Esegui Clerk("debug"), effettua un ordine di prova e conferma che una richiesta sale venga inviata a Clerk.io e ritorni con status: "ok".

Dati di vendita POS/ERP #

Per alcuni webshop, è rilevante caricare dati di vendita da altri sistemi oltre al webshop effettivo.

Ad esempio, se vuoi ottimizzare l’algoritmo in base alle vendite di un negozio fisico o un negozio B2B.

Clerk non fa differenza tra ordini provenienti da varie fonti—purché tu possa fornire un ID, un timestamp e la lista dei prodotti acquistati, possono essere caricati su Clerk.

L’approccio consigliato è utilizzare la CRUD API poiché consente di automatizzare completamente il compito.

Implementando queste chiamate API, puoi inviare i dati degli ordini direttamente al tuo negozio in Clerk.

Basta creare una chiamata POST all’endpoint /orders nel tuo sistema ERP o webshop, eseguire il job a intervalli regolari (es. una volta al mese) e potrai usare gli ordini offline per migliorare raccomandazioni online e risultati di search.

In alternativa, puoi caricare manualmente un file CSV, senza la necessità di scrivere codice.

Puoi leggere di più sui file CSV qui.

Conversione valuta #

Esistono diversi modi di lavorare con la conversione valuta in Clerk.

Segue un modo semplice per farlo funzionare.

Tradurre valute #

Se i visitatori usano Google Translate sul tuo webshop, i valori dei prezzi possono essere tradotti in modo da rompere la formattazione o cambiare la visualizzazione della valuta.

Per evitarlo, racchiudi l’output del prezzo in elementi che non devono essere tradotti.

Markup raccomandato #

Usa sia translate="no" che la classe notranslate sull’elemento prezzo:

<span class="clerk-price notranslate" translate="no">
  {{ product.price | money }}
</span>

Se mostri listino e prezzo scontato, applica lo stesso schema a ogni valore di prezzo:

<span class="clerk-old-price notranslate" translate="no">
  {{ product.list_price | money }}
</span>
<span class="clerk-new-price notranslate" translate="no">
  {{ product.price | money }}
</span>

Dove applicare #

Nel tuo Clerk Design dove vengono visualizzati i prezzi.
In qualsiasi wrapper HTML personalizzato che mostra prezzi.

Questo mantiene traducibile il resto della pagina conservando la formattazione corretta di prezzo e valuta.

Inviare oggetti prezzo #

Clerk deve conoscere i prezzi di ogni prodotto nelle diverse valute.

Il modo più semplice è inviarli come una stringa JSON di prezzi formattati, con l’ISO della valuta come chiave, nel tuo Data Feed.

"products": [
  {
    "id": 1,
    "name": "Cheese",
    "description": "A nice piece of cheese.",
    "price": 100,
    "list_price": 50,
    "categories": [25, 42],
    "image": "http://example.com/images/products/1.jpg",
    "url": "http://example.com/product/1",
    "on_sale": true,
    // Esempi JSON in formato stringa
    "prices_formatted": "{\"USD\":\"$100\", \"EUR\":\"€87.70\", \"GBP\":\"£68.68\"}",
    "list_prices_formatted": "{\"USD\":\"$120\", \"EUR\":\"€97.70\", \"GBP\":\"£78.68\"}"  
  },
  {
    "id": 2,
    "name": "A pound of nuts",
    "description": "That's a lot of nuts!",
    "price": 150,
    "categories": [1],
    "image": "http://example.com/images/products/2.jpg",
    "url": "http://example.com/product/2",
    "on_sale": false,
    // Esempio JSON in formato stringa
    "prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}",
    "list_prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}"
  }
]

Creare un formatter #

In Clerk.js puoi definire funzioni JavaScript, utilizzabili nei tuoi Design.

Qui puoi definire una funzione che riceve il tuo price-dict come argomento e restituisce il prezzo per una specifica valuta in base alla logica frontend che preferisci.

Assicurati di sostituire currency con la valuta attualmente scelta dal frontend.

Clerk('config', {
  key: 'Your_API_Key',
  formatters: {
      currency_selector: function (price_list) {
      const currency = "EUR";
      price_groups_obj = JSON.parse(price_list)
        return price_groups_obj[currency];
      }
  }
});

Usare il formatter #

Dopo aver definito il formatter, può essere usato nel tuo design con la sintassi qui sotto:

<div class="price">
   <span class="price">
      {{ product.prices_formatted | currency_selector }}
   </span>
</div>

Prezzi specifici per cliente #

Clerk supporta la visualizzazione di prezzi diversi in base al cliente loggato, sia recuperando i prezzi individuali al momento del rendering sia pre-memorizzando i prezzi di gruppo nei dati prodotto.

Questo è spiegato dettagliatamente nell’articolo dedicato Customer Pricing.

Autenticazione HTTP #

L’autenticazione HTTP è spesso usata su siti di staging per evitare visitatori indesiderati.

In molti casi ciò bloccherà anche l’importatore Clerk e solitamente causerà un errore 401 Unauthorized nel log della sincronizzazione.

Puoi risolverlo inserendo le credenziali di autenticazione nell’URL di importazione.

In my.clerk.io > Data > Configuration, aggiorna l’URL di import come segue:

http://USER:PASS@www.ewoksRus.com/JSONFEED

Nessun ordine tracciato #

Per una guida completa su come funziona il tracciamento delle vendite, come impostarlo e come eseguirne il debug passo per passo, vedi l’articolo Sales Tracking.

Nessun impatto Clerk #

Se le vendite vengono tracciate ma nessuna risulta influenzata da Clerk nelle analytics, consulta la sezione No Clerk Impact dell’articolo sul Sales Tracking.

Nascondere gli slider con pochi prodotti #

Se una categoria ha pochi prodotti, uno slider può sembrare vuoto o ripetitivo.

Ci sono due modi per gestire la situazione:

Condizionale nel Design Clerk #

Utilizza un condizionale intorno al codice dello slider affinché venga renderizzato solo se vengono restituiti abbastanza prodotti.

{% if products.length >= 6 %}
  <div class="clerk-slider">
    {% for product in products %}
      <!-- scheda prodotto -->
    {% endfor %}
  </div>
{% endif %}

Questa soluzione è veloce da implementare, ma si basa comunque sulla risposta di Clerk per decidere se mostrare o meno lo slider. Significa che viene comunque effettuata una chiamata API, anche se lo slider non viene visualizzato.

Condizionale lato server #

Se la tua piattaforma conosce già il conteggio dei prodotti per categoria, decidi tramite template se inserire il codice embed Clerk.

{% if category.product_count >= 6 %}
  <span class="clerk" data-template="@category-page-slider"></span>
{% endif %}

Questo è l’approccio preferito perché lo slider viene inizializzato solo quando ci sono abbastanza prodotti e il comportamento rimane pienamente allineato con la logica di conteggio categorie del tuo webshop.

Aggiorna a Clerk.js 2 #

Clerk.js 2 è una versione più veloce e flessibile della nostra libreria JavaScript.

Rende più semplice installare Clerk su qualsiasi webshop.

Tuttavia, poiché le due versioni funzionano in modo leggermente diverso, devi seguire questi passaggi per aggiornare correttamente.

Le due principali differenze in Clerk.js 2 sono:

I Design in my.clerk.io utilizzano Liquid, ma possono essere creati facilmente anche tramite il Design Editor.
Lo script va inserito subito prima del tag </head> nel template del webshop.

Creare i design #

Poiché Clerk.js 2 utilizza un approccio diverso ai Design, è necessario crearne di nuovi.

Puoi creare i Design per Clerk.js 2 rifacendoli nel Design Editor oppure convertendo i tuoi vecchi code Design in Liquid, come spiegato di seguito.

Di seguito viene illustrato come convertire i vecchi code Design in Liquid.

Opzione Design Editor #

Vai su my.clerk.io > Recommendations/Search > Designs > New Design.
Seleziona un tipo di design diverso da Blank e dagli un nome. Consigliamo di aggiungere “V2” per rendere chiaro che sono design per Clerk.js 2.
Nel Design Editor, clicca su qualsiasi elemento esistente come nome, immagine, bottone, ecc. per modificarlo, o aggiungi nuovi elementi al Design.
Clicca su Publish Design quando hai finito, poi passa allo Step 2 della guida.
Vai su Recommendations/Search > Elements e cambia il tuo Element Clerk in modo che usi il nuovo Design, quindi clicca su Update Element.
Ciò farà sì che temporaneamente non compaiano sul tuo webshop, finché non avrai inserito Clerk.js 2 come spiegato più sotto nella guida.

Conversione dei design #

Poiché Clerk.js 2 utilizza il più flessibile linguaggio template Liquid, hai bisogno di convertire i Design in questo linguaggio.

Vai su my.clerk.io > Recommendations/Search > Designs > New Design.
Seleziona Blank > Code e assegnagli un nome. Consigliamo di aggiungere “V2” per identificare i design di Clerk.js 2.
Clicca su Create Design.
Otterrai un design vuoto con HTML Prodotto e CSS che puoi usare.
Torna alla panoramica dei design e clicca su Edit Design nel tuo Design Clerk.js 1. Ti consigliamo di farlo in una nuova scheda per copiare facilmente il codice.
Copia il vecchio Design Clerk.js 1 nel nuovo Design Clerk.js 2.
- Noterai che qui non c’è Container Code.
- Questo perché Liquid utilizza i for loop per renderizzare tutti i prodotti.
- Copia il vecchio Product HTML dentro il for-loop, il vecchio Container Code attorno e copia anche il CSS.
Converti il Design nella sintassi di Liquid. La differenza principale è che i vecchi Design usavano la sintassi {{ formatter attribute }} mentre la sintassi della v2 è {{ product.attribute | formatter }}.
Passa in rassegna tutti gli attributi e cambiali nel nuovo formato.
Se usi statement {{#if}} o {{#is}}, questi vanno convertiti anch’essi. Usa {% if product.attribute %} {% else %} {% endif %}.
Cancella id="{{ $id }}" e la classe :target dal container code nella versione Clerk.js 2 perché non sono più supportate.
Di seguito un esempio di design Clerk.js 1 e la relativa versione convertita:

Design Clerk.js 1 #

// Product HTML
<li class="clerk-product">
    <a href="{{ url }}">
        <img src="{{ image }}" />
        <div class="clerk-product-name">{{ name }}</div>
        <div class="clerk-price-wrapper">
            {{#if list_price}}
                <div class="clerk-old-price">
                    <s>Price {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Price {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Price {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Buy Now</div>
</li>

// Container Code
<h2>{{ headline }}</h2>
<ul id="{{ $id }}" class=":target clerk-slider"></ul>

<!-- This code creates the slider by its ID. -->
<script type="text/javascript">
    Clerk.ui.slider("{{ id }}").init();
</script>

Design Clerk.js 2 #

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

<ul class="clerk-slider">
    {% for product in products %}
    <li class="clerk-product">
        <a href="{{ product.url }}">
            <img src="{{ product.image }}" />
            <div class="clerk-product-name">{{ product.name }}</div>
            <div class="clerk-price-wrapper">
                {% if product.list_price %}
                    <span class="clerk-old-price"><s>Price {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Price {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Price {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Buy Now</div>
        </a>
    </li>
    {% endfor %}
</ul>

Clicca su Update Design per salvare le modifiche.
Vai su Recommendations/Search > Elements e cambia il blocco Element per usare il nuovo Design.
Clicca su Update Element. Questo farà sì che temporaneamente non siano mostrati sul tuo webshop, fino al termine dello Step 2. Scegli il nuovo Design per tutti gli Element che devono essere aggiornati.

Sostituire lo script #

Trova il file template che mostra tutte le pagine del webshop, e dove si trova lo script originale Clerk.js in fondo alla pagina.
Rimuovi il vecchio script Clerk.js dal file. Assomiglierà a questo:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
    window.clerkAsyncInit = function() {
        Clerk.config({
            key: 'public_api_key'
        });
    };
    (function(){
        var e = document.createElement('script'); e.type='text/javascript'; e.async = true;
        e.src = document.location.protocol + '//api.clerk.io/static/clerk.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    })();
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Vai su my.clerk.io > Developers > Clerk.js. Qui trovi il codice di Clerk.js 2.
Copia questo codice, inseriscilo appena prima del tag </head> nel template e salva.

Congratulazioni! Ora stai utilizzando la configurazione molto migliorata di Clerk.js 2!

Puoi vedere la documentazione completa di Clerk.js 2 qui.

Gestione di require.js #

Questa sezione si applica solo con Clerk.js 1.

In alcune configurazioni, Require.js impedisce il caricamento di Clerk.js, il che significa che slider e risultati di search non verranno mostrati.

Quando ciò accade, nella tua console apparirà il seguente errore:

Uncaught ReferenceError: Clerk is not defined

Ci sono due modi per gestire Require.js. Entrambi richiedono modifiche al tracking-script inserito in fondo a tutte le pagine.

Includere in Require.js #

Il modo migliore è cercare di far riconoscere Clerk a Require.js.

Inserisci require(['clerk'], function() {}); in fondo al tracking script.

Ignorare Require.js #

Se la soluzione precedente non funziona, è possibile ignorare Require.js.

Inserisci window.__clerk_ignore_requirejs = true; all’inizio del tracking script.

Dopo aver utilizzato uno di questi approcci, Require.js sarà ora compatibile con Clerk.

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