Shopify

FAQ

Conversione della valuta frontend #

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

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

Soluzione standard #

Devi utilizzare un formatter nei tuoi Design per convertire i prezzi. Questo è un esempio dal nostro linguaggio di template standard qui. Tuttavia, quando si utilizzano le conversioni di valuta e i simboli, Clerk.js rileva queste impostazioni come lingua, valuta e codice paese. I seguenti esempi ti daranno una panoramica di come funzionano i diversi componenti.

FormatterDescrizioneEsempio di output
simbolo_valutaSimbolo della valuta per il paese o la regione specificata. Questo può variare in base a quanto hai impostato nella configurazione del negozio€ , £ e kr.
convertitore_valutaUn formatter di conversazione basato sull’impostazione della valuta e sul tasso di configurazione dei negoziDiciamo che hai 10 euro su un prodotto. Se un utente passa a un’altra valuta come corone danesi (a seconda dell’impostazione), allora verrà convertito nella corrispondente conversione

Nell’Editor di Design

1.  Crea un componente Testo dove vuoi che venga mostrato il prezzo

2. Aggiungi il seguente codice Liquid per mostrare il prezzo basato sul convertitore di valuta all’interno del componente di testo:

{{ simbolo_valuta }}{{ item.price | convertitore_valuta }}

Nel design HTML/CSS (Modalità codice)

1. In my.clerk.io vai su Cerca/Raccomandazioni -> Design e clicca su Modifica Design per il tuo design.

2. Sostituisci il formatter money o money_eu esistente per i prezzi, con convertitore_valuta

3. Clicca su Aggiorna Design.

4. Ora sarai in grado di vedere i prezzi convertiti e il simbolo della valuta nel tuo design:

Soluzioni Shopify-frontend-api #

Dichiarazione: Questa è una soluzione molto personalizzata per ottenere conversioni di prezzo se non ci sono dati dall’API di Shopify. Utilizzala solo se stai utilizzando una configurazione specifica e personalizzata per le conversioni di prezzo basate su cambiamenti geo-ip.

Questa è la documentazione della soluzione frontend in Github.

Ottenere DATI contestuali JIT

Questa sezione tratta di come ottenere dati contestuali in tempo reale per mostrarli all’interno del contenuto restituito dall’API di Clerk.io.

I modelli di design sono composti dalle seguenti parti:

  • Una collezione contenente tutti i prodotti.
  • Un layout alternativo per il rendering delle informazioni della collezione come JSON.
  • Una classe Javascript che raccoglie i dati resi disponibili nella collezione.
  • Un frammento Javascript che consuma i dati per gli ID prodotto rilevanti in un dato risultato e li colloca all’interno di un div nel template.

1. La Collezione

Per garantire di avere una collezione con tutti i prodotti possibili, ti consiglio di creare una collezione con una condizione soddisfatta da tutti i prodotti. La collezione dovrebbe essere chiamata Clerk api, poiché questo comporterà che riceva il percorso /collection/clerk-api nel 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 fare ciò, prima modifichiamo il codice del tema per il tema che desideriamo utilizzare. Nella sezione dei template sul lato sinistro, premi Aggiungi nuovo Template.

Nel popup seleziona collezione per il tipo di risorsa.

Seleziona liquid per il 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 dovrebbe essere il file collection.json.liquid trovato nella cartella liquid per questo progetto.

Sei libero di aggiungere campi al prodotto in questo template come richiesto.

3. La Classe JS che gestisce i dati dal nostro nuovo endpoint.

Per raccogliere i dati dalla nostra collezione e prepararli affinché possano essere utilizzati, dobbiamo inserire l’intero contenuto di index.js nella nostra cartella class in questo progetto, all’interno del tag script contenente Clerk.js che hai inserito in theme.liquid.

Dovrebbe apparire qualcosa del genere:

Questa classe invaliderà i dati in base ai timestamp e alle valute, senza che tu debba modificare il codice.

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

Qualsiasi cambiamento nel contesto della valuta invalida anche i dati.

4. La funzione JS che carica i dati rilevanti nel template.

Infine, dovresti includere il template.js nel template di design utilizzato. La funzione raccoglie i dati quando disponibili e li colloca in elementi figlio specifici all’interno di ciascun riquadro prodotto.

L’esempio include i campi list_price e price.

Cose da notare: Se hai bisogno di utilizzare campi diversi da price e list_price, dovresti 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 nel passo 3.

Monitoraggio di più valute in 1 Negozio #

Questo è deprecato. Lo script di tracciamento dei pixel lo sostituisce. Segui i passi 4 e 5 dalla guida per iniziare con Shopify.

Quando si utilizzano più valute nel tuo webshop Shopify, è importante che gli ordini siano tradotti in una valuta per garantire che le tue prestazioni relative ai ricavi siano accurate in Clerk.io.

Nei dashboard di Clerk.io, le tue prestazioni saranno sempre riportate in una valuta. Ad esempio, se utilizzi sia GBP che DKK nel tuo negozio online, i tuoi dashboard riporteranno le prestazioni tutte in GBP o tutte in DKK. Questo è il motivo per cui tradurre in una valuta è importante: dopotutto, non vorresti che un acquisto di 600 GBP fosse letto da Clerk.io come 600 DKK!

Per assicurarti che i tuoi dashboard di Clerk.io mostrino i tuoi dati di vendita come un’unica valuta comune, questo può essere regolato all’interno del codice di tracciamento delle vendite che hai aggiunto al tuo negozio quando hai installato per la prima volta Clerk.io.

Vai su Impostazioni > Checkout > Script aggiuntivi nel backend di Shopify e modifica il codice di tracciamento delle vendite da questo:

<!-- Inizio dello strumento di personalizzazione E-commerce di Clerk.io - 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>
  <!-- Fine dello strumento di personalizzazione E-commerce di Clerk.io - www.clerk.io -->

A questo:

<!-- Inizio dello strumento di personalizzazione E-commerce di Clerk.io - 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;
        // Aggiungi più casi se necessario
    }
    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>
<!-- Fine dello strumento di personalizzazione E-commerce di Clerk.io - www.clerk.io -->

Assicurati di mantenere lo stesso script di tracciamento dei visitatori– questo si trova appena sotto il codice di tracciamento delle vendite. I tuoi ordini dovrebbero ora fluire nei dashboard di Clerk.io come un’unica valuta.

Trovare file di tema comuni #

Shopify ospita oltre 100 temi diversi per stilizzare e personalizzare il tuo webshop. Ogni tema funziona allo stesso modo, in quanto personalizzi i file del tema per ottenere un determinato risultato nel tuo negozio, tuttavia, i nomi dei file del tema cambiano da tema a tema.

Shopify ti offre un campo di ricerca per trovare facilmente e rapidamente il file del tema che stai cercando. Se non conosci il nome del file che stai cercando, puoi utilizzare il campo di ricerca per aiutarti a trovarlo. Ad esempio, se stai cercando il file che contiene il codice per la pagina di ricerca, è probabile che contenga ‘search’ nel nome del file.

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

Questo può essere fatto su Google Chrome facendo clic con il tasto destro su qualsiasi sezione della pagina e selezionando ‘Ispeziona’.

Puoi quindi ispezionare l’HTML sulla pagina e controllare se la classe/ID degli elementi sono gli stessi nel file e sulla pagina.

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

Raccomandazioni per il cassetto del carrello #

L’installazione da parte di uno sviluppatore Shopify è fortemente raccomandata. Questa guida delinea una soluzione altamente personalizzata che potrebbe comportarsi in modo diverso attraverso vari temi Shopify. È specificamente progettata per temi in cui il carrello è parte del DOM su ogni pagina ma rimane nascosto fino a quando non viene aperto dall’utente.

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

Esempio di uno slider di Raccomandazioni nel cassetto del carrello

  1. Modifica il codice del tuo tema Shopify in Negozio Online > Temi > Modifica codice.
  2. Trova il file in cui si trova il template del cassetto del carrello (di solito chiamato cart-drawer.liquid o simile).
  3. Inserisci un frammento di Raccomandazioni di Clerk da Raccomandazioni > Contenuto. 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 al frammento sopra, includi uno script per rendere le Raccomandazioni di Clerk quando l’utente apre il carrello. Un approccio è utilizzare un MutationObserver. Lo script sottostante include tutti questi elementi, fornendoti un esempio di come procedere. Ad esempio:
<script>
    // Seleziona il nodo che sarà osservato per le mutazioni
    const targetNode = document.querySelector("cart-drawer.drawer");

    // Aggiungi tutti i nomi delle classi del cassetto del carrello, quando è 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;
    }

    // Funzione di 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 funzione di callback
    const clerk_observer = new MutationObserver(callback);

    // Inizia a osservare il nodo target per le mutazioni configurate
    clerk_observer.observe(targetNode, config);
</script>

Il tuo file del cassetto del carrello dovrebbe apparire così:

File del cassetto del carrello che include frammenti di Clerk

Sincronizzazione con HTTP Auth #

Spesso l’autenticazione HTTP è utilizzata sui siti di staging per evitare visitatori indesiderati.

Questo bloccherà anche l’importatore di Clerk e mostrerà un errore 401 Non autorizzato nel registro di sincronizzazione.

Puoi facilmente verificare l’importatore inserendo le informazioni di autenticazione nell’URL di importazione come di seguito, in Data Sync su my.clerk.io:

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

Errori di sincronizzazione comuni #

Quando si importano dati con l’integrazione Shopify, il server del webshop è responsabile dell’invio dei dati sui prodotti, categorie e vendite a Clerk.io.

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

Di seguito è riportato un elenco degli errori più comuni e come risolverli.

Errore Server 401: Non autorizzato #

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

Questo viene risolto semplicemente inserendo il Nome utente e la Password come parte dell’URL di importazione:

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

Errore di autorizzazione Shopify:  Questa azione richiede l’approvazione del commerciante per l’ambito read_content. #

Questo errore si verifica solitamente se non hai fornito Accesso in lettura a Contenuti del negozio come articoli, blog, commenti, pagine e reindirizzamenti nella tua App Privata.

Per risolverlo:

1. Accedi a Shopify e vai su App -> Gestisci App Private -> Clerk.io (o il nome che hai dato all’App).

2. Scorri fino a Permessi API Admin, e clicca su Esamina i permessi API Admin disabilitati.

3. Trova Contenuti del negozio come articoli, blog, commenti, pagine e reindirizzamenti e scegli Accesso in lettura:

4. Poi scorri fino in cima alla pagina e clicca su Salva.

Gestire 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 nessuno slider o risultati di ricerca verranno mostrati.

Quando ciò accade, verrà mostrato il seguente errore nella tua console:

Uncaught ReferenceError: Clerk is not defined

Ci sono due modi per gestire Require.js. Entrambi gli approcci richiedono di apportare modifiche allo script di tracciamento, che di solito è inserito in index.liquid.

Includere “clerk” in Require.js #

L’approccio migliore è cercare di far riconoscere Require.js Clerk.io.

Puoi farlo inserendo require([‘clerk’], function() {}); in fondo allo script di tracciamento:

Ignorare Require.js #

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

Puoi farlo 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 webshop un gioco da ragazzi.

Tuttavia, poiché le due versioni funzionano in modo leggermente diverso, devi seguire questi passaggi per eseguire correttamente l’aggiornamento.

Le due principali differenze in Clerk.js 2 sono:

  • I Design in my.clerk.io utilizzano il Liquid linguaggio di template, ma possono anche essere facilmente creati utilizzando l’Editor di Design.

  • Lo script deve essere inserito appena prima del tag nel template del tuo webshop.

Passo 1: Convertire i Design #

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

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

1.1 Inizia andando su my.clerk.io -> Raccomandazioni / Ricerca -> Design e clicca su Nuovo Design:

1.2 Nella schermata successiva, dai al tuo Design un Nome (ti consigliamo di aggiungere " V2" in modo che sia ovvio che stai utilizzando Clerk.js2).

1.3. Scegli il Tipo di Design.

1.4. Clicca su Pubblica Design quando hai finito, e vai al Passo 2 nella guida.

1.5. Nell’Editor di Design, clicca su qualsiasi degli elementi esistenti come il nome, l’immagine, il pulsante, ecc. per modificarlo, o aggiungi nuovi elementi al Design per aggiungere ulteriori informazioni sui prodotti.

1.6. Clicca su Pubblica Questo causerà temporaneamente che non vengano visualizzati nel tuo webshop fino a quando non avrai finito con il Passo 2. Scegli il nuovo Design per tutto il Contenuto che deve essere aggiornato. 1.7. Infine, vai su Raccomandazioni / Ricerca -> Contenuto e cambia il tuo Clerk.io Contenuto per utilizzare il tuo nuovo Design.

1.7. Ecco! Sei ora pronto per passare a Clerk.js 2.

Passo 2: Sostituire lo script #

2.1. Inizia localizzando il file del template che viene utilizzato per mostrare tutte le pagine del webshop, e dove si trova lo script originale di Clerk.js vicino al fondo.

2.2. Rimuovi il vecchio script dal file:

2.3. Successivamente vai su my.clerk.io -> Impostazioni -> Codice di tracciamento. Questa pagina ora contiene il tuo codice di tracciamento Clerk.js 2.

2.4. Copia questo codice e inseriscilo appena prima del tag nel template:

2.5. Salva il tuo template.

Congratulazioni! Ora stai eseguendo la configurazione molto migliorata di Clerk.js 2!

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

Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.