Faq

aliases:

• /platform-guides/shopify/setup/using-currency-conversion-on-shopify/
• /platform-guides/shopify/troubleshooting/handling-require.js-in-shopify-only-for-clerk-js1-users/
• /platform-guides/shopify/setup/working-with-multiple-currencies-in-your-shopify-store/
• /platform-guides/shopify/setup/installing-sliders-on-the-frontpage-with-sections-in-shopify/
• /platform-guides/shopify/troubleshooting/finding-shopify-theme-files/
• /platform-guides/shopify/getting-started/full-installation-of-clerk.io-on-shopify/
• /platform-guides/shopify/troubleshooting/how-to-import-data-when-using-http-authentication-on-shopify/
• /platform-guides/shopify/troubleshooting/how-to-fix-common-shopify-errors-when-importing-data-to-clerk.io/
• /platform-guides/shopify/setup/upgrading-to-clerk.js-2-on-shopify/
• /platform-guides/shopify/troubleshooting
• /upgrading-to-clerk.js-2-on-shopify
• /installing-sliders-on-the-frontpage-with-sections-in-shopify
• /full-installation-of-clerk.io-on-shopify
• /how-to-import-data-when-using-http-authentication-on-shopify
• /getting-started
• /handling-require.js-in-shopify-only-for-clerk-js1-users
• /using-currency-conversion-on-shopify title: FAQ description: “Soluzioni alle domande e ai problemi più comuni quando si utilizza Clerk con Shopify” weight: 7

Stai riscontrando problemi con la tua integrazione Shopify? Queste FAQ coprono i problemi più comuni e le relative soluzioni, dalla conversione della valuta alla posizione dei file dei temi.

Dimensioni delle immagini #

Gli URL delle immagini di Shopify possono includere dimensioni fisse dalla sincronizzazione, ad esempio _600x600.

Se il tuo design richiede una dimensione di output diversa per ogni posizionamento, puoi rimuovere la dimensione fissa sincronizzata e richiedere una nuova larghezza nell’URL.

Esempio (sostituisci 600x600 con la dimensione predefinita dell’immagine che hai configurato):

{{ product.image
  | replace '_600x600.' '.'
  | replace '?v=' '?width=350&v=' }}

Questo è utile quando un design utilizza più formati di immagine (ad esempio schede prodotto e grandi sezioni hero) e vuoi evitare di sincronizzare più attributi immagine.

Conversione valuta #

La funzione di Conversione Valuta integrata di Shopify semplifica la lettura del simbolo di valuta e del tasso di cambio dal webshop.

Per impostazione predefinita, Clerk.js per Shopify viene fornito con un formatter che funziona fintanto che la tua app di terze parti utilizza l’oggetto valuta integrato di Shopify.

Soluzione standard #

Devi usare un formatter nei tuoi Design per convertire i prezzi.

Questo esempio utilizza il nostro linguaggio template standard qui.

Quando usi conversioni di valuta e simboli, Clerk.js rileva impostazioni come lingua, valuta e codice nazione.

Di seguito sono riportati degli esempi esplicativi su come funzionano i vari componenti.

Editor design #

1. Crea un componente Text dove vuoi mostrare il prezzo.
2. Aggiungi 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 }}

Modalità codice #

1. In my.clerk.io, vai su Search/Recommendations > Designs e clicca su Edit Design per il tuo design.
2. Sostituisci il formatter money o money_eu esistente per i prezzi con currency_converter.
3. Clicca su Update Design.
4. Ora sarai in grado di vedere i prezzi convertiti e il simbolo della valuta nel tuo design.

Soluzione API personalizzata #

Disclaimer: Questa è una soluzione altamente personalizzata per ottenere conversioni dei prezzi in assenza di dati dalla Shopify API. Usala solo se hai una configurazione specifica e personalizzata per la conversione prezzi basata su cambiamenti di geo-IP.

Questa è la documentazione sulla soluzione frontend in Github.

Questa sezione spiega come ottenere dati contestuali in tempo reale per mostrarli all’interno dei contenuti restituiti dalla Clerk API.

Il modello di progettazione è composto dalle seguenti parti:

• Una collezione contenente tutti i prodotti.
• Un layout alternativo per visualizzare informazioni sulla collezione come JSON.
• Una JavaScript Class che raccoglie i dati disponibili nella collezione.
• Uno Snippet JavaScript che utilizza i dati dei product ID rilevanti in un determinato risultato e li posiziona all’interno di un div nel template.

Crea una collezione #

Per assicurarti di avere una collezione con tutti i prodotti possibili, crea una collezione con una condizione rispettata da tutti i prodotti.

La collezione dovrebbe chiamarsi Clerk api, in tal modo riceverà il percorso /collection/clerk-api frontend.

La condizione della collezione dovrebbe essere qualcosa come price > -1000000.

Crea un layout alternativo #

Crea un layout alternativo per mostrare i tuoi dati utilizzando la collezione.

Per farlo, modifica prima il codice del tema che desideri utilizzare.

Nella sezione templates sul lato sinistro, premi Add new Template.

Nel popup, seleziona collection come tipo di risorsa.

Seleziona liquid come tipo di file.

Scrivi json nel campo più in basso, in modo che il nome del template creato sia collection.json.liquid.

Il contenuto di questo file deve essere quello del file collection.json.liquid che si trova nella cartella liquid di questo progetto.

Se necessario, puoi aggiungere altri campi al prodotto in questo template.

Aggiungi JS class #

Per recuperare i dati dalla collezione e renderli utilizzabili, inserisci l’intero contenuto di index.js della cartella class di questo progetto, all’interno del tag script che contiene Clerk.js che hai inserito in theme.liquid.

Dovrebbe apparire così:

<script>
  // Clerk.js Injection Code
  // Clerk Config with Key and Formatters
  // Class from this project
  clerk_shopify_api.init()
  // Infine init() della class per assicurarti che venga eseguito quando la pagina si carica.
</script>

Questa class invalida i dati in base a timestamp e valute, senza che tu debba modificare il codice.

Il tempo prima dell’invalidazione è di 12 ore dall’ultima creazione dei dati.

Qualsiasi cambio di contesto valuta invalida anche i dati.

Aggiungi funzione template #

Includi il template.js nel template design utilizzato.

La funzione recupera i dati quando disponibili e li inserisce in specifici elementi figli all’interno di ogni riquadro prodotto.

L’esempio include i campi list_price e price.

Nota: Se hai bisogno di usare campi diversi da price e list_price, dovrai aggiungerli in collection.json.liquid e poi modificare anche template.html e template.js per consumare questi campi. Non dovresti mai avere bisogno di modificare la Class descritta al passaggio 3.

Trovare i file dei temi #

Shopify offre oltre 100 diversi temi per dare stile e personalizzare il tuo webshop.

Ogni tema funziona allo stesso modo: personalizzi i file del tema per ottenere un determinato risultato nel tuo store.

Tuttavia, i nomi dei file tema cambiano da tema a tema.

Shopify offre un campo di ricerca per trovare facilmente e rapidamente il file tema che stai cercando.

Se non conosci il nome del file che stai cercando, puoi utilizzare il campo di ricerca per aiutarti a localizzarlo.

Ad esempio, se stai cercando il file che contiene il codice per la pagina di ricerca, questo probabilmente avrà ‘search’ nel nome.

Se non sei sicuro di aver trovato il file corretto, puoi confrontare l’HTML nel file del tema con l’HTML della pagina interessata per vedere se corrispondono.

Puoi farlo in Google Chrome facendo clic con il tasto destro su qualsiasi sezione della pagina e selezionando ‘Ispeziona’.

Puoi quindi controllare l’HTML della pagina e verificare se la classe/ID degli elementi è la stessa sia nel file che nella pagina.

Se hai bisogno di ulteriore assistenza, puoi anche contattare il nostro team di supporto.

Raccomandazioni nel cassetto carrello #

L’installazione da parte di uno sviluppatore Shopify è fortemente raccomandata.

Questa guida descrive una soluzione altamente personalizzata che può comportarsi diversamente in base ai vari temi Shopify. È pensata specificamente per i temi in cui il carrello fa parte del DOM in ogni pagina ma rimane nascosto finché l’utente non lo apre.

Visualizzare le Recommendations di Clerk nel cassetto del carrello su Shopify è un ottimo modo per mostrare prodotti aggiuntivi ai clienti prima che inizino il processo di checkout.

1. Modifica il codice del tema Shopify in Online Store > Themes > Edit code.
2. Trova il file in cui si trova il template del cassetto carrello (di solito chiamato cart-drawer.liquid o simili).
3. Inserisci uno snippet Recommendations di Clerk da Recommendations > Elements.
4. Rinomina la classe da clerk per controllare il rendering. Ad esempio, chiamandola clerk_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>

1. Insieme allo snippet sopra, includi uno script per visualizzare le Clerk Recommendations quando l’utente apre il carrello. Un approccio è utilizzare un MutationObserver. Lo script qui sotto include tutti questi elementi, dandoti un esempio su come approcciare la questione:

<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 tuo file del cassetto carrello dovrebbe apparire così:

Autenticazione HTTP #

L’autenticazione HTTP viene spesso utilizzata su siti di staging per evitare visitatori indesiderati.

Questo bloccherà l’importatore Clerk e mostrerà un errore 401 Unauthorized nel log di sincronizzazione.

Puoi risolvere questa cosa inserendo le informazioni di autenticazione nell’URL di importazione.

In my.clerk.io > Data > Configuration, aggiorna il tuo URL di importazione in questo modo:

https://USER:PASS@www.ewoksRus.com

Errori comuni di sincronizzazione #

Quando importi dati con l’integrazione Shopify, il server del tuo webshop è responsabile di inviare dati di prodotto, categoria e di vendita a Clerk.

Tuttavia, in alcuni casi, la configurazione del server può impedire all’Importer di accedere, causando un errore in Data Sync.

Ecco una lista degli errori più comuni e come risolverli.

401 Unauthorized #

Questo errore si verifica se il tuo webshop o ambiente di sviluppo richiede autenticazione HTTP per accedervi.

Si risolve inserendo Username e Password come parte dell’Import URL:

http://username:password@awesomeshop.myshopify.com

Errore permessi #

Questo errore di solito si verifica se non hai concesso Read Access a Contenuto negozio come articoli, blog, commenti, pagine e redirect nella tua App privata.

Per risolverlo:

1. Accedi a Shopify e vai su Apps > Manage Private Apps > Clerk.io (o il nome che hai dato all’app).
2. Scorri fino a Admin API Permissions e clicca su Review disabled Admin API permissions.
3. Trova Contenuto negozio come articoli, blog, commenti, pagine e redirect e scegli Read access:

1. Scorri in cima alla pagina e clicca su Save.

Gestione di require.js #

Questa guida si applica solo all’uso di Clerk.js 1.

In alcune configurazioni, Require.js impedisce il caricamento di Clerk.js, il che significa che non verranno visualizzati né slider né risultati di ricerca.

Quando ciò accade, vedrai il seguente errore nella console:

Uncaught ReferenceError: Clerk is not defined

Ci sono due modi per gestire Require.js. Entrambi richiedono modifiche al tracking-script, di norma inserito in index.liquid.

Inclusione in Require.js #

L’approccio migliore è tentare di fare in modo che Require.js riconosca Clerk.

Puoi fare ciò inserendo require(['clerk'], function() {}); in fondo allo script di tracking:

Ignorare Require.js #

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

Basta inserire window.__clerk_ignore_requirejs = true; nella parte superiore dello script di tracking:

Dopo aver utilizzato uno di questi approcci, Require.js sarà ora compatibile con Clerk.

Upgrade a Clerk.js 2 #

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

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

Tuttavia, poiché le due versioni funzionano in modo leggermente diverso, è necessario seguire questi step per aggiornare con successo.

Le due principali differenze di Clerk.js 2 sono:

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

Crea i design #

Poiché Clerk.js 2 utilizza un approccio diverso ai Design, è necessario crearne di nuovi.

Puoi creare i tuoi Design per Clerk.js 2 in uno di questi due modi:

• Usa l’intuitivo Design Editor per creare nuovi Design, come spiegato nei punti seguenti.
• Converti i tuoi vecchi Design. Segui questa guida per vedere come fare.

Opzione Editor Design #

1. Vai su my.clerk.io > Recommendations/Search > Designs > New Design.
2. Nella schermata successiva, assegna un Name al tuo Design (consigliamo di aggiungere “V2” così è chiaro che stai usando Clerk.js 2).
3. Scegli il tipo di Design.
4. Clicca su Publish Design quando hai finito, e passa a Step 2 della guida.
5. Nel Design Editor, clicca su uno qualsiasi degli elementi esistenti come il nome, immagine, bottone, ecc., per modificarli o aggiungi nuovi elementi al Design per inserire più informazioni sui prodotti.
6. Clicca Publish. Temporaneamente i prodotti non saranno visibili nel tuo webshop finché non completi lo Step 2. Scegli il nuovo Design per tutti gli Element che vuoi aggiornare.
7. Vai su Recommendations/Search > Elements e cambia il tuo Clerk Element per usare il nuovo Design.

Ora sei pronto per passare a Clerk.js 2.

Sostituisci lo script #

1. Individua il file template utilizzato per mostrare tutte le pagine del webshop, dove è presente lo script originale di Clerk.js vicino al fondo.
2. Rimuovi il vecchio script dal file:

1. Vai su my.clerk.io > Developers > Tracking Code. Questa pagina ora contiene il tuo Tracking Code Clerk.js 2.
2. Copia questo codice e inseriscilo appena prima del tag </head> nel template:

1. Salva il template.

Congratulazioni! Ora stai usando la configurazione Clerk.js 2, molto migliorata!

Puoi consultare la documentazione completa per Clerk.js 2 qui: https://docs.clerk.io/docs/clerkjs-quick-start

Accesso agli eventi cliente #

Quando ti aiutiamo a configurare o risolvere problemi di tracciamento degli ordini tramite Shopify pixel, potremmo chiederti l’accesso all’area eventi cliente nel pannello amministrativo di Shopify.

Segui questi passaggi per concedere le autorizzazioni necessarie:

1. In Shopify, vai su Settings > Users and permissions.
2. Clicca sul membro del personale chiamato Clerk.io (o lo staff user da aggiornare).
3. Scorri a Store settings e abilita:

• View customer events
• Manage and add custom pixels

4. Clicca su Save.

Queste autorizzazioni permettono al nostro team di vedere la sezione eventi cliente e gestire il pixel Clerk, in modo da poter verificare che il tracciamento degli ordini funzioni correttamente.