Uso dei formattatori nei progetti #
Clerk.js consente di scrivere funzioni javascript personalizzate, che aggiungono nuove funzionalità ai disegni.
I formattatori possono essere aggiunti in due modi:
- Attraverso my.clerk.io > Impostazioni > Formatters, dove ogni Formatter può essere creato come voce separata.
- Come configurazione per Clerk.js, nel tracking-script inserito in tutte le pagine, dove si possono aggiungere più formattatori contemporaneamente.
Per Prestashop questo file contiene il tracking-script:
modules->clerk->views->templates->hook->clerk_js.tpl
Un esempio può essere visto qui sotto. Si prega di notare che si tratta di Clerk V2 (ultima versione):
<!-- 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: '{$clerk_public_key}',
collect_email: {$clerk_datasync_collect_emails},
language: '{$language}',
formatters: {
log_price: function(price) {
console.log(price);
}
},
});
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
È possibile scrivere un numero qualsiasi di Formatter, separati da una virgola:
formatters: {
log_price: function(price) {
console.log(price);
},
calculate_discount: function(price,special_price) {
return price-special_price;
},
substring: function(text) {
var short_string = text.substring(0,20);
return short_string;
}
}
Dopo aver creato i formattatori, è possibile utilizzarli nei propri progetti utilizzando questa sintassi:
{% raw %}{{ price | log_price }} {{ price | calculate_discount | special_price }}{% endraw %}
In questo modo è possibile creare qualsiasi funzionalità necessaria nei propri progetti.
Sincronizzazione con HTTP Auth #
Spesso l’autenticazione HTTP viene utilizzata sui siti di staging per evitare visitatori non invitati.
Questo bloccherà anche l’importatore Clerk e visualizzerà un errore 401 Unauthorized nel log di sincronizzazione.
È possibile verificare facilmente l’importatore inserendo le informazioni di autenticazione nell’URL di importazione come di seguito, in Data Sync a my.clerk.io:
https://USER:PASS@www.ewoksRus.com
Errori comuni di sincronizzazione #
> **Nota: ** Si consiglia di aggiornare sempre il plugin all’ultima versione per ottenere tutte le funzionalità aggiornate da Clerk.
Quando si importano i dati con il plugin PrestaShop di Clerk.io, il server del negozio web è responsabile dell’invio dei dati relativi alle categorie di prodotti e alle vendite a Clerk.io.
Tuttavia, in alcuni casi, la configurazione del server potrebbe impedire l’accesso all’importazione, causando un errore nella Sincronizzazione dei dati.
Di seguito è riportato un elenco degli errori più comuni e di come risolverli.
401 Errore del server: Non autorizzato #
Questo errore si verifica se il vostro webshop/ambiente di sviluppo richiede l’autenticazione HTTP per accedervi.
Per risolvere questo problema è sufficiente inserire Nome utente e Password come parte dell’URL di importazione:
http://username:password@prestashop.clerk.io/clerk/api/store/1
403 Errore del server: Vietato #
Questo errore si verifica se il server blocca l’accesso all’importatore. Nella maggior parte dei casi è sufficiente inserire in una whitelist l’indirizzo IP dell’importatore per consentirgli l’accesso.
L’indirizzo IP più recente [può essere trovato qui] (http://help.clerk.io/it/platform/data/sync/#whitelisting-the-importer-ip-address).
Verificare anche che la chiave pubblica, la chiave privata e l’url di importazione siano corretti per il negozio che si sta gestendo all’interno di my.clerk.io
In alcuni casi, questo errore viene visualizzato anche se si utilizzano domini di lingue diverse, come http://webshop.com/it. In questo caso, assicurarsi di includere il dominio completo che si desidera sincronizzare:
**Cosa succede se ho già effettuato la whitelist ma si verifica ancora lo stesso errore?
Ci sono alcuni casi in cui l’indirizzo IP dell’importatore è già stato inserito nella whitelist e l’errore persiste:
La parte di autenticazione del corpo può essere rimossa dalla richiesta proveniente dal server del negozio.
Limite di velocità per il server in relazione a cloudflares.
Verificare che l’url dell’importatore sia incluso in https.
404 Errore del server: Non trovato #
Questo errore si verifica se l’importatore non è riuscito ad accedere al link che ci invia i dati dal negozio web. Nella maggior parte dei casi accade perché l’estensione è o:
Non è installata affatto
Una cache impedisce l’inizializzazione del collegamento
Assicurarsi innanzitutto di aver installato correttamente il modulo.
In secondo luogo, assicurarsi di svuotare la cache del webshop prima di provare una nuova importazione.
429 Errore del server: Troppe richieste #
Questo errore si verifica se il server nega l’accesso all’importatore a causa di un numero eccessivo di richieste in entrata.
È possibile risolvere il problema impostando un limite di richieste più alto per il proprio server o impostando Page Size su un valore più alto nell’importatore Clerk.io, in modo che l’importatore faccia meno richieste, più grandi:
Se si utilizza il provider Byte.nl, l’importatore di solito restituisce questo errore a causa del suo limitatore di velocità. In questo caso, è sufficiente contattare Byte.nl e chiedere loro di inserire nella whitelist l’User-Agent " clerk" degli importatori.
500 Errore interno del server #
Questo errore significa che il vostro server ha riscontrato un errore interno e non siete stati in grado di specificare quale errore si sia verificato.
In questi casi è possibile controllare il registro del server per identificare quale processo si è bloccato e perché. Nella maggior parte dei casi si tratta semplicemente di un prodotto con un attributo non valido o di una funzione chiamata in modo errato nel webshop.
Se è stata installata l’applicazione Facebook Pixel, questa è nota per causare un errore 500. Provate a disattivare l’app e a eseguire una nuova sincronizzazione. Se funziona, mantenere l’app disattivata e copiare manualmente il Pixel di Facebook nel file del tema principale.
Si può anche provare ad attivare la Modalità di debug in Prestashop, che stamperà l’esatto messaggio di errore quando si verifica un errore 500.
**Attivate SEMPRE la modalità Debug da FTP, per evitare di essere potenzialmente bloccati dal pannello di amministrazione di Prestashop. [Controllare come farlo con FTP] (https://www.prestashop.com/forums/topic/575132-how-to-enable-debug-mode-on-prestashop-17-and-older-versions-turn-on-error-reporting-blank-page/).
###3 Errore del server: Servizio non disponibile
Questo errore è solitamente temporaneo ed è causato dal fatto che il server è troppo occupato per gestire la richiesta. Riprovare più tardi.
Se il problema continua a verificarsi, potrebbe significare che il server è sovraccarico di processi ed è vicino alla capacità massima.
Controllate il carico del server per verificare se è questo il caso.
520: Il server web ha restituito un errore sconosciuto #
Di solito questo errore viene restituito da CloudFlare e spesso si verifica a causa di un collo di bottiglia in Prestashop che causa problemi con dimensioni di pagina più elevate.
Per risolvere il problema, è sufficiente impostare la dimensione della pagina a 50 ed eseguire una nuova sincronizzazione:
Risposta non valida ricevuta da Prestashop #
Questo errore è spesso causato dall’utilizzo del modulo Facebook Pixel, che inserisce un pixel nella parte superiore di tutti i file di Prestashop.
Ciò causa spesso il fallimento della sincronizzazione dei dati, perché il pixel interferisce con i dati che Clerk.io dovrebbe ricevere da Prestashop.
Risolvere questo problema è abbastanza semplice: è sufficiente apportare una piccola modifica a pspixel.php, che è il file che genera il pixel.
Spesso si trova in uno dei seguenti 4 percorsi:
- /moduli/pspixel/pspixel.php
- /moduli/alcapixel/alcapixel.php
- /moduli/facebookpixel/facebookpixel.php
- /moduli/canonicalseo/canonicalseo.php
Nel file, intorno alla linea 196, è necessario inserire la seguente riga di codice all’interno della funzione pubblica hookHeader($params):
if (strpos($_SERVER['REQUEST_URI'], '/module/clerk/') !== false) {
return;
}
Per supportare la nuova sincronizzazione dei dati:
if (Tools::getValue('module') == 'clerk') {
return;
}
Alla fine, il file dovrebbe avere questo aspetto:
Questo rimuoverà il pixel in particolare dai link che [Clerk.io] (http://Clerk.io) utilizza per importare i dati da Prestashop.
Disattivazione di CCC #
CCC ( C oncatenate, C ombine e C ache) è una funzionalità integrata di PrestaShop che consente di ridurre il numero di richieste del modello e di metterle in cache.
A volte questa funzionalità può interferire con il processo di sincronizzazione dei dati e bloccarlo.
Se si verificano errori di sincronizzazione dei dati, aprire il backend di PrestaShop e visitare la sezione denominata
Parametri avanzati –> Prestazioni.
quindi raggiungere la sezione denominata
CCC (Combina, comprimi e memorizza nella cache).
disattivare tutte le sue sottofunzioni, quindi salvare, svuotare la cache di PrestaShop e divertirsi!
P.S: è possibile ottenere lo stesso livello di compressione dei dati - e quindi le prestazioni di caricamento delle pagine - utilizzando un CDN o un modulo PrestaShop dedicato che applica la stessa compressione e combinazione di librerie.
Aggiornamento a Clerk.js 2 #
Clerk.js 2 è una versione più veloce e molto più flessibile della nostra libreria JavaScript che rende l’installazione di Clerk.io su qualsiasi negozio web un gioco da ragazzi.
Tuttavia, poiché le due versioni funzionano in modo leggermente diverso, è necessario seguire i seguenti passaggi per eseguire correttamente l’aggiornamento.
Le due differenze principali di Clerk.js 2 sono che i progetti in my.clerk.io utilizzano il Liquid linguaggio di template, ma possono anche essere facilmente creati utilizzando il Design Editor.
Passo 1: Conversione dei progetti #
Poiché Clerk.js 2 ha un approccio diverso ai disegni, è necessario crearne di nuovi.
È possibile creare i progetti di Clerk.js 2 in due modi:
1. Utilizzando l’intuitivo Editor di progetti per creare nuovi progetti, come descritto nei punti seguenti.
2. Convertire i vecchi progetti. [Seguire questa guida per vedere come fare].(http://help.clerk.io/it/integrations/any-webshop/faq/#converting-designs-for-clerkjs-2)
1.1 Iniziare andando su my.clerk.io -> Raccomandazioni / Ricerca -> Designs e fare clic su Nuovo design:
1.2 Nella schermata seguente, assegnare al progetto un nome (si consiglia di aggiungere “V2” in modo che sia evidente che si sta utilizzando Clerk.js2).
1.3. Scegliere il tipo di progetto.
1.4. Una volta terminato, fare clic su Crea progetto.
1.5. Nel Design Editor, fare clic su uno qualsiasi degli elementi esistenti, come il nome, l’immagine, il pulsante, ecc. per modificarlo, oppure trascinare nuovi elementi nel Design per aggiungere ulteriori informazioni sui prodotti.
1.6. Fare clic su Salva progetto una volta terminato e passare al Fase 2 della guida.
1.7. Infine, andare su Raccomandazioni / Ricerca -> Contenuto e modificare il contenuto di Clerk.io per utilizzare il nuovo progetto.
1.8. Fare clic su Aggiornamento dei contenuti, in modo da non farli apparire temporaneamente nel negozio web fino a quando non si è terminato il lavoro.
Fase 2. Scegliere il nuovo design per tutti i contenuti da aggiornare.
1.9. Ecco! Ora siete pronti per passare a Clerk.js 2.
Passo 2: Aggiornamento del modulo #
**ATTENZIONE: ricordatevi di fare un backup di tutti i file modificati, perché verranno sovrascritti.
Iniziare scaricando l’ultima versione da questo link:
https://github.com/clerkio/clerk-prestashop/releases/latest
Quindi accedere all’amministrazione di Prestashop e andare a Moduli e servizi -> Moduli e servizi.
In questa pagina, procedere come segue:
2.1. Fare clic su Aggiungi nuovo modulo
2.2. Fare clic su Scegliere un file e caricare il file clerk.zip appena scaricato.
2.3. Fare clic su Carica questo modulo
A questo punto PrestaShop visualizzerà un messaggio di successo, confermando che il modulo è stato aggiornato.
Ora avete installato l’ultima versione di Clerk.io per PrestaShop e Clerk.js 2 è in esecuzione sul vostro negozio web!
La documentazione completa di Clerk.js 2 è disponibile qui:
https://docs.clerk.io/docs/clerkjs-quick-start
Gestione di require.js #
**Questa guida si applica solo quando si utilizza l’estensione Prestashop Clerk fino alla v.4.4.1.
In alcune configurazioni, Require.js impedisce il caricamento di Clerk.js, il che significa che non verranno visualizzati i cursori o i risultati della ricerca.
Quando ciò accade, nella console viene visualizzato il seguente errore:
Uncaught ReferenceError: Clerk is not defined
Ci sono due modi per gestire Require.js. Entrambi gli approcci richiedono di apportare modifiche al tracking-script in questo file:
modules->clerk->views->hook->visitor_tracking.tpl
Includere “clerk” in Require.js #
L’approccio migliore è cercare di far riconoscere a Require.js Clerk.io.
È possibile farlo inserendo require([‘clerk’], function() {}); in fondo allo script di tracciamento:
Ignorando Require.js #
Se la soluzione precedente non funziona, è possibile ignorare Require.js.
Lo si può fare inserendo window._clerk_ignore_requirejs = true;
nella parte superiore dello script di tracciamento:
Dopo aver utilizzato uno di questi approcci, Require.js sarà ora compatibile con Clerk.io.