FAQ

Valutakonvertering i frontend #

Shopifys indbyggede valutaomregning gør det nemt at aflæse valutasymbol og valutakurs i webshoppen.

Som standard leveres Clerk.js til Shopify med en formaterer, der fungerer som så længe din tredjepartsapp bruger Shopifys indbyggede valutaobjekt.

Standardløsning #

Du skal bruge en formatter i dine designs til at konvertere priser. Dette er et eksempel fra vores standardskabelonsprog her. Men når du bruger valutaomregninger og symboler, registrerer Clerk.js disse indstillinger såsom sprog, valuta og landekode. Følgende eksempler giver dig et bedre overblik over, hvordan de forskellige komponenter fungerer.

I 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å valutaomregneren inde i tekstkomponenten:

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

I HTML/CSS-design (kodetilstand)

1. I my.clerk.io skal du gå til Søg/anbefalinger -> Design og klikke på Rediger design for dit design.

2. Udskift den eksisterende penge eller money_eu formattering for priser med valuta_konverter

3. Klik på Opdater design.

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

Shopify-frontend-api-løsninger #

> Ansvarsfraskrivelse: Dette er en meget brugerdefineret løsning til at få priskonverteringer, hvis der ikke er data fra shopify-API’en. Brug kun dette, hvis du bruger en specifik og brugerdefineret opsætning til priskonvertering baseret på ændringer i geo-ip.

Dette er dokumentationen for frontend-løsningen i Github.

Få kontekstuelle DATA JIT

Dette afsnit dækker, hvordan man får kontekstuelle data i realtid til visning i indhold, der returneres fra Clerk.io API.

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

• En samling, der indeholder alle produkter.
• Et alternativt layout til gengivelse af indsamlingsoplysninger som JSON.
• En Javascript-klasse, som indsamler de data, der stilles til rådighed i samlingen.
• En Javascript-snippet, der bruger dataene for de relevante produkt-id’er i et givet resultat og placerer dem i en div i skabelonen.

1. Samlingen

For at sikre, at du har en samling med alle mulige produkter, anbefaler jeg, at du opretter en samling med en betingelse, som alle produkter skal opfylde. 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 retning af 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 skal vi først redigere temakoden for det tema, vi ønsker at bruge. Tryk på Add new Template under skabeloner i venstre side.

I pop op-vinduet skal du vælge collection som ressourcetype.

Vælg liquid som filtype.

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

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

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

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

For at få fat i 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 det script-tag, der indeholder Clerk.js, som du har placeret i theme.liquid.

Det skal se nogenlunde sådan her 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 opbygning af data.

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

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

Endelig bør du inkludere template.js i den anvendte designskabelon. Funktionen henter dataene, når de er tilgængelige, og placerer dem i specifikke underordnede elementer inden for hver produktflise.

Eksemplet omfatter felterne list_price og price.

Ting at bemærke: 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, så de også bruger disse felter. Du bør aldrig få brug for at redigere den klasse, der er beskrevet i trin 3.

Sporing af flere valutaer i 1 butik #

> Dette er forældet. Pixelsporingsscriptet erstatter dette. Følg trin 4 og 5 fra Kom godt i gang med Shopify-guiden.

Når du bruger flere valutaer i din Shopify-webshop, er det vigtigt, at ordrer omregnes til en valuta for at sikre, at dine indtægtsrelaterede resultater er nøjagtige i Clerk.io.

I Clerk.io-dashboards vil din performance altid blive rapporteret i one -valuta. Hvis du f.eks. bruger både GBP og DKK i din webshop, vil dine dashboards rapportere resultater alle i GBP eller alle i DKK. Det er derfor, det er vigtigt at omregne til én valuta - du vil jo ikke have, at et køb på 600 GBP skal læses af Clerk.io som 600 DKK!

For at sikre, at dine Clerk.io-dashboards viser dine salgsdata i én fælles valuta, kan dette justeres i den salgssporingskode, du tilføjede til din butik, da du oprindeligt installerede Clerk.io.

Gå til Indstillinger > Kasse > Yderligere scripts i Shopify-backend, og ændr salgssporingskoden fra denne:

<!-- Start of 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>
  <!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Til dette:

<!-- Start of 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;
        // Add more cases as needed
    }
    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>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Sørg for at Hold besøgssporingsscriptet det samme - det findes lige under salgssporingskoden. Dine ordrer bør nu flyde igennem til Clerk.io-dashboards som én valuta.

Find fælles temafiler #

Shopify har over 100 forskellige temaer til at style og tilpasse din webshop. Hvert tema fungerer på samme måde, nemlig ved at du tilpasser temafilerne for at få et bestemt resultat i din butik, men navnene på temafilerne ændres 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å den fil, du leder efter, kan du bruge søgefeltet som hjælp til at finde den. Hvis du f.eks. leder efter den fil, der indeholder koden til søgesiden, vil der sandsynligvis stå ‘search’ i filnavnet.

Hvis du er usikker på, om du har fundet den rigtige fil, kan du sammenligne HTML i temafilen med HTML 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 del af siden og vælge ‘Inspect’.

Derefter kan du inspicere HTML’en på siden og tjekke, om elementernes klasse/ID er den samme i filen som på siden.

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

Anbefalinger til vognskuffen #

Installation af en Shopify-udvikler anbefales på det kraftigste. Denne vejledning 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 indkøbskurven er en del af DOM’en på hver side, men forbliver skjult, indtil den åbnes af brugeren.

Visning af Clerk Recommendations i indkøbskurven på Shopify er en fantastisk måde at fremvise yderligere produkter for kunderne, før de begynder betalingsprocessen.

1. Rediger koden til dit Shopify-tema i Online butik > Temaer > Rediger koden.
2. Find den fil, hvor skabelonen til indkøbskurven er (hedder normalt indkøbskurv-skuffe.liquid eller lignende).
3. Indsæt en Clerk Recommendations snippet fra Anbefalinger > Indhold. Omdøb klassen fra clerk til Kontroller 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>

4. Sammen med ovenstående snippet skal du inkludere et script, der viser Clerk Recommendations, når brugeren åbner indkøbskurven. En tilgang er at bruge en MutationObserver. Nedenstående script indeholder alle disse elementer og giver dig et eksempel på, hvordan du kan gribe det an. Et eksempel:

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

Filen til din vognskuffe skal se sådan ud:

Synkronisering med HTTP Auth #

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

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

Du kan nemt verificere importøren ved at indsætte godkendelsesoplysningerne 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 webshoppens server ansvarlig for at sende produktkategori- og salgsdata til Clerk.io.

I nogle tilfælde kan serverens konfiguration dog forhindre importøren i at få adgang, hvilket forårsager en fejl i Synkronisering af data.

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

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

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

Fejl i Shopify-tilladelser: Denne handling kræver godkendelse fra shopejeren for scope read_content. #

Denne fejl opstår normalt, hvis du ikke har givet Læs adgang adgang 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 -> Administrer private apps -> Clerk.io (eller det navn, du har givet appen).

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

3. Find Lagre indhold som artikler, blogs, kommentarer, sider og omdirigeringer, og vælg Læs adgang:

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

Håndtering af require.js #

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

I nogle opsætninger stopper Kræv.js indlæsningen af Clerk.js, hvilket betyder, at der ikke vises nogen slidere eller søgeresultater.

Når det sker, vil følgende fejl blive vist i konsollen:

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-script,, 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.

Det kan du gøre ved at indsætte require([‘clerk’], function() {}); i bunden af sporingsscriptet:

Ignorerer Require.js #

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

Det kan du gøre ved at indsætte window.__clerk_ignore_requirejs = true;

i toppen af sporingsscriptet:

Når du har brugt en af disse tilgange, vil Require.js nu være kompatibel med Clerk.io.

Opgrader til Clerk.js 2 #

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

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

De to vigtigste forskelle i Clerk.js 2 er:

• Designene i my.clerk.io bruger PLACEHOLDER_58 templating-sprog , men kan også nemt oprettes ved hjælp af Design Editor.

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

Trin 1: Konvertering af designs #

Da Clerk.js 2 har en anden tilgang til designs, er du nødt til at oprette nye.

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

• 1. Brug det intuitive Designredaktør til at oprette nye designs, som beskrevet i de følgende punkter.

• 2. Konverter dine gamle designs. Følg denne vejledning for at se, hvordan du gør det.

1.1 Start med at gå til PLACEHOLDER_61 -> Anbefalinger / Søg -> Design og klik på Nyt design:

1.2 På det følgende skærmbillede skal du give dit design navnet Navn (vi anbefaler, at du tilføjer " V2", så det er tydeligt, at du bruger Clerk.js2).

1.3. Vælg designtype.

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

1.5. På Designredaktør 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å Udgiv Dette vil midlertidigt medføre, at de ikke vises 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 går du til Anbefalinger / Søg -> Indhold og ændrer dit Clerk.io -indhold, så det bruger dit nye design.

1.7. Sådan! Du er nu klar til at skifte til Clerk.js 2.

Trin 2: Udskiftning af scriptet #

2.1. Start med at finde den skabelonfil, der bruges til at vise alle sider i webshoppen, og hvor det oprindelige Clerk.js-script findes i bunden.

2.2. Fjern det gamle script fra filen:

2.3. Gå derefter til PLACEHOLDER_63 -> Indstillinger -> Sporingskode. Denne side indeholder nu din Clerk.js 2 sporingskode.

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

2.5. Gem din skabelon.

Vi ønsker dig 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