Faq

aliases:

• /platform-guides/shopify/setup/using-currency-conversion-on-shopify/
• /platform-guides/shopify/troubleshooting/handling-require.js-in-shopify-only-for-clerk-js1-users/
• /platform-guides/shopify/setup/working-with-multiple-currencies-in-your-shopify-store/
• /platform-guides/shopify/setup/installing-sliders-on-the-frontpage-with-sections-in-shopify/
• /platform-guides/shopify/troubleshooting/finding-shopify-theme-files/
• /platform-guides/shopify/getting-started/full-installation-of-clerk.io-on-shopify/
• /platform-guides/shopify/troubleshooting/how-to-import-data-when-using-http-authentication-on-shopify/
• /platform-guides/shopify/troubleshooting/how-to-fix-common-shopify-errors-when-importing-data-to-clerk.io/
• /platform-guides/shopify/setup/upgrading-to-clerk.js-2-on-shopify/
• /platform-guides/shopify/troubleshooting
• /upgrading-to-clerk.js-2-on-shopify
• /installing-sliders-on-the-frontpage-with-sections-in-shopify
• /full-installation-of-clerk.io-on-shopify
• /how-to-import-data-when-using-http-authentication-on-shopify
• /getting-started
• /handling-require.js-in-shopify-only-for-clerk-js1-users
• /using-currency-conversion-on-shopify title: FAQ description: “Løsninger på almindelige spørgsmål og problemer ved brug af Clerk med Shopify” weight: 7

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-URLs kan inkludere faste dimensioner fra synkronisering, 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 (erstat 600x600 med din konfigurerede standard billedstørrelse):

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

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

Valutakonvertering #

Shopifys indbyggede Currency Conversion 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 din tredjeparts app bruger Shopifys indbyggede currency-objekt.

Standardløsning #

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

Dette eksempel bruger vores standard template-sprog her.

Ved brug af 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 prisen vist.
2. Tilføj følgende Liquid-kode for at vise prisen baseret på valuta-konvertereren 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 vil nu kunne se de konverterede priser og valutasymbolet i dit design.

Brugerdefineret API-løsning #

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

Dette er frontend-dokumentationen i Github.

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

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

• En samling, der indeholder alle produkter.
• Et alternativt layout til visning af kollektionsinformation som JSON.
• En JavaScript-klasse, som indsamler de data, der er tilgængelige i kollektionen.
• Et JavaScript-snippet, som bruger dataene for de relevante produkt-ID’er i et givent resultat og placerer dem i et div-element i skabelonen.

Opret samling #

For at sikre at du har en samling med alle mulige produkter, lav en samling med en betingelse, der gælder for alle produkter.

Samlingen skal hedde Clerk api, da dette vil resultere i, at den modtager ruten /collection/clerk-api frontend.

Betingelsen for samlingen skal være noget i stil med price > -1000000.

Opret alternativt layout #

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

Gør dette ved først at redigere temakoden for det tema, du ønsker at bruge.

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

I popuppen, vælg collection for ressource-typen.

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 collection.json.liquid-filen, der findes i liquid-mappen for dette projekt.

Du er velkommen til at tilføje felter til produktet i denne template efter behov.

Tilføj JS-klasse #

For at hente dataene fra din samling og forberede dem til brug, placer alt indholdet af index.js i class-mappen i dette projekt, inde i det script-tag, der indeholder Clerk.js og som du har placeret i theme.liquid.

Det bør se således ud:

<script>
  // Clerk.js Injection Code
  // Clerk Config med nøgle og formateringsfunktioner
  // Klassescript fra dette projekt
  clerk_shopify_api.init()
  // Til sidst init(), så klassen kører når siden loades.
</script>

Denne klasse ugyldiggør data baseret på tidsstempler og valuta, uden at du behøver at ændre koden.

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

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

Tilføj template-funktion #

Inkluder template.js i det design-template der bruges.

Funktionen henter data, når de er tilgængelige, og placerer dem i specifikke childelementer i hver produkttile.

Eksemplet inkluderer felterne list_price og price.

Vær opmærksom på: Hvis du skal bruge felter, der er anderledes end price og list_price, skal du tilføje dem i collection.json.liquid og så redigere template.html og template.js, så de også bruger disse felter. Du bør aldrig skulle redigere Klassen omtalt i trin 3.

Find temafiler #

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

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

Dog skifter temafilernes navne 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å filen du leder efter, kan du bruge søgefeltet til at hjælpe dig med at finde den.

For eksempel, hvis du leder efter filen, der indeholder koden til 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 stemmer overens.

Dette kan gøres i Google Chrome ved at højreklikke på et hvilket som helst område af siden og vælge ‘Inspicer’.

Du kan derefter inspicere HTML på siden og tjekke, om class/ID på elementer er de samme i filen som på siden.

Hvis du behøver 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 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.

Visning af Clerk Recommendations i kurvskuffen på Shopify er en god måde at fremvise ekstra produkter til kunder, inden de starter checkout-processen.

1. Rediger koden for dit Shopify-tema i Online Store > Themes > Edit code.
2. Find filen, hvor kurvskuffe-templaten er (oftest 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>

1. Sammen med ovenstående snippet, inkluder et script, der rendrer Clerk Recommendations, når brugeren åbner kurven. En metode er at bruge en MutationObserver. Nedenstående script inkluderer alle disse elementer og viser et eksempel på, hvordan det kan gøres:

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

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

    // Indstillinger for observeren (hvilke mutationer skal 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øres, 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 koblet til callback-funktionen
    const clerk_observer = new MutationObserver(callback);

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

Din kurvskuffe-fil bør se således ud:

HTTP-autentificering #

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

Dette vil blokere Clerk-importeren og vise en 401 Unauthorized fejl i synkroniseringsloggen.

Du kan løse dette ved at indsætte autentificeringsinfo 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 din webshops server ansvarlig for at sende produkt-, kategori- og salgsdata til Clerk.

Dog kan serverens konfiguration i nogle tilfælde forhindre importeren i at få adgang, hvilket giver 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 udviklingsmiljø kræver HTTP-autentificering for adgang.

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

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

Rettighedsfejl #

Denne fejl sker ofte, hvis du ikke har givet Læseadgang 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:

1. Rul op til toppen af siden og klik på Save.

Håndtering af require.js #

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

I nogle opsætninger forhindrer Require.js at Clerk.js indlæses, hvilket betyder, at der ikke vises sliders eller søgeresultater.

Når dette sker, vil følgende fejl blive vist i din konsol:

Uncaught ReferenceError: Clerk is not defined

Der er to måder at håndtere Require.js. Begge kræver, at du ændrer tracking-scriptet, der normalt indsættes i index.liquid.

Inkludér i Require.js #

Den bedste metode er at forsøge 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:

Ignorér Require.js #

Hvis løsningen ovenfor ikke fungerer, er det muligt at ignorere Require.js.

Dette gøres ved at indsætte window.__clerk_ignore_requirejs = true; i toppen af tracking-scriptet:

Efter brug af én af disse metoder 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.

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

De to væsentligste forskelle i Clerk.js 2 er:

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

Opret designs #

Da Clerk.js 2 har en anderledes 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 de følgende punkter.
• Konvertér dine gamle Designs. Følg denne guide for at se hvordan.

Design Editor-valgmulighed #

1. Gå til my.clerk.io > Recommendations/Search > Designs > New Design.
2. På den følgende side, giv dit Design et Navn (vi anbefaler at tilføje “V2” så det er tydeligt, du bruger Clerk.js 2).
3. Vælg designtype.
4. Klik på Publish Design, når du er færdig, og gå til Step 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 for at give mere produktinformation i Designet.
6. Klik på Publish. Dette vil midlertidigt betyde, at de ikke vises på din webshop, indtil du er klar med Step 2. Vælg det nye Design til 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. Lokaliser den templatefil, der bruges til at vise alle sider af webshoppen, hvor det originale Clerk.js-script findes tæt på 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. Kopiér denne kode og indsæt den lige før </head>-tagget i templaten:

1. Gem din template.

Tillykke! Du kører nu på den 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

Kunde Events-adgang #

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

Følg disse trin for at give de nødvendige rettigheder:

1. I Shopify, gå til Settings > Users and permissions.
2. Klik på medarbejderen ved navn Clerk.io (eller den medarbejderbruger du ønsker at opdatere).
3. Rul til Store settings og aktiver:

• View customer events
• Manage and add custom pixels

4. Klik Save.

Disse rettigheder giver vores team mulighed for at se Customer events-sektionen og styre Clerk-pixlen, så vi kan bekræfte, at ordretracking virker korrekt.