FAQ

Oplever du 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 indeholde faste dimensioner fra synkronisering, for eksempel _600x600.

Hvis dit design kræver en anden udgangsstørrelse pr. placering, kan du fjerne den synkroniserede faste størrelse og anmode om en ny bredde i URL’en.

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

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

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

Valutakonvertering #

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

Som standard leveres 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 konvertere priser.

Dette eksempel bruger vores standard skabelonsprog her.

Ved brug af valutakonverteringer og symboler detekterer Clerk.js indstillinger såsom sprog, valuta og landekode.

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

Design Editor #

1. Opret en Text-komponent, hvor du ønsker at vise prisen.
2. Tilføj følgende Liquid-kode for at vise prisen baseret på currency converter inden i tekstkomponenten:

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

Kode-tilstand #

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

Speciel API-løsning #

Disclaimer: Dette er en meget specifik løsning til pris-konverteringer, hvis der ikke er data fra Shopify API. Brug kun dette, hvis du anvender en specifik og tilpasset opsætning for pris-konverteringer baseret på geo-IP ændringer.

Dette er frontend-løsningsdokumentationen i Github.

Dette afsnit viser, hvordan du får kontekstuelt data i realtid til visning i indhold fra Clerk.io API’et.

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

• En collection, der indeholder alle produkter.
• Et alternativt layout, der gengiver collection-information som JSON.
• En JavaScript-klasse, som indsamler de data, der er gjort tilgængelige i collection.
• Et JavaScript-snippet, der forbruger data for relevante produkt-ID’er i et givent resultat og indsætter 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 opfyldt af alle produkter.

Collection skal navngives Clerk api, da dette vil give den ruten /collection/clerk-api frontend.

Betingelsen for collection kan f.eks. være price > -1000000.

Opret alternativt layout #

Opret et alternativt layout til at vise dine data ved brug af collection.

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

Under sektionen ‘Templates’ i venstre side, tryk på Add new Template.

I pop op-vinduet, vælg collection som ressource-type.

Vælg liquid som filtype.

Skriv json i det nederste felt, så navnet på skabelonen bliver collection.json.liquid.

Indholdet af denne fil skal være collection.json.liquid-filen, 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 klargøre dem til brug, læg hele indholdet af index.js i class-mappen i dette projekt inden for det script-tag, der indeholder Clerk.js, som du har placeret i theme.liquid.

Det skal se nogenlunde sådan ud:

<script>
  // Clerk.js Injection Code
  // Clerk Config with Key and Formatters
  // Class from this project
  clerk_shopify_api.init()
  // Finally init() for the class to make sure it runs when the page loads.
</script>

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

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

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

Tilføj template-funktion #

Inkludér template.js i den design-skabelon, der bruges.

Funktionen indsamler data, når de er tilgængelige, og indsætter dem i specifikke under-elementer i hver produkttile.

Eksemplet inkluderer felterne list_price og price.

Bemærk: Hvis du har brug for at bruge felter, der er forskellige fra price og list_price, kan du tilføje dem i collection.json.liquid, og derefter redigere template.html og template.js for også at bruge disse felter. Du behøver aldrig at redigere klassen beskrevet i trin 3.

Find temafiler #

Shopify tilbyder mere end 100 forskellige temaer til at style og tilpasse din webshop.

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

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

Shopify tilbyder 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.

For eksempel, hvis du leder efter filen, der har koden for søgesiden, vil den sandsynligvis have ‘search’ i filnavnet.

Hvis du er usikker på, om 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 afsnit af siden og vælge ‘Inspicér’.

Herefter kan du tjekke HTML’en på siden og se, om class/ID på elementerne er de samme i filen som på siden.

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

Cart drawer recommendations #

Installation af en Shopify-udvikler anbefales kraftigt.

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

At vise Clerk.io Recommendations i kurvskuffen på Shopify er en god måde at fremhæve yderligere produkter over for kunder, inden de går til checkout.

1. Redigér koden i dit Shopify-tema under Online Store > Themes > Edit code.
2. Find filen, hvor cart drawer-skabelonen ligger (typisk 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 kontrollere rendering. F.eks. 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 skal du inkludere et script, der renderer Clerk.io Recommendations, når brugeren åbner kurven. En tilgang er at bruge en MutationObserver. Skriptet herunder indeholder alle disse elementer, så du har et eksempel på, hvordan du kan gøre det:

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

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

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

    let cartFetched = false;
    let previousitemsID = [];
    
    // Funktion til at hente 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-funktion ved mutation
    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 observer med callback-funktionen
    const clerk_observer = new MutationObserver(callback);

    // Start observationen af target-node for konfigurerede mutationer
    clerk_observer.observe(targetNode, config);
</script>

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

HTTP-autentificering #

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

Dette vil blokere Clerk.io-importøren og vise en 401 Unauthorized fejl i sync-loggen.

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-integration, er din webshops server ansvarlig for at sende produkt-, kategori-, og salgsdata til Clerk.io.

Dog kan serverens konfiguration i visse tilfælde forhindre Importer i at få adgang, hvilket forårsager en fejl i Data Sync.

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

401 Unauthorized #

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

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

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

Tilladelsesfejl #

Denne fejl opstår oftest, 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 i Shopify og gå til Apps > Manage Private Apps > Clerk.io (eller det navn, du har givet App’en).
2. Rul 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:

1. Gå til toppen af siden og klik på Save.

Håndtering af require.js #

Denne vejledning gælder kun, når du bruger Clerk.js 1.

I nogle opsætninger kan Require.js forhindre Clerk.js i at indlæse, hvilket betyder, at ingen slidere eller søgeresultater vises.

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. Begge metoder kræver, at du ændrer tracking-scriptet, der normalt indsættes i index.liquid.

Inkludér i Require.js #

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

Du kan gøre dette ved at indsætte require(['clerk'], function() {}); i bunden af tracking-scriptet:

Ignorér Require.js #

Hvis ovenstående løsning ikke fungerer, kan du ignorere Require.js.

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

Når du har brugt en af disse metoder, vil Require.js nu være kompatibel med Clerk.io.

Opgradering til Clerk.js 2 #

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

Det gør installationen af Clerk.io lettere på enhver webshop.

Da de to versioner fungerer en smule forskelligt, skal du følge disse trin for en vellykket opgradering.

De to hovedforskelle i Clerk.js 2 er:

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

Opret designs #

Da Clerk.js 2 har en ny tilgang til Designs, skal du oprette nye.

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

• Brug den intuitive Design Editor til at lave nye Designs, som beskrevet i punkterne nedenfor.
• Konvertér dine gamle Designs. Følg denne vejledning for hvordan du gør.

Design Editor-metoden #

1. Gå til my.clerk.io > Recommendations/Search > Designs > New Design.
2. På næste side, giv dit Design et Navn (vi anbefaler at tilføje “V2” for at tydeliggøre, 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 vejledningen.
5. I Design Editor kan du klikke på elementer som navn, billede, knap osv. for at redigere dem, eller tilføje nye for at vise flere produktoplysninger.
6. Klik Publish. Dette medfører midlertidigt, at de ikke vises på din webshop, indtil du er færdig med Step 2. Vælg det nye Design til alle elementer, der skal opdateres.
7. Gå til Recommendations/Search > Elements og skift dit Clerk.io Element til at bruge dit nye Design.

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

Udskift script #

1. Find det template-fil, som bruges til at vise alle sider på webshoppen, hvor det originale Clerk.js-script findes nær bunden.
2. Fjern det gamle script fra filen:

1. Gå til my.clerk.io > Developers > Tracking Code. Denne side indeholder nu din Clerk.js 2 tracking kode.
2. Kopier denne kode og indsæt den lige før </head>-tagget i skabelonen:

1. Gem din skabelon.

Tillykke! Du kører nu på det forbedrede Clerk.js 2-setup!

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

Customer Events Access #

Når vi hjælper dig med at sætte opsporing af ordrer op 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 Clerk.io (eller den medarbejder, du vil opdatere).
3. Rul til Store settings og aktiver:

• View customer events
• Manage and add custom pixels

4. Klik Save.

Disse tilladelser gør det muligt for vores team at se Customer events og administrere Clerk.io-pixlen, så vi kan bekræfte, at ordretracking fungerer korrekt.