FAQ

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

Billedstørrelser #

Shopify-billed-URL’er kan inkludere faste dimensioner fra synkronisering, for eksempel _600x600.

Hvis dit design har brug for en anden outputstørrelse pr. placering, kan du fjerne den synkroniserede faste størrelse og forespørge en ny bredde i URL’en.

Eksempel (erstat 600x600 med din konfigurerede standard billedstørrelse):

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

Dette er nyttigt, når et design bruger flere billedformater (for eksempel produktkort og store hero-placeringer), og du vil undgå at synkronisere flere billedattributter.

Valutakonvertering #

Shopifys indbyggede valutakonvertering gør det nemt at læse valutasymbol og valutakurs fra webshoppen.

Som standard leveres Clerk.js til Shopify med en formatter, der fungerer, så længe din tredjepartsapp bruger Shopifys indbyggede valutaobjekt.

Standardløsning #

Du skal bruge en formatter i dine Designs til at konvertere priser.

Dette eksempel bruger vores standardskabelonsprog her.

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

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

Design Editor #

1. Opret en Tekst-komponent, hvor du vil vise prisen.
2. Tilføj følgende Liquid-kode for at vise prisen baseret på valutakonverteringen inde i tekstkomponenten:

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

Kodetilstand #

1. Gå til my.clerk.io, gå til Search/Recommendations > Designs og klik på Edit Design for dit design.
2. Erstat den eksisterende money eller money_eu formatter for priser med currency_converter.
3. Klik på Update Design.
4. Du vil nu kunne se de konverterede priser og valutasymbol i dit design.

Tilpasset API-løsning #

Disclaimer: Dette er en meget tilpasset løsning til at få valutakonverteringer, hvis der ikke er data fra Shopify API. Brug kun dette, hvis du bruger en specifik og tilpasset konfiguration for valutakonvertering baseret på geo-IP-ændringer.

Dette er frontend løsningsdokumentation i Github.

Dette afsnit dækker, hvordan man får kontekstuelle data i realtid til visning i indhold, der returneres fra Clerk.io API.

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

• En kollektion, der indeholder alle produkter.
• Et alternativ layout til visning af kollektionsinformation som JSON.
• En JavaScript Class, som samler de data, der er tilgængelige i kollektionen.
• Et JavaScript Snippet, der forbruger dataene for de relevante produkt-IDs i et givet resultat og placerer dem i en div i skabelonen.

Opret kollektion #

For at sikre at du har en kollektion med alle mulige produkter, lav en kollektion med en betingelse, der opfyldes af alle produkter.

Kollektionen skal hedde Clerk api, da det vil resultere i, at den får ruten /collection/clerk-api frontend.

Betingelsen for kollektionen skal være noget i stil med price > -1000000.

Opret alternativ layout #

Opret et alternativ layout for at vise dine data ved hjælp af kollektionen.

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

Under sektionen “templates” i venstre side, klik på Add new Template.

I pop-up’en skal du vælge collection som ressource-type.

Vælg liquid som filtype.

Skriv json i det mest 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, hvis det er nødvendigt.

Tilføj JS class #

For at hente dataene fra din kollektion og forberede dem, så de kan bruges, indsæt hele indholdet af index.js i class-mappen i dette projekt, inde i script-tagget, der indeholder Clerk.js, som du har indsat i theme.liquid.

Det skal se sådan ud:

<script>
  // Clerk.js Injection Code
  // Clerk Config with Key and Formatters
  // Class fra dette projekt
  clerk_shopify_api.init()
  // Til sidst init() for klassen, for at sikre den kører, når siden indlæses.
</script>

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

Tiden før ugyldiggørelse er 12 timer siden sidste opbygning af data.

Enhver ændring i valutakonteksten vil også ugyldiggøre dataene.

Tilføj template-funktion #

Inkluder template.js i det design-template, der benyttes.

Funktionen henter dataene, når de er tilgængelige, og placerer dem i specifikke under-elementer inden for hver produkttile.

Eksemplet inkluderer felterne list_price og price.

Bemærk: Hvis du skal bruge andre felter end price og list_price, skal du tilføje dem til collection.json.liquid og dernæst redigere template.html og template.js til også at bruge disse felter. Du skal aldrig behøve at redigere klassen, der er beskrevet i trin 3.

Find temafiler #

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

Hvert tema fungerer ens—du tilpasser temafilernes indhold for at opnå det ønskede resultat på din butik.

Dog skifter temafilernes navne 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, du leder efter, kan du bruge søgefeltet til at hjælpe dig med at lokalisere den.

For eksempel, hvis du leder efter filen med koden til søgesiden, er det sandsynligt, at den har ‘search’ i filnavnet.

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

Dette kan du gøre i Google Chrome ved at højreklikke på et vilkårligt sted på siden og vælge ‘Inspicer’.

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

Hvis du behøver yderligere hjælp til dette, kan du kontakte vores supportteam.

Cart drawer recommendations #

Installation af en Shopify-udvikler anbefales stærkt.

Denne guide beskriver en meget tilpasset løsning, der kan opføre sig forskelligt på tværs af forskellige Shopify-temaer. Den er specifikt lavet til temaer, hvor kurven er en del af DOM’en på alle sider, men forbliver skjult, indtil brugeren åbner den.

Visning af Clerk.io Recommendations i cart drawer på Shopify er en god måde at fremhæve supplerende produkter over for kunder, inden de begynder checkout-processen.

1. Rediger koden til dit Shopify-tema under Online Store > Themes > Edit code.
2. Find filen, hvor cart drawer-skabelonen er (normalt kaldet cart-drawer.liquid eller lignende).
3. Indsæt et Clerk.io Recommendations-snippet fra Recommendations > Elements.
4. Omdøb klassen fra clerk for at styre rendering. For eksempel, ved at kalde den 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. Sammen med ovenstående snippet, inkluder et script til at vise Clerk.io Recommendations, når brugeren åbner kurven. En tilgang er at bruge MutationObserver. Scriptet nedenfor inkluderer alle disse elementer og giver dig et eksempel på, hvordan det kan gøres:

<script>
    // Vælg det node, der skal observeres for ændringer
    const targetNode = document.querySelector("cart-drawer.drawer");

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

    // Indstillinger for observer (hvilke ændringer der 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, der kører når ændringer observeres
    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 en observer-instans koblet til callback-funktionen
    const clerk_observer = new MutationObserver(callback);

    // Begynd at observere targetNode for konfigurerede ændringer
    clerk_observer.observe(targetNode, config);
</script>

Gem den opdaterede cart drawer-fil og test, at Clerk recommendations vises, når et produkt tilføjes til kurven.

HTTP-autentificering #

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

Dette vil blokere Clerk.io-importøren 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

Typiske synkroniseringsfejl #

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

I nogle tilfælde kan serverens konfiguration dog forhindre Importøren i at få adgang, hvilket medfører en fejl i Data Sync.

Nedenfor er en liste over de mest almindelige fejl og hvordan du løser dem.

401 Unauthorized #

Denne fejl opstår, hvis din webshop eller dit 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

Permissions error #

Denne fejl opstår typisk, hvis du ikke har givet læseadgang til Butiksindhold såsom artikler, blogs, kommentarer, sider og redirects i din Private App.

Sådan retter du det:

1. Log ind på Shopify og gå til Apps > Manage Private Apps > Clerk.io (eller navnet du gav appen).

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

3. Find Butiksindhold såsom artikler, blogs, kommentarer, sider og redirects og vælg Read access:

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

Håndtering af require.js #

Denne guide gælder kun ved brug af Clerk.js 1.

I nogle opsætninger forhindrer Require.js Clerk.js i at blive indlæst, hvilket betyder, at ingen sliders eller søgeresultater bliver vist.

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

Uncaught ReferenceError: Clerk is not defined

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

Inkluder i Require.js #

Den bedste tilgang er at forsøge at få Require.js til at genkende Clerk.io.

Indsæt require(['clerk'], function() {}); nederst i tracking-scriptet.

Ignorer Require.js #

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

Indsæt 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.io.

Opgrader til Clerk.js 2 #

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

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

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

De to væsentlige forskelle i Clerk.js 2 er:

• Designs i my.clerk.io bruger Liquid templating sprog, men kan også let oprettes via Design Editor.
• Scriptet skal indsættes lige før </head>-tagget i din webshops skabelon.

Opret designs #

Eftersom Clerk.js 2 har en anden tilgang til Designs, skal du lave nye.

Du kan oprette dine Clerk.js 2 Designs på to måder:

• Brug den intuitive Design Editor til at oprette nye Designs, som beskrevet i de følgende punkter.
• Konverter dine gamle Designs. Følg denne guide for at se hvordan.

Design Editor mulighed #

1. Gå til my.clerk.io > Recommendations/Search > Designs > New Design.
2. På det næste skærmbillede, giv dit Design et Navn (vi anbefaler at tilføje “V2”, så det er tydeligt, at du bruger Clerk.js 2).
3. Vælg Design Type.
4. Klik på Publish Design når du er færdig, og gå til Step 2 i guiden.
5. I Design Editor kan du klikke på eksisterende elementer som navn, billede, knap osv. for at redigere, eller tilføje nye elementer for at vise flere informationer om produkter.
6. Klik på Publish. Dette vil midlertidigt gøre, at de ikke vises på din webshop, indtil du er færdig med Step 2. Vælg det nye Design for alle Elements, der skal opdateres.
7. Gå til Recommendations/Search > Elements og ændr din Clerk.io Element til at bruge dit nye Design.

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

Erstat script #

1. Find den skabelon, der bruges til at vise alle sider på webshoppen, og hvor det originale 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 skabelon.

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

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

Kundeevents-adgang #

Når vi hjælper dig med at opsætte eller fejlfinde ordresporing 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 brugerkonto, du vil opdatere).
3. Rul ned til Store settings og aktiver:

• View customer events
• Manage and add custom pixels

4. Klik på Save.

Disse tilladelser gør det muligt for vores team at se sektionen Customer events og administrere Clerk.io-pixel, så vi kan verificere, at ordresporing virker korrekt.