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, lige fra valutakonvertering til placering af tema-filer.

Billedstørrelser #

Shopify-billed-URL’er kan inkludere faste dimensioner fra synkronisering, for eksempel _600x600.

Hvis dit design kræver 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 et design bruger flere billedformater (for eksempel produktkort og store hero-placeringer), og du ønsker at 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 virker 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 skabelonsprog her.

Ved brug af valutakonverteringer og symboler, opdager Clerk.js indstillinger som sprog, valuta og landekode.

Følgende eksempler viser, hvordan de forskellige komponenter virker.

Design Editor #

1. Opret en Text-komponent, hvor du ønsker, at prisen skal vises.
2. Tilføj følgende Liquid-kode for at vise prisen baseret på valutakonverteringen inde i tekstkomponenten:

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

Kode-mode #

1. Gå til my.clerk.io, gå til Search/Recommendations > Designs og klik på Edit Design for dit design.
2. Udskift den nuværende money eller money_eu formatter for priser med currency_converter.
3. Klik på Update Design.
4. Nu vil du kunne se de konverterede priser og valutasymbolet i dit design.

Brugerdefineret API-løsning #

Disclaimer: Dette er en meget tilpasset løsning til pris-konvertering, hvis der ikke er data fra Shopify API’en. Brug kun dette, hvis du anvender et særligt og skræddersyet setup 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ønsteret består af følgende dele:

• En samling, der indeholder alle produkter.
• Et alternativt layout til at vise samlingsinformation som JSON.
• En JavaScript Class, som indsamler dataene stillet til rådighed i samlingen.
• Et JavaScript Snippet, der bruger dataene til de relevante produkt-ID’er i et givent resultat og placerer dem i en div i skabelonen.

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 det vil resultere i, at den modtager ruten /collection/clerk-api frontend.

Kriteriet for samlingen bør være noget som price > -1000000.

Opret alternativt layout #

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

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 op-vinduet vælg collection som resourcetype.

Vælg liquid for filtypen.

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 samling og forberede dem til brug, indsæt hele indholdet af index.js fra class-mappen i dette projekt i det script-tag, der indeholder Clerk.js, som du har placeret i theme.liquid.

Det skal se 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 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 data sidst blev bygget.

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

Tilføj skabelonfunktion #

Inkluder template.js i det design template, der anvendes.

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

Eksemplet inkluderer felterne list_price og price.

Bemærk: Hvis du har brug for at anvende felter, der er forskellige fra price og list_price, tilføjer du dem i collection.json.liquid, og derefter retter du template.html og template.js til også at anvende disse felter. Du behøver aldrig at ændre Class beskrevet i trin 3.

Find tema-filer #

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

Hvert tema fungerer på samme måde—du tilpasser tema-filerne for at opnå et bestemt resultat på din butik.

Dog ændres navnene på tema-filerne fra tema til tema.

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

Hvis du ikke kender navnet på den fil, du leder efter, 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 ikke er sikker på, om du har fundet den korrekte fil, kan du sammenligne HTML’en i tema-filen 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å en hvilken som helst sektion på siden og vælge ‘Inspicer’.

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

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

Anbefalinger i cart drawer #

Installation af en Shopify-udvikler anbefales stærkt.

Denne vejledning skitserer 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 kurven er en del af DOM’en på alle sider, men forbliver skjult, indtil den åbnes af brugeren.

Visning af Clerk Recommendations i cart drawer på Shopify er en god måde at fremhæve flere produkter til kunder, inden de begynder checkout-processen.

1. Rediger koden på dit Shopify-tema i Online Store > Themes > Edit code.
2. Find filen, hvor skabelonen til cart drawer ligger (normalt kaldet cart-drawer.liquid eller lignende).
3. Indsæt et Clerk Recommendations-snippet fra Recommendations > Elements.
4. Omdøb class 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 item in cart.items %}{{ item.product_id }}{% unless forloop.last %}, {% endunless %}{% endfor %}]"
></span>

1. Sammen med ovenstående snippet inkluderes et script, der renderer Clerk Recommendations, når brugeren åbner cart’en. En tilgang er at bruge en MutationObserver. Nedenstående script inkluderer alle disse elementer og giver dig et eksempel på, hvordan du kan gøre det:

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

    // Tilføj alle klassernes navne på cart drawer, når den er åben
    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 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-funktion, der køres, når mutationer opdages
    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 knyttet til callback-funktionen
    const clerk_observer = new MutationObserver(callback);

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

Din cart drawer-fil skal nu ligne dette:

HTTP-autentificering #

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

Dog kan serverens konfiguration i visse tilfælde forhindre Importeren i at få adgang, og der opstår en fejl i Data Sync.

Nedenfor er en liste over de mest almindelige fejl samt hvordan du retter 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 Username og Password som en del af Import URL’en:

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

Tilladelsesfejl #

Denne fejl opstår typisk, 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 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:

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

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 medfører, 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 på. Begge metoder kræver, at du ændrer tracking-scriptet, som normalt er indsat i index.liquid.

Inkluder i Require.js #

Den bedste tilgang er at forsøge at få Require.js til at genkende Clerk.

Dette gør du ved at indsætte require(['clerk'], function() {}); i bunden af tracking-scriptet:

Ignorér Require.js #

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

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

Efter brug af en af disse tilgange vil Require.js nu være 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 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 korrekt.

De to vigtigste forskelle i Clerk.js 2 er:

• Designs i my.clerk.io bruger Liquid template-sproget, men kan også nemt oprettes ved brug af 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å é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 vejledning for at se hvordan.

Design Editor-mulighed #

1. Gå til my.clerk.io > Recommendations/Search > Designs > New Design.
2. Giv dit design et Navn på følgende skærmbillede (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 vejledningen.
5. I Design Editor, klik på et af de eksisterende elementer såsom navn, billede, knap osv. for at redigere det, eller tilføj nye elementer til designet for at tilføje mere information om produkter.
6. Klik på Publish. Dette vil midlertidigt medføre, at de ikke vises på din webshop, før 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 det nye design.

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

Udskift script #

1. Find den template-fil, der bruges til at vise alle sider på webshoppen, og hvor det originale Clerk.js-script findes nær 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 code.
2. Kopiér koden og indsæt den lige før </head>-tagget i template-filen:

1. Gem din template.

Tillykke! Du kører nu på den stærkt 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 fejlfinde ordretracking via Shopify-pixels, kan vi bede om adgang til området Kunde-events 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 medarbejder du vil opdatere).
3. Rul til Store settings og aktiver:

• View customer events
• Manage and add custom pixels

4. Klik Save.

Disse tilladelser gør det muligt for vores team at se sektionen Kunde-events og styre Clerk-pixlen, så vi kan verificere, at ordretracking fungerer korrekt.