Enhver (webshop)

FAQ

Svar på ofte stillede spørgsmål om tilpassede integrationer

Oplever du problemer med din tilpassede integration? Denne FAQ dækker de mest almindelige problemer og deres løsninger – fra single-page apps til sporing af salg.

Single-page apps #

Disse kaldes også Progressive Web Apps (PWA) og indlæser generelt sitet som én enkelt side i stedet for at indlæse individuelle sider som normalt.

Når en side indlæses første gang, vil Clerk.js-biblioteket automatisk starte en funktion for at gengive alle Element-blokke på den pågældende side.

Dog, for single-page apps der bruger frameworks som vue.js eller next.js, bliver sider gengivet med JavaScript i stedet for en almindelig sideindlæsning.

Derfor skal du selv styre rendering med Clerk.js, så det passer til måden, sider indlæses i appen på.

Inkludér Clerk.js #

Clerk.js skal kun indlæses én gang, når sitet indlæses første gang.

Herefter er biblioteket tilgængeligt under hele sessionen.

Indsæt det lige inden </head> i din HTML:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
    (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: 'INSERT_PUBLIC_API_KEY'
    });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Styr rendering #

Som standard gengiver Clerk.js alle elementer med klassen clerk, uanset om de indsættes under den første sideindlæsning eller når DOM’en ændrer sig.

Du kan styre timingen ved at indsætte elementet, når det er klar til at blive gengivet.

Alternativt kan du styre renderingen med funktionen Clerk("content", "SELECTOR").

Hver gang en side indlæses, følg disse trin i rækkefølge:

  • Tilføj Clerk-snippet til HTML’en med en unik selector du kan målrette efter.

  • Kør Clerk("content", "SELECTOR") for at gengive den.

Når besøgende forlader siden, skal du fjerne snippet’et og gendanne det igen, hvis den besøgende vender tilbage til samme side.

Dette sikrer, at Clerk.js ikke ser snippet’et som tidligere gengivet, hvilket kan betyde, at det ikke vises.

Eksempel:

<span 
  id="clerk-custom-snippet"
  data-template="@home-page-visitor-recommendations">
</span>

<script>
  Clerk("content", "#clerk-custom-snippet")
</script>

Clerk.js kan også konfigureres til automatisk at initialisere Elements med dine brugerdefinerede selectors efter første rendering.

Pagespeed-effekt #

At tilføje et eksternt værktøj som Clerk.js øger indlæsningstiden på dit site, men det er ubetydeligt sammenlignet med den ekstra konvertering det medfører.

Nedenfor kan du lære, hvad Clerk.js tilføjer til din sideindlæsning.

Ydeevne #

Clerk.js-biblioteket er kun 37,5kb stort, så det indlæses meget hurtigt.

Desuden indlæser det elementer asynkront, hvilket betyder, at resten af siden indlæses, mens Clerk.js gengiver indhold.

En stigning i sideindlæsningstiden kommer oftest fra flere billeder end før, da Clerks søgeresultater og anbefalinger fungerer bedst, når de er visuelt tiltalende.

For at minimere ekstra indlæsningstid anbefaler vi at bruge billeder i webp-format, der matcher størrelsen på det sted, de vises i Clerk-elementerne.

Fx hvis billeder i anbefalinger har en opløsning på 400x400px på desktop, så send billeder i maks. 420x420px el. lign.

Google Page Speed #

Hvis du bruger Google Page Speed Insights eller et lignende værktøj til at analysere dit sites performance, kan du se Clerk.js nævnt under Leverage browser caching.

Formålet med Clerk.js er at gøre det super nemt at indsætte resultater fra Clerk på ethvert website.

Clerk.js indeholder mange features til at håndtere tracking og UI-komponenter som Instant Search, slider, popups m.m.

Når vi tilføjer nye UI-features eller forbedringer, indgår de i Clerk.js og downloads af slutbrugere for at kunne anvende dem.

At have en cache-udløbstid på 60 minutter betyder, at nye features er tilgængelige for alle senest 60 minutter efter release.

Jo længere cachtid, jo længere tid tager det for alle brugere at få adgang til de nyeste features.

Det vigtige er, at slutbrugere kun skal downloade Clerk.js én gang, når der kommer nye features.

Cache-udløbstiden betyder blot, at browseren checker med Clerk hvert 60. minut.

Hvis intet er ændret i Clerk.js, downloades intet.

Cache-udløbet på 60 minutter er således et kompromis mellem at minimere webforespørgsler og kunne se nye features og forbedringer.

De fleste sessioner varer mindre end 60 minutter, så forespørgslen laves kun én gang per session.

Denne slags cache-udløb er normalt og bruges også af fx Google Analytics, Facebook og Trustpilot.

CLS-effekt #

Cumulative Layout Shift (CLS) kan påvirke SEO og brugeroplevelse negativt, når dynamisk indhold flytter elementer på siden.

I nogle tilfælde kan Clerk bidrage til CLS-scoren.

Du kan læse mere om CLS her.

Følg kun denne vejledning hvis din CLS-score er højere end 0,2, og Clerk-elementer ligger above the fold.

For at forhindre skift i indhold, skal der reserveres en pladsholder til Clerk Recommendations, før Clerk.js indsætter dem.

Til dette formål skal du tilføje en mindstehøjde baseret på forventet indholdshøjde.

Eksempel på kode:

.clerk-slider-wrapper {
    min-height: 300px; /* Justér ud fra forventet indholdshøjde */
    width: 100%;
}

Lave API-kald #

Du kan bruge Clerk.js til at lave API-kald via den indbyggede funktion Clerk("call").

Denne funktion tager 3 argumenter:

  • Et API-endpoint

  • Et JSON-dictionary med parametre

  • En callback funktion til at håndtere svaret

Requests #

Herunder et eksempel på en script, der forespørger de 10 mest populære produkter og logger svaret.

Svaret indeholder et JavaScript-objekt med status for API-kaldet og resultatet.

Script #

function popularProducts(){
  Clerk("call",
    "recommendations/popular",
    {
      limit: 10,
      labels:["Home Page / Bestsellers"]
    },
    function(response){
      console.log(response);
    },
    function(response){
      console.error(response);
    }
  );
}

Svar #

__clerk_cb_1(
  {
    "status":"ok",
    "count":72,
    "facets":null,
    "result":[399,410,551,338,403,439,425,402,406,456]
  }
);

Callbacks #

Når du laver API-kald, kan du bruge callback-funktioner til at håndtere svaret, som du ønsker.

Funktionerne tager response som argument, der indeholder alle data returneret af API’et.

Eksempel der laver en liste med HTML-elementer, der linker til kategorier, der matcher forespørgslen “men”:

Clerk("call",
  "search/categories",
  {
      'query': "men",
      'limit': "10"
  },
  function(response) {
      var cat = response.categories;
      if (cat.length > 0) {
          let heading = document.createElement('h3');
          heading.textContent = 'Related Categories';
          document.querySelector('#your-target').append(heading);
      }
      for (var index in cat) {
          var clerkName = cat[index].name;
          var clerkUrl = cat[index].url;
          let link = document.createElement('a');
          link.href = clerkUrl;
          link.textContent = clerkName;
          document.querySelector('#your-target').append(link);
      }
  }
)

Add-to-cart knapper #

Disse knapper fungerer forskelligt på hver platform, og funktionaliteten kan ændre sig afhængigt af de plugins du anvender.

Da Clerks designs består af HTML & CSS, kan du som regel selv tilføje funktionaliteten, hvis du forstår, hvordan det fungerer på dit site.

Generel tilgang #

Nogle add-to-cart knapper kræver JavaScript for at udføre handlingen.

I disse tilfælde kan du tilføje funktionaliteten til Clerks eksisterende cart-metode.

Se hvordan i vores developer docs her.

Inspicér add-to-cart knappen for at identificere kodestykket, fx på en kategori-side.

Koden vil normalt være et <div> eller et button-element.

Kopier hele HTML’en for knappen.

Kopier og indsæt denne kode i dit Design.

Du skal nu identificere variabler i koden.

Oftest skal du finde, hvor koden bruger:

  • Produkt-id

  • Produkt-antal

Erstat værdierne for produkt-id med Liquid-variabler for disse datapunkter.

Id’et vil altid være {{ product.id }}, og antal vil afvige afhængig af, hvordan du sender dataen.

I dette eksempel kunne det være {{ product.qty }}.

Indsæt koden i HTML’en for dit design og test, at det virker.

Eksempel #

Add-to-cart knappen bruger et <div> med klassen button-container.

Antallet findes i linket efter /cart?add=, og produkt-id’et findes umiddelbart efter &id_product=.

Produkt-id’et refereres også i data-id-product, og antal i .data-minimal_quantity.

Disse værdier skal erstattes med Liquid-tags i designet, så de passende produkt-id’er og antal bruges i HTML-outputtet.

Med disse ændringer vil knappen se således ud:

<div class="button-container">
  <a 
    class="button ajax_add_to_cart_button btn btn-default" 
    style="position: relative;" 
    href="https://www.examplelinktocart.com/cart?add={{ product.qty }}&amp;id_product={{ product.id }}&amp;" 
    rel="nofollow" 
    title="Add to Cart" 
    data-id-product-attribute="0" 
    data-id-product="{{ product.id }}" 
    data-minimal_quantity="{{ product.qty }}">
    <span style="color: orange !important">
      <i class="icon-shopping-cart" aria-hidden="true"></i>
    </span>
  </a>
</div>

Console-fejl #

Clerk.js logger mange fejl til konsollen, som du kan bruge til at fejlfinde problemer.

Ved at klikke på fejl-linket får du mere information om fejlen, som du kan bruge i din fejlretning eller sende til vores supportteam.

Nedenfor finder du en liste over de mest almindelige fejl.

Ukendt indhold #

Denne fejl vises, hvis snippet’et du har indsat refererer til et Element, der ikke findes i data-template-attributten.

For at rette det, sikr dig at navnet i embed-koden matcher en Element-blok, du har oprettet i my.clerk.io.

Du kan klikke Edit Element for et hvilket som helst Element for at se, hvilken reference der skal bruges.

Ugyldigt API-endpoint #

Denne fejl opstår, hvis du har brugt klassen clerk et sted i din HTML.

Denne klasse er reserveret til brug med vores snippets, da Clerk.js bruger den til at identificere elementer til rendering.

For at rette det, giv din klasse et andet navn, fx clerk-product.

Ugyldigt produkt-argument #

Denne fejl betyder, at det leverede id for et produkt har en forkert type eller syntaks.

Hvis dine produkt-id’er fx er heltal, skal de også være det i koden.

Husk også paranteserne omkring id’et for at gøre det til en liste.

<span 
  class="clerk" 
  data-template="@product-page" 
  data-products="[123]">
</span>

Ugyldigt kategori-argument #

Denne fejl betyder, at det leverede id for en kategori har forkert type/syntaks.

Oftest sker det, hvis placeholder i kategori-snippet’et ikke er udskiftet med et reelt id:

<span 
  class="clerk" 
  data-template="@category-page" 
  data-category="INSERT_CATEGORY_ID">
</span>

Outputtet bør indeholde kategoriens id:

<span 
  class="clerk" 
  data-template="@category-page" 
  data-category="257">
</span>

Hvis du har kopieret snippet’et manuelt, skal du sikre dig, at du vælger dit shopsystem i Choose your platform dropdown før du kopierer snippet’et.

Derefter vil det inkludere logikken til at vælge korrekt kategori-id for din platform.

Hvis din platform ikke er på listen, skal du manuelt tilføje logik til at vælge det rigtige kategori-id baseret på din webshops funktionalitet.

Forkert API-nøgle #

Denne fejl vises, hvis den offentlige API-nøgle, du har angivet, ikke matcher nogen konto i Clerk.

For at rette dette - log ind på my.clerk.io og gå til Developers > API Keys.

Her kan du finde Public API Key og tilføje den til din Clerk.js tracking-script, enten direkte i koden eller i dine integrations-indstillinger afhængigt af din platform.

Iubenda-blokering #

Hvis du bruger iubenda til cookie-samtykke med Automatisk blokering aktiveret, kan besøgende der afviser cookies medføre, at iubenda blokerer Clerk.io’s scripts eller requests.

Dette resulterer typisk i to problemer:

  • sale-request’en sendes aldrig, så ordrer bliver ikke sporet eller ikke tilskrevet i Clerk.io.
  • Clerk.io-elementer vises måske slet ikke, eller Clerk.js kan logge en konsol-fejl om at være indlæst flere gange (fordi iubenda omskriver eller udsætter scripts).

Tillad domæner #

For at rette dette, skal Clerk.io tilføjes til allowlist i iubenda, så dens scripts og requests ikke blokeres, når cookies afvises.

Som minimum skal disse domæner tilføjes til iubendas allowlist:

  • cdn.clerk.io (Clerk.js)
  • api.clerk.io (tracking og salgs-requests)

Den præcise UI-betegnelse kan variere, men indstillingen findes typisk under dit iubenda-projekts Cookie Solution-indstillinger for Automatic blocking.

For iubendas egen vejledning, se deres artikel om what to do when Automatic blocking mode blocks too much.

Bekræft rettelsen #

Efter du har opdateret iubendas indstillinger:

  1. Indlæs webshoppen, afvis cookies og åbn browsers konsollen.
  2. Bekræft at Clerk.js er tilgængelig — typeof Clerk må ikke returnere "undefined".
  3. Kør Clerk("debug"), læg en testordre, og bekræft at et sale-request sendes til Clerk.io og returnerer status: "ok".

POS/ERP salgsdata #

For nogle webshops er det relevant at uploade salgsdata fra andre systemer end selve webshoppen.

Fx hvis du vil optimere algoritmen baseret på salg fra en fysisk butik eller B2B-butik.

Clerk skelner ikke mellem ordrer fra forskellige kilder – så længe du kan give et id, et timestamp og en liste af købte produkter, kan de uploades til Clerk.

Det anbefales at bruge CRUD API, da det tillader dig at automatisere opgaven helt.

Ved at implementere disse API-kald sender du ordredata direkte til din butik i Clerk.

Opret blot et POST-kald til /orders-endpoint’et i dit ERP-system eller webshop, planlæg jobben til at køre fx én gang om måneden, og du kan bruge offline ordrer til at booste dine online anbefalinger og søgeresultater.

Alternativt kan du uploade en CSV-fil manuelt, helt uden brug af kode.

Læs mere om CSV-filer her.

Valutaomregning #

Der er flere måder at arbejde med valutaomregning i Clerk.

En simpel måde er beskrevet herunder.

Oversæt valutaer #

Hvis besøgende bruger Google Translate på din webshop, kan prisværdier blive oversat på måder, der ødelægger formatering eller ændrer valutavisning.

For at undgå dette, skal du indpakke pris-output i elementer der ikke skal oversættes.

Anbefalet markup #

Brug både translate="no" og klassen notranslate på price-elementet:

<span class="clerk-price notranslate" translate="no">
  {{ product.price | money }}
</span>

Vises både vejledende pris og udsalgspris, brug samme mønster:

<span class="clerk-old-price notranslate" translate="no">
  {{ product.list_price | money }}
</span>
<span class="clerk-new-price notranslate" translate="no">
  {{ product.price | money }}
</span>

Anvend steder #

  • I dit Clerk Design hvor priser gengives.
  • I andre HTML-wrappere der viser prisværdier.

Dette gør resten af siden oversættelig, mens korrekt pris- og valutaformatering bevares.

Send price-objects #

Clerk skal kende priserne på hvert produkt i de forskellige valutaer.

Nemligst sendes de som string-enkodet JSON-objekt med valuta-ISO som nøgle i dit Data Feed:

"products": [
  {
    "id": 1,
    "name": "Cheese",
    "description": "A nice piece of cheese.",
    "price": 100,
    "list_price": 50,
    "categories": [25, 42],
    "image": "http://example.com/images/products/1.jpg",
    "url": "http://example.com/product/1",
    "on_sale": true,
    // String-encoded JSON examples
    "prices_formatted": "{\"USD\":\"$100\", \"EUR\":\"€87.70\", \"GBP\":\"£68.68\"}",
    "list_prices_formatted": "{\"USD\":\"$120\", \"EUR\":\"€97.70\", \"GBP\":\"£78.68\"}"  
  },
  {
    "id": 2,
    "name": "A pound of nuts",
    "description": "That's a lot of nuts!",
    "price": 150,
    "categories": [1],
    "image": "http://example.com/images/products/2.jpg",
    "url": "http://example.com/product/2",
    "on_sale": false,
    // String-encoded JSON example
    "prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}",
    "list_prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}"
  }
]

Opret formatter #

I Clerk.js kan du definere JavaScript-funktioner, der kan bruges med dine Designs.

Her kan du definere en funktion, der tager dit price-dict som argument, og returnerer prisen for en specifik valuta baseret på frontend-logik.

Husk at erstatte currency med den valgte valuta fra frontend.

Clerk('config', {
  key: 'Your_API_Key',
  formatters: {
      currency_selector: function (price_list) {
      const currency = "EUR";
      price_groups_obj = JSON.parse(price_list)
        return price_groups_obj[currency];
      }
  }
});

Brug formatter #

Efter formatter er defineret, kan den bruges i dit design med nedenstående syntaks:

<div class="price">
   <span class="price">
      {{ product.prices_formatted | currency_selector }}
   </span>
</div>

Kunde-specifikke priser #

Clerk understøtter visning af forskellige priser baseret på den indloggede kunde, enten ved at hente individuelle priser i realtid, eller ved at gemme gruppepriser i produktdata på forhånd.

Dette er gennemgået i detaljer i artiklen Customer Pricing.

HTTP-autentificering #

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

Dette blokerer i mange tilfælde også Clerk-importøren og vil typisk vise en 401 Unauthorized-fejl i synkroniseringsloggen.

Du kan løse det ved at indsætte autentificerings-info i import-URL’en.

I my.clerk.io > Data > Configuration opdaterer du din import-URL således:

http://USER:PASS@www.ewoksRus.com/JSONFEED

Ingen sporede ordrer #

For en fuld guide til, hvordan sales tracking fungerer, opsættes og fejlsøges trin-for-trin, se artiklen Sales Tracking.

Ingen Clerk-effekt #

Hvis salg spores, men ingen vises som Clerk-påvirkede i analytics, se sektionen No Clerk Impact i Sales Tracking-artiklen.

Skjul sliders med få produkter #

Hvis en kategori har meget få produkter, kan en slider se tom eller gentagende ud.

Der er to måder at håndtere dette på:

Clerk Design-betingelse #

Brug en betingelse omkring slider-markup, så den kun vises, hvis der kommer nok produkter retur.

{% if products.length >= 6 %}
  <div class="clerk-slider">
    {% for product in products %}
      <!-- product card -->
    {% endfor %}
  </div>
{% endif %}

Dette er hurtigt at implementere, men det afhænger stadig af Clerks svar for at bestemme om slideren skal være synlig. Det koster derfor stadig et kald til API’et, selv hvis slideren ikke vises.

Serverside-betingelse #

Hvis din platform allerede kender kategoriens produktantal, kan du i din template vælge, om Clerk-snippet’et overhovedet skal vises.

{% if category.product_count >= 6 %}
  <span class="clerk" data-template="@category-page-slider"></span>
{% endif %}

Dette er at foretrække, fordi slideren kun initialiseres, når der er nok produkter, og adfærden følger helt din webshops egen logik for kategorier.

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

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

De to vigtigste forskelle i Clerk.js 2 er:

  • Designs i my.clerk.io bruger Liquid, men kan også nemt laves i 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 lave dine Clerk.js 2-designs ved at oprette dem på ny i Design Editor, eller konvertere dine gamle kode-designs til Liquid som beskrevet nedenfor.

Design Editor-valg #

  1. Gå til my.clerk.io > Recommendations/Search > Designs > New Design.

  2. Vælg en design-type der ikke er Blank og giv den et navn. Vi anbefaler at tilføje “V2”, så det er tydeligt, at du bruger Clerk.js 2-designs.

  3. I Design Editor kan du redigere eller tilføje elementer til designet.

  4. Klik Publish Design når du er færdig, og gå til Step 2 i guiden.

  5. Gå til Recommendations/Search > Elements og skift dit Clerk-element til at bruge det nye Design, og klik Update Element.

  6. Dette gør, at de midlertidigt ikke vises på din webshop, indtil du har indsat Clerk.js 2 som beskrevet senere i denne guide.

Konvertering af designs #

Da Clerk.js 2 bruger det mere fleksible template-sprog Liquid, skal du konvertere dine Designs til dette sprog.

  1. Gå til my.clerk.io > Recommendations/Search > Designs > New Design.

  2. Vælg Blank > Code og giv den et navn. Vi anbefaler at tilføje “V2”, så det er tydeligt, at du bruger Clerk.js 2-designs.

  3. Klik Create Design.

  4. Du får et blankt design med produkt-HTML og CSS, du kan bruge.

  5. Gå tilbage til design-overview og klik Edit Design for dit Clerk.js 1 Design. Gør dette gerne i en ny fane, så du nemt kan kopiere koden.

  6. Kopiér den gamle Clerk.js 1-design-kode over i dit nye Clerk.js 2-design.

    • Du vil bemærke, der ikke er Container Code i dit nye design.

    • Det er fordi Liquid bruger for-loops til at vise produkterne.

    • Kopiér din gamle Product HTML inde i for-loop, din gamle Container Code omkring og kopier CSS’en med.

  7. Konverter designet til Liquids syntaks. Hovedforskellen er, at gamle designs brugte {{ formatter attribute }} mens v2 bruger {{ product.attribute | formatter }}.

  8. Gå alle dine attributter igennem og ændr dem til det nye format.

  9. Hvis du bruger {{#if}} eller {{#is}}-statements, skal disse konverteres til den nye syntaks: {% if product.attribute %} {% else %} {% endif %}.

  10. Slet id="{{ $id }}" og klassen :target fra container-koden i Clerk.js 2-versionen, da de ikke længere er understøttet.

  11. Nedenfor ses eksempel på Clerk.js 1-design og den fuldt konverterede version:

Clerk.js 1 Design #
// Product HTML
<li class="clerk-product">
    <a href="{{ url }}">
        <img src="{{ image }}" />
        <div class="clerk-product-name">{{ name }}</div>
        <div class="clerk-price-wrapper">
            {{#if list_price}}
                <div class="clerk-old-price">
                    <s>Price {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Price {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Price {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Buy Now</div>
</li>

// Container Code
<h2>{{ headline }}</h2>
<ul id="{{ $id }}" class=":target clerk-slider"></ul>

<!-- This code creates the slider by its ID. -->
<script type="text/javascript">
    Clerk.ui.slider("{{ id }}").init();
</script>
Clerk.js 2 Design #
<h2>{{ headline }}</h2>

<ul class="clerk-slider">
    {% for product in products %}
    <li class="clerk-product">
        <a href="{{ product.url }}">
            <img src="{{ product.image }}" />
            <div class="clerk-product-name">{{ product.name }}</div>
            <div class="clerk-price-wrapper">
                {% if product.list_price %}
                    <span class="clerk-old-price"><s>Price {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Price {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Price {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Buy Now</div>
        </a>
    </li>
    {% endfor %}
</ul>

  1. Klik Update Design for at gemme ændringerne.

  2. Gå til Recommendations/Search > Elements og ændr din Element-blok til at bruge det nye Design.

  3. Klik Update Element. Dette gør, at de midlertidigt ikke vises på din webshop, indtil du er færdig med Step 2. Vælg det nye design for alle relevante Elements.

Udskift script #

  1. Find template-filen der bruges til at vise alle sider på webshoppen, hvor det oprindelige Clerk.js-script ligger nederst.

  2. Fjern det gamle Clerk.js-script fra filen. Det vil ligne dette:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
    window.clerkAsyncInit = function() {
        Clerk.config({
            key: 'public_api_key'
        });
    };
    (function(){
        var e = document.createElement('script'); e.type='text/javascript'; e.async = true;
        e.src = document.location.protocol + '//api.clerk.io/static/clerk.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    })();
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

  1. Gå til my.clerk.io > Developers > Tracking Code. Her findes Clerk.js 2-koden.

  2. Kopiér denne kode, indsæt den lige før </head>-tagget i templaten og gem.

Tillykke! Du kører nu med den langt forbedrede Clerk.js 2-opsætning!

Du finder dokumentation for Clerk.js 2 her.

Håndtering af require.js #

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

I nogle opsætninger forhindrer Require.js Clerk.js i at blive indlæst, hvilket betyder at ingen sliders eller søgeresultater vises.

Konsol-fejlen vil lyde sådan:

Uncaught ReferenceError: Clerk is not defined

Der er to måder at håndtere Require.js. Begge kræver ændringer i tracking-scriptet, som du har indsat nederst på dine sider.

Inkludér i Require.js #

Den bedste metode er at prøve at få Require.js til at genkende Clerk.

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

Ignorér Require.js #

Hvis ovenstående ikke virker, kan Require.js ignoreres.

Indsæt window.__clerk_ignore_requirejs = true; øverst i tracking-scriptet.

Efter en af disse løsninger vil Require.js nu være kompatibelt med Clerk.

Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.