Any (webshop)

Clerk.js

Integrer Clerk.io i enhver frontend med et letvægts JS-bibliotek.

Oversigt #

Clerk.js er et JavaScript-bibliotek, der forenkler integrationen af vores API med frontend. Med kun 37,7kb er det en super letvægtsløsning.

Der er tre fordele ved at bruge Clerk.js:

Det er robust, da det indlæses asynkront. Dette betyder, at resten af siden ikke er afhængig af et API-svar, før den indlæses.
Det er ofte hurtigere, da din server kan begynde at gengive siden parallelt med, at Clerk.js foretager opkald og gengiver resultater.
Besøgs- og kliksporing håndteres automatisk for alle resultater vist af Clerk. Dette kræver ingen cookies, da vi genererer en hash-værdi af besøgendes IP og brugeragent, kombineret med et unikt butiksalt, der roterer hver 30. dag.

Clerk.js indlæses med et initialiseringsscript tilføjet til header på hjemmesiden:

<!-- Start af 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_api_key'
  });
</script>
<!-- Slut af Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Det indlæser biblioteket fra vores CDN og lader dig få adgang til dets funktionaliteter gennem Clerk-objektet og konfigurerer Clerk.js med API-nøglen, så det allerede ved, hvilken butik det foretager API-opkald for.

Snippets #

Når siden er indlæst, scanner Clerk.js den for eventuelle snippets med klassen “clerk”.

Den bruger derefter attributterne fra snippetet til at opbygge et API-opkald, mens den henter API-nøglen fra konfigurationen i initialiseringsscriptet.

<span
  class="clerk"
  data-api="recommendations/popular"
  data-limit="10"
  data-template="@clerk-product-template">
</span>

Visualerne håndteres af Designet, som også refereres af snippetet.

Clerk.js bruger Liquid designs til at gengive HTML med de data, der returneres af API’en. Disse er formateret som scripts, refereret af deres ID i data-template i dit snippet.

<span class="clerk"
     data-api="search/search"
     data-query="jedi"
     data-limit="20"
     data-template="#clerk-template">
</span>

<script type="text/x-template" id="clerk-template">
  <h1>Search result for {{ query }}.</h1>
  {% for product in products %}
    <div class="product">
      <h2>{{ product.name }}</h2>
      <img src="{{ product.image }}" />
      <a href="{{ product.url }}">Buy Now</a>
    </div>
  {% endfor %}

  <a href="javascript:Clerk('content', '#{{ content.id }}', 'more', 20);">Load More Results</a>
</script>

Snippets kan også forenkles til kun at inkludere en reference til en Content blok ved at bruge syntaksen data-template="@content-block-id":

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

Design håndteres derefter med Design Editor eller med Liquid HTML-kode på en brugervenlig måde fra my.clerk.io.

Dine snippets skal kun indeholde klassen clerk, eventuelle side-specifikke oplysninger som produkt-ID’er og en reference til ID’et for en Content-blok i data-template.

Injection #

Injection er en funktion, der giver dig mulighed for at indsætte indholdssnippets i din hjemmeside uden at skulle tilføje det manuelt. I stedet vælger du blot en CSS-selektor til at injicere snippetet i, og Clerk.js vil automatisk tilføje det ved sideindlæsning.

Læs mere om Injection her.

Konfiguration #

Clerk.js tillader en række konfigurationer, der ændrer, hvordan det fungerer.

Visitor IDs #

Som standard genererer Clerk.js anonyme besøgs-ID’er, der bruges til at spore sessionerne.

Hvis kunderne accepterer cookies, kan Clerk.js konfigureres til at placere en vedholdende cookie med besøgs-ID’et, hvilket muliggør sporing over en længere periode.

Hvis du foretrækker at administrere session-ID’er manuelt, kan du konfigurere visitor parameteren, som Clerk bruger i API-opkald. Alternativt kan du helt deaktivere sessionssporing ved at sætte visitor til null.

// Vedholdende besøgs-ID
Clerk('config', {
  visitor: 'persistent'
});

// Brugerdefineret besøgs-ID
Clerk('config', {
  visitor: 'ABC123'
});

// Deaktivering af besøgs-sporing
Clerk('config', {
  visitor: null
});

Sprog #

Konfigurerer Clerk.js med det skrevne sprog på hjemmesiden. Dette bruges til, at Clerk.io korrekt kan håndtere grammatikregler i søgning og til at hente de korrekte oversættelser, når du bruger multi-language feeds.

Clerk('config', {
  language: 'italian'
});

Designfunktioner #

Clerk.js understøtter tilføjelse af Formatters og Globals, som kan bruges til at oprette brugerdefineret javascript-funktionalitet til dine designomfang.

Formatters #

Disse bruges til at påvirke eller ændre attributter. For eksempel, du vil måske kun vise de første 40 tegn af en beskrivelse, eller du skal muligvis beregne en specifik rabatprocent baseret på den type kunde, der er logget ind.

Globals #

Disse er beregnet til at blive brugt med frontend-data, som du ønsker at få adgang til i designs. Dette kunne være eksempler som det resterende beløb, der er nødvendigt for at opnå gratis fragt, navnet på en logget ind kunde, et valutasymbol eller en vekselkurs.

Nedenfor er et eksempel på konfiguration af formatters og globals.

Konfiguration #

Clerk('config', {
  formatters: {
    uppercase: function(string) {
        return string.toUpperCase();
    }
  },
  globals: {
    currency_symbol: '$'
  }
});

Design #

<div class="name">{{ product.name | uppercase }}</div>
<div class="price">{{ currency_symbol }}{{ product.price }}</div>

Output #

<div class="name">GREEN LIGHT SABER</div>
<div class="price">$1999.99</div>

Email Tracking #

Clerk.js kan automatisk indsamle e-mails i kundens session for at blive brugt til at personliggøre e-mailanbefalinger, selvom de endnu ikke har afgivet en ordre.

Dette gøres ved at konfigurere Clerk.js med collect_email: true, som vist her:

<script type="text/javascript">
  Clerk('config', {
    key: 'insert_api_key',
    collect_email: true
  });
</script>

Med dette vil Clerk.js overvåge alle inputfelter på hjemmesiden og logge det med log/email, når en besøgende skriver en e-mailadresse i et af dem:

https://api.clerk.io/v2/log/email?payload={"email":"test@test.com","key":"insert_api_key","visitor":"auto"}

Brugerdefineret rendering #

Dette bruges primært med Single Page Apps (SPA), Progressive Web Apps (PWA) og andre applikationer, der ikke bruger traditionelle sideindlæsninger.

Clerk.js gengiver alle elementer med klassen clerk, men andre klasser kan bruges til at tilpasse gengivelsen som brugerdefinerede vælgere.

Som standard kræver Clerk, at du kører Clerk("content", "SELECTOR") for at gengive indhold hver gang det skal vises.

Ved at tilføje auto_init_custom_selectors: true til konfigurationen, gør Clerk.js automatisk initialisering af eventuelle brugerdefinerede selektorelementer, når DOM’en ændrer sig, så længe de allerede er blevet gengivet med Clerk("content", "SELECTOR") én gang.

Denne adfærd fortsætter, indtil en fuld sideopdatering finder sted.

Fejlfinding #

Clerk.js har en indbygget debug-tilstand, der logger forskellige oplysninger til konsollen, afhængigt af det niveau, du vælger. Det konfigureres direkte i URL’en:

https://yourwebsite.com/#clerkjs:debug.level=all&debug.enable=true

Debuggeren har 4 parametre:

Konfiguration	Funktion	Type
`level`	Definerer logniveauet. Kan være enten `log`, `warn` eller `error`. Som standard er niveauet `warn`.	`string`
`collect`	Definerer, om loggeren skal bruge browserens lager, eller bruge midlertidig lager til at gemme logbeskeder. Standard er `true`.	`bool`
`enable`	Aktiverer clerk debug-beskeder til browserens konsol. Standard er `true`.	`bool`
`clear`	Rydder logbeskederne.	`bool`

UI Kit #

Clerk.js inkluderer et sæt UI-værktøjer til vigtige elementer, der kan bruges til at forbedre brugeroplevelsen. Disse sparer ofte udviklingstid til brugerdefinerede opsætninger.

Instant Search #

En nøglekomponent i en god e-handels søgeoplevelse er at få resultater straks, når du begynder at skrive. Vores Instant Search UI-komponent gør denne brugeroplevelse hurtig og nem at bygge.

Enhver Clerk.io-indhold kan teoretisk set laves til en Instant Search-komponent, men det fungerer bedst som en dropdown, der viser søgeresultater.

<span 
  class="clerk"
  
  data-api="search/predictive"
  data-limit="6"
  data-labels='["Instant Search"]'
      
  data-instant-search="INSERT_CSS_SELECTORS_HERE">
  
  <dl class="product-search-result-list">
    <dt>Produkter der matcher <i>{{ query }}</i></dt>
    
    {% for product in products %}
      <dd class="product clerk-instant-search-key-selectable">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Buy Now</a>
      </dd>
    {% endfor %}
  </dl>
</span>

Læs mere om Instant Search UI-værktøjet her.

Søgning Side #

En nøglekomponent i en god e-handels søgeoplevelse er at få gode søgeresultater. Vores Søgning Side gør denne brugeroplevelse hurtig og nem at bygge.

Søgning Siden lader dig oprette en fuld side, der viser de bedst mulige matches for en given forespørgsel.

<span 
  class="clerk"
  
  data-api="search/search"
  data-limit="40"
  data-labels='["Search Page"]'
  data-query="INSERT_QUERY_HERE"
  data-orderby="INSERT_SORTING_ATTRIBUTE"
  data-order="asc_OR_desc">>
  
  <div class="product-search-result-list">
    <div>Produkter der matcher <i>{{ query }}</i></div>
    
    {% for product in products %}
      <div class="product">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Buy Now</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
          		Show More Results
    		</div>
    {% endif %}
  </div>
</span>

Læs mere om Søgning Side UI-værktøjet her.

Kategori Side #

En velstruktureret kategoriside er nøglen til en succesfuld e-handelsvirksomhed. Vores Kategori Side gør denne brugeroplevelse hurtig og nem at bygge. Dette lader dig oprette en fuld side, der viser de bedst mulige resultater for enhver kategori.

<span 
  class="clerk"
  
  data-api="recommendations/category/popular"
  data-limit="40"
  data-labels='["Category Page Grid"]'
  data-category="INSERT_CATEGORY_ID"
  data-orderby="INSERT_SORTING_ATTRIBUTE"
  data-order="asc_OR_desc">
  
  <div class="product-category-result-list">
    {% for product in products %}
      <div class="product">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Buy Now</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
          		Show More Results
    		</div>
    {% endif %}
  </div>
</span>

Læs mere om Kategori Side UI-værktøjet her.

Facetter #

Clerk.js kommer med indbygget støtte til dynamisk facetteret navigation for både søgning og kategorier. Enhver produktegenskab, du sender til os, kan bruges som facetter.

Her er et eksempel på grundlæggende brug:

<div id="clerk-search-filters"></div>

<span 
  class="clerk" 
      
  data-template="@search-page" 
  data-query="shoes"
  
  data-facets-target="#clerk-search-filters" 
  data-facets-attributes='["price","categories","brand"]'
  data-facets-titles='{"price": "PRICE-TRANSLATION", "categories": "CATEGORIES-TRANSLATION", "brand": "BRAND-TRANSLATION"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="View More"
  data-facets-searchbox-text="Search for "
  data-facets-design="133995">
</span>

Læs mere om Facetter UI-værktøjet her.

Exit Intent #

Exit intent-popup’en reagerer, når en besøgende forsøger at forlade din side ved at svæve med musen nær toppen af browservinduet. Den popper op og viser interessante produkter, hvilket muligvis konverterer en forladende besøgende til en køber.

Enhver Content-blok kan aktiveres ved en besøgendes intention om at forlade ved at tilføje attributten data-exit-intent="true" til snippetet.

<span
  class="clerk"
  
  data-api="recommendations/visitor/complementary"
  data-limit="20"
  data-labels='["Exit Intent / Popup"]'
  
  data-exit-intent="true">
</span>

Læs mere om Exit Intent UI-værktøjet her.

UI Kit indeholder et simpelt popup-bibliotek til nemt at oprette enkle, men brugervenlige popups med ethvert indhold. Ethvert HTML-element på din hjemmeside med klassen clerk-popup vil blive vist som en popup.

<div id="my-popup" class="clerk-popup">Hello, world!</div>

<script type="text/javascript">
  var my_popup = Clerk('ui', 'popup', '#my-popup');
  
  // vis popup
  my_popup.show(); 
  /* eller */ 
  Clerk('ui', 'popup', '#my-popup', 'show');
  
  // skjul popup
  my_popup.hide(); 
  /* eller */ 
  Clerk('ui', 'popup', '#my-popup', 'hide');
</script>

Læs mere om Popup UI-værktøjet her.

Udelukkelse af produkter #

Clerk.js har to forskellige måder at udelukke produkter på, afhængigt af om du ønsker at udelukke specifikke ID’er eller undgå at vise duplikerede produkter mellem forskellige sliders.

Udelukkelse af specifikke ID’er #

Tilføj blot attributten data-exclude til snippetet. Indholdet af data-exclude skal være en liste over de produkt-ID’er, du ikke ønsker at vise, dvs. produkterne i kundens indkøbskurv eller en liste over produkter, de ikke har lov til at se.

<span class="clerk"
  data-template="@clerk-complementary"
  data-exclude="[45654, 3244, 12352]">
</span>

Undgåelse af duplikater #

Dette gøres ved at tilføje attributten data-exclude-from på Clerk-blokken, hvor som helst du ønsker at fjerne duplikaten fra. Værdien af attributten skal være en CSS-selektor for de andre snippet(s) for at forhindre duplikater.

I eksemplet nedenfor udelukker .clerk-2 ethvert produkt, der er i .clerk-1, og .clerk-3 udelukker ethvert produkt, der er i enten .clerk-1 eller .clerk-2.

<span class="clerk clerk-1"
  data-template="@clerk-banner-1">
</span>
 
<span class="clerk clerk-2"
  data-exclude-from=".clerk-1"
  data-template="@clerk-banner-2">
</span>
 
<span class="clerk clerk-3"
  data-exclude-from=".clerk-1,.clerk-2"
  data-template="@clerk-banner-3">
</span>

Læs mere om Udelukkelse af produkter UI-værktøjet her.

Begivenheder #

Når du bygger mere tilpassede opsætninger, vil du ofte have brug for at reagere på eller ændre resultaterne fra Clerk, før de gengives. Dette er, hvor Begivenheder er nyttige.

Begivenheder giver dig mulighed for at opsætte begivenhedslyttere, der kører kode på specifikke tidspunkter før, under eller efter Clerk.js gengiver sine resultater.

Et almindeligt eksempel er at indlæse brugerdefinerede priser for en logget ind kunde i et B2B-setup. En begivenhed kan køre straks efter Clerk’s API er færdig med at gengive, hvilket giver dig mulighed for at hente brugerdefinerede priser for en kunde og tilføje dem til produktelementerne:

var customer_id = INSERT_CUSTOMER_ID;
Clerk("on", "rendered", function(content, data){
  for (i = 0; i < data.product_data.length; i++) {
      var product = data.product_data[i];
        var custom_price = FETCH_PRICE_FROM_SERVER(product.id,customer_id);
        let price_container = document.querySelector(`[data-clerk-product-id='${product.id}'] .clerk-price`);
        price_container.innerText = custom_price;
    }
})

Læs mere om Begivenheder her.

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

Clerk.js

Oversigt #

Snippets #

Injection #

Konfiguration #

Visitor IDs #

Sprog #

Designfunktioner #

Formatters #

Globals #

Konfiguration #

Design #

Output #

Email Tracking #

Brugerdefineret rendering #

Fejlfinding #

UI Kit #

Instant Search #

Søgning Side #

Kategori Side #

Facetter #

Exit Intent #

Popup #

Udelukkelse af produkter #

Udelukkelse af specifikke ID’er #

Undgåelse af duplikater #

Begivenheder #