Enhver (webshop)

Ofte stillede spørgsmål

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

Støder du på problemer med din brugerdefinerede 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 en 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 afvikle en funktion for at vise alle Element-blokke på den side.

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

På grund af dette skal du selv styre visningen vha. Clerk.js, så det matcher den måde, du indlæser sider på i appen.

Inkludér Clerk.js #

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

Herefter er biblioteket tilgængeligt under hele sessionen.

Indsæt 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 -->

Styr rendering #

Som standard viser Clerk.js alle elementer, der har klassen clerk, uanset om de er indsat under den første sideindlæsning eller ved DOM-ændringer.

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

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

Hver gang en side indlæses, skal du gøre følgende i rækkefølge:

  • Tilføj Clerk snippet til HTML med en unik selector, du kan målrette.
  • Kør Clerk("content", "SELECTOR") for at vise det.

Når en besøgende forlader siden, skal du fjerne snippen, og vise den igen, hvis den besøgende vender tilbage til samme side.

Dette sikrer, at Clerk.js ikke ser snippen som allerede vist, hvilket kan forhindre visning.

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 selectors, når du første gang viser det.

Pagespeed-indvirkning #

Hvis du tilføjer et eksternt værktøj som Clerk.js, vil det øge tiden, det tager at indlæse dit site, men det er ubetydeligt sammenlignet med de ekstra konverteringer, det giver.

Nedenfor kan du se, hvordan det påvirker din sides ydeevne.

Ydeevne #

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

Det indlæser også elementer asynkront, hvilket betyder, at resten af siden indlæses, mens Clerk.js viser indhold.

En stigning i indlæsningstiden for en side skyldes ofte, at der indlæses flere billeder end tidligere, da Clerks søgeresultater og anbefalinger fungerer bedst, når de præsenteres visuelt flot.

For at minimere ekstra loadtid anbefaler vi at bruge billeder i webp-format og giver dem en opløsning, der matcher størrelsen i Clerk-elementerne.

For eksempel, hvis billeder i anbefalinger har opløsningen 400x400px på desktop, så send billeder i maksimalt 420x420px eller lignende opløsning.

Google Page Speed #

Hvis du bruger Google Page Speed Insights eller et lignende værktøj til at analysere din sides ydeevne, vil du måske se Clerk.js listet under Leverage browser caching.

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 funktioner, der håndterer tracking og UI-komponenter som Instant Search, sliders, popups m.m.

Når vi tilføjer nye UI-funktioner eller forbedrer eksisterende, bliver de inkluderet i Clerk.js og skal downloades af slutbrugeren for at kunne bruges.

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

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

Det vigtige er, at slutbrugeren kun skal downloade Clerk.js én gang, når nye funktioner udgives.

Cache-udløb på 60 minutter betyder blot, at slutbrugerens browser tjekker op med Clerk hver 60. minut.

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

Cache-udløbstiden på 60 minutter er altså en afvejning mellem at minimere web-requests og at få nye funktioner hurtigere ud.

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

Som du kan se på screenshot, er dette normal praksis, der (sammen med Clerk) også bruges af Google Analytics, Facebook, Trustpilot og mange andre.

CLS-indvirkning #

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

I visse tilfælde, blandt andre årsager, kan Clerk bidrage til CLS-scoren.

Du kan læse mere om CLS her.

Følg denne vejledning, hvis din CLS-score er højere end 0,2 og Clerk-elementer er synlige over folden.

For at forhindre, at indhold flytter sig, skal du reservere en pladsholder til Clerk anbefalinger, inden Clerk.js indsætter dem.

Gør det ved at tilføje en minimum-højde baseret på forventet indholdshøjde.

Eksempel på kode:

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

Lave API-kald #

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

Denne funktion tager 3 argumenter:

  • Et API-endpoint

  • En JSON-dictionary af parametre

  • En callback-funktion til at håndtere svaret

Requests #

Nedenfor ses et eksempelscript, der efterspørger de 10 mest populære produkter og logger svaret til konsollen.

Svaret indeholder et JavaScript-objekt med status på 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’en.

Nedenfor er et eksempel, der laver 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 på hver platform, og funktionaliteten kan ændre sig afhængigt af de plugins, du bruger.

Fordi Clerks design består af HTML & CSS, kan du ofte tilføje denne funktionalitet, hvis du forstår, hvordan det fungerer på dit site.

Generel tilgang #

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

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

Se hvordan i vores developer docs her.

Inspektér tilføj-til-kurv-knappen for at identificere koden, der er tilknyttet den, f.eks. på en kategoriside.

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

Kopiér hele knap-HTML’en.

Kopiér 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 med Liquid-variablerne for disse datapunkter.

ID’et vil altid være {{ product.id }}, og antallet vil variere afhængigt af, hvordan data sendes.

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

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

Eksempel #

Tilføj-til-kurv-knappen nedenfor er et <div>, der har klassen button-container:

Add-To-Cart example

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

Produkt-ID’et er også refereret i data-id-product, og produkt-antallet findes i .data-minimal_quantity.

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

Når du har ændret dette, ser den færdige tilføj-til-kurv-knap 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>

Console-fejl #

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

Console Errors

Ved at klikke på fejllinket får du mere information om, hvad der gik galt, som du kan bruge til selv at fejlfinde, eller sende til vores supportteam, som vil hjælpe dig.

Nedenfor finder du en liste over de mest almindelige fejl.

Unknown content #

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

For at løse det, skal du sikre, at navnet i embed-koden matcher en Element-blok, du har oprettet i my.clerk.io.

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

Element ID

Invalid 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 vises.

For at løse det skal du sikre, at klassen får et andet navn, f.eks. clerk-product.

Invalid product argument #

Denne fejl betyder, at det angivne 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 bliver en liste.

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

Invalid category argument #

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

Oftest sker det, hvis placeholderen i kategoriens embed-kode ikke er blevet udskiftet med et faktisk ID:

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

Outputtet af koden skal indeholde kategoriens ID:

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

Hvis du kopierede snippen manuelt, så vælg dit shopsystem i Choose your platform-dropdown, inden du kopierer snippen.

Derefter ændres den til at inkludere din platforms logik for at vælge det rigtige kategori-ID.

Hvis din platform ikke er listet, skal du selv tilføje logikken til at vælge det rigtige kategori-ID baseret på din webshops funktionalitet.

Incorrect API key #

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

For at løse dette, login på my.clerk.io, og gå til Developers > API Keys.

Her kan du finde Public API Key, som du derefter kan tilføje til dit Clerk.js tracking-script, enten direkte i koden eller i opsætningen 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 requests.

Typisk resulterer det i to problemer:

  • sale-anmodningen sendes aldrig, så ordrer bliver ikke sporet eller ikke tilskrevet i Clerk.io.
  • Clerk.io-elementer vises slet ikke, eller Clerk.js logger en console-fejl om at være indlæst flere gange (fordi iubenda omskriver eller udskyder scripts).

Allowlist domæner #

For at løse det skal du tilføje Clerk.io til allowlisten i iubenda, så dets scripts og forespørgsler ikke blokeres, når en besøgende afviser cookies.

Tilføj mindst følgende domæner til iubendas allowlist:

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

De præcise UI-labels kan variere, men denne indstilling findes normalt under dit iubenda-projekts Cookie Solution-indstillinger for Automatisk blokering.

For iubendas vejledning, se deres artikel om hvad man gør, når automatisk blokering blokerer for meget.

Verificér løsningen #

Når du har opdateret iubendas indstillinger:

  1. Indlæs webshoppen, afvis cookies og åbn browserens konsol.
  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 en sale-anmodning 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.

For eksempel 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 tidsstempel og en liste over købte produkter, kan de uploades til Clerk.

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

Ved at implementere disse 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 jævne mellemrum, f.eks. é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 uden at kode noget.

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

Valutaomregning #

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

En simpel måde at gøre det på er beskrevet nedenfor.

Oversæt valutaer #

Hvis besøgende bruger Google Translate på din webshop, kan prisværdier oversættes på måder, der ødelægger formattering eller ændrer valuta-visning.

For at forhindre dette, skal du indpakke pris-outputtet i elementer, der ikke skal oversættes.

Anbefalet markup #

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

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

Hvis du viser både listepris og udsalgspris, brug samme mønster for hver prisværdi:

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

Brug stederne #

  • I dit Clerk Design, hvor priser vises.
  • I eventuelle brugerdefinerede HTML-wrappers, der viser prisværdier.

Dette gør, at resten af siden stadig kan oversættes, mens korrekt pris- og valutaformat bevares.

Send pris-objekter #

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

Den letteste måde er at sende dem som et string-kodet JSON-objekt af formatterede priser, hvor valutaens ISO-navn er key, 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,
    // Streng-kodet JSON-eksempel
    "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, som kan bruges i dine Designs.

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

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 #

Når du har defineret formatteren, kan den bruges i dit design med dette syntax:

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

Kunde-specifikke priser #

Clerk understøtter at vise forskellige priser baseret på den indloggede kunde – enten ved at hente individuelle priser ved visning, eller ved at lagre gruppepriser på forhånd i produkt-dataene.

Dette dækkes i detalje i den dedikerede Customer Pricing-artikel.

HTTP-autentificering #

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

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

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

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

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

Ingen sporede ordrer #

For en komplet vejledning om, hvordan salgssporing fungerer, hvordan du sætter det op og fejlretter det trin for trin, se Sales Tracking-artiklen.

Ingen Clerk-indflydelse #

Hvis der spores ordrer, men ingen vises som Clerk-påvirket i analytics, se No Clerk Impact-sektionen af 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 rundt om slider-markup, så den kun vises, hvis 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 er stadig Clerk-responsen, der afgør om slideren vises. Det koster derfor stadig et API-kald, selv når slideren ikke vises.

Server-side betingelse #

Hvis din platform allerede kender kategoriernes produktantal, så bestem i din template, om Clerk embed-koden skal vises.

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

Dette er den foretrukne tilgang, da slideren kun initialiseres, når der er nok produkter, og adfærden følger helt din webshops egen logik for kategori-antal.

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.

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

De to vigtigste forskelle i Clerk.js 2 er:

  • Designs i my.clerk.io bruger Liquid, men kan også nemt oprettes med 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 lave dem i Design Editor, eller ved at konvertere dine gamle kode-designs til Liquid, som nedenstående guide forklarer.

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

Design Editor-mulighed #

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

  2. Vælg en designtype anden end 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 klikker du på et af de eksisterende elementer som navn, billede, button osv. for at redigere det, eller tilføje nye elementer til designet.

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

  5. Gå til Recommendations/Search > Elements, og ændr din Clerk Element til at bruge dit nye Design, og klik så på Update Element.

  6. Dette vil midlertidigt få dem til ikke at vises på din webshop, indtil du har indsat Clerk.js 2 som beskrevet længere nede i denne guide.

Konvertering af designs #

Da Clerk.js 2 bruger det mere fleksible template-sprog 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 den et navn. Vi anbefaler at kalde den “V2”, så det er tydeligt, at du bruger Clerk.js 2-designs.

  3. Klik på Create Design.

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

  5. Gå tilbage til designoversigten og klik på Edit Design for dit Clerk.js 1-design. Vi anbefaler at gøre dette i et nyt faneblad, så du nemt kan kopiere koden.

  6. Kopiér det gamle Clerk.js 1-design til dit nye Clerk.js 2-design.

    • Du vil bemærke, at der ikke er Container Code i dit nye.
    • Det er fordi Liquid bruger for loops til at vise alle produkter.
    • Kopiér din gamle Product HTML inde i for-loopet, din gamle Container Code udenom, og kopier CSS med.

  7. Konverter designet til Liquids syntax. Den vigtigste forskel er, at de gamle designs brugte syntaxen {{ formatter attribute }}, mens v2 brugte {{ product.attribute | formatter }}.

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

  9. Hvis du bruger {{#if}} eller {{#is}}-statements skal de også konverteres. Brug syntaxen {% 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 understøttes.

  11. Nedenfor er et eksempel på et Clerk.js 1-design og en fuldt konverteret 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 skift din Element-blok til at bruge dit nye Design.

  3. Klik Update Element. Dette vil midlertidigt få dem til ikke at vises på din webshop, indtil du er færdig med Trin 2. Vælg det nye Design for alle Elements, der skal opdateres.

Erstat script #

  1. Find template-filen, der bruges til at vise alle sider på webshoppen, og hvor det originale Clerk.js-script findes nær bunden.

  2. Fjern det gamle Clerk.js-script fra filen. Det vil se sådan ud:

<!-- 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 finder du Clerk.js 2-koden.

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

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

Du kan se den fulde dokumentation for Clerk.js 2 her.

Håndtering af require.js #

Dette afsnit gælder kun, når du bruger Clerk.js 1.

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

Når dette sker, vises følgende fejl i din konsol:

Uncaught ReferenceError: Clerk is not defined

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

Inkluder i Require.js #

Den bedste måde er at få Require.js til at genkende Clerk.

Det kan du gøre ved at indsætte require(['clerk'], function() {}); nederst i tracking-scriptet:

Insert Require Clerk.js 1

Ignorér Require.js #

Hvis ovenstående metode ikke virker, er det muligt at ignorere Require.js.

Det kan du gøre ved at indsætte window.__clerk_ignore_requirejs = true; øverst i tracking-scriptet:

Ignore Require.js

Efter at have brugt en 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.