Qualsiasi (webshop)

FAQ

Risposte alle domande frequenti per integrazioni personalizzate

Riscontri 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 App (PWA) e generalmente caricano il sito come una singola pagina, invece di caricare le pagine individualmente come di consueto.

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 di un normale caricamento della pagina.

Per questo motivo, è necessario controllare il rendering con Clerk.js per adattarsi al modo in cui le pagine vengono caricate nell’app.

Includi Clerk.js #

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

Dopo questo, la libreria sarà disponibile per tutta la 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 -->

Controlla il rendering #

Di default, 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 viene modificato.

Puoi controllare il momento d’inserimento dell’elemento quando sei pronto a renderizzarlo.

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

Ad ogni caricamento di pagina, esegui questi passaggi in ordine:

Aggiungi il frammento Clerk all’HTML con un selettore unico che puoi targettizzare.
Esegui Clerk("content", "SELECTOR") per renderizzarlo.

Quando il visitatore lascia la pagina, distruggi il frammento e renderizzalo di nuovo se il visitatore ritorna sulla stessa pagina.

Questo serve a garantire che Clerk.js non consideri il frammento 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 tuoi selettori personalizzati dopo la prima renderizzazione.

Impatto sulla Pagespeed #

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

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

Performance #

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 i contenuti.

Un aumento nel tempo di caricamento spesso deriva dal caricamento di più immagini rispetto a prima, poiché i risultati di Search e Recommendations di Clerk funzionano al meglio quando sono visivamente accattivanti.

Per minimizzare il tempo di caricamento extra, consigliamo di usare immagini in formato webp con una risoluzione che corrisponde a quella utilizzata negli elementi Clerk.

Ad esempio, se le immagini nelle recommendations hanno risoluzione di 400x400px sulla vista desktop, invia immagini con risoluzione massima di 420x420px o simile.

Google Page Speed #

Se usi Google Page Speed Insights o strumenti simili per analizzare la performance del sito, potresti vedere Clerk.js elencato sotto Leverage browser caching.

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

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

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

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

Più lunga è la durata della cache, maggiore sarà il tempo per avere accesso alle funzioni più recenti.

La cosa importante è che gli utenti finali devono scaricare Clerk.js una sola volta quando sono disponibili nuove funzioni.

La scadenza della cache di 60 minuti significa semplicemente che il browser dell’utente finale si collegherà a Clerk ogni 60 minuti.

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

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

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

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

Impatto sul CLS #

Il Cumulative Layout Shift (CLS) può impattare negativamente la SEO e l’esperienza utente quando contenuti iniettati dinamicamente spostano altri elementi nella pagina.

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

Puoi leggere di più sul CLS qui.

Segui questa linea guida solo se il punteggio CLS è superiore a 0.2 e gli elementi Clerk sono above the fold.

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

Per farlo, occorre aggiungere un’altezza minima basata sull’altezza prevista del contenuto.

Esempio di codice:

.clerk-slider-wrapper {
    min-height: 300px; /* Regola 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 richiede 3 argomenti:

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

Richieste #

Sotto 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 status 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 usare funzioni callback per gestire la risposta a tuo piacimento.

Le funzioni prendono come argomento response 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 = '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 add-to-cart #

Questi pulsanti funzionano in modo diverso per ciascuna piattaforma e la funzionalità può variare 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 add-to-cart necessitano di JavaScript per funzionare.

In questi casi puoi aggiungere la funzionalità al metodo cart già presente in Clerk.

Scopri come farlo nella nostra documentazione per sviluppatori qui.

Ispeziona il pulsante add-to-cart per identificare il codice associato, ad esempio in una pagina categoria.

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

Copia tutto l’HTML del pulsante.

Copia e incolla questo codice nel tuo Design.

Ora identica le variabili nel codice.

Più spesso, devi individuare dove il codice usa:

ID prodotto
Quantità prodotto

Sostituisci i valori dell’ID prodotto con le variabili Liquid per questi dati.

L’ID sarà sempre {{ product.id }} e la quantità cambierà in base a come stai inviando il dato.

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

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

Esempio #

Il pulsante add-to-cart usa un <div> con classe button-container.

La quantità si trova nel link al carrello dopo /cart?add= e l’ID del 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 nei Design con i tag Liquid così che vengano utilizzati i corretti ID e quantità dei prodotti nell’output HTML.

Con queste modifiche, il pulsante add-to-cart 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 eseguire il debug dei problemi.

Cliccando il link dell’errore otterrai più informazioni su cosa sia andato storto, che puoi usare per il debug oppure inviare al nostro support che ti aiuterà.

Di seguito trovi la lista degli errori più comuni.

Contenuto sconosciuto #

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

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

Puoi cliccare su Edit Element per qualsiasi Element, per vedere quale sia il riferimento corretto.

Endpoint API non valido #

Questo errore si verifica se hai utilizzato la classe clerk in qualche parte del tuo HTML.

Questa classe è riservata ai nostri snippet, poiché Clerk.js la utilizza per identificare gli elementi da renderizzare.

Per risolvere, assicurati che il nome della classe sia diverso, ad esempio clerk-product.

Argomento prodotto non valido #

Questa segnalazione indica che l’ID fornito per un prodotto ha un tipo o una sintassi errata.

Ad esempio, se gli ID dei prodotti sono interi, devono rimanere tali anche nel codice embed.

Ricorda anche le parentesi attorno all’ID per creare 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 errata.

Nella maggior parte dei casi, appare se il placeholder nel codice embed 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 manualmente lo snippet, assicurati di selezionare il tuo sistema e-commerce nel menu a tendina Choose your platform prima di copiare lo snippet.

A quel punto cambierà per includere la logica della tua piattaforma per selezionare il corretto ID categoria.

Se la tua piattaforma non è elencata, occorre aggiungere manualmente la logica per determinare l’ID categoria corretto in base alla funzionalità del tuo shop.

API key non corretta #

Questo errore appare se la public API key fornita non è collegata a nessun account su Clerk.

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

Qui puoi trovare la Public API Key che andrai poi ad aggiungere nello script di tracking Clerk.js direttamente nel codice o nelle impostazioni della tua integrazione, a seconda della piattaforma.

Blocco da parte di Iubenda #

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

Tipicamente si manifestano 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 del tutto, oppure Clerk.js potrebbe registrare un errore in console indicando che è stato caricato più volte (perché iubenda riscrive o differisce gli script).

Autorizzare domini (Allowlist) #

Per risolvere, aggiungi Clerk.io all’allowlist di iubenda così che i suoi script e richieste non vengano bloccati quando un visitatore rifiuta i cookie.

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

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

Le etichette in UI variano, ma questa impostazione si trova solitamente nelle impostazioni Cookie Solution del tuo progetto iubenda, alla voce Blocco automatico.

Per la guida ufficiale di iubenda, consulta il loro articolo su cosa fare quando il Blocco automatico blocca troppo.

Verifica della soluzione #

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 dovrebbe restituire "undefined".
Esegui Clerk("debug"), effettua un ordine di test e conferma che una richiesta sale venga inviata a Clerk.io e restituire status: "ok".

Dati vendite POS/ERP #

Per alcuni negozi online è importante caricare dati sulle vendite provenienti da altri sistemi diversi dal sito e-commerce.

Ad esempio, se vuoi ottimizzare l’algoritmo sulle vendite di un negozio fisico, o B2B store.

Clerk non distingue tra ordini provenienti da varie fonti: finché puoi fornire un ID, un timestamp e una lista di prodotti acquistati, puoi caricarli su Clerk.

L’approccio raccomandato è utilizzare la CRUD API perché consente di automatizzare completamente l’operazione.

Implementando queste chiamate API puoi inviare i dati di ordine direttamente al tuo Store su Clerk.

Crea semplicemente una chiamata POST all’endpoint /orders nel tuo sistema ERP o shop online, esegui il job con cadenza regolare (ad es. mensilmente) e potrai usare gli ordini offline per migliorare recommendations e risultati Search online.

In alternativa puoi caricare manualmente un file CSV, senza dover programmare nulla.

Puoi leggere di più sui file CSV qui.

Conversione valuta #

Ci sono diversi modi per lavorare con la conversione valuta su Clerk.

Un modo semplice per implementarla è illustrato di seguito.

Tradurre le valute #

Se i visitatori usano Google Translate sul tuo shop online, i valori di prezzo possono essere tradotti in modi che rompono il formato o cambiano la valuta mostrata.

Per evitarlo, racchiudi l’output dei prezzi in elementi che non devono essere tradotti.

Markup raccomandato #

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

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

Se mostri sia il prezzo di listino che il prezzo scontato, applica lo stesso pattern a ciascun valore:

<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 Design di Clerk dove vengono visualizzati i prezzi.
In eventuali wrapper HTML personalizzati che stampano valori di prezzo.

In questo modo il resto della pagina rimarrà traducibile, preservando formattazione e valuta dei prezzi.

Inviare oggetti prezzo #

Clerk ha bisogno di conoscere i prezzi di ogni prodotto nelle diverse valute.

Il modo più facile è inviarli come JSON codificato in stringa dei prezzi formattati, con il codice 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 di JSON codificato come 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,
    // Esempi di JSON codificato come stringa
    "prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}",
    "list_prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}"
  }
]

Crea formatter #

In Clerk.js puoi definire funzioni JavaScript che puoi utilizzare nei tuoi Design.

Qui puoi definire una funzione che prende la tua price-dict come argomento e restituisce il prezzo per la valuta specifica, secondo la logica frontend che preferisci.

Assicurati di sostituire currency con la valuta attualmente selezionata 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];
      }
  }
});

Usa il formatter #

Dopo aver definito il formatter, può essere utilizzato nel 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 diversi in base al cliente loggato, recuperando i prezzi individualmente al momento del rendering o pre-memorizzando i prezzi per gruppo nei dati di prodotto.

Questo argomento è approfondito nell’articolo dedicato Customer Pricing.

Autenticazione HTTP #

L’autenticazione HTTP viene spesso usata nei siti di staging per evitare visitatori indesiderati.

Questo, in molti casi, blocca anche l’importatore Clerk e solitamente compare un errore 401 Unauthorized nel log di sincronizzazione.

Puoi risolvere aggiungendo le informazioni di autenticazione alla URL di importazione.

In my.clerk.io > Data > Configuration, aggiorna la tua import URL così:

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

Nessun ordine tracciato #

Per una guida completa su come funziona il tracking delle vendite, su come configurarlo e debuggarlo step by step, consulta 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 Sales Tracking.

Nascondere slider con pochi prodotti #

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

Esistono due modi per gestire questa situazione:

Condizionale nel Design Clerk #

Usa una condizione intorno al markup dello slider in modo che 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 %}

Questo è veloce da implementare, ma si basa comunque sulla risposta Clerk per decidere se mostrare lo slider. Ciò significa che comunque viene effettuata una chiamata API, anche quando lo slider non viene mostrato.

Condizionale server-side #

Se la tua piattaforma già conosce il numero di prodotti nella categoria, decidi nel template se mostrare o meno 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 se ci sono abbastanza prodotti, mantenendo il comportamento perfettamente allineato alla logica della categoria del tuo shop.

Aggiornamento a Clerk.js 2 #

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

Rende più semplice installare Clerk su qualsiasi shop online.

Tuttavia, dato che le due versioni funzionano in modo leggermente diverso, devi seguire questi passaggi per aggiornare con successo.

Le due differenze principali in Clerk.js 2 sono:

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

Crea i design #

Poiché Clerk.js 2 ha un approccio diverso ai Design, devi crearne di nuovi.

Puoi creare i tuoi Design per Clerk.js 2 ridisegnandoli nel Design Editor oppure convertendo i tuoi vecchi code Design in Liquid, come spiegato nella guida qui sotto.

Segue una descrizione su come convertire i vecchi code Design in Liquid.

Opzione Design Editor #

Vai a 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 identificare facilmente i design per Clerk.js 2.
Nell’Editor Design, clicca su uno degli elementi esistenti come nome, immagine, pulsante, ecc. per modificarlo oppure aggiungi nuovi elementi al Design.
Clicca su Publish Design quando hai finito e passa al Passo 2 della guida.
Vai a Recommendations/Search > Elements e imposta il tuo Element di Clerk per usare il nuovo Design, quindi clicca su Update Element.
Così facendo temporaneamente non verranno visualizzati nello shop fino a quando non avrai inserito Clerk.js 2 come spiegato più avanti nella guida.

Conversione design #

Poiché Clerk.js 2 usa il linguaggio template più flessibile Liquid, devi convertire i Design in tale linguaggio.

Vai a my.clerk.io > Recommendations/Search > Designs > New Design.
Seleziona Blank > Code e aggiungi un nome. Consigliamo di aggiungere “V2” per identificarlo come design di Clerk.js 2.
Clicca su Create Design.
Verrà creato un design vuoto con Product HTML e CSS da personalizzare.
Torna alla panoramica dei design e clicca su Edit Design per il tuo Design Clerk.js 1. Suggeriamo di aprirlo in una nuova scheda per copiare facilmente il codice.
Copia il vecchio Design Clerk.js 1 nel nuovo Design per Clerk.js 2.
- Nota che non c’è Container Code in quello nuovo.
- Questo perché Liquid usa i for loop per renderizzare tutti i prodotti.
- Copia il Product HTML dentro il for-loop, il vecchio Container Code intorno e il CSS.
Converti il design nella sintassi di Liquid. La differenza principale è che nei vecchi Design si usava {{ formatter attribute }} mentre con v2 si usa {{ product.attribute | formatter }}.
Aggiorna tutti gli attributi nel nuovo formato.
Se usi {{#if}} o {{#is}}, convertile con {% if product.attribute %} {% else %} {% endif %}.
Elimina id="{{ $id }}" e la classe :target dal container code del Design Clerk.js 2 perché non sono più supportati.
Ecco un esempio di design Clerk.js 1 e la relativa versione completamente convertita:

Clerk.js 1 Design #

// 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>

Clerk.js 2 Design #

<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 a Recommendations/Search > Elements e assegna il blocco Element al nuovo Design.
Clicca su Update Element. Questo causerà temporaneamente la mancata visualizzazione degli elementi nello shop, fino a che non concludi il Passo 2. Scegli il nuovo Design per tutti gli Elements da aggiornare.

Sostituisci lo script #

Individua il file template usato per tutte le pagine del webshop, dove si trova lo script Clerk.js originale in fondo.
Rimuovi il vecchio script Clerk.js dal file. Dovrebbe essere simile 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 a my.clerk.io > Developers > Tracking Code. Qui trovi il codice per Clerk.js 2.
Copia questo codice, inseriscilo subito prima del tag </head> nel template, quindi salva.

Congratulazioni! Ora stai usando la nuova e migliorata configurazione Clerk.js 2!

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

Gestione di require.js #

Questa sezione vale solo per chi usa Clerk.js 1.

In alcune configurazioni, Require.js impedisce a Clerk.js di caricarsi, il che significa che non verranno mostrati né slider né risultati search.

Quando succede, si vedrà il seguente errore in console:

Uncaught ReferenceError: Clerk is not defined

Ci sono due modi di gestire Require.js. Entrambi richiedono modifiche al tracking-script inserito a fondo pagina.

Includere in Require.js #

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

Inserisci require(['clerk'], function() {}); in fondo allo script di tracciamento.

Ignorare Require.js #

Se la soluzione sopra non funziona, puoi fare in modo di ignorare Require.js.

Inserisci window.__clerk_ignore_requirejs = true; in cima allo script di tracciamento.

Dopo aver adottato uno dei due approcci, Require.js sarà compatibile con Clerk.

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