Any (webshop)

Clerk.js

Oversigt #

Clerk.js er et JavaScript-bibliotek, der forenkler integrationen af vores API med frontend. 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øgende- og kliksporing håndteres automatisk for alle resultater, der vises af Clerk. Dette kræver ingen cookies, da vi genererer en hash-værdi af den besøgendes IP og useragent kombineret med et unikt storesalt, der roterer hver 30. dag.

Clerk.js er indlæst med et letvægtssporingsscript, der er føjet til Overskrift på webstedet.

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

Dette script indlæser biblioteket fra vores CDN og giver dig adgang til dets funktioner via " Ekspedient"-objektet. Scriptet konfigurerer Clerk.js med API-nøglen, så det allerede ved, hvilken butik det foretager API-opkald til.

Når siden indlæses, scanner Clerk.js den for eventuelle uddrag med klassen “clerk”.

Derefter bruger den attributterne fra uddraget til at opbygge et API-kald, 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>

Den visuelle repræsentation håndteres af designet, som der også henvises til i uddraget.

Clerk.js bruger Liquid -designs, som kendes fra Shopify, til at gengive HTML med de data, der returneres af API’en. Disse skal formateres som scripts med et ID, som du kan henvise til 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 indeholde en henvisning til en Indhold inden for my.clerk.io.

Designs håndteres derefter med en visuel editor eller med flydende HTML-kode ligesom i frontend.

Med denne tilgang udføres det meste af konfigurationen på en brugervenlig måde fra admin -panelet. Dine snippets behøver kun at indeholde klassen “clerk”, eventuelle sidespecifikke oplysninger som produkt-id’er og en henvisning til id’et for en indholdsblok i “data-template”.

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

Konfiguration #

Clerk.js giver mulighed for en række forskellige konfigurationer.

Hvis du foretrækker at administrere sessions-ID’er manuelt, kan du som tidligere nævnt konfigurere den besøgsparameter, som Clerk bruger i API-kald. Alternativt kan du slå sessionssporing helt fra ved at indstille visitor til null.

// Custom visitor ID
Clerk('config', {
  visitor: 'ABC123'
});

// Disabling visitor tracking
Clerk('config', {
  visitor: null
});

Designfunktionalitet #

Du kan tilføje Formatters og Globaler til dit designområde.

Formatters bruges til at påvirke eller ændre attributter. Det kan f.eks. være, at du kun vil vise de første 40 tegn i en beskrivelse, eller at du vil beregne en bestemt rabatprocent baseret på den type kunde, der er logget ind.

Globaler er beregnet til at blive brugt med frontend-data, som du vil have adgang til i designs. Det kan blandt andet være det resterende beløb, der skal til for at opnå fri fragt, navnet på en logget kunde, et valutasymbol eller en omregningskurs.

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

// Use in Design

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

Sporing af e-mails #

Clerk.js kan automatisk indsamle e-mails i n kundens browsing session til brug for Forladt kurv e-mails og andre e-mail-kampagner.

Du skal blot konfigurere Clerk.js med indsamle_email: true som vist her:

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_api_key',
    collect_email: true
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

UI Kit #

Clerk.js indeholder et sæt UI-værktøjer til vigtige elementer som dropdown til søgning og Facetter på en søgeside.

F.eks. kan du med dropdown-kittet til søgning oprette et snippet, der overvåger inputfeltet via en CSS-selektor og viser en dropdown med indhold, der matcher den besøgendes søgning.

<span
  class="clerk"

  data-api="search/predictive"
  data-limit="6"

  data-instant-search="INSERT_CSS_SELECTORS_HERE">

  <dl class="product-search-result-list">
    <dt>Products matching <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>

Facetter lader dig udvide din eksisterende søgeside til at omfatte filtre for produkter på søgesiden.

<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": "YOUR-PRICE-LABEL-TRANSLATION-GOES-HERE", "categories": "YOUR-CATEGORIES-LABEL-TRANSLATION-GOES-HERE", "brand": "YOUR-BRAND-LABEL-TRANSLATION-GOES-HERE"}'
  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>

Events #

Når man bygger mere skræddersyede opsætninger, f.eks. til B2B-virksomheder, er man ofte nødt til at reagere på eller ændre resultaterne fra Clerk, før man gengiver dem.

Det er her, Begivenheder er nyttig.

Events giver dig mulighed for at opsætte event-lyttere, der kører kode på bestemte tidspunkter før, under eller efter, at Clerk.js gengiver sine resultater. En almindelig brugssag er, når du skal tjekke, hvilken bruger der er logget ind, og hente specifikke priser for deres kundegruppe eller fjerne produkter, som de ikke må se.

For eksempel kan en begivenhed køre umiddelbart efter, at Clerk’s API svarer, så du kan kalde din prisdatabase med kundens ID og de produkter, der returneres af Clerk, for at hente de korrekte priser, før Clerk.js gengiver resultaterne.

Clerk("on", "response", function(content, data) {
    let products = data['product_data'];
    const product_ids = data['result'];
    const customer_prices = getUniquePrices(customer_group, product_ids); // {"27746": 310.25, "26994": 124.50}
    products.forEach(product =>
      product['price'] = customer_prices[product['id']]) // Add customer price based on product ID;
  })

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