Enhver (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. Det 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 laver API-opkald for.

Snippets #

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

Det bruger derefter attributterne fra snippetet til at opbygge et API-opkald, mens det 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 Design, som også refereres af snippetet.

Clerk.js bruger Liquid designs til at gengive HTML med de data, der returneres af API’en. Disse formateres som scripts, refereret ved 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 code 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 på en Content blok i data-template.

Injektion #

Injektion 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-vælger til at injicere snippetet i, og Clerk.js vil automatisk tilføje det ved sideindlæsning.

Læs mere om Injektion her.

Konfiguration #

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

Besøgs-ID’er #

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 session tracking ved at sætte besøgende til null.

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

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

// Deaktivering af besøgs tracking
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 ønsker du måske kun at 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 design. 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 konverteringskurs.

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>

E-mail Tracking #

Clerk.js kan automatisk indsamle e-mails i kundens session til at blive brugt til at personalisere 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 ind 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 vælger-elementer, efterhånden som DOM’en ændrer sig, så længe de allerede er blevet gengivet med Clerk("content", "SELECTOR") én gang.

Denne adfærd fortsætter, indtil der sker en fuld sideopdatering.

Fejlfinding #

Clerk.js har en indbygget fejlfindingstilstand, 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-fejlmeddelelser 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 opbygge.

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øgeside #

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

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

<span 
  class="clerk"
  
  data-api="search/search"
  data-limit="40"
  data-labels='["Søgeside"]'
  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);">
          		Vis flere resultater
    		</div>
    {% endif %}
  </div>
</span>

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

Kategori Side #

En velstruktureret kategoriside er nøglen til en succesfuld eCommerce-virksomhed. Vores Kategori Side gør denne brugeroplevelse hurtig og nem at opbygge. 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='["Kategori Side 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);">
          		Vis flere resultater
    		</div>
    {% endif %}
  </div>
</span>

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

Facetter #

Clerk.js kommer med indbygget support til dynamisk facetteret navigation for både søgning og kategorier. Enhver produkattribut, 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="Vis flere"
  data-facets-searchbox-text="Søg efter "
  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 deres mus 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 hensigt 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">Hej, verden!</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 vil 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-vælger 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 begivenhedshåndterere, 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 #

Injektion #

Konfiguration #

Besøgs-ID’er #

Sprog #

Designfunktioner #

Formatters #

Globals #

Konfiguration #

Design #

Output #

E-mail Tracking #

Brugerdefineret Rendering #

Fejlfinding #

UI Kit #

Instant Search #

Søgeside #

Kategori Side #

Facetter #

Exit Intent #

Popup #

Udelukkelse af produkter #

Udelukkelse af specifikke ID’er #

Undgåelse af duplikater #

Begivenheder #