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-billede-URL’er kan inkludere faste dimensioner fra synkroniseringen, 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 (erstat 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 Valutakonvertering gør det nemt at læse valutasymbolet og vekselkursen fra webshoppen.

Som standard kommer Clerk.js til Shopify med en formatter, der virker, så længe dit 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 templatesprog 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 Tekst-komponent, hvor du vil vise prisen.

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

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

Code mode #

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 vil nu kunne se de konverterede priser og valutasymbolet i dit design.

Custom API løsning #

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

Dette er frontend-løsningsdokumentation 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 består af følgende dele:

• En kollektion, der indeholder alle produkter.

• Et alternativt layout til at gengive kollektionsinformation som JSON.

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

• Et 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, skal du oprette 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 skal være noget i stil med price > -1000000.

Opret alternativt layout #

Lav 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 skabelonsektionen i venstre side, tryk på Add new Template.

I pop-up-vinduet skal du vælge collection for resourcetype.

Vælg liquid til filtype.

Skriv json i det nederste felt, så navnet på den oprettede skabelon 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 kollektion og forberede dem til brug, placér hele indholdet af index.js i mappen class 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()
  // Til sidst init() for klassen for at sikre, at den kører, når siden indlæses.
</script>

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

Tiden inden invalidation er 12 timer siden sidste datagenerering.

Enhver ændring i valutakontekst invaliderer også dataene.

Tilføj template-funktion #

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

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

Eksemplet inkluderer felterne list_price og price.

Vigtigt at bemærke: Hvis du skal bruge felter, som er andre end price og list_price, tilføjer du dem i collection.json.liquid og redigerer derefter template.html og template.js til også at forbruge disse felter. Du burde aldrig få brug for at 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 givent resultat i din butik.

Dog varierer temafil-navnene fra tema til tema.

Shopify giver dig et søgefelt til nemt og hurtigt at finde den temafil, du leder efter.

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

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

Hvis du er i tvivl om, hvorvidt 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 ‘Inspicer’.

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

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

Cart drawer anbefalinger #

Installation af en Shopify-udvikler anbefales kraftigt.

Denne guide beskriver en meget tilpasset løsning, som kan opføre sig forskelligt på tværs af forskellige Shopify-temaer. Den er specifikt designet til temaer, hvor indkøbskurven er en del af DOM’en på hver side, men forbliver skjult, indtil brugeren åbner den.

At vise Clerk Recommendations i cart drawer på Shopify er en god måde at fremhæve flere produkter for kunderne, før de begynder betalingsprocessen.

1. Rediger koden for dit Shopify-tema i 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 Recommendations-snippet fra Recommendations > Elements.

4. Omdøb klassen fra clerk for at styre gengivelsen. 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, inkluder et script for at vise Clerk Recommendations, når brugeren åbner kurven. Én tilgang er at bruge en MutationObserver. Scriptet nedenfor inkluderer alle disse elementer og giver dig et eksempel på, hvordan du kan gribe det an:

<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-autentificering #

HTTP-autentificering bruges ofte på staging-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åledes:

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.

Men i nogle tilfælde kan serverkonfigurationen 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

Tilladelsesfejl #

Denne fejl opstår normalt, hvis du ikke har givet Læs-adgang til Butiksindhold som artikler, blogs, kommentarer, sider og omdirigeringer i din Private App.

For at løse det:

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

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

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

4. Rul 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 kan Require.js forhindre Clerk.js i at indlæse, 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 tilgange kræver, at du foretager ændringer i tracking-scriptet, som normalt indsættes i index.liquid.

Inkluder i Require.js #

Den bedste tilgang er 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; øverst i tracking-scriptet:

Efter at have brugt en af disse tilgange, vil Require.js nu være kompatibel med Clerk.

Opgradér 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 en succesfuld opgradering.

De to hovedforskelle i Clerk.js 2 er:

• Designs i my.clerk.io bruger Liquid templating-sproget, men kan også nemt laves 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 lave nye.

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

• Brug den intuitive Design Editor til at lave nye Designs, som beskrevet i de følgende punkter.

• Konverter dine gamle Designs. Følg denne guide for at se, hvordan du gør.

Design Editor-mulighed #

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 Trin 2 i guiden.

5. I Design Editor, klik på et hvilket som helst af de eksisterende elementer som navn, billede, knap m.v. 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 medføre, at de ikke bliver vist på din webshop, indtil du er færdig med Trin 2. Vælg det nye Design for alle elementer, 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 template-fil, der bruges til at vise alle sider i webshoppen, 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 templaten:

5. Gem din template.

Tillykke! Du kører nu med det meget forbedrede Clerk.js 2-setup!

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

Kunde Events-adgang #

Når vi hjælper dig med at opsætte eller fejlfinde 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 rettigheder:

1. I Shopify, gå til Settings > Users and permissions.
2. Klik på personalet ved navn Clerk.io (eller den medarbejderbruger, du vil opdatere).
3. Rul til Store settings og aktiver:
   • View customer events
   • Manage and add custom pixels
4. Klik på Save.

Disse rettigheder gør det muligt for vores team at se sektionen Customer events og administrere Clerk-pixel, så vi kan sikre, at ordretracking fungerer korrekt.