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 durante l’utilizzo di Clerk con Shopify” weight: 7

Hai riscontrato problemi con la tua integrazione Shopify? Questa FAQ copre i problemi più comuni e le loro soluzioni, dalla conversione di valuta alla posizione dei file tema.

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 diversa per ogni posizione, puoi rimuovere la dimensione fissa sincronizzata e richiedere una nuova larghezza nell’URL.

Esempio (sostituisci 600x600 con la dimensione predefinita delle immagini da te configurata):

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

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

Conversione di valuta #

La Conversione di Valuta integrata di Shopify rende facile leggere il simbolo di valuta e il tasso di cambio dal webshop.

Di default, Clerk.js per Shopify viene fornito con un formatter che funziona finché la tua app di terze parti usa l’oggetto valuta integrato di Shopify.

Soluzione standard #

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

Questo esempio usa il nostro linguaggio di template standard qui.

Quando utilizzi conversioni e simboli di valuta, Clerk.js rileva impostazioni come lingua, valuta e codice paese.

I seguenti esempi mostrano come funzionano le diverse componenti.

Design Editor #

1. Crea un componente Text dove vuoi che venga mostrato il prezzo.
2. Aggiungi il seguente codice Liquid per mostrare il prezzo basato sul convertitore valuta all’interno del componente 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 esistente money o money_eu per i prezzi con currency_converter.
3. Clicca su Update Design.
4. Ora potrai vedere i prezzi convertiti e il simbolo di valuta nel tuo design.

Soluzione API personalizzata #

Disclaimer: Questa è una soluzione molto personalizzata per ottenere conversioni prezzi se non ci sono dati dalla Shopify API. Usala solo se stai utilizzando un setup specifico e personalizzato per le conversioni prezzi basate su cambiamenti geo-IP.

Questa è la documentazione sulla soluzione frontend in Github.

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

Il pattern di design è composto dalle seguenti parti:

• Una collezione che contiene tutti i prodotti.
• Un layout alternativo che mostra le informazioni della collezione in formato JSON.
• Una Classe JavaScript che raccoglie i dati messi a disposizione dalla collezione.
• Uno Snippet JavaScript che consuma i dati per gli ID prodotto rilevanti in un dato risultato e li inserisce in un div del template.

Crea la collezione #

Per assicurarti di avere una collezione con tutti i prodotti possibili, crea una collezione con una condizione valida per tutti i prodotti.

La collezione dovrebbe chiamarsi Clerk api, così riceverà il route /collection/clerk-api frontend.

La condizione per la collezione dovrebbe essere qualcosa tipo price > -1000000.

Crea il layout alternativo #

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

Per farlo, modifica il codice del tema che desideri usare.

Nella sezione templates a sinistra, premi Add new Template.

Nel popup seleziona collection come tipo di risorsa.

Seleziona liquid come tipo di file.

Scrivi json nel campo in basso, così il nome del template sarà collection.json.liquid.

Il contenuto di questo file dovrebbe essere il file collection.json.liquid che si trova nella cartella liquid di questo progetto.

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

Aggiungi la classe JS #

Per prelevare i dati dalla tua collezione e prepararli per l’uso, inserisci tutto il contenuto di index.js presente nella cartella class di questo progetto, dentro il 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()
  // Finally init() per la classe per assicurarsi che venga eseguita al caricamento della pagina.
</script>

Questa classe invaliderà 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 costruzione dati.

Ogni cambio di contesto valuta invalida anche i dati.

Aggiungi funzione di template #

Includi template.js nel template grafico 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 devi usare campi diversi da price e list_price, devi aggiungerli in collection.json.liquid e poi modificare template.html e template.js per consumare anche quei campi. Non dovresti mai dover modificare la Classe descritta al punto 3.

Trovare i file tema #

Shopify contiene oltre 100 temi diversi per stilizzare e personalizzare il tuo webshop.

Ogni tema funziona nello stesso modo: personalizzi i file tema per ottenere il risultato desiderato sul tuo store.

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

Shopify ti 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 usare il campo di ricerca per aiutarti a individuarlo.

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

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

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

A questo punto puoi ispezionare l’HTML della pagina e verificare se la classe/ID degli elementi è la stessa nel file e sulla pagina.

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

Consigli nel carrello a scomparsa #

Si raccomanda fortemente l’installazione da parte di uno sviluppatore Shopify.

Questa guida descrive una soluzione altamente personalizzata che potrebbe comportarsi in modo diverso a seconda dei temi Shopify. È pensata specificamente per temi in cui il carrello fa parte del DOM su ogni pagina ma rimane nascosto fino all’apertura da parte dell’utente.

Mostrare le Recommendations Clerk nel carrello a scomparsa su Shopify è un ottimo modo per mostrare prodotti aggiuntivi agli acquirenti prima dell’inizio del checkout.

1. Modifica il codice del tema Shopify in Online Store > Themes > Edit code.
2. Trova il file dove si trova il template del carrello a scomparsa (solitamente chiamato cart-drawer.liquid o simile).
3. Inserisci uno snippet Recommendations 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 item in cart.items %}{{ item.product_id }}{% unless forloop.last %}, {% endunless %}{% endfor %}]"
></span>

1. Assieme allo snippet sopra, includi uno script per mostrare le Recommendations Clerk quando l’utente apre il carrello. Uno degli approcci migliori è usare un MutationObserver. Lo script sotto include tutti questi elementi e ti offre un esempio su come procedere:

<script>
    // Seleziona il nodo che verrà osservato per mutazioni
    const targetNode = document.querySelector("cart-drawer.drawer");

    // Aggiungi tutti i nomi classe del carrello a scomparsa, quando viene aperto
    const targetNodeClasses = "drawer animate active";

    // Opzioni per l'osservatore (quali mutazioni osservare)
    const config = { attributes: true };

    let cartFetched = false;
    let previousitemsID = [];
    
    // Funzione per recuperare i dati del carrello
    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 da eseguire quando vengono osservate mutazioni
    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;
                    }
                }

            }
        }
    };

    // Crea un'istanza dell'osservatore collegata alla callback
    const clerk_observer = new MutationObserver(callback);

    // Inizia l'osservazione del nodo target per le mutazioni configurate
    clerk_observer.observe(targetNode, config);
</script>

Il file del tuo carrello a scomparsa dovrebbe apparire così:

Autenticazione HTTP #

L’autenticazione HTTP viene spesso utilizzata sugli ambienti di staging per evitare visitatori indesiderati.

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

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

In my.clerk.io > Data > Configuration, aggiorna il tuo URL di importazione così:

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

Errori comuni di sincronizzazione #

Quando importi dati con l’integrazione Shopify, il server del tuo webshop è responsabile dell’invio a Clerk di dati su prodotti, categorie e vendite.

Tuttavia, in alcuni casi, la configurazione del server potrebbe impedire all’Importer l’accesso, causando un errore in Data Sync.

Qui sotto trovi 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 nell’URL di importazione:

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

Errore di permessi #

Questo errore di solito si verifica se non hai fornito Read Access per Store content like articles, blogs, comments, pages and redirects nella tua Private App.

Per risolverlo:

1. Accedi a Shopify e vai su Apps > Manage Private Apps > Clerk.io (o il nome che hai dato alla App).
2. Scorri fino a Admin API Permissions e clicca su Review disabled Admin API permissions.
3. Trova Store content like articles, blogs, comments, pages and redirects e scegli Read access:

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

Gestire require.js #

Questa guida si applica solo utilizzando Clerk.js 1.

In alcune configurazioni, Require.js impedisce il caricamento di Clerk.js, per cui non verranno mostrati slider o risultati di ricerca.

Quando ciò accade, nel console recorderai il seguente errore:

Uncaught ReferenceError: Clerk is not defined

Ci sono due modi per gestire Require.js. Entrambi gli approcci richiedono modifiche allo script di tracking, solitamente inserito in index.liquid.

Includere in Require.js #

Il miglior approccio è cercare di far riconoscere Clerk a Require.js.

Puoi farlo aggiungendo require(['clerk'], function() {}); in fondo allo script di tracking:

Ignora Require.js #

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

Puoi farlo inserendo window.__clerk_ignore_requirejs = true; in cima allo script di tracking:

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

Aggiornare a Clerk.js 2 #

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

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

Tuttavia, poiché le due versioni funzionano in modo leggermente diverso, è necessario seguire questi passaggi per procedere correttamente all’upgrade.

Le due principali differenze in Clerk.js 2 sono:

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

Crea i design #

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

Puoi creare i tuoi Design Clerk.js 2 in uno dei seguenti modi:

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

Opzione Design Editor #

1. Vai su my.clerk.io > Recommendations/Search > Designs > New Design.
2. Nella schermata successiva, dai un Nome al tuo Design (si consiglia di aggiungere “V2” per rendere evidente che stai usando Clerk.js 2).
3. Scegli il tipo di Design.
4. Clicca su Publish Design quando hai finito e vai a Step 2 della guida.
5. Nel Design Editor, clicca su qualsiasi elemento esistente come nome, immagine, pulsante, ecc. per modificarlo, oppure aggiungi nuovi elementi al Design per aggiungere più informazioni sui prodotti.
6. Clicca su Publish. Questo non li mostrerà temporaneamente sul tuo webshop fino a quando non completi Step 2. Seleziona il nuovo Design per tutti gli Elementi che devono essere aggiornati.
7. Vai su Recommendations/Search > Elements e cambia il tuo Clerk Element in modo che usi il nuovo Design.

Ora sei pronto a passare a Clerk.js 2.

Sostituisci lo script #

1. Individua il file template utilizzato per mostrare tutte le pagine dello shop, dove si trova 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. In questa pagina troverai il tuo tracking code Clerk.js 2.
2. Copia questo codice e inseriscilo subito prima del tag </head> nel template:

1. Salva il tuo template.

Congratulazioni! Ora stai utilizzando il setup Clerk.js 2, molto migliorato!

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

Accesso Eventi Clienti #

Quando ti assistiamo nel configurare o risolvere problemi di tracciamento ordini tramite pixel Shopify, potremmo richiedere l’accesso alla sezione eventi cliente nel pannello admin di Shopify.

Segui questi step per concedere i permessi necessari:

1. In Shopify, vai su Settings > Users and permissions.
2. Clicca sul membro staff chiamato Clerk.io (oppure l’utente staff che vuoi aggiornare).
3. Scorri fino a Store settings ed abilita:

• View customer events
• Manage and add custom pixels

4. Clicca su Save.

Questi permessi consentono al nostro team di visualizzare la sezione eventi cliente e gestire il pixel Clerk così possiamo verificare che il tracciamento ordini funzioni correttamente.