Enhver (webshop)

FAQ

Svar på ofte stillede spørgsmål om brugerdefinerede 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 siden som én enkelt side, i stedet for at indlæse individuelle sider som normalt.

Når en side indlæses for første gang, skyder Clerk.js-biblioteket automatisk en funktion af for at gengive alle Element-blokke på siden.

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

Match Clerk.js-initialisering og kontekstopdateringer med hvordan din app indlæser hvert view.

Inkluder Clerk.js #

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

Derefter vil biblioteket være tilgængeligt under hele sessionen.

Inkludér det lige før </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 -->

Opdatér kontekst #

Hvis en recommendations-blok forbliver på siden, mens besøgende navigerer, skal du opdatere Clerk.js-konteksten, så den matcher det nuværende view. Allerede-initialiserede blokke, hvis ID’er kommer fra kontekst, genindlæses automatisk når deres relevante værdi skifter.

Når f.eks. en besøgende åbner kategori 276, kald:

Clerk('context', 'category', '276');

Erstat 276 med kategori-ID’et fra din app. At sætte en uændret værdi genindlæser ikke blokken. Dette fungerer uden DOM-ændring og med DOM-observation slået fra.

Blokke hvis ID’er kommer fra sideelementer, og popups, genindlæses ikke ved kontekstændringer.

Se Context Reloads for understøttede nøgler, manglende værdier, events, og hvordan man slår automatisk genindlæsning fra.

Kontroller rendering #

Som standard renderer Clerk.js alle elementer med klassen clerk, uanset om det bliver indsat under den indledende sideindlæsning eller når DOM’en muterer.

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

Alternativt kan du styre rendering 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.

  • Kør Clerk("content", "SELECTOR") for at rendere det.

Ved denne manuelle rendering, når besøgende forlader siden, fjern snippetten og rendér den igen hvis besøgende vender tilbage til samme side.

Dette sikrer, at Clerk.js ikke opfatter snippetten som allerede rendereret, hvilket kan forhindre visualisering.

En kontekst-afledt blok, der forbliver på siden, kan i stedet bruge de automatiske genindlæsninger beskrevet ovenfor.

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 egne selectorer efter første rendering.

Siderespons #

At tilføje et eksternt værktøj som Clerk.js vil øge tiden det tager at indlæse dit site, men det er uendeligt lille sammenlignet med den stigning i konverteringer det giver.

Nedenfor forklares hvad Clerk.js tilføjer til sideindlæsningen.

Ydeevne #

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

Desuden indlæser det elementer asynkront, så resten af siden fortsætter indlæsningen mens Clerk.js renderer indhold.

En stigning i indlæsningstiden skyldes ofte, at flere billeder indlæses end tidligere, da Clerk’s søgeresultater og recommendations fungerer bedst med visuel appel.

For at minimere ekstra indlæsningstid anbefaler vi at bruge billeder i webp-format, der har en opløsning der matcher størrelsen de har i Clerk-elementer.

Hvis f.eks. billeder i recommendations har en opløsning på 400x400px i desktopvisning, bør du sende billeder i maksimum 420x420px eller lignende.

Google Page Speed #

Hvis du bruger Google Page Speed Insights eller et lignende værktøj for at analysere dit sites ydeevne, 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 Clerk-resultater på ethvert website.

Clerk.js indeholder mange funktioner til håndtering af tracking og UI-komponenter som Instant Search, sliders, popups og mere.

Når vi tilføjer nye UI-features eller laver forbedringer, bliver de inkluderet i Clerk.js og skal downloades af slutbrugeren for at blive brugt.

En cache-udløbstid på 60 minutter betyder, at når vi udgiver nye funktioner, vil de være tilgængelige for alle inden for maks. 60 minutter.

Jo længere cachetid, desto længere går der, før alle får adgang til de nyeste funktioner.

Det vigtigste er, at slutbrugere kun behøver at downloade Clerk.js én gang, når nye features er tilgængelige.

Cache-udløbstiden på 60 minutter betyder blot, at brugerens browser tjekker ind hos Clerk hver 60. minut.

Hvis der ikke er ændret noget i Clerk.js, bliver intet downloadet.

Cache-udløbstiden på 60 minutter er dermed et kompromis mellem at minimere web-requests og se nye funktioner og forbedringer.

De fleste sessioner varer kortere end 60 minutter, så anmodningen foretages kun én gang pr. session.

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

CLS-indflydelse #

Cumulative Layout Shift (CLS) kan negativt påvirke SEO og brugeroplevelse når dynamisk indsat indhold forskyder elementerne på en side.

I nogle tilfælde, blandt andre faktorer, kan Clerk bidrage til CLS-scoren.

Du kan læse mere om CLS her.

Følg denne retningslinje kun, hvis din CLS-score er højere end 0.2 og Clerk-elementer befinder sig over folden.

For at forhindre indhold i at flytte sig, er det nødvendigt at reservere en pladsholder til Clerk recommendations før Clerk.js injicerer dem.

Derfor skal vi tilføje en minimums-højde baseret på det forventede indhold.

Eksempel på kode:

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

Foretagelse af API-kald #

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

Denne funktion tager tre argumenter:

  • Et API-endpoint

  • En JSON-ordbog med parametre

  • En callback-funktion til at håndtere svaret

Forespørgsler #

Nedenfor er et eksempel-script, der forespørger de 10 mest populære produkter og logger svaret i konsollen.

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 fra API’en.

Nedenfor er et eksempel, der opretter en liste af 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);
      }
  }
)

Tilføj-til-kurv knapper #

Disse knapper fungerer forskelligt for hver platform, og funktionaliteten kan variere afhængig af de plugins, du bruger.

Da Clerk’s designs består af HTML & CSS, kan du som regel tilføje denne funktionalitet, hvis du forstår, hvordan det virker på dit site.

Generel tilgang #

Nogle tilføj-til-kurv knapper kræver at JavaScript afvikles for at fungere.

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

Se hvordan du gør det i vores developer docs her.

Undersøg tilføj-til-kurv knappen for at identificere den kode, der er knyttet til den, f.eks. på en kategoriside.

Koden vil oftest være et <div> eller en button.

Kopier hele knap-HTML’en.

Kopier og indsæt denne kode i dit Design.

Nu skal du identificere variablerne i koden.

Oftest skal du finde hvor koden bruger:

  • Produkt-ID

  • Produkt-antal

Erstat værdierne for produkt-ID’et med Liquid-variablerne for disse datapunkter.

ID’et vil altid være {{ product.id }} og antallet vil variere afhængig af hvordan du sender dataen.

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

Indsæt din kode i HTML’en på dit Design og test, at det virker.

Eksempel #

Tilføj-til-kurv-knappen bruger et <div> med klassen button-container.

Antallet findes i cart-linket efter /cart?add= og Produkt-ID findes lige efter &id_product=.

Produkt-ID refereres også i data-id-product og produkt-antal refereres i .data-minimal_quantity.

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

Med disse ændringer vil den endelige tilføj-til-kurv knap se sådan 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>

Konsolfejl #

Clerk.js logger mange fejl i konsollen, som du kan bruge til at fejlsøge problemer.

Ved at klikke på fejllinket får du flere oplysninger om hvad der gik galt, som du kan bruge til at fejlsøge selv, eller sende til vores supportteam som hjælper dig.

Nedenfor finder du en liste over de mest almindelige fejl.

Ukendt indhold #

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

For at rette det, kontrollér at navnet i embed-koden matcher et Element-blok du har oprettet i my.clerk.io.

Du kan klikke Edit Element på ethvert Element for at se hvad referencen skal være.

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 denne klasse til at identificere elementer der skal rendres.

For at fixe det, giv klassen et andet navn, fx clerk-product.

Ugyldigt produkt-argument #

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

Hvis dine produkt-ID’er f.eks. er heltal, skal de også være det i embed-koden.

Husk også klammerne om ID’et, så det er en liste.

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

Ugyldigt kategori-argument #

Denne fejl betyder, at det indtastede ID for en kategori har en forkert type eller syntaks.

Ofte sker det, hvis placeholderen i kategori-embedkoden ikke er udskiftet med et rigtigt ID:

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

Kode-outputtet skal indeholde ID’et på kategorien:

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

Hvis du har kopieret snippetten manuelt, så vælg din shop-platform i Choose your platform dropdown før du kopierer snippetten.

Den vil så ændre sig til at indeholde din platforms logik for at vælge det korrekte kategori-ID.

Hvis din platform ikke er på listen, skal du manuelt tilføje logikken for 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 indtastet, ikke matcher nogen konto i Clerk.

For at løse det, log ind på my.clerk.io og gå til Developers > API Keys.

Her kan du finde Public API Key, som du så kan tilføje til dit Clerk.js tracking-script – enten direkte i koden, eller i indstillingerne for din integration afhængigt af din platform.

Iubenda-blokering #

Hvis du bruger iubenda til cookie-samtykke med Automatisk blokering slået til, kan besøgende, der afviser cookies, få iubenda til at blokere Clerk.io’s scripts eller forespørgsler.

Det resulterer typisk i to problemer:

  • sale-forespørgslen bliver aldrig sendt, så ordrer bliver ikke sporet eller ikke tilskrevet i Clerk.io.
  • Clerk.io elementer vises måske slet ikke, eller Clerk.js logger en konsolfejl om at være indlæst flere gange (fordi iubenda omskriver eller udskyder scripts).

Allowlist-domæner #

For at løse dette skal du allow-liste Clerk.io i iubenda, så deres scripts og forespørgsler ikke blokeres, når en besøgende afviser cookies.

Minimum, tilføj disse domæner til iubendas allowlist:

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

Den præcise UI-betegnelse varierer, men denne indstilling findes typisk under dit iubenda-projekts Cookie Solution indstillinger for Automatic blocking.

For iubendas egen vejledning, se deres artikel om hvad du gør hvis Automatic blocking mode blokerer for meget.

Verificér rettelsen #

Efter opdatering af iubenda-indstillingerne:

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

POS/ERP salgsdata #

For nogle webshops kan det være relevant at uploade salgsdata fra andre systemer end den egentlige webshop.

For eksempel, hvis du vil optimere algoritmen baseret på salg fra en fysisk butik eller en B2B butik.

Clerk skelner ikke mellem ordrer fra forskellige kilder — så længe du kan levere et ID, et tidsstempel og en liste over købte produkter, kan de uploades til Clerk.

Den anbefalede tilgang er at bruge CRUD API, da det gør det muligt at automatisere opgaven fuldstændig.

Ved at implementere sådanne API-kald kan du sende ordredata direkte til din Store i Clerk.

Opret blot et POST-kald til /orders-endpointet fra dit ERP-system eller webshop, kør jobbet med faste intervaller, f.eks. en gang om måneden, og du vil kunne bruge offline ordrer til at booste dine online recommendations og søgeresultater.

Alternativt kan du manuelt uploade en CSV-fil, uden behov for kodning.

Du kan læse mere om CSV-filer her.

Valutaomregning #

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

En simpel måde at gøre det fungerer beskrives nedenfor.

Oversæt valutaer #

Hvis besøgende bruger Google Translate på din webshop, kan prisværdier blive “oversat”, så formatering ødelægges eller visningen af valuta ændres.

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

Anbefalet markup #

Brug både translate="no" og klassen notranslate på prisen:

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

Hvis du viser listepris og udsalgspris, så brug samme mønster til begge prisværdier:

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

Placér markup #

  • I dit Clerk Design hvor priser vises.
  • I evt. custom HTML-wrappers der viser prisværdier.

Dette sikrer at resten af siden oversættes, men korrekt pris- og valutaformatering bevares.

Send pris-objekter #

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

Den nemmeste måde er at sende dem som et streng-kodet JSON-objekt med valutaens ISO som nøgle, i din 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,
    // Streng-kodet JSON-eksempler
    "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,
    // Streng-kodet JSON-eksempel
    "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 i dine Designs.

Her kan du definere en funktion, der tager dit pris-dict som argument og returnerer prisen for en bestemt valuta baseret på frontend-logik efter eget valg.

Sørg for at erstatte currency med den aktuelt 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 at have defineret formatteren, kan du bruge den i designet med følgende syntaks:

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

Kundspecifikke priser #

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

Dette behandles mere detaljeret i den dedikerede Customer Pricing artikel.

HTTP-autentificering #

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

Dette blokerer i mange tilfælde også for Clerk-importøren og viser typisk en 401 Unauthorized fejl i synk-loggen.

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

I my.clerk.io > Data > Configuration, opdater din import-URL som følger:

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

Ingen sporede ordrer #

For en komplet guide til hvordan salgs-tracking fungerer, hvordan du opsætter det og fejlsøger trin for trin, se Sales Tracking artiklen.

Ingen Clerk-indflydelse #

Hvis salg spores, men ingen vises som Clerk-påvirkede i analytics, se No Clerk Impact sektionen 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:

Clerk Design-betingelse #

Indsæt en betingelse omkring slider-markup, så den kun renderer når der returneres nok produkter.

{% 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 Clerk-responsen for at afgøre om slideren vises. Det koster altså stadig et API-kald, selv når slideren skjules.

Server-side betingelse #

Hvis din platform allerede kender antallet af produkter i kategorien, afgør i din template om Clerk-embedkoden skal indgå.

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

Dette er den foretrukne metode, da slideren kun initialiseres, når der er nok produkter, og adfærden følger helt dit webshops kategoritællingslogik.

Opgradering til Clerk.js 2 #

Clerk.js 2 er en hurtigere og mere fleksibel version af vores JavaScript-bibliotek.

Det gør det lettere at installere Clerk på enhver webshop.

Da de to versioner fungerer lidt forskelligt, skal du følge disse trin for en succesfuld opgradering.

De to vigtigste forskelle i Clerk.js 2 er:

  • Designene i my.clerk.io bruger Liquid, men kan også nemt oprettes med Design Editor.

  • Scriptet skal indsættes lige før </head>-tagget i webshop-skabelonen.

Opret designs #

Da Clerk.js 2 bruger en anden tilgang til designs, skal du oprette nye.

Du kan oprette dine Clerk.js 2 designs enten ved at lave dem forfra i Design Editor eller ved at konvertere din gamle kode til Liquid som nedenstående guide forklarer.

Nedenfor beskrives, hvordan du konverterer gamle kode-designs til Liquid.

Design Editor-option #

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

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

  3. I Design Editor, klik på et af de eksisterende elementer som navn, billede, knap, osv. for at redigere eller tilføje nye 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 ændr dit Clerk Element til at bruge dit nye design, og klik Update Element.

  6. Dette vil midlertidigt gøre, at de ikke vises på din webshop, indtil du har indsat Clerk.js 2 som beskrevet længere nede i guiden.

Konvertering af designs #

Da Clerk.js 2 bruger det mere fleksible template language Liquid, skal du konvertere designs til dette sprog.

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

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

  3. Klik Create Design.

  4. Nu får du et tomt design med Product HTML og CSS du kan bruge.

  5. Gå tilbage til designoverblikket og klik Edit Design på dit Clerk.js 1 design. Vi anbefaler at åbne i en ny fane, så du nemt kan kopiere koden.

  6. Kopiér det gamle Clerk.js 1 design over i dit nye Clerk.js 2 design.

    • Du vil bemærke at der ikke er Container Code i det nye.

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

    • Kopier gammel Product HTML inde i for-loopet, gammel Container Code omkring og kopier CSS også.

  7. Konvertér designet til Liquid-syntaks. Hovedforskellen er, at det gamle design brugte syntaksen {{ formatter attribute }} mens v2 bruger {{ product.attribute | formatter }}.

  8. Gennemgå alle dine attributter og ændre dem til det nye format.

  9. Hvis du bruger {{#if}} eller {{#is}}-statements, skal disse konverteres. Brug {% if product.attribute %} {% else %} {% endif %}.

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

  11. Nedenfor et eksempel på et 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 dit nye design.

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

Udskift script #

  1. Find den skabelon-fil, der bruges til at vise alle webshoppens sider, og hvor det oprindelige Clerk.js script findes nær bunden.

  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 > Clerk.js. Her findes Clerk.js 2 koden.

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

Tillykke! Du kører nu på det forbedrede Clerk.js 2 setup!

Du kan se hele dokumentationen for Clerk.js 2 her.

Håndtering af require.js #

Dette afsnit gælder kun ved brug af Clerk.js 1.

I nogle setups forhindrer Require.js Clerk.js i at indlæse, hvilket betyder at ingen sliders eller søgeresultater vises.

Hvis dette sker, vises følgende fejl i konsollen:

Uncaught ReferenceError: Clerk is not defined

Der er to måder at håndtere Require.js. Begge kræver du ændrer tracking-scriptet, der er indsat i bunden på alle sider.

Inkludér i Require.js #

Bedste metode er at få Require.js til at genkende Clerk.

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

Ignorér Require.js #

Hvis ovenstående ikke virker, kan det også lade sig gøre at ignorere Require.js.

Indsæt window.__clerk_ignore_requirejs = true; i toppen af tracking-scriptet.

Efter brug af én af disse metoder vil Require.js nu være kompatibel med Clerk.

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