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.

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 tredjeparts-app bruger Shopifys indbyggede valutaobjekt.

Standardløsning #

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

Dette eksempel bruger vores standard template language her.

Når du bruger valutakonverteringer og symboler, registrerer 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å valutaomregneren inden i tekstkomponenten:

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

Kode-tilstand #

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 kan nu se de konverterede priser og valutasymbol i dit design.

Tilpasset API-løsning #

Ansvarsfraskrivelse: Dette er en meget tilpasset løsning til at få prisomregninger, hvis der ikke findes data fra Shopify API. Brug kun dette, 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 dækker, hvordan du i realtid får kontekstuelle data til visning i indhold, der returneres fra Clerk API.

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

• En kollektion, der indeholder alle produkter.

• Et alternativt layout til at gengive kollektionsoplysninger som JSON.

• En JavaScript-klasse, der indsamler de data, der er gjort tilgængelige i kollektionen.

• En JavaScript-snippet, som forbruger dataene for de relevante produkt-ID’er 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, opret en kollektion med en betingelse, der opfyldes af alle produkter.

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

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

Opret alternativt layout #

Opret et alternativt layout til 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 template-sektionen i venstre side, tryk på Add new Template.

I popup-vinduet skal du vælge collection for ressource-type.

Vælg liquid for filtypen.

Skriv json i det nederste felt, så navnet på den oprettede template 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 kan tilføje felter til produktet i denne skabelon efter behov.

Tilføj JS-klasse #

For at hente dataene fra din kollektion og forberede dem til brug, indsæt hele indholdet af index.js fra class-mappen i dette projekt, inde i script-tagget indeholdende 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 ugyldiggør data baseret på tidsstempler og valutaer, uden at du behøver at ændre koden.

Tiden før ugyldiggørelse er 12 timer siden sidste datagenerering.

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

Tilføj template-funktion #

Inkluder template.js i det anvendte design template.

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

Eksemplet inkluderer felterne list_price og price.

Bemærk: Hvis du skal bruge felter, der afviger fra price og list_price, tilføjer du dem i collection.json.liquid og redigerer derefter template.html og template.js til også at bruge disse felter. Du skal aldrig skulle redigere klassen beskrevet i trin 3.

Finde temafiler #

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

Hvert tema fungerer på samme måde – du tilpasser temafilerne for at opnå et bestemt resultat i din butik.

Dog ændrer temafilenes navne 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å den fil, du søger, kan du bruge søgefeltet til at hjælpe med at finde den.

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

Hvis du er usikker på, om du har fundet den korrekte 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 hvilket som helst afsnit af siden og vælge ‘Inspect’.

Du kan herefter inspicere HTML’en på siden og tjekke, om klassen/ID på elementerne er de samme i filen som på siden.

Hvis du har brug for yderligere hjælp til dette, er du velkommen til at kontakte vores supportteam.

Cart drawer recommendations #

Installation af en Shopify-udvikler anbefales kraftigt.

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

Visning af Clerk Recommendations i kurveskuffen på Shopify er en god måde at fremhæve yderligere produkter til kunder, inden de går til betaling.

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

2. Find filen, hvor kurveskuffens template er (normalt kaldet cart-drawer.liquid eller lignende).

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

4. Omdøb klassen fra clerk til kontrollér 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 skal du inkludere et script, der render Clerk Recommendations, når brugeren åbner kurven. En tilgang er at bruge en MutationObserver. Scriptet nedenfor indeholder alle disse elementer som et eksempel på, hvordan du kan gøre det:

<script>
    // Select the node that will be observed for mutations
    const targetNode = document.querySelector("cart-drawer.drawer");

    // Add all of the class names of the cart drawer, when it is opened
    const targetNodeClasses = "drawer animate active";

    // Options for the observer (which mutations to observe)
    const config = { attributes: true };

    let cartFetched = false;
    let previousitemsID = [];
    
    // Function to fetch 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 function to execute when mutations are observed
    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;
                    }
                }

            }
        }
    };

    // Create an observer instance linked to the callback function
    const clerk_observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    clerk_observer.observe(targetNode, config);
</script>

Din kurveskuffe-fil skal se sådan ud:

HTTP-autentificering #

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

Dette vil blokere Clerk-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ådan her:

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

Almindelige synkroniseringsfejl #

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

Dog kan serverindstillingerne i nogle tilfælde forhindre Importøren i at få adgang, så du får 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 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 Læs Adgang 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 har givet appen).

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 til toppen af siden og klik på Save.

Håndtering af require.js #

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

I nogle opsætninger forhindrer Require.js at Clerk.js indlæses, hvilket betyder, at der ikke vises nogen 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 metoder kræver, at du ændrer i tracking-scriptet, som normalt indsættes i index.liquid.

Inkluder i Require.js #

Den bedste metode er at prøve 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 ignorerer Require.js.

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

Efter at have brugt en af disse metoder er Require.js nu kompatibel med Clerk.

Opgrader 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.

Da de to versioner fungerer en smule forskelligt, skal du følge disse trin for at opgradere succesfuldt.

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

• Designs i my.clerk.io bruger Liquid template-sproget, men de 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 Designs, skal du oprette nye.

Du kan oprette dine Clerk.js 2 Designs på en af 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-option #

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

2. På næste skærm giver du dit Design et Navn (vi anbefaler at tilføje “V2”, så det tydeligt er Clerk.js 2 du bruger).

3. Vælg Design Type.

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

5. I Design Editor kan du klikke på eksisterende elementer som navn, billede, knap osv. for at redigere dem, eller tilføje nye elementer til Designet for at tilføje mere information om produkterne.

6. Klik på Publish. Dette vil midlertidigt betyde, at de ikke vises på din webshop, før du er færdig med Trin 2. Vælg det nye Design for alle Elements, der skal opdateres.

7. Gå til Recommendations/Search > Elements og ændr dit Clerk Element til at bruge dit nye Design.

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

Erstat script #

1. Find den template-fil, der bruges til at vise alle siderne i webshoppen, og hvor det oprindelige Clerk.js-script findes nederst.

2. Fjern det gamle script fra filen:

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

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

5. Gem din template.

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

Giv Clerk adgang til Customer Events #

Når vi hjælper dig med at opsætte eller fejlsøge ordretracking via Shopify pixels, kan vi bede om adgang til Customer events-området 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-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-pixlen, så vi kan verificere, at ordretracking fungerer korrekt.