Ofte stillede spørgsmål

Frontend valutaomregning #

Shopifys indbyggede valutaomregning gør det nemt at læse valutasymbolet og vekselkursen fra webshoppen.

Som standard kommer Clerk.js til Shopify pakket med en formatter, der vil fungere så længe din 3. parts app bruger Shopifys indbyggede valutaobjekt.

Standardløsning #

Du skal bruge en formatter i dine Designs for at konvertere priser. Dette er et eksempel fra vores standard skabelonsprog her. Men når du bruger valutaomregninger og symboler, registrerer Clerk.js disse indstillinger som sprog, valuta og landekode. Følgende eksempler vil give dig mere overblik over, hvordan de forskellige komponenter fungerer.

I Design Editor

1. Opret en Text komponent, hvor du vil have prisen til at vises

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

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

I HTML/CSS design (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å Opdater Design.

4. Du vil nu kunne se de konverterede priser og valutasymbol i dit design:

Shopify-frontend-api løsninger #

Ansvarsfraskrivelse: Dette er en meget tilpasset løsning for at få prisomregninger, hvis der ikke er data fra Shopify API. Brug kun dette, hvis du bruger en specifik og tilpasset opsætning til prisomregninger baseret på geo-ip ændringer.

Dette er frontend-løsningsdokumentationen i Github.

Få kontekstuelle DATA JIT

Dette afsnit dækker, hvordan man får kontekstuelle data i realtid til at vise inden for indhold returneret fra Clerk.io API.

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

• En samling, der indeholder alle produkter.
• Et alternativt layout til at gengive samlingsinformation som JSON.
• En Javascript-klasse, der indsamler de data, der er tilgængelige i samlingen.
• Et Javascript-snippet, der forbruger dataene for de relevante produkt-id’er i et givet resultat og placerer dem inden for en div i skabelonen.

1. Samlingen

For at sikre, at du har en samling med alle mulige produkter, anbefaler jeg at oprette en samling med en betingelse, der opfyldes af alle produkter. Samlingen skal navngives Clerk api, da dette vil resultere i, at den modtager ruten /collection/clerk-api frontend.

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

2. Det alternative layout for samlinger

For det andet skal vi oprette et alternativt layout til at vise vores data ved hjælp af samlingen.

For at gøre dette redigerer vi først temaets kode for det tema, vi ønsker at bruge. Under skabelonsektionen på venstre side trykker du på Add new Template.

I popup-vinduet vælger du collection for ressource type.

Vælg liquid for filtype.

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

Indholdet af denne fil skal være collection.json.liquid filen, der findes i liquid mappen til dette projekt.

Du er velkommen til at tilføje felter til produktet i denne skabelon som nødvendigt.

3. JS-klassen, der håndterer data fra vores nyoprettede endpoint.

For at hente dataene fra vores samling og forberede dem, så de kan bruges, skal vi placere hele indholdet af index.js i vores class mappe i dette projekt, inde i script-tagget, der indeholder Clerk.js, som du har placeret i theme.liquid.

Det skal se nogenlunde sådan ud:

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 bygning af data.

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

4. JS-funktionen, der indlæser de relevante data i skabelonen.

Til sidst skal du inkludere template.js i det design, der bruges. Funktionen henter dataene, når de er tilgængelige, og placerer dem i specifikke underelementer inden for hver produktflise.

Eksemplet inkluderer felterne list_price og price.

Bemærkninger: Hvis du har brug for at bruge felter, der er forskellige fra price og list_price, skal du tilføje dem i collection.json.liquid og derefter redigere template.html og template.js for også at forbruge disse felter. Du skal aldrig redigere den klasse, der er beskrevet i trin 3.

Sporing af flere valutaer i 1 butik #

Dette er forældet. Pixel tracking-scriptet erstatter dette. Følg trin 4 og 5 fra Kom i gang med Shopify-guiden.

Når du bruger flere valutaer i din Shopify-webshop, er det vigtigt, at ordrer oversættes til én valuta for at sikre, at din indtægtsrelaterede præstation er nøjagtig i Clerk.io.

I Clerk.io dashboards vil din præstation altid blive rapporteret i én valuta. For eksempel, hvis du bruger både GBP og DKK i din webshop, vil dine dashboards rapportere præstation alt i GBP eller alt i DKK. Dette er grunden til, at det er vigtigt at oversætte til én valuta - trods alt, ville du ikke have en 600 GBP køb læst af Clerk.io som 600 DKK!

For at sikre, at dine Clerk.io Dashboards viser dine salgsdata som én fælles valuta, kan dette justeres inden for den salgs tracking-kode, du tilføjede til din butik, da du oprindeligt installerede Clerk.io.

Gå til Indstillinger > Checkout > Yderligere scripts i Shopify-backend og ændre salgs tracking-koden fra dette:

<!-- Start af Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script>
  (function (w, d) {
      var e = d.createElement('script'); e.type = 'text/javascript'; e.async = true;
      e.src = 'https://cdn.clerk.io/clerk.js';
      var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
      w.__clerk_q = w.__clerk_q || []; w.Clerk = w.Clerk || function () { w.__clerk_q.push(arguments) };
  })(window, document);
  Clerk('config', {
      key: 'yourPublicKey'
  });
  let clerk_order_id = parseInt("'{'+'{ checkout.order.id }'+'}'");
  document.addEventListener('DOMContentLoaded', (e)=> {
      clerk_order_id = window.Shopify.checkout.order_id
  });
  if ( isNaN( clerk_order_id ) ) {
      if(window.Shopify){
          clerk_order_id = window.Shopify.checkout.order_id
      }
  }
  let log_sale_retry = setInterval(() => {
      if( ! isNaN( clerk_order_id ) ){
          Clerk('call', 'log/sale/shopify', {
              sale: clerk_order_id
          });
          clearInterval(log_sale_retry);
      }
  }, 100);
  </script>
  <!-- Slut af Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Til dette:

<!-- Start af Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script>
    (function (w, d) {
        var e = d.createElement('script'); e.type = 'text/javascript'; e.async = true;
        e.src = 'https://cdn.clerk.io/clerk.js';
        var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
        w.__clerk_q = w.__clerk_q || []; w.Clerk = w.Clerk || function () { w.__clerk_q.push(arguments) };
    })(window, document);
    let clerkLocale = Shopify.locale;
    let publicKey;
    switch (clerkLocale) {
        case 'en':
            publicKey = 'yourPublicKeyEN';
            break;
        case 'fr':
            publicKey = 'yourPublicKeyFR';
            break;
        case 'de':
            publicKey = 'yourPublicKeyDE';
            break;
        // Tilføj flere tilfælde efter behov
    }
    Clerk('config', {
        key: publicKey
    });
    let clerk_order_id = parseInt("'{'+'{ checkout.order.id }'+'}'");
    document.addEventListener('DOMContentLoaded', (e) => {
        clerk_order_id = window.Shopify.checkout.order_id
    });
    if (isNaN(clerk_order_id)) {
        if (window.Shopify) {
            clerk_order_id = window.Shopify.checkout.order_id
        }
    }
    let log_sale_retry = setInterval(() => {
        if (!isNaN(clerk_order_id)) {
            Clerk('call', 'log/sale/shopify', {
                sale: clerk_order_id
            });
            clearInterval(log_sale_retry);
        }
    }, 100);
</script>
<!-- Slut af Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Sørg for at beholde Visitor Tracking Script det samme - dette findes lige under Sales Tracking-koden. Dine ordrer bør nu flyde gennem til Clerk.io dashboards som én valuta.

Finding common theme files #

Shopify huser over 100 forskellige temaer til at style og tilpasse din webshop. Hvert tema fungerer på samme måde, at du tilpasser temaets filer for at opnå et givet resultat i din butik, men temaets filnavne ændrer sig fra tema til tema.

Shopify giver dig et søgefelt til nemt og hurtigt at finde det tema, 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 det. For eksempel, hvis du leder efter filen, der har koden til søgesiden, er det sandsynligt, at den har ‘search’ i filnavnet.

Hvis du er usikker på, om du har fundet den rigtige fil, kan du sammenligne HTML’en i temaets fil 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 område af siden og vælge ‘Inspicer’.

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

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

Cart drawer recommendations #

Installation af en Shopify-udvikler anbefales stærkt. Denne guide skitserer en meget tilpasset løsning, der 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å hver side, men forbliver skjult, indtil den åbnes af brugeren.

Visning af Clerk-anbefalinger i kurvskuffen på Shopify er en fantastisk måde at fremvise yderligere produkter til kunderne, før de begynder checkout-processen.

1. Rediger koden for dit Shopify-tema i Online Store > Themes > Edit code.
2. Find filen, hvor kurvskuffens skabelon er (normalt kaldet cart-drawer.liquid eller lignende).
3. Indsæt et Clerk-anbefalingssnip fra Recommendations > Content. Omdøb klassen fra clerk for at kontrollere gengivelsen. For eksempel ved at kalde det 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>

4. Sammen med ovenstående snippet skal du inkludere et script for at gengive Clerk-anbefalinger, når brugeren åbner kurven. En tilgang er at bruge en MutationObserver. Det nedenstående script inkluderer alle disse elementer og giver dig et eksempel på, hvordan du kan gribe det an. For eksempel:

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

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

    // Indstillinger for observatøren (hvilke mutationer der 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 udfø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 observerinstans knyttet til callback-funktionen
    const clerk_observer = new MutationObserver(callback);

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

Din kurvskuffefil skal se sådan ud:

Synkronisering med HTTP Auth #

Ofte bruges HTTP-godkendelse på staging-sider for at undgå uinviterede besøgende.

Dette vil også blokere Clerk-importøren og vise en 401 Unauthorized fejl i synkroniseringsloggen.

Du kan nemt verificere importøren ved at indsætte autentifikationsoplysningerne i import-URL’en som nedenfor, i Data Sync på my.clerk.io:

https://USER:PASS@www.ewksRus.com

Almindelige synkroniseringsfejl #

Når du importerer data med Shopify-integrationen, er webshopserveren ansvarlig for at sende produkt-, kategori- og salgsdata til Clerk.io.

Men i nogle tilfælde kan serverens konfiguration forhindre importøren i at få adgang, hvilket forårsager en fejl i Data Sync.

Nedenfor er en liste over de mest almindelige fejl og hvordan man løser dem.

401 Serverfejl: Uautoriseret #

Denne fejl opstår, hvis din webshop/dev-miljø kræver HTTP-godkendelse for at få adgang til det.

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

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

Shopify tilladelsesfejl: Denne handling kræver godkendelse fra køberen til read_content-omfanget. #

Denne fejl opstår normalt, hvis du ikke har givet Læseadgang til Butiksindhold som artikler, blogs, kommentarer, sider og omdirigeringer i din private app.

For at løse det:

1. Log ind på Shopify og gå til Apps -> Administrer private apps -> Clerk.io (eller det navn, du gav appen).

2. Rul ned til Admin API-tilladelser, og klik på Gennemgå deaktiverede Admin API tilladelser.

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

4. Rul derefter til toppen af siden og klik på Gem.

Håndtering af require.js #

Denne guide gælder kun, når du bruger Clerk JS1.

I nogle opsætninger stopper Require.js Clerk.js fra 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 tilgange kræver, at du foretager ændringer i tracking-scriptet, som normalt indsættes i index.liquid.

Inkluder “clerk” i Require.js #

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

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

Ignorer Require.js #

Hvis den 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 at have brugt en af disse tilgange, vil Require.js nu være kompatibel med Clerk.io.

Opgradering til Clerk.js 2 #

Clerk.js 2 er en hurtigere og meget mere fleksibel version af vores JavaScript-bibliotek, der gør installationen af Clerk.io på enhver webshop til en leg.

Men da de to versioner fungerer lidt forskelligt, skal du følge disse trin for at opgradere med succes.

De to vigtigste forskelle i Clerk.js 2 er:

• Designs i my.clerk.io bruger det Liquid skabelonsprog, men kan også nemt oprettes ved hjælp af Design Editor.

• Scriptet skal indsættes lige før tagget i din webshops skabelon.

Trin 1: Konvertering af Designs #

Da Clerk.js 2 har en anden tilgang til Designs, skal du oprette nye.

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

• 1. Brug den intuitive Design Editor til at oprette nye Designs, som beskrevet i de følgende punkter.
• 2. Konverter dine gamle Designs. Følg denne guide for at se, hvordan du gør det.

1.1 Start med at gå til my.clerk.io -> Recommendations / Search -> Designs og klik på New Design:

1.2 På den følgende skærm skal du give dit Design et Navn (vi anbefaler at tilføje " V2", så det er tydeligt, at du bruger Clerk.js2).

1.3. Vælg Design Type.

1.4. Klik på Publish Design, når du er færdig, og gå til Trin 2 i guiden.

1.5. I Design Editor skal 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 flere oplysninger om produkter.

1.6. Klik på Publish Dette vil midlertidigt få dem til ikke at vise sig på din webshop, indtil du er færdig med Trin 2. Vælg det nye Design for alt indhold, der skal opdateres. 1.7. Til sidst skal du gå til Recommendations / Search -> Content og ændre dit Clerk.io indhold til at bruge dit nye Design.

1.7. Der! Du er nu klar til at skifte til Clerk.js 2.

Trin 2: Erstatning af scriptet #

2.1. Start med at finde skabelonfilen, der bruges til at vise alle sider af webshoppen, og hvor den oprindelige Clerk.js-script findes nær bunden.

2.2. Fjern det gamle script fra filen:

2.3. Gå derefter til my.clerk.io -> Indstillinger -> Tracking Code. Denne side indeholder nu din Clerk.js 2 trackingkode.

2.4. Kopier denne kode og indsæt den lige før tagget i skabelonen:

2.5. Gem din skabelon.

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