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-billedURL’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 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 valutasymbol og vekselkurs 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 for at konvertere priser.

Dette eksempel bruger vores standardskabelonsprog her.

Når der bruges 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 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 }}

Kode-tilstand #

1. I 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 #

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

Dette er frontend-løsningsdokumentationen i Github.

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

Designmønstret er sammensat af følgende dele:

• En kollektion, der indeholder alle produkter

• Et alternativt layout til at gengive kollektionsinformation som JSON

• En JavaScript-klasse, der indsamler data til rådighed i kollektionen

• 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 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 navngives Clerk api, da det vil resultere i, at den får ruten /collection/clerk-api frontend.

Betingelsen for kollektionen skal være noget som price > -1000000.

Opret alternativt layout #

Opret et alternativt layout til at vise dine data med kollektionen.

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

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

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

Vælg liquid som filtype.

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 kollektion og forberede dem, så de kan bruges, skal du placere 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 skulle 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 invalidere data baseret på tidsstempler og valutaer, uden at du behøver ændre koden.

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

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

Tilføj skabelonfunktion #

Inkluder template.js i det design, du bruger.

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

Eksemplet inkluderer felterne list_price og price.

Bemærk: Hvis du skal bruge felter, som er forskellige fra price og list_price, tilføjer du dem i collection.json.liquid og redigerer derefter template.html og template.js til også at forbruge de felter. Du bør aldrig behøve at redigere klassen, der beskrives i trin 3.

Finding theme files #

Shopify har mere end 100 forskellige temaer, som bruges til at style og tilpasse din webshop.

Hvert tema fungerer på samme måde — du tilpasser temafilerne for at opnå et givet resultat på din butik.

Dog ændrer navnene på temafilerne sig fra tema til tema.

Shopify giver dig et søgefelt til hurtigt og nemt at 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 med at lokalisere den.

For eksempel, hvis du søger 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 hvilket som helst afsnit af siden og vælge ‘Inspicér’.

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

Hvis du har brug for yderligere hjælp til dette, 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 specielt designet til temaer, hvor kurven er en del af DOM’en på alle sider, men forbliver skjult, indtil brugeren åbner den.

At vise Clerk Recommendations i kurvens skuffe på Shopify er en god måde at give kunderne mulighed for at se yderligere produkter, før de starter betalingsprocessen.

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

2. Find filen, hvor cart drawer-skabelonen er (typisk kaldet cart-drawer.liquid eller lignende).

3. Indsæt et Clerk 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 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 til at gengive Clerk Recommendations, når brugeren åbner kurven. En metode er at bruge en MutationObserver. Nedenstående script indeholder alle disse elementer og giver 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 cart drawer-fil skal se sådan ud:

HTTP authentication #

HTTP-autentificering bruges ofte på staging-sites 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 indtaste 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 din webshops server ansvarlig for at sende produkt-, kategori- og salgsdata til Clerk.

Dog kan serverens konfiguration nogle gange 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 udviklingsmiljø kræver HTTP authentication for at få adgang.

Det løses ved at tilføje Username og Password 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 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 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 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 forhindrer Require.js Clerk.js i at indlæse, hvilket betyder, at ingen sliders 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 foretager ændringer 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.

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

Ignorer Require.js #

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

Du kan gøre dette ved at indsætte window.__clerk_ignore_requirejs = true; i toppen af tracking-scriptet:

Efter brug af en af disse metoder 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 nemmere at installere Clerk på enhver webshop.

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

De to vigtigste forskelle i Clerk.js 2 er:

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

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

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å to måder:

• Brug den intuitive Design Editor til at oprette nye Designs, som beskrevet i 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å det følgende 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, klik på et af de eksisterende elementer som navnet, billedet, knappen osv. for at redigere det, eller tilføj nye elementer til Designet for at tilføje mere information om produkterne.

6. Klik på Publish. Dette vil midlertidigt få dem til ikke at 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 dit Clerk Element til at bruge dit nye Design.

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

Udskift script #

1. Find den skabelonfil, 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. Kopier denne kode og indsæt den lige før </head>-tagget i skabelonen:

5. Gem din skabelon.

Tillykke! Du kører nu på det stærkt 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 opsætte eller fejlfinde ordresporing via Shopify pixels, kan vi bede om adgang til Customer events-området i dit 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, du ønsker at opdatere).
3. Rul 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 ordresporing fungerer korrekt.