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 synkroniseringen, f.eks. _600x600.

Hvis dit design har brug for en anden outputstørrelse pr. placering, kan du fjerne den synkroniserede faste størrelse og bede 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 (f.eks. 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 valutakursen fra webshoppen.

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

Standardløsning #

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

Dette eksempel bruger vores standard templatessprog 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 have prisen vist.
2. Tilføj følgende Liquid-kode for at vise prisen baseret på valutakonverteren inde i tekstkomponenten:

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

Kode-tilstand #

1. I my.clerk.io, gå til Search/Recommendations > Designs og klik på Rediger Design for dit design.
2. Erstat den eksisterende money eller money_eu formatter for priser med currency_converter.
3. Klik på Opdater Design.
4. Du vil nu kunne se de konverterede priser og valutasymbolet 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’et. Brug kun dette, hvis du bruger en specifik og tilpasset opsætning til valutakonvertering 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 inden for indhold, der returneres fra Clerk.io API.

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

• En samling, der indeholder alle produkter.
• En alternativ layout for at vise samlingsoplysninger som JSON.
• En JavaScript-klasse, der indsamler de tilgængelige data i samlingen.
• Et JavaScript-snit, der bruger dataene for de relevante produkt-ID’er i et givent resultat og placerer dem i en div i templatet.

Opret samling #

For at sikre, at du har en samling med alle mulige produkter, skal du oprette en samling med en betingelse, der opfyldes af alle produkter.

Samlingen skal hedde Clerk api, da dette vil gøre, at den får ruten /collection/clerk-api frontend.

Betingelsen for samlingen bør være noget i retning af price > -1000000.

Opret alternativt layout #

Opret et alternativt layout til at vise dine data via samlingen.

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

Under skabelonsektionen til venstre, tryk på Tilføj ny skabelon.

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

Vælg liquid for filtype.

Skriv json i det nederste felt, så navnet på den oprettede skabelon bliver collection.json.liquid.

Indholdet af denne fil skal være filen collection.json.liquid, som findes i liquid-mappen for dette projekt.

Du er velkommen til at tilføje felter til produktet i denne skabelon, som du ønsker.

Tilføj JS-klasse #

For at hente dataene fra din samling og forberede dem, så de kan bruges, placer 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 skal se omtrent sådan ud:

<script>
  // Clerk.js Injection Code
  // Clerk Config med Key og Formatters
  // Klasse fra dette projekt
  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 ugyldiggøre 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 design-template, der bruges.

Funktionen henter dataene, når de er tilgængelige, og placerer dem i specifikke childelementer for hvert produktflise.

Eksemplet inkluderer felterne list_price og price.

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

Find temafiler #

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

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

Dog skifter navnene på temafilerne fra tema til tema.

Shopify giver dig et søgefelt, så du nemt 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 med at lokalisere den.

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

Hvis du er i tvivl om, hvorvidt 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 område af siden og vælge ‘Inspicer’.

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

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

Anbefalinger i kurvskuffen #

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.

At vise Clerk.io Recommendations i kurvskuffen på Shopify er en god måde at vise yderligere produkter til kunder, før de begynder betalingsprocessen.

1. Rediger koden til dit Shopify-tema i Online Store > Themes > Edit code.
2. Find den fil, hvor skabelonen til kurvskuffen er (normalt hedder den cart-drawer.liquid eller lignende).
3. Indsæt et Clerk.io Recommendations-snippet fra Recommendations > Elements.
4. Omdøb klassen fra clerk til at kontrollere 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 skal du inkludere et script, der renderer Clerk.io Recommendations, når brugeren åbner kurven. En metode er at bruge en MutationObserver. Nedenstående script indeholder alle disse elementer og giver dig et eksempel på, hvordan du kan gribe det an:

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

    // Tilføj alle klassnavnene til kurvskuffen, når den åbnes
    const targetNodeClasses = "drawer animate active";

    // Indstillinger for observeren (hvilke mutationer, der observeres)
    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-funktion, der kører, når mutationer 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, der er linket til callback-funktionen
    const clerk_observer = new MutationObserver(callback);

    // Start med at observere det valgte element for de konfigurerede mutationer
    clerk_observer.observe(targetNode, config);
</script>

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

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

Du kan løse dette ved at indsætte autentificeringsoplysninger 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.

I nogle tilfælde kan serverens konfiguration dog forhindre Importeren i at få adgang, hvilket forårsager en fejl i Data Sync.

Nedenfor er en liste over de mest almindelige fejl og hvordan de løses.

401 Unauthorized #

Denne fejl opstår, hvis din webshop eller dev-miljø kræver HTTP-autentificering for at få adgang til den.

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.

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 Butiksindhold som artikler, blogs, kommentarer, sider og omdirigeringer og vælg Read access:

4. Rul op øverst på siden og klik på Gem.

Håndtering af require.js #

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

I nogle opsætninger forhindrer Require.js Clerk.js i at indlæse, hvilket betyder, at der ikke vises 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. Begge løsninger 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.io.

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

Ignorér Require.js #

Hvis ovenstående løsning 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 metoder, 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.

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

De to hovedforskelle i Clerk.js 2 er:

• Designs i my.clerk.io bruger Liquid templating-sproget, men kan også nemt laves via 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å to måder:

• Brug den intuitive Design Editor til at lave nye designs, som beskrevet i 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å den følgende skærm, 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å Publicer Design, når du er færdig, og gå til Trin 2 i guiden.
5. I Design Editor kan du klikke på et af de eksisterende elementer som navn, billede, knap osv. for at redigere det, eller tilføje nye elementer til designet for at tilføje mere information om produkter.
6. Klik på Publicer. Dette vil midlertidigt gøre, at de ikke vises 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.io Element til at bruge dit nye Design.

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

Erstat script #

1. Find den template-fil, der bruges til at vise alle pages på webshoppen, og hvor det originale Clerk.js-script findes tæt på bunden.

2. Fjern det gamle script fra filen:

3. Gå til my.clerk.io > Developers > Clerk.js.. Denne side indeholder nu din Clerk.js 2-trackingkode.

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

5. Gem dit template.

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

Kundebegivenhedsadgang #

Når vi hjælper dig med at opsætte eller fejlsøge ordretracking via Shopify-pixels, kan vi bede dig om adgang til området Kundebegivenheder i din Shopify-administration.

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 medarbejderbruger, du vil opdatere).
3. Rul ned til Butiksindstillinger og aktiver:
   • Se kundebegivenheder
   • Administrer og tilføj brugerdefinerede pixels
4. Klik på Gem.

Disse tilladelser gør det muligt for vores team at se sektionen Kundebegivenheder og administrere Clerk.io-pixlen, så vi kan kontrollere, at ordretracking fungerer korrekt.