Conversione di valuta nel frontend #
La conversione di valuta integrata di Shopify consente di leggere facilmente il simbolo della valuta e il tasso di cambio dal negozio web.
Come standard, Clerk.js per Shopify viene fornito con un formatter che funzionerà fino a quando la vostra applicazione di terze parti utilizzerà l’oggetto valuta incorporato di Shopify.
Soluzione standard #
È necessario utilizzare un formattatore nei propri progetti per convertire i prezzi. Questo è un esempio del nostro linguaggio standard per i modelli [qui] (https://docs.clerk.io/docs/clerkjs-template-language). Tuttavia, quando si utilizzano conversioni di valuta e simboli, Clerk.js rileva le impostazioni di lingua, valuta e codice paese. Gli esempi che seguono forniscono una panoramica del funzionamento dei diversi componenti.
| Formattatore | Descrizione | Esempio di output |
|---|---|---|
| Simbolo_di_valuta | Simbolo di valuta per il paese o la regione indicati. Questo può variare in base a quanto impostato nella configurazione del negozio | € , £ e kr. |
| Currency_converter | Un formattatore di conversazione basato sull’impostazione della valuta e sul tasso di cambio della configurazione del negozio | Supponiamo di avere 10 euro su un prodotto. Se un utente passa a un’altra valuta, come le corone danesi (a seconda dell’impostazione), la conversione sarà quella corrispondente. |
In Design Editor
- Creare un componente Text dove si vuole che il prezzo venga visualizzato
2. Aggiungere il seguente codice liquido per mostrare il prezzo in base al convertitore di valuta all’interno del componente di testo:
{{ currency_symbol }}{{ item.price | currency_converter }}
In progettazione HTML/CSS (modalità codice)
1. In my.clerk.io andare su Ricerca/Raccomandazioni -> Designs e fare clic su Modifica design per il proprio design.
2. Sostituire il formattatore money o money_eu esistente per i prezzi con currency_converter.
3. Fare clic su Aggiorna progetto.
4. Ora è possibile visualizzare i prezzi convertiti e il simbolo della valuta nel progetto:
Soluzioni Shopify-frontend-api #
> Esclusione di responsabilità: questa è una soluzione molto personalizzata per ottenere conversioni di prezzo se non ci sono dati dall’API di Shopify. Utilizzare questa soluzione solo se si utilizza una configurazione specifica e personalizzata per le conversioni di prezzo basate sulle modifiche dell’indirizzo geo-ip.
Questa è la documentazione della soluzione frontend in Github.
Raccolta di dati contestuali JIT
Questa sezione descrive come ottenere in tempo reale i dati contestuali da mostrare all’interno dei contenuti restituiti dall’API di Clerk.io.
Il design pattern è composto dalle seguenti parti:
- Una collezione contenente tutti i prodotti.
- Un layout alternativo per rendere le informazioni della raccolta come JSON.
- Una classe Javascript che raccoglie i dati resi disponibili nella raccolta.
- Uno snippet Javascript che consuma i dati per gli id dei prodotti rilevanti in un determinato risultato e li colloca all’interno di un div nel modello.
1. La raccolta
Per assicurarsi di avere una collezione con tutti i prodotti possibili, si consiglia di creare una collezione con una condizione soddisfatta da tutti i prodotti. L’insieme dovrebbe essere chiamato Clerk api, perché in questo modo riceverà la rotta /collection/clerk-api del frontend.
La condizione per la collezione dovrebbe essere qualcosa come price > -1000000.
2. Il layout alternativo per le collezioni
In secondo luogo, dobbiamo creare un layout alternativo per mostrare i nostri dati utilizzando la collezione.
Per farlo, occorre innanzitutto modificare il codice del tema che si desidera utilizzare. Nella sezione dei modelli a sinistra, premere Aggiungi un nuovo modello.
Nel popup selezionare collection per il tipo di risorsa.
Selezionare liquido per il tipo di file.
Scrivere json nel campo più in basso, in modo che il nome del modello creato sia collection.json.liquid.
Il contenuto di questo file deve essere il file collection.json.liquid che si trova nella cartella liquid di questo progetto.
È possibile aggiungere campi al prodotto in questo modello, se necessario.
3. **La classe JS che gestisce i dati dal nostro endpoint appena creato.
Per prendere i dati dalla nostra collezione e prepararli in modo che possano essere usati, dobbiamo inserire l’intero contenuto di index.js nella nostra cartella class di questo progetto, all’interno del tag script contenente Clerk.js che abbiamo inserito in theme.liquid.
Dovrebbe avere un aspetto simile a questo:
Questa classe invaliderà i dati in base ai timestamp e alle valute, senza che sia necessario modificare il codice.
Il tempo prima dell’invalidazione è di 12 ore dall’ultimo dato di costruzione.
Anche qualsiasi modifica del contesto valutario invalida i dati.
4. **La funzione JS che carica i dati rilevanti nel modello.
Infine, è necessario includere il template.js nel modello di design utilizzato. La funzione prende i dati quando sono disponibili e li colloca in elementi figli specifici all’interno di ogni piastrella di prodotto.
L’esempio include i campi list_price e price.
**Se è necessario utilizzare campi diversi da price e list_price, occorre aggiungerli in collection.json.liquid e quindi modificare template.html e template.js per consumare anche questi campi. Non dovrebbe essere necessario modificare la classe descritta nel passo 3.
Tracciare più valute in un negozio #
Quando si utilizzano più valute nel proprio negozio web Shopify, è importante che gli ordini siano tradotti in una valuta per assicurarsi che le prestazioni relative ai ricavi siano accurate in Clerk.io.
Nei cruscotti di Clerk.io, le prestazioni saranno sempre riportate in una valuta. Ad esempio, se nel vostro webstore utilizzate sia GBP che DKK, le vostre dashboard riporteranno le prestazioni tutte in GBP o tutte in DKK. Questo è il motivo per cui la traduzione in una sola valuta è importante: dopo tutto, non vorrete che un acquisto di 600 GBP venga letto da Clerk.io come 600 DKK!
Per assicurarsi che i dashboard di Clerk.io mostrino i dati di vendita in una valuta comune, è possibile modificare il codice di monitoraggio delle vendite aggiunto al negozio al momento dell’installazione di Clerk.io.
Andate su Impostazioni > Cassa > Script aggiuntivi nel backend di Shopify e modificate il codice Sales Tracking da questo:
<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script>
(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: 'yourPublicKey'
});
let clerk_order_id = parseInt("'{'+'{ checkout.order.id }'+'}'");
document.addEventListener('DOMContentLoaded', (e)=> {
clerk_order_id = window.Shopify.checkout.order_id
});
if ( isNaN( clerk_order_id ) ) {
if(window.Shopify){
clerk_order_id = window.Shopify.checkout.order_id
}
}
let log_sale_retry = setInterval(() => {
if( ! isNaN( clerk_order_id ) ){
Clerk('call', 'log/sale/shopify', {
sale: clerk_order_id
});
clearInterval(log_sale_retry);
}
}, 100);
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
A questo:
<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script>
(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);
let clerkLocale = Shopify.locale;
let publicKey;
switch (clerkLocale) {
case 'en':
publicKey = 'yourPublicKeyEN';
break;
case 'fr':
publicKey = 'yourPublicKeyFR';
break;
case 'de':
publicKey = 'yourPublicKeyDE';
break;
// Add more cases as needed
}
Clerk('config', {
key: publicKey
});
let clerk_order_id = parseInt("'{'+'{ checkout.order.id }'+'}'");
document.addEventListener('DOMContentLoaded', (e) => {
clerk_order_id = window.Shopify.checkout.order_id
});
if (isNaN(clerk_order_id)) {
if (window.Shopify) {
clerk_order_id = window.Shopify.checkout.order_id
}
}
let log_sale_retry = setInterval(() => {
if (!isNaN(clerk_order_id)) {
Clerk('call', 'log/sale/shopify', {
sale: clerk_order_id
});
clearInterval(log_sale_retry);
}
}, 100);
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
Assicurarsi di mantenere invariato lo script di monitoraggio dei visitatori, che si trova appena sotto il codice di monitoraggio delle vendite. Gli ordini dovrebbero ora confluire nei cruscotti di Clerk.io come un’unica valuta.
Trovare i file del tema comune #
Shopify ospita oltre 100 temi diversi per personalizzare il vostro negozio web. Ogni tema funziona allo stesso modo: si personalizzano i file del tema per ottenere un determinato risultato sul proprio negozio, ma i nomi dei file del tema cambiano da tema a tema.
Shopify offre un campo di ricerca per trovare facilmente e rapidamente il file del tema che state cercando. Se non conoscete il nome del file che state cercando, potete utilizzare il campo di ricerca per individuarlo. Ad esempio, se si sta cercando il file che contiene il codice della pagina di ricerca, è probabile che il nome del file contenga “search”.
Se non si è sicuri di aver trovato il file corretto, si può confrontare l’HTML del file del tema con quello della pagina in questione per vedere se corrispondono.
Questa operazione può essere eseguita su Google Chrome facendo clic con il tasto destro del mouse su qualsiasi sezione della pagina e selezionando “Ispeziona”.
È quindi possibile ispezionare l’HTML della pagina e verificare se la classe/ID degli elementi è la stessa nel file e nella pagina.
Se avete bisogno di ulteriore assistenza, potete contattare il nostro team di supporto.
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.ewksRus.com
Errori comuni di sincronizzazione #
Quando si importano i dati con l’integrazione di Shopify, il server di Webshops è responsabile dell’invio dei dati relativi alle categorie di prodotto e alle vendite a Clerk.io.
Tuttavia, in alcuni casi, la configurazione del server potrebbe impedire l’accesso all’importatore, causando un errore in 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@awesomeshop.myshopify.com
Errore di autorizzazioni Shopify: Questa azione richiede l’approvazione dell’esercente per l’ambito di lettura del contenuto. #
Questo errore si verifica di solito se non è stato concesso l’accesso di lettura ai contenuti del negozio come articoli, blog, commenti, pagine e reindirizzamenti nella propria App privata.
Per risolvere il problema:
1. Accedere a Shopify e andare a Apps -> Manage Private Apps -> Clerk.io (o il nome che avete dato all’app).
2. Scorrere fino a Autorizzazioni API Admin e fare clic su Vedi le autorizzazioni API Admin disabilitate_.
3. Individuare Contenuti dell’archivio come articoli, blog, commenti, pagine e reindirizzamenti e scegliere Accesso di lettura:
4. Quindi scorrere fino alla parte superiore della pagina e fare clic su Salva.
Gestione di require.js #
Questa guida si applica solo quando si utilizza Clerk JS1..
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 verrà 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, che normalmente è inserito in index.liquid.
Includere “impiegato” 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.
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 l’aggiornamento.
Le due differenze principali di Clerk.js 2 sono:
I progetti in my.clerk.io usano il Liquid linguaggio di template, ma possono anche essere facilmente creati usando l’editor di progetti.
Lo script deve essere inserito subito prima del tag nel modello del webshop.
Fase 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 -> Disegni e fare clic su Nuovo disegno:
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. Al termine, fare clic su Publish Design e passare al Step 2 della guida.
1.5. Nel Design Editor, fare clic su uno qualsiasi degli elementi esistenti, come il nome, l’immagine, il pulsante, ecc. per modificarlo o aggiungere nuovi elementi al progetto per aggiungere ulteriori informazioni sui prodotti.
1.6. Fare clic su Publish Questo farà sì che temporaneamente i prodotti non vengano visualizzati nel negozio web fino a quando non si è terminato il Fase 2. Scegliere il nuovo design per tutti i contenuti che devono essere aggiornati. 1.7. Infine, andare su Raccomandazioni / Ricerca -> Contenuto e modificare il Contenuto Clerk.io per utilizzare il nuovo Design.
1.7. Ecco fatto! Ora siete pronti a passare a Clerk.js 2.
Passo 2: Sostituzione dello script #
2.1. Iniziate individuando il file del modello che viene utilizzato per mostrare tutte le pagine del webshop e dove si trova lo script Clerk.js originale, vicino alla parte inferiore.
2.2. Rimuovere il vecchio script dal file:
2.3. Andare quindi a my.clerk.io -> Impostazioni -> Codice di tracciamento. Questa pagina ora contiene il codice di tracciamento di Clerk.js 2.
2.4. Copiare questo codice e inserirlo subito prima del tag nel modello:
2.5. Salvare il modello.
**Congratulazioni! Ora si sta utilizzando la configurazione di Clerk.js 2, molto migliorata!
È possibile consultare la documentazione completa di Clerk.js 2 qui: https://docs.clerk.io/docs/clerkjs-quick-start