FAQ
Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.
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 formattatore che funzionerà come purché l’applicazione di terze parti utilizzi l’oggetto valuta integrato di Shopify.
Soluzione standard #
È necessario utilizzare un formattatore nei propri progetti per convertire i prezzi. Questo è un esempio del nostro linguaggio template standard qui. Tuttavia, quando si utilizzano conversioni di valuta e simboli, Clerk.js rileva queste impostazioni, come la lingua, la valuta e il codice paese. Gli esempi che seguono forniscono una panoramica del funzionamento dei diversi componenti.
| Formatter | Description | Example Output |
|---|---|---|
| currency_symbol | Currency symbol for the given country or region. This can range based on what you have set up in your configuration of the shop | € , £ and kr. |
| currency_converter | A conversation formatter based on the currency setting and rate of the shops configuration | Let’s say you have 10 euros on a product. If a user switch to another currency like danish kroner (depending on the setting), then it will convert it to the corresponding conversion |
Nell’editor di design
- Creare un componente Testo in cui si desidera che il prezzo venga visualizzato
2. Aggiungere il seguente codice Liquid per mostrare il prezzo in base al convertitore di valuta all’interno del componente di testo:
{{ currency_symbol }}{{ item.price | currency_converter }}
Nel design HTML/CSS (modalità Codice)
1. In my.clerk.io andate su Ricerca/Raccomandazioni -> Design e fate clic su Modificare il design per il vostro progetto.
2. Sostituire il formattatore esistente denaro o denaro_eu per i prezzi, con convertitore_di_valuta
3. Fare clic su Aggiorna design.
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.
Ottenere dati contestuali JIT
Questa sezione descrive come ottenere dati contestuali in tempo reale da mostrare all’interno dei contenuti restituiti dall’API 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 raccolta con tutti i prodotti possibili, si consiglia di creare una raccolta con una condizione soddisfatta da tutti i prodotti. L’insieme dovrebbe essere chiamato Clerk api, perché in questo modo riceverà il percorso /collection/clerk-api frontend.
La condizione per l’insieme dovrebbe essere qualcosa come price > -1000000.
2. Il layout alternativo per le raccolte
In secondo luogo, occorre creare un layout alternativo per mostrare i dati utilizzando la raccolta.
Per farlo, occorre innanzitutto modificare il codice del tema che si desidera utilizzare. Nella sezione dei modelli, a sinistra, premere Add new Template.
Nel popup selezionare collection per il tipo di risorsa.
Selezionare liquid 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 da poterli usare, dobbiamo inserire l’intero contenuto di index.js nella cartella class di questo progetto, all’interno del tag script contenente Clerk.js che avete 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’ultima creazione di dati.
Anche qualsiasi modifica del contesto valutario invalida i dati.
4. La funzione JS che carica i dati rilevanti nel modello.
Infine, è necessario includere il sito template.js nel modello di progettazione utilizzato. La funzione acquisisce 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.
Cose da notare: Se si desidera utilizzare campi diversi da price e list_price, occorre aggiungerli in collection.json.liquid e poi modificare template.html e template.js per utilizzare anche questi campi. Non dovrebbe mai essere necessario modificare la classe descritta al punto 3.
Tracciare più valute in un negozio #
> Questo è deprecato. Lo script di tracciamento dei pixel lo sostituisce. Seguire i passi 4 e 5 del sito Iniziare con la guida di Shopify.
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.
Nelle dashboard di Clerk.io, le prestazioni saranno sempre riportate in uno 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 cruscotti 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 -->
Assicuratevi di mantenere invariato lo script di monitoraggio dei visitatori, che si trova appena sotto il codice di monitoraggio delle vendite.. Gli ordini dovrebbero ora fluire verso i cruscotti Clerk.io come un’unica valuta.
Trovare i file dei temi comuni #
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 si sta cercando. Se non conoscete il nome del file che state cercando, potete utilizzare il campo di ricerca per individuarlo. Ad esempio, se state cercando il file che contiene il codice della pagina di ricerca, è probabile che il nome del file contenga la dicitura “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.
Raccomandazioni per il cassetto del carrello #
Si consiglia vivamente l’installazione da parte di uno sviluppatore Shopify. Questa guida illustra una soluzione altamente personalizzata che può comportarsi in modo diverso nei vari temi di Shopify. È stata progettata specificamente per i temi in cui il carrello fa parte del DOM in ogni pagina, ma rimane nascosto finché non viene aperto dall’utente.
La visualizzazione di Clerk Recommendations nel cassetto del carrello su Shopify è un ottimo modo per mostrare prodotti aggiuntivi agli acquirenti prima che inizino il processo di checkout.
- Modificate il codice del vostro tema Shopify in Negozio online > Temi > Modificare il codice.
- Trovare il file in cui si trova il modello del cassetto del carrello (di solito si chiama carrello.liquid o simile).
- Inserire uno snippet di raccomandazioni Clerk da Raccomandazioni > Contenuto.
Rinominare la classe da
clerka controllare il rendering. Ad esempio, chiamandolaclerk_m:
<span class="clerk_m" data-template="@cart-others-also-bought" data-products="[{% for line_item in cart.items %}{% if forloop.index0 > 0 %}, {% endif %}{{ line_item.product.id }}{% endfor %}]"></span>
- Insieme allo snippet di cui sopra, includere uno script che renda Clerk Recommendations quando l’utente apre il carrello. Un approccio è quello di utilizzare un MutationObserver. Lo script qui sotto include tutti questi elementi e fornisce un esempio di approccio. Per esempio:
<script>
// Select the node that will be observed for mutations
const targetNode = document.querySelector("cart-drawer.drawer");
// Add all of the class names of the cart drawer, when it is opened
const targetNodeClasses = "drawer animate active";
// Options for the observer (which mutations to observe)
const config = { attributes: true };
let cartFetched = false;
let previousitemsID = [];
// Function to fetch cart data
async function fetchCartData() {
const response = await fetch("/cart.js");
const data = await response.json();
let itemsID = [];
let cartItems = data.items;
for (var i = 0; i < cartItems.length; i++) {
itemsID.push(cartItems[i].product_id);
}
return itemsID;
}
// Callback function to execute when mutations are observed
const callback = async (mutationList, observer) => {
for (const mutation of mutationList) {
if (mutation.type === "attributes") {
if (targetNode.className == targetNodeClasses && !cartFetched) {
cartFetched = true;
try {
const itemsID = await fetchCartData();
if (JSON.stringify(previousitemsID) != JSON.stringify(itemsID)) {
await Clerk('content', '.clerk_m', 'param', { products: itemsID })
previousitemsID = itemsID
}
} catch (error) {
console.error(error);
} finally {
cartFetched = false;
}
}
}
}
};
// Create an observer instance linked to the callback function
const clerk_observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
clerk_observer.observe(targetNode, config);
</script>
Il file del cassetto del carrello dovrebbe avere questo aspetto:
Sincronizzazione con HTTP Auth #
Spesso l’autenticazione HTTP viene usata sui siti di staging per evitare visitatori non invitati.
Questo bloccherà anche l’importatore Clerk e visualizzerà un errore 401 Non autorizzato nel log di sincronizzazione.
È possibile verificare facilmente l’importatore inserendo le informazioni sull’autenticazione nell’URL di importazione, come di seguito, in Data Sync all’indirizzo my.clerk.io:
https://USER:PASS@www.ewksRus.com
Errori comuni di sincronizzazione #
Quando si importano i dati con l’integrazione Shopify, il server di Webshops è 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’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’accesso a Autenticazione HTTP.
Questo problema si risolve semplicemente inserendo 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 read_content. #
Questo errore si verifica di solito se non si è dato a Accesso di lettura il permesso di magazzinare contenuti come articoli, blog, commenti, pagine e reindirizzamenti nella propria App privata.
Per risolvere il problema:
1. Accedere a Shopify e andare su Applicazioni -> Gestisci applicazioni private -> Commesso.io (o il nome che avete dato all’app).
2. Scorrere fino a Permessi API amministratore e fare clic su Rivedere le permissioni Admin API disabilitate.
3. Individuare Contenuti archiviati come articoli, blog, commenti, pagine e reindirizzamenti e scegliere Accesso in 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 blocca il caricamento di Clerk.js, il che significa che non verranno mostrati i cursori o i risultati della ricerca.
Quando ciò accade, nella console viene mostrato il seguente errore:
Uncaught ReferenceError: Clerk is not defined
Ci sono due modi per gestire Require.js. Entrambi gli approcci richiedono di apportare modifiche a tracking-script,, che normalmente viene inserito in index.liquid.
Includere “clerk” in Require.js #
L’approccio migliore consiste nel far sì che Require.js riconosca 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;
all’inizio 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 Impiegato.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 disegni in mio.impiegato.io utilizzano il
PLACEHOLDER_58 linguaggio di template , ma possono anche essere facilmente creati utilizzando il Design Editor.Lo script deve essere inserito proprio prima del nel modello del webshop.
Fase 1: Conversione dei progetti #
Poiché Clerk.js 2 ha un approccio diverso ai design, è necessario crearne di nuovi.
È possibile creare i disegni di Clerk.js 2 in due modi:
1. Utilizzando l’intuitivo Editor di design per creare nuovi progetti, come descritto nei punti seguenti.
2. Convertire i vecchi progetti. Seguite questa guida per vedere come fare.
1.1 Iniziare con il sito
1.2 Nella schermata seguente, assegnare al proprio progetto un nome 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, fate clic su Pubblicare Design e andate a Passo 2 nella guida.
1.5. Nel sito Editor di design, fate clic su uno qualsiasi degli elementi esistenti, come il nome, l’immagine, il pulsante e così via, per modificarlo, oppure aggiungete nuovi elementi al progetto per aggiungere ulteriori informazioni sui prodotti.
1.6. Fare clic su Pubblicare In questo modo i prodotti non verranno temporaneamente visualizzati nel webshop fino a quando non sarà terminata la procedura Passo 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 di Impiegato.io per utilizzare il nuovo Design.
1.7. Ecco! Ora siete pronti per passare a Clerk.js 2.
Passo 2: Sostituzione dello script #
2.1. Iniziare a individuare il file del modello che viene usato per mostrare tutte le pagine del webshop e dove si trova lo script Clerk.js originale, vicino al fondo.
2.2. Rimuovere il vecchio script dal file:
2.3. Andare quindi su
2.4. Copiate questo codice e inseritelo subito prima del tag nel modello:
2.5. Salvare il modello.
Congratulazioni! Ora si sta utilizzando la configurazione molto migliorata di Clerk.js 2!
È possibile consultare la documentazione completa di Clerk.js 2 qui: https://docs.clerk.io/docs/clerkjs-quick-start