Qualsiasi (webshop)

FAQ

Risposte alle domande frequenti per integrazioni personalizzate

Riscontrate problemi con la vostra integrazione personalizzata? Questa FAQ tratta i problemi più comuni e le loro soluzioni, dalle single-page app al tracciamento delle vendite.

Single-page app #

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

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

Tuttavia, per le single-page app che usano framework come vue.js o next.js, le pagine sono renderizzate tramite JavaScript invece che con un caricamento standard della pagina.

Per questo motivo, è necessario controllare il rendering con Clerk.js in modo che si adatti a come vengono caricate le pagine nell’app.

Includere Clerk.js #

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

Dopo questo, la libreria sarà disponibile per tutta la sessione.

Includetelo appena prima del </head> nel vostro 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 -->

Controllare il rendering #

Per impostazione predefinita, Clerk.js renderizza qualsiasi elemento che abbia la classe clerk, indipendentemente dal fatto che sia stato inserito durante il caricamento iniziale della pagina o quando il DOM cambia.

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

In alternativa, potete controllare il rendering con la funzione Clerk("content", "SELECTOR").

Ogni volta che viene caricata una pagina, eseguite questi passaggi in ordine:

Aggiungete lo snippet Clerk all’HTML con un selettore univoco a cui potete fare riferimento.
Eseguite Clerk("content", "SELECTOR") per renderizzarlo.

Quando il visitatore lascia la pagina, distruggete lo snippet, e renderizzatelo nuovamente se il visitatore ritorna sulla stessa pagina.

Questo serve per assicurarsi che Clerk.js non veda lo snippet come già renderizzato, causando la mancata visualizzazione.

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 Elements con i vostri selettori personalizzati dopo la prima volta che lo rendete.

Impatto su Pagespeed #

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

Sotto potete vedere come impatta sulle prestazioni del vostro sito.

Performance #

La libreria Clerk.js pesa solo 37,5kb, quindi si carica molto velocemente.

Carica inoltre gli elementi in modo asincrono, il che significa che il resto della pagina si carica mentre Clerk.js renderizza i contenuti.

Un aumento del tempo di caricamento di una pagina deriva spesso dal caricamento di più immagini rispetto a prima, dato che i risultati di search e recommendations di Clerk funzionano meglio quando sono visivamente accattivanti.

Per minimizzare il tempo di caricamento extra, consigliamo di usare immagini in formato webp che abbiano una risoluzione che corrisponda alla dimensione che avranno negli elementi Clerk.

Ad esempio, se le immagini nelle recommendations hanno una risoluzione di 400x400px nella visualizzazione desktop, inviate immagini con una risoluzione massima di 420x420px o simile.

Google Page Speed #

Se usate Google Page Speed Insights o un altro strumento simile per analizzare le prestazioni del vostro sito, potreste vedere Clerk.js elencato sotto Leverage browser caching.

Lo scopo di Clerk.js è rendere semplicissimo inserire i risultati di Clerk in qualsiasi sito web.

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

Quando aggiungiamo nuove funzionalità UI o miglioriamo quelle esistenti, queste sono 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ù lungo è il tempo di cache, più tempo ci vorrà perché tutti abbiano accesso alle ultimissime funzionalità.

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

La scadenza cache di 60 minuti significa solo che il browser dell’utente finale controllerà con Clerk ogni 60 minuti.

Se non ci sono stati cambiamenti in Clerk.js, non verrà scaricato nulla.

Il tempo di scadenza della cache di 60 minuti è quindi un compromesso tra minimizzare le richieste web e vedere nuove funzionalità e miglioramenti.

La maggior parte delle sessioni è più breve di 60 minuti, quindi la richiesta verrà fatta solo una volta per sessione.

Come potete vedere nello screenshot, questa è una pratica normale che (insieme a Clerk) è usata da Google Analytics, Facebook, Trustpilot e molti altri.

Impatto CLS #

Il Cumulative Layout Shift (CLS) può influire negativamente su SEO ed esperienza utente quando un contenuto iniettato dinamicamente sposta gli elementi su una pagina.

In alcuni casi, tra i vari fattori, Clerk può contribuire al punteggio CLS.

Potete leggere di più sul CLS qui.

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

Per evitare che il contenuto venga spostato, è necessario riservare uno spazio segnaposto per le recommendations Clerk prima che Clerk.js le inietti.

Per farlo, dobbiamo aggiungere un’altezza minima basata sull’altezza del contenuto atteso.

Esempio di codice:

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

Effettuare chiamate API #

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

Questa funzione richiede 3 argomenti:

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

Richieste #

Di seguito uno script d’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]
  }
);

Callbacks #

Quando effettuate chiamate API, potete usare funzioni callback per gestire la risposta secondo le vostre esigenze.

Le funzioni prendono response come argomento, che contiene tutti i dati restituiti dall’API.

Di seguito un esempio che crea una lista di elementi HTML con link alle categorie che corrispondono 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 = 'Categorie correlate';
          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 a seconda della piattaforma e la funzionalità può cambiare in base ai plugin utilizzati.

Poiché i design di Clerk consistono in HTML & CSS, di solito potete aggiungere questa funzionalità se comprendete come funziona sul vostro sito.

Approccio generale #

Alcuni pulsanti “Aggiungi al carrello” richiedono l’esecuzione di JavaScript per funzionare.

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

Consultate come fare nella nostra documentazione sviluppatori qui.

Ispezionate il pulsante “Aggiungi al carrello” per identificare il codice associato, ad esempio in una pagina categoria.

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

Copiate tutto l’HTML del pulsante.

Copiate e incollate questo codice nel vostro Design.

Ora dovete identificare le variabili nel codice.

Più spesso, dovete trovare dove il codice utilizza:

ID prodotto
Quantità prodotto

Sostituite i valori per l’ID del prodotto con le variabili Liquid per questi dati.

L’ID sarà sempre {{ product.id }} e la quantità varierà in base a come inviate i dati.

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

Incollate il vostro codice nell’HTML del vostro Design e testatelo per assicurarvi che funzioni.

Esempio #

Il pulsante “Aggiungi al carrello” qui sotto è un <div> che ha la classe button-container:

La quantità si trova all’interno del link del 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à prodotto viene referenziata in .data-minimal_quantity.

Questi valori devono essere sostituiti dai tag Liquid nel Design così che gli ID e le quantità appropriati vengano usati nell’output HTML.

Con questi cambiamenti, il pulsante finale “Aggiungi al carrello” 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 potete utilizzare per fare debug di eventuali problemi.

Cliccando sul link dell’errore otterrete maggiori informazioni su cosa non abbia funzionato, che potete usare per effettuare il debug voi stessi, oppure inviare al nostro team di supporto che vi aiuterà.

Qui sotto trovate una lista degli errori più comuni.

Contenuto sconosciuto #

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

Per risolverlo, assicuratevi che il nome nel codice di incorporamento corrisponda a un blocco Element che avete creato in my.clerk.io.

Potete cliccare su Modifica elemento per qualsiasi Element, per vedere a quale riferimento corrisponde.

Endpoint API non valido #

Questo errore si verifica se avete usato la classe clerk da qualche parte nel vostro HTML.

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

Per risolverlo, assicuratevi di dare alla classe un altro nome, ad esempio clerk-product.

Argomento prodotto non valido #

Questo errore significa che l’ID fornito per un prodotto non ha il tipo o la sintassi corretti.

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

Ricordate inoltre le parentesi quadre attorno 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 non ha il tipo o sintassi corretti.

Nella maggior parte dei casi accade se il placeholder nel codice embed della categoria non è stato sostituito da un ID reale:

<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 avete copiato lo snippet manualmente, assicuratevi di selezionare il vostro sistema di shop nel menu a discesa Choose your platform prima di copiare lo snippet.

In questo modo includerà la logica della vostra piattaforma per selezionare l’ID categoria corretto.

Se la vostra piattaforma non è elencata, dovrete aggiungere manualmente la logica per selezionare il corretto ID categoria sulla base della funzionalità del vostro webshop.

API key errata #

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

Per risolverlo, accedete a my.clerk.io, e andate su Developers > API Keys.

Qui troverete la Public API Key che potete poi aggiungere al vostro script di tracciamento Clerk.js direttamente nel codice oppure nelle impostazioni della vostra integrazione, a seconda della piattaforma.

Blocco Iubenda #

Se usate iubenda per il consenso ai cookie con il blocco automatico abilitato, i visitatori che rifiutano i cookie potrebbero far sì che iubenda blocchi gli script o le richieste di Clerk.io.

Questo causa tipicamente due problemi:

La richiesta sale non viene mai inviata, quindi gli ordini non vengono tracciati o non vengono attribuiti in Clerk.io.
Gli elementi Clerk.io potrebbero non venire mostrati affatto, oppure Clerk.js potrebbe loggare un errore in console riguardo al caricamento multiplo (perché iubenda riscrive o posticipa gli script).

Consentire i domini #

Per risolvere il problema, consentite Clerk.io in iubenda in modo che i suoi script e le sue richieste non vengano bloccate se un visitatore rifiuta i cookie.

Al minimo, aggiungete questi domini all’allowlist di iubenda:

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

Le etichette UI specifiche possono variare, ma questa impostazione si trova di solito nelle impostazioni del vostro progetto iubenda alla voce Cookie Solution per il blocco automatico.

Per la guida ufficiale di iubenda, vedere il loro articolo su cosa fare quando la modalità di blocco automatico blocca troppo.

Verificare la correzione #

Dopo aver aggiornato le impostazioni di iubenda:

Caricate il webshop, rifiutate i cookie e aprite la console del browser.
Verificate che Clerk.js sia disponibile — typeof Clerk non dovrebbe restituire "undefined".
Eseguite Clerk("debug"), fate un ordine di prova e verificate che venga inviata una richiesta sale a Clerk.io e che restituisca status: "ok".

Dati di vendita POS/ERP #

Per alcuni webshop, è rilevante caricare i dati di vendita da altri sistemi oltre al webshop vero e proprio.

Per esempio, se volete ottimizzare l’algoritmo sulla base delle vendite di un negozio fisico o di un negozio B2B.

Clerk non fa distinzione tra ordini da varie fonti—purché possiate fornire un ID, un timestamp e una lista di prodotti acquistati, questi possono essere caricati su Clerk.

L’approccio raccomandato è usare la CRUD API che vi permette di automatizzare completamente l’operazione.

Implementando queste chiamate API, potete inviare i dati ordine direttamente al vostro Store in Clerk.

Basta creare una chiamata POST all’endpoint /orders nel vostro sistema ERP o webshop, eseguire il job a intervalli regolari, ad esempio una volta al mese, e potrete usare anche gli ordini offline per potenziare recommendations e search online.

In alternativa, potete caricare un file CSV manualmente, senza bisogno di alcun codice.

Potete leggere di più riguardo i file CSV qui.

Conversione di valuta #

Ci sono diversi modi di lavorare con la conversione valuta in Clerk.

Di seguito un modo semplice per farlo funzionare.

Tradurre le valute #

Se i visitatori usano Google Translate sul vostro webshop, i valori di prezzo possono essere tradotti in modi che rompono il formato o cambiano la visualizzazione della valuta.

Per evitarlo, racchiudete l’output del prezzo in elementi che non dovrebbero essere tradotti.

Markup raccomandato #

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

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

Se mostrate il list price e il sale price, applicate lo stesso pattern a ciascun 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>

Applicare nei punti giusti #

Nel vostro Clerk Design dove vengono renderizzati i prezzi.
In qualsiasi wrapper HTML custom che outputta valori prezzo.

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

Inviare oggetti prezzo #

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

Il modo più semplice è inviarli come stringa JSON con le valute ISO come chiave, nel vostro 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,
    // String-encoded JSON examples
    "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,
    // String-encoded JSON example
    "prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}",
    "list_prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}"
  }
]

Creare un formatter #

In Clerk.js potete definire funzioni JavaScript, che possono essere usate nei vostri Design.

Qui potete definire una funzione che accetta il vostro price-dict come argomento e restituisce il prezzo per una specifica valuta, basandosi sulla logica frontend che preferite.

Assicuratevi 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 vostro design con la seguente sintassi:

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

Prezzi specifici per cliente #

Clerk supporta la visualizzazione di prezzi differenti in base al cliente loggato, sia recuperando prezzi individuali in fase di render, che pre-memorizzando prezzi di gruppo nei dati prodotto.

Questo è trattato in dettaglio nell’articolo dedicato Customer Pricing.

Autenticazione HTTP #

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

Nella maggior parte dei casi questo bloccherà anche l’importer di Clerk, mostrando tipicamente un errore 401 Unauthorized nel log di sincronizzazione.

Potete risolvere questa cosa inserendo le info di autenticazione nell’URL di importazione.

In my.clerk.io > Data > Configuration, aggiornate il vostro import URL in questo modo:

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

Nessun ordine tracciato #

Per una guida completa su come funziona il tracciamento delle vendite, come configurarlo e come eseguirne il debug passo dopo passo, consultate l’articolo Sales Tracking.

Nessun impatto Clerk #

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

Nascondere slider con pochi prodotti #

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

Ci sono due modi per gestire questo:

Condizione nel Design Clerk #

Utilizzate una condizione intorno al markup dello slider così che venga renderizzato solo quando ci sono abbastanza prodotti restituiti.

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

Questo è rapido da implementare, ma si basa comunque sulla risposta di Clerk per decidere se mostrare lo slider. Significa che comunque vi costa una chiamata all’API, anche quando lo slider non viene mostrato.

Condizione lato server #

Se la vostra piattaforma conosce già il numero di prodotti nella categoria, decidete nel vostro template se generare o meno il codice embed di 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 sono presenti abbastanza prodotti, e il comportamento rimane completamente allineato con la logica di conteggio categorie del vostro webshop.

Aggiornamento a Clerk.js 2 #

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

Rende l’installazione di Clerk su qualsiasi webshop più semplice.

Tuttavia, poiché le due versioni funzionano leggermente in modo diverso, dovete seguire questi passaggi per eseguire correttamente l’upgrade.

Le due differenze principali in Clerk.js 2 sono:

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

Creare design #

Poiché Clerk.js 2 adotta un approccio diverso ai Design, dovrete crearne di nuovi.

Potete creare i vostri Design Clerk.js 2 rifacendoli nel Design Editor, oppure convertendo i vecchi Design code in Liquid, come spiega la guida qui sotto.

Di seguito la descrizione su come convertire i vecchi Design code in Liquid.

Opzione Design Editor #

Andate su my.clerk.io > Recommendations/Search > Designs > New Design.
Selezionate un tipo di design diverso da Blank e assegnategli un nome. Consigliamo di aggiungere “V2” così sarà evidente che state usando design Clerk.js 2.
Nell’Editor Design, cliccate su uno degli elementi esistenti come nome, immagine, pulsante, ecc. per modificarlo, oppure aggiungete nuovi elementi al Design.
Fate clic su Pubblica design quando avete terminato, poi andate a Step 2 della guida.
Andate su Recommendations/Search > Elements e cambiate il vostro Clerk Element per usare il nuovo Design, poi fate clic su Update Element.
Questo causerà temporaneamente la mancata visualizzazione sul vostro webshop, fino a che non inserirete Clerk.js 2 come spiegato più avanti in questa guida.

Conversione dei design #

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

Andate su my.clerk.io > Recommendations/Search > Designs > New Design.
Selezionate Blank > Code e assegnategli un nome. Consigliamo di aggiungere “V2”.
Fate clic su Create Design.
Otterrete così un design vuoto con Product HTML e CSS utilizzabili.
Tornate all’overview dei design e fate clic su Edit Design per il vostro Design Clerk.js 1. Consigliamo di farlo in una nuova tab così da copiare facilmente il codice.
Copiate il vecchio Design Clerk.js 1 nel nuovo Design Clerk.js 2.
- Noterete che non c’è Container Code nel nuovo.
- Questo perché Liquid usa i for loop per renderizzare tutti i prodotti.
- Copiate il vecchio Product HTML dentro il for-loop, il vecchio Container code intorno ad esso e il CSS.
Convertite il Design nella sintassi di Liquid. La differenza principale è che i vecchi Design usavano la sintassi {{ formatter attribute }} mentre v2 usa {{ product.attribute | formatter }}.
Passate in rassegna tutti i vostri attributi e cambiateli nel nuovo formato.
Se usate istruzioni {{#if}} o {{#is}}, convertitele come {% if product.attribute %} {% else %} {% endif %}.
Cancellate id="{{ $id }}" e la classe :target dal container code nella versione Clerk.js 2, non sono più supportati.
Ecco un esempio di Design Clerk.js 1 e la 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>Prezzo {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Prezzo {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Prezzo {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Acquista ora</div>
</li>

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

<!-- Questo codice crea lo slider tramite il suo 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>Prezzo {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Prezzo {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Prezzo {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Acquista ora</div>
        </a>
    </li>
    {% endfor %}
</ul>

Fate clic su Update Design per salvare.
Andate su Recommendations/Search > Elements e cambiate il vostro Element block per usare il nuovo Design.
Fate clic su Update Element. Questo causerà temporaneamente la mancata visualizzazione sul vostro webshop, fino al termine dello Step 2. Scegliete il nuovo Design per tutti gli Elements da aggiornare.

Sostituire lo script #

Localizzate il file del template usato per mostrare tutte le pagine del webshop e trovate il vecchio script Clerk.js vicino al fondo.
Rimuovete il vecchio script Clerk.js dal file. Somiglierà 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 -->

Andate su my.clerk.io > Developers > Tracking Code. Qui troverete il codice Clerk.js 2.
Copiate questo codice, inseritelo poco prima del tag </head> nel template, poi salvate.

Congratulazioni! State ora usando il setup Clerk.js 2 molto migliorato!

Potete vedere la documentazione completa per Clerk.js 2 qui.

Gestione di require.js #

Questa sezione si applica solo usando Clerk.js 1.

In alcune configurazioni, Require.js impedisce a Clerk.js di essere caricato, il che significa che non verranno mostrati slider o risultati search.

Quando ciò accade, nella vostra console sarà mostrato il seguente errore:

Uncaught ReferenceError: Clerk is not defined

Ci sono due modi per gestire Require.js. Entrambi richiedono di modificare il tracking-script che avete inserito in fondo a tutte le pagine.

Includere in Require.js #

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

Potete farlo inserendo require(['clerk'], function() {}); in fondo allo script di tracciamento:

Ignorare Require.js #

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

Potete farlo inserendo window.__clerk_ignore_requirejs = true; in cima allo script di tracciamento:

Dopo aver utilizzato uno di questi metodi, 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.