Woocommerce

FAQ

Løsninger på almindelige spørgsmål og problemer ved brug af Clerk med WooCommerce

Støder du på problemer med din WooCommerce-integration? Denne FAQ dækker de mest almindelige problemer og deres løsninger – fra datasynkroniseringsfejl til manuel indsættelse af elementer.

Manuel indsættelse af elementer #

WooCommerce-temaer placerer ofte hooks på ikke-standardiserede positioner.

Det betyder, at Clerk-plugin’et måske ikke kan indsætte embed-koder automatisk.

Følg disse trin for manuelt at indsætte koder, når det er nødvendigt.

Find søgeformular #

Start med at finde din søgeformular.

Inspicer dit website og find unikt tekst for søgefeltet.

Search field in WooCommerce

Få adgang til tema-filer #

Åbn din webshops FTP-filer og find public_html > wp-content > themes.

Træk themes-mappen til dit skrivebord for at kopiere den til din computer.

Dette gør det muligt at søge igennem filerne.

Åbn i editor #

Åbn mappen i din foretrukne kodeeditor.

For eksempel i Sublime: Project > Add Folder to Project.

Vælg den themes-mappe, du gemte i det forrige trin.

Søg i filer #

Nu kan du søge i filerne.

Du kan vælge kun at søge i .php-filer, som er standardfiltypen for WooCommerce-temafiler.

Hvis du allerede har opsat search og oprettet en page i WooCommerce for Search Results, men dit søgefelt ikke linker korrekt, følg disse trin.

Start med at se din webshop i din browser. Vi anbefaler at bruge Chrome.

Find enhver HTML, der virker unik for søgefeltet, for eksempel searchform:

Search form HTML

Søg efter dette i din editor for at finde en liste over filer, der indeholder det:

Search results in editor

Find den tilsvarende fil på FTP.

Opdater formular-indstillinger #

Nu kan du ændre indstillingerne, så Clerk linker til den korrekte side.

Du skal ændre tre ting:

  • Den URL, som kunder bliver linket til – ofte fundet i <form>-elementet – skal matche navnet på den side, du oprettede i WooCommerce. Dette vil ofte være "soegeresultater" eller "search-results".

  • "name" attributten for input-feltet skal være searchterm.

  • Det skjulte inputfelt med name="post_type" skal kommenteres ud.

En søgeformular kan se sådan ud før ændringen:

Search form before changes

Og skal se sådan ud efter ændringen:

Search form after changes

Nu bør du blive sendt til søgesiden, når du søger: www.mywebshop.com/soegeresultater?searchterm=test.

Brug af formatters #

Clerk.js gør det muligt at skrive brugerdefinerede JavaScript-funktioner, der tilføjer ny funktionalitet til dine Designs.

Formatters kan tilføjes på to måder:

  • Via my.clerk.io > Developers > Formatters, hvor hver formatter oprettes som en separat indgang.

  • Som en del af Clerk.js configuration, hvor tracking-scriptet tilføjes på alle sider, hvilket gør det muligt at definere flere formatters på én gang.

I WooCommerce er tracking-scriptet placeret i: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php.

Eksempel på formatter #

Et eksempel ses nedenfor:

Clerk('config', {
  key: 'O7UITkJIXqXibeQF9ONobiGGKYYKtbvh',
  formatters: {
    log_price: function(price) {
      console.log(price);
    }
  }
});

Flere formatters #

Du kan skrive alle de Formatters, du vil, adskilt med komma:

formatters: {
  log_price: function(price) {
    console.log(price);
  },
  calculate_discount: function(price, special_price) {
    return price - special_price;
  },
  substring: function(text) {
    var short_string = text.substring(0, 20);
    return short_string;
  }
}

Brug i designs #

Efter oprettelse af dine Formatters kan du bruge dem i dine Designs med følgende syntaks:

{%raw%}{{ price | log_price }} {{ price | calculate_discount | special_price }}{%endraw%}

Dette giver dig mulighed for at lave enhver funktionalitet i dine Designs, som du har brug for.

HTTP-godkendelse #

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

Dette vil blokere Clerk-importøren og vise en 401 Unauthorized fejl i synkroniseringsloggen.

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

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

https://USER:PASS@www.ewoksRus.com

Almindelige synkroniseringsfejl #

Bemærk: Vi anbefaler altid at opdatere plugin’et til den nyeste version for at få alle opdaterede funktioner fra Clerk.

Når du importerer data med Clerks WooCommerce Plugin, er din webshops server ansvarlig for at sende produkt-, kategori- og ordredata til Clerk.

Men i nogle tilfælde kan serverens konfiguration blokere importen fra at få adgang til dataene, hvilket forårsager en fejl i Data Sync.

Nedenfor er en liste over de mest almindelige fejl og hvordan du løser dem.

401 Unauthorized #

Denne fejl opstår, hvis din webshop eller udviklingsmiljø kræver HTTP-godkendelse for at få adgang til den.

Dette løses ved at indsætte Brugernavn og Adgangskode som en del af Import-URL’en:

http://username:password@woocommerce.clerk.io

403 Forbidden #

Denne fejl opstår, hvis din server blokerer importøren fra at få adgang.

I de fleste tilfælde skal du blot whiteliste importørens IP-adresse for at give adgang.

Den nyeste IP-adresse kan findes her.

Sørg også for, at Public Key, Private Key og Import URL er korrekte for den butik, du arbejder med i my.clerk.io.

Hvad hvis jeg allerede har whitelistet, men fejlen stadig opstår?

Hvis du har whitelistet importørens IP, men fejlen fortsætter, tjek følgende:

  • Godkendelsesdelen af request-bodyen kan være fjernet fra requesten fra shoppens server.

  • Takstbegrænsning på serveren via eksempelvis Cloudflare.

404 Not Found #

Denne fejl opstår, hvis importøren ikke kunne få adgang til linket, der sender data fra webshoppen.

Ofte sker det fordi plugin’et enten:

  • Slet ikke er installeret

  • Er deaktiveret på grund af en opdatering

  • Cache forhindrer linket i at blive initialiseret

  • WooCommerce-permalinks er sat til Post name i stedet for Month and name

Følg disse fejlsøgningstrin for at rette fejlen:

  1. Sørg for, at du har installeret Plugin korrekt, og at det er aktiveret. Hvis du for nylig har auto-opdateret plugin’et, deaktiverer WooCommerce nogle gange plugin’et. Hvis det er sket, gå til Plugins > Clerk og klik på Aktiver.

  2. Tøm din webshops cache, før du prøver en ny import.

  3. Hvis det stadig ikke synkroniserer korrekt, gå til din WooCommerce backend, så Settings > Permalinks og ændre Common Settings til Month and name og tryk på Save Changes:

WooCommerce permalinks settings

429 Too Many Requests #

Denne fejl opstår, hvis din server nægter importøren adgang pga. for mange indgående requests.

Du kan løse dette ved enten:

  • At sætte request limit højere for din server.

  • At sætte Page Size til en højere værdi i my.clerk.io > Data > Configuration, så importøren laver færre, større requests.

Hvis du bruger host-udbyderen Byte.nl, returnerer importøren typisk denne fejl pga. deres rate-limiter. I dette tilfælde skal du kontakte Byte.nl-support og bede dem whiteliste importørens User-Agent “clerk”.

500 Internal Server Error #

Denne fejl betyder, at din server stødte på en intern fejl og ikke kunne specificere, hvilken fejl der opstod.

I disse tilfælde, tjek din Server-log for at finde ud af, hvilken proces der crashede, og hvorfor.

I de fleste tilfælde skyldes det blot et produkt med en ugyldig attribut eller en funktion, der kaldes forkert i webshoppen.

Et eksempel på en sådan fejl kan opstå, når du opgraderer både WooCommerce og Klarna. I dette tilfælde skabes problemet af ‘woocommerce-gateway-klarna’-plugin’et, som ikke opdateres.

Hvis det sker, gå til woocommerce-gateway-klarna > includes > variables-checkout.php.

Find:

if ( ! is_admin() && ! empty( $klarna_country )) {

og ændr det til:

if ( ! is_admin() && ! empty( $klarna_country ) && WC()->session ) {

503 Service Unavailable #

Denne fejl er typisk midlertidig og opstår, når serveren er for travl til at behandle forespørgslen.

Prøv venligst igen senere.

Hvis problemet fortsætter, kan det indikere, at serveren er overbelastet og nærmer sig sin maksimale kapacitet.

Tjek serverload og vurder aktuel brug.

520 Unknown Error #

Typisk returneres denne fejl fra Cloudflare, og den opstår ofte pga. en flaskehals i WooCommerce, der giver problemer med høje Page Sizes.

For at løse det, sæt din Page Size til 50 i my.clerk.io > Data > Configuration og kør en ny Data Sync.

522 Connection Timed Out #

Denne fejl opstår typisk, hvis serveren er for travl til at svare, eller hvis vores importør ikke har adgang til serveren.

  1. Vent et par minutter og prøv at synkronisere igen for at se, om serveren var travl.

  2. Hvis det stadig ikke virker, så sørg for at whiteliste importørens IP i din serverkonfiguration. Den nyeste IP-adresse kan findes her.

Invalid API response #

Denne fejl opstår typisk, hvis WooCommerce’s Debugging er aktiveret.

Det bør aldrig være aktiveret på et live-setup, da det sænker hastigheden på siderne og potentielt viser fejlbeskeder på frontend.

Synkroniseringsproblemet opstår, hvis WooCommerce støder på en fejl under genereringen af produktdata til importen.

Dette kan løses ved at deaktivere Debugging i wp-config.php ved at sætte define('WP_DEBUG', false).

Denne guide forklarer det i flere detaljer:

https://docs.woocommerce.com/document/woocommerce-product-search/api/debugging/

Og denne guide forklarer et alternativt workaround:

https://aristath.github.io/blog/wp-hide-php-errors

Fejl bliver stadig logget selvom Debug Mode ikke er aktiveret, men de logges til en fil i stedet.

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 at opgradere korrekt.

De to hovedforskelle i Clerk.js 2 er:

  • Designs i my.clerk.io bruger Liquid template-sproget, men kan også nemt oprettes via Design Editor.

  • Scriptet skal indsættes lige før </head>-tagget i dit webshops template.

Opret designs #

Da Clerk.js 2 håndterer Designs anderledes, 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-Designs til Liquid.

Nedenfor er en beskrivelse af, 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, der ikke er 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 det, eller tilføj nye elementer til Designet.

  4. Klik på 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 Content til at bruge dit nye Design, og klik derefter på Update Content.

  6. Dette vil midlertidigt gøre, at de ikke vises på din webshop, indtil du har indsat Clerk.js 2 som beskrevet senere i denne guide.

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 på Create Design.

  4. Dette giver dig et tomt design med produkt-HTML og CSS, du kan bruge.

  5. Gå tilbage til designoversigten og klik på Edit Design på dit Clerk.js 1 Design. Vi anbefaler at gøre dette 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 dit nye design.

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

    • Kopiér din gamle Product HTML inde i for-loop’et, din gamle Container Code omkring det og kopier CSS’en også.

  7. Konverter designet til Liquids syntaks. Den største forskel er, at de gamle designs brugte syntaksen {{ formatter attribute }}, mens v2’s syntaks er {{ product.attribute | formatter }}.

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

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

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

  11. Nedenfor er 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 på Update Design for at gemme ændringerne.

  2. Gå til Recommendations/Search > Elements og ændr dit Content-blok, så det bruger dit nye Design.

  3. Klik på Update Content. 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 alt Content, der skal opdateres.

  4. Opgrader til sidst plugin’et, som beskrevet i denne guide.

Opsætning til flere sprog #

Når du bruger WPML i WooCommerce, bør du kunne skelne sprogene på din URL, såsom:

Hvis du har unikke URLs som dette, kan du udvide WooCommerce-plugin’et til at understøtte WPML.

Det er også OK at definere sproget via lang-parameteren. For eksempel:

Kopiér butik #

Den nemmeste måde at implementere Clerk på flere domæner i standardopsætninger er ved at oprette en separat Store for hvert domæne i my.clerk.io.

På den måde kan du adskille produkter, salg, valutaer osv. for hvert domæne.

Når du er færdig med første opsætning, klik i øverste venstre hjørne af sidemenuen og klik derefter på "+ Add new store" – den sidste mulighed på dropdown-listen (typisk under den eksisterende store og dit firmanavn).

På Add New Store-siden, udfyld oplysninger om din webshop, og vælg din hovedbutik i Copy Content From Existing Store dropdown, og klik derefter Add Store:

Add new store in WooCommerce

Dette vil kopiere Content og Designs fra din hovedbutik. Husk at oversætte Headlines til det korrekte sprog.

Installer og konfigurer #

Officiel support for WPML er tilføjet til Clerk WooCommerce Extension, hvilket betyder, at så længe du bruger denne version eller nyere, bør WPML understøttes.

I indstillingspanelet for WooCommerce vil du se indstillingerne som normalt.

Hvis WPML er aktivt og konfigureret på dit WordPress-site, vil du se Multi Language Scope med det aktuelle sprog øverst på indstillingssiden.

For at skifte sprog skal du blot bruge vælgeren øverst. Vælg det sprog, du vil konfigurere Clerk for, og indstil de ønskede indstillinger. Gentag dette for hvert sprog.

Bemærk, at det ikke anbefales at vælge All Languages fra denne dropdown, når du gemmer din konfiguration – det gemmer kun dine indstillinger som fallback.

Synkronisering af domæner #

Når du har udvidet plugin’et, kan du nu synkronisere hver af dine Stores med deres sprogdomæne.

Da du allerede har installeret extension, kan du springe første trin over og gå direkte til at konfigurere og synkronisere data.

Når Sync er færdig, er dit domæne klar og bruger samme setup som din hovedbutik.

Shortcode-integration #

Hvis du bruger en Shortcode-editor som Elementor, så kan vores almindelige anbefalingskode muligvis ikke renderes, fordi produkt-ID’et er syntakseret anderledes i Elementor end i et normalt HTML-blok.

Hvis du bruger Hooks, kan du gå til Appearance -> Custom Layouts -> Insert og indsætte shortcoden på den Hook, der hører til Clerk (en udvikler kan oprette disse, hvis de ønsker Clerk som en Hook).

Erstat kode #

For at indsætte koden, erstat:

<span class="clerk" 
   data-template="@product-page-alternatives" 
   data-products="[<?php echo $product->get_id(); ?>]">
</span>

Med:

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

Prøv først med kun enkelte klammer, og hvis det ikke virker, så med dobbelte klammer:

<span class="clerk" 
   data-template="@category-page-popular" 
   data-category="[ [clerk_category_id] ]">
</span>

Hvis denne heller ikke virker, kan du prøve disse:

<span class="clerk" 
   data-template="@product-page-alternatives" 
   data-products="[<?php the_ID(); ?>]">
</span>

<span class="clerk" 
   data-template="@product-page-others-also-bought" 
   data-products="[<?php the_ID(); ?>]">
</span>

Manuel indsættelse #

Hvis du ikke kan indsætte shortcoden eller ikke bruger nogen form for Editor, gå til Appearance > Personalization og klik på produktsiden og følg så disse trin Widget > Shopsidebar 1 > add widget > Clerk Content.

WP Bakery Builder #

Tema-fil-integration: Tilføjelse af produkt-side-slider til alle sider

  1. Gå til Appearance > Theme File Editor > WooCommerce > content-single-product.php (eller en lignende fil, hvor dit produkt-side-layout defineres).

  2. Indsæt span-koden det ønskede sted i filen for at vise slideren. Det minder om at lave ændringer via FTP-adgang.

<span class="clerk" 
   data-template="@product-page-alternatives" 
   data-products="[<?php the_ID(); ?>]">
</span>

<span class="clerk" 
   data-template="@product-page-others-also-bought" 
   data-products="[<?php the_ID(); ?>]">
</span>

Visual hooks #

Indenfor WooCommerce bliver visse websitesider lavet med Visual Hooks i stedet for at blive rendret fra en HTML-fil.

For at tilføje indhold til sider, der er lavet via Visual Hooks, skal du indsætte Clerk-indholdet i webshoppens aktive functions.php-fil.

functions.php filen findes normalt på denne sti:

/wp-content/themes/YOUR-THEME-NAME-child-theme/functions.php

Produkt-side-eksempel #

For eksempel, for at tilføje et Recommendations-element med Elementet @product-page-alternatives til din produktside, skal du indsætte følgende kode i hoved-<?php ?> tags i functions.php:

// CLERK ADD PRODUCT PAGE SLIDER

add_action('woocommerce_after_single_product', 'clerk_alternatives', 5);

function clerk_alternatives() {
    $clerk_id = wc_get_product()->get_id();
    echo "<span class='clerk'
    data-template='@product-page-alternatives'
    data-products='[$clerk_id]'>
    </span>";
}

Kurvside-eksempel #

Et andet eksempel på at tilføje et Recommendations-element til Tilføj-til-kurv-siden:

// CLERK ADD CART SLIDER
add_action('woocommerce_after_cart_contents', 'clerk_cart_slider', 5);

function clerk_cart_slider() {
    $clerk_id = get_queried_object()->term_id;
    echo "<span class='clerk'
    data-template='@cart-others-also-bought'
    data-products='[<?php $items = WC()->cart->get_cart(); foreach( $items as $cart_item ){ $product_id = $cart_item['product_id']; echo $product_id; if ($cart_item != end($items)) {echo ',';} } ?>]'></span>";
}

For at tilføje dine egne Recommendation-elementer til ovenstående sider, skal du huske at erstatte koden i -taggene med embed-koden fra dine Recommendations Elements i my.clerk.io, som vist her:

Clerk embed code example

Værdien i add_action(), 5 i dette eksempel, fortæller WooCommerce prioriteten af det Content, der bliver tilføjet, hvilket påvirker, hvor tidligt indholdet vises i Visual Hook’en.

Bemærk: Når du sætter prioritet, accepterer WooCommerce kun multipla af 5.

Mere info om WooCommerce-sider, der bruger Visual Hooks:

https://www.businessbloomer.com/category/woocommerce-tips/visual-hook-series/

Powerstep problemer #

Renderes to gange #

Hvis du oplever, at Powerstep vises to gange, skal du dele siden for at rette det.

  1. I WooCommerce-backend, gå til Powerstep-siden, du oprettede under Pages.

  2. Vælg Shortcodes i øverste højre hjørne, og klik så Row / Columns.

  3. Klik “OK” i den pop-up, der dukker op.

  4. Flyt til sidst [clerk-powerstep] ind mellem [row] [col] og [/row] [/col] tags og klik på Save.

Visning mislykkes #

Hvis Powerstep stadig ikke vises, skal du måske deaktivere WooCommerce’s Cart Redirect-indstilling.

Gør sådan:

  1. Gå til WooCommerce > Settings > Products og find Add to cart behaviour.

  2. Sørg for, at begge bokse er ubemarkede.

  3. Klik på Save changes nederst på siden.

WooCommerce cart redirect settings

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