FAQ

Støder du på problemer med din Shopify-integration? Denne FAQ dækker de mest almindelige problemer og deres løsninger, fra valutaomregning til placering af temafiler.

Valutaomregning #

Shopifys indbyggede Currency Conversion gør det nemt at læse valutasymbolet og vekselkursen fra webshoppen.

Som standard følger Clerk.js til Shopify med en formatter, der fungerer, så længe din tredjepartsapp bruger Shopifys indbyggede currency-objekt.

Standardløsning #

Du skal bruge en formatter i dine Designs for at omregne priser.

Dette eksempel bruger vores standard skabelonsprog her.

Når du bruger valutaomregning og symboler, registrerer Clerk.js indstillinger som sprog, valuta og landekode.

Følgende eksempler viser, hvordan de forskellige komponenter fungerer.

Design Editor #

1. Opret en Text-komponent, hvor du vil vise prisen.

2. Tilføj følgende Liquid-kode for at vise prisen baseret på valutaomregneren inde i tekstkomponenten:

{{ currency_symbol }}{{ item.price | currency_converter }}

Kode-mode #

1. Gå til my.clerk.io, gå til Search/Recommendations > Designs og klik på Edit Design for dit design.

2. Erstat eksisterende money eller money_eu formatter for priser med currency_converter.

3. Klik på Update Design.

4. Du vil nu kunne se de omregnede priser og valutasymbolet i dit design:

Tilpasset API-løsning #

Disclaimer: Dette er en meget tilpasset løsning for at få prisomregninger, hvis der ikke er data fra Shopify API’et. Brug kun denne, hvis du bruger en specifik og tilpasset opsætning til prisomregninger baseret på geo-IP-ændringer.

Dette er frontend-løsningsdokumentationen i Github.

Dette afsnit forklarer, hvordan man henter kontekstuelle data i realtid for at vise det i indholdet returneret fra Clerk API.

Designmønstret består af følgende dele:

• En collection, der indeholder alle produkter.

• Et alternativt layout til at rendere collection-information som JSON.

• En JavaScript-klasse, der indsamler de tilgængelige data i collectionen.

• Et JavaScript-snippet, der bruger dataene for de relevante produkt-id’er i et givet resultat og placerer dem i en div i skabelonen.

Opret collection #

For at sikre, at du har en collection med alle mulige produkter, opret en collection med en betingelse, som alle produkter opfylder.

Collectioen skal hedde Clerk api, da dette resulterer i, at den får ruten /collection/clerk-api frontend.

Betingelsen for collectionen bør være noget i stil med price > -1000000.

Opret alternativt layout #

Opret et alternativt layout for at vise dine data vha. collectionen.

For at gøre dette, rediger først temakoden for det tema, du ønsker at bruge.

Under skabelonsektionen i venstre side, tryk på Add new Template.

I pop-up-vinduet vælg collection for ressource-type.

Vælg liquid for filtypen.

Skriv json i det nederste felt, så navnet på den oprettede skabelon bliver collection.json.liquid.

Indholdet af denne fil skal være den collection.json.liquid-fil, der findes i liquid-mappen for dette projekt.

Du er velkommen til at tilføje felter til produktet i denne skabelon efter behov.

Tilføj JS-klasse #

For at hente dataene fra din collection og gøre dem klar til brug, indsæt hele indholdet af index.js i class-mappen i dette projekt, inde i det script-tag, der indeholder Clerk.js, som du har placeret i theme.liquid.

Det vil se nogenlunde sådan her ud:

<script>
  // Clerk.js Injection Code
  // Clerk Config med Key og Formatters
  // Klasse fra dette projekt
  clerk_shopify_api.init()
  // Til sidst init() for klassen så den startes, når siden indlæses.
</script>

Denne klasse ugyldiggør data baseret på tidsstempler og valutaer, uden at du behøver at ændre koden.

Tiden før ugyldiggørelse er 12 timer fra seneste dataopbygning.

Enhver ændring af valutakontekst ugyldiggør også dataene.

Tilføj skabelonfunktion #

Inkluder template.js i det design, der bruges.

Funktionen henter data, når de er tilgængelige, og placerer dem i specifikke børneelementer i hver produkttile.

Eksemplet inkluderer felterne list_price og price.

Ting du skal bemærke: Hvis du skal bruge felter, der er forskellige fra price og list_price, tilføjer du dem i collection.json.liquid og redigerer derefter template.html og template.js for også at bruge disse felter. Du bør aldrig behøve at ændre klassen beskrevet i trin 3.

Flere valutaer #

Bemærk: Dette er forældet. Pixel tracking scriptet erstatter dette. Følg trin 4 og 5 fra Kom igang med Shopify-vejledningen.

Når du bruger flere valutaer i din Shopify-webshop, er det vigtigt, at ordrer oversættes til én valuta for at sikre, at dine indtægtsrelaterede resultater er nøjagtige i Clerk.

I Clerk-dashboards bliver dine resultater altid rapporteret i én valuta.

Hvis du f.eks. bruger både GBP og DKK i din webshop, rapporterer dine dashboards resultater alt i GBP eller alt i DKK.

Derfor er det vigtigt at omregne til én valuta — du ville jo ikke ønske, at et 600 GBP-køb læses af Clerk som 600 DKK!

For at sikre, at dine Clerk Dashboards viser dine salgsdata som én fælles valuta, kan dette justeres i den Sales Tracking-kode, du tilføjede til din butik ved første installation af Clerk.

Gå til Settings > Checkout > Additional Scripts i Shopify-backend, og ændr Sales Tracking-koden fra dette:

<!-- 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 -->

Til dette:

<!-- 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;
        // Tilføj flere cases efter behov
    }
    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 -->

Sørg for at beholde Visitor Tracking Scriptet uændret — dette findes lige under Sales Tracking-koden.

Dine ordrer bør nu komme igennem til Clerk-dashboards som én valuta.

Finde temafiler #

Shopify rummer over 100 forskellige temaer til at style og tilpasse din webshop.

Hvert tema fungerer på samme måde — du tilpasser temafilerne for at få et ønsket resultat i din butik.

Dog ændrer navnet på temafiler sig fra tema til tema.

Shopify giver dig et søgefelt, så du let og hurtigt kan finde den temafil, du leder efter.

Hvis du ikke kender navnet på filen, kan du bruge søgefeltet til at finde den.

Hvis du f.eks. leder efter filen med koden for søgesiden, vil filnavnet sandsynligvis indeholde ‘search’.

Hvis du er i tvivl om, hvorvidt du har fundet den rigtige fil, kan du sammenligne HTML’en i temafilen med HTML’en på den relevante side for at se, om de matcher.

Dette kan gøres i Google Chrome ved at højreklikke på et område af siden og vælge ‘Inspect’.

Du kan dernæst inspicere HTML’en på siden og tjekke, om klassen/ID’et for elementerne er det samme i filen som på siden.

Hvis du har brug for mere hjælp til dette, kan du også kontakte vores supportteam.

Cart drawer recommendations #

Installation af en Shopify-udvikler anbefales kraftigt.

Denne guide skitserer en meget specialiseret løsning, der kan opføre sig forskelligt i forskellige Shopify-temaer. Den er specifikt designet til temaer, hvor kurven er en del af DOM’en på alle sider, men forbliver skjult, indtil den åbnes af brugeren.

At vise Clerk Recommendations i cart drawer på Shopify er en god måde at vise yderligere produkter til kunderne, inden checkout-processen begynder.

1. Rediger koden på dit Shopify-tema i Online Store > Themes > Edit code.

2. Find den fil, hvor cart drawer-skabelonen befinder sig (normalt kaldet cart-drawer.liquid eller lignende).

3. Indsæt et Clerk Recommendations-snippet fra Recommendations > Content.

4. Omdøb klassen fra clerk for at kontrollere rendering. For eksempel ved at kalde den 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>

5. Sammen med ovenstående snippet, inkludér et script, der renderer Clerk Recommendations, når brugeren åbner kurven. En tilgang er at bruge en MutationObserver. Scriptet nedenfor indeholder alle disse elementer, så du har et eksempel på, hvordan det kan gøres:

<script>
    // Vælg node, der skal overvåges for mutationer
    const targetNode = document.querySelector("cart-drawer.drawer");

    // Tilføj alle klassenavne fra cart drawer, når den åbnes
    const targetNodeClasses = "drawer animate active";

    // Indstillinger for observer (hvilke mutationer skal overvåges)
    const config = { attributes: true };

    let cartFetched = false;
    let previousitemsID = [];
    
    // Funktion til at hente kurvdata
    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-funktion, der køres, når mutationer opdages
    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;
                    }
                }

            }
        }
    };

    // Opret et observer-instan, der er koblet til callback-funktionen
    const clerk_observer = new MutationObserver(callback);

    // Start med at overvåge target node for konfigurerede mutationer
    clerk_observer.observe(targetNode, config);
</script>

Din cart drawer-fil bør nu se sådan ud:

HTTP-autentificering #

HTTP-autentificering bruges ofte på staging-sites for at undgå uønskede besøgende.

Dette vil blokere Clerk-importeren og vise en 401 Unauthorized-fejl i synkroniseringsloggen.

Du kan løse dette ved at indsætte autentificeringsoplysningerne i import-URL’en.

I my.clerk.io > Data > Configuration, opdater din import-URL således:

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

Almindelige synkroniseringsfejl #

Når du importerer data med Shopify-integrationen, er det din webshops server, der er ansvarlig for at sende produkt-, kategori- og salgsdata til Clerk.

Dog kan serverens konfiguration i nogle tilfælde forhindre Importeren i at få adgang og føre til en fejl i Data Sync.

Nedenfor er en liste over de mest almindelige fejl og hvordan de rettes.

401 Unauthorized #

Denne fejl opstår, hvis din webshop eller udviklingsmiljø kræver HTTP-autentificering for at få adgang.

Dette løses ved at indsætte Brugernavn og Adgangskode som en del af Import-URL’en:

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

Tilladelsesfejl #

Denne fejl opstår som regel, hvis du ikke har givet Read Access til Store content like articles, blogs, comments, pages and redirects i din Private App.

Sådan løser du det:

1. Log ind på Shopify og gå til Apps > Manage Private Apps > Clerk.io (eller det navn du gav App’en).

2. Rul ned til Admin API Permissions og klik på Review disabled Admin API permissions.

3. Find Store content like articles, blogs, comments, pages and redirects og vælg Read access:

4. Rul op øverst på siden og klik på Save.

Håndtering af require.js #

Denne vejledning gælder kun, hvis du bruger Clerk.js 1.

I nogle opsætninger forhindrer Require.js Clerk.js i at blive indlæst, hvilket betyder, at der ikke vises sliders eller søgeresultater.

Når dette sker, vises følgende fejl i din konsol:

Uncaught ReferenceError: Clerk is not defined

Der er to måder at håndtere Require.js på. Begge løsninger kræver, at du laver ændringer i tracking-scriptet, som normalt indsættes i index.liquid.

Inkludér i Require.js #

Den bedste tilgang er at få Require.js til at genkende Clerk.

Dette kan du gøre ved at indsætte require(['clerk'], function() {}); nederst i tracking scriptet:

Ignorér Require.js #

Hvis ovenstående løsning ikke virker, er det muligt at ignorere Require.js.

Det gør du ved at indsætte window.__clerk_ignore_requirejs = true; øverst i tracking-scriptet:

Efter at have brugt en af disse løsninger vil Require.js nu være kompatibel med Clerk.

Opgradering til Clerk.js 2 #

Clerk.js 2 er en hurtigere og mere fleksibel version af vores JavaScript-bibliotek.

Det gør det lettere at installere Clerk på enhver webshop.

Men da de to versioner fungerer lidt forskelligt, skal du følge disse trin for at opgradere korrekt.

De to største forskelle i Clerk.js 2 er:

• Design i my.clerk.io bruger Liquid skabelonsprog, men kan også nemt oprettes med Design Editor.

• Scriptet skal indsættes lige før </head>-tagget i din webshops template.

Opret designs #

Da Clerk.js 2 har en anden tilgang til design, skal du lave nye.

Du kan lave dine Clerk.js 2-designs på én af to måder:

• Brug den intuitive Design Editor til at lave nye designs, som beskrevet i punkterne nedenfor.

• Konverter dine gamle designs. Følg denne vejledning for at se, hvordan det gøres.

Design Editor-option #

1. Gå til my.clerk.io > Recommendations/Search > Designs > New Design.

2. På den følgende skærm giv dit design et Navn (vi anbefaler at tilføje “V2”, så det er tydeligt, at du bruger Clerk.js 2).

3. Vælg Designtype.

4. Klik på Publish Design, når du er færdig, og gå videre til Trin 2 i guiden.

5. I Design Editor klikker du på et af de eksisterende elementer som navn, billede, knap osv. for at redigere det, eller du tilføjer nye elementer til designet for at vise flere oplysninger om produkterne.

6. Klik på Publish. Dette vil midlertidigt gøre, at de ikke vises på din webshop, indtil du er færdig med Trin 2. Vælg det nye design for alt Content, der skal opdateres.

7. Gå til Recommendations/Search > Content og skift dit Clerk Content til at bruge det nye design.

Du er nu klar til at skifte over til Clerk.js 2.

Erstat script #

1. Find den template-fil, der bruges til at vise alle sider på webshoppen, og hvor det oprindelige Clerk.js-script findes nær bunden.

2. Fjern det gamle script fra filen:

3. Gå til my.clerk.io > Developers > Tracking Code. Denne side indeholder nu din Clerk.js 2 tracking-kode.

4. Kopiér denne kode og indsæt den lige før </head>-tagget i skabelonen:

5. Gem din template.

Tillykke! Du kører nu med den meget forbedrede Clerk.js 2-opsætning!

Du kan finde den fulde dokumentation for Clerk.js 2 her: https://docs.clerk.io/docs/clerkjs-quick-start

Giv Clerk adgang til Customer Events #

Når vi hjælper dig med at opsætte eller fejlfinde order tracking via Shopify-pixels, kan vi bede om adgang til området Customer events i din Shopify-admin.

Følg disse trin for at give de nødvendige tilladelser:

1. I Shopify, gå til Settings > Users and permissions.
2. Klik på medarbejderen med navnet Clerk.io (eller den medarbejder-bruger, du ønsker at opdatere).
3. Rul ned til Store settings og aktiver:
   • View customer events
   • Manage and add custom pixels
4. Klik på Save.

Disse tilladelser giver vores team mulighed for at se Customer events-sektionen og administrere Clerk-pixel, så vi kan verificere, at order tracking virker korrekt.