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 installation af elementer.

Manuel installation af elementer #

WooCommerce-temaer placerer ofte hooks på ikke-standard placeringer.

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

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

Find søgeformularen #

Start med at finde din søgeformular.

Inspicér din hjemmeside og find unik tekst for søgefeltet.

Få adgang til temafiler #

Å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 giver dig mulighed for at søge i filerne.

Åbn i editor #

Åbn mappen i din foretrukne kodeeditor.

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

Vælg themes-mappen, du gemte under 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 standard filtype for WooCommerce-temafiler.

Hvis du allerede har opsat søgning og oprettet en side i WooCommerce til søgeresultater, 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 HTML, der identificerer søgefeltet, såsom searchform.

Søg efter denne identifikator i din editor for at finde de filer, der indeholder det.

Find den tilsvarende fil på FTP.

Opdater formularindstillinger #

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

Du skal ændre tre ting:

  • URL’en, som kunderne bliver linket til, findes ofte i <form>-elementet og skal matche navnet på den side, du har oprettet i WooCommerce. Dette vil ofte være "soegeresultater" eller "search-results".

  • "name"-attributten på inputfeltet skal være searchterm.

  • Det skjulte inputfelt med name="post_type" skal udkommenteres.

Opdater søgeformularen med de tre ændringer ovenfor.

Nu bør du blive sendt til søgesiden ved søgning: www.mywebshop.com/soegeresultater?searchterm=test.

Brug af formatters #

Clerk.js giver dig mulighed for 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-konfigurationen, hvor tracking-scriptet tilføjes på alle sider, hvilket giver mulighed for at definere flere formatters på én gang.

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

Eksempel på formatter #

Et eksempel kan ses nedenfor:

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

Flere formatters #

Du kan skrive et hvilket som helst antal Formatters, adskilt af 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 du har oprettet dine Formatters, kan du bruge dem i dine Designs med denne syntaks:

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

Dette giver dig mulighed for at skabe den funktionalitet i dine Designs, du har brug for.

HTTP-godkendelse #

HTTP-godkendelse bruges ofte på staging-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 seneste version for at få alle de nyeste funktioner fra Clerk.

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

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

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

401 Unauthorized #

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

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 seneste 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-adresse, men fejlen fortsætter, tjek følgende:

  • Autentificeringsdelen af body kan blive fjernet fra anmodningen fra butikkens server.

  • Rate limit for serveren i forhold til Cloudflare.

  • En www til non-www (eller omvendt) omdirigering på webshoppen. Hvis Data Sync-loggen viser en 403-fejl for en URL uden www, men hjemmesiden faktisk bruger det, prøv at tilføje www. til Store URL i din Clerk.io-konfiguration. For eksempel: brug https://www.yourdomain.com i stedet for https://yourdomain.com.

404 Not Found #

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

I de fleste tilfælde opstår det, fordi plugin’et enten:

  • Slet ikke er installeret

  • Er deaktiveret på grund af en opdatering

  • En 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 løse fejlen:

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

  2. Tøm din webshops cache, før du forsøger en ny import.

  3. Hvis det stadig ikke synkroniserer rigtigt, åbn Settings > Permalinks i WooCommerce, sæt Common Settings til Month and name, og klik derefter Gem ændringer.

429 Too Many Requests #

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

Du kan løse dette ved enten at:

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

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

Hvis du bruger hostudbyderen Byte.nl, returnerer importøren typisk denne fejl pga. deres ratelimiter. Kontakt i så fald Byte.nl support og bed 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.

I disse tilfælde skal du tjekke 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 forkert kaldt funktion på 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 plugin’et ‘woocommerce-gateway-klarna’, som ikke opgraderes.

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

Find:

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

og ændr 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 anmodningen.

Prøv igen senere.

Hvis problemet fortsætter, kan det tyde på, at serveren er overbelastet og nærmer sig maksimal kapacitet.

For at bekræfte, tjek serverens load og vurder dens aktuelle forbrug.

520 Unknown Error #

Normalt returneres denne fejl fra Cloudflare, og opstår ofte pga. en flaskehals i WooCommerce, som giver problemer ved større Page Sizes.

For at løse det, sæt 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 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 seneste IP-adresse kan findes her.

Invalid API response #

Denne fejl opstår typisk, hvis WooCommerces Debugging er aktiveret.

Det er aldrig en god idé at have det aktivt på et live-setup, da det gør siderne langsommere og potentielt viser fejlbeskeder i frontend.

Synkroniseringsproblemet opstår, hvis WooCommerce oplever en fejl under generering 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 mere detaljeret:

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 vil stadig blive logget, selv når Debug Mode ikke er aktivt, men de vil blive logget 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 succesfuldt.

De to vigtigste forskelle i Clerk.js 2 er:

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

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

Opret designs #

Da Clerk.js 2 har en anden tilgang til Designs, skal du oprette nye.

Du kan lave 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 andet end Blank og giv den et navn. Vi anbefaler at tilføje “V2”, så det er tydeligt du bruger Clerk.js 2 designs.

  3. I Design Editor kan du klikke på 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 skift dit Clerk Element til at bruge dit nye Design, og klik så Update Element.

  6. Dette vil midlertidigt skjule dem fra din webshop, indtil du har indsat Clerk.js 2 som beskrevet længere nede.

Konvertering af designs #

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

  3. Klik Create Design.

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

  5. Gå tilbage til designoversigten og klik Edit Design for 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 til dit nye Clerk.js 2 Design.

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

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

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

  7. Konverter Designet til Liquids syntaks. Den væsentlige forskel er, at de gamle Designs brugte syntaksen {{ formatter attribute }}, mens v2 bruger {{ product.attribute | formatter }}.

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

  9. Hvis du bruger {{#if}} eller {{#is}}-sætninger, skal disse også konverteres. Brug syntaksen {% 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 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 skift din Element-blok til at bruge dit nye Design.

  3. Klik Update Element. Dette vil midlertidigt skjule dem på din webshop, indtil du er færdig med Step 2. Vælg det nye Design for alle Elementer, der skal opdateres.

  4. Opgrader til sidst plugin’et efter denne guide.

Setup til flere sprog #

Når du bruger WPML i WooCommerce, bør du kunne skelne dine sprog via URL, som dette:

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

Det er også ok at definere sproget via lang parameteren, fx:

Kopier butik #

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

På denne måde kan du adskille produkter, salg, valutaer mv., så du kan holde styr på hvert domæne.

Når du er færdig med initial opsætning, klik på øverste venstre hjørne i sidemenuen og klik derefter på "+ Add new store" (sidste mulighed længst nede på listen – typisk under eksisterende butik(ker) og firmanavn).

På siden Add New Store indtast webshopdetaljer, vælg den primære butik under Copy Elements From Existing Store og klik Add Store.

Dette vil kopiere Elements og Designs fra din primære butik. Husk at oversætte Headlines til det rigtige sprog.

Installer og konfigurer #

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

I indstillingspanelet for WooCommerce vises indstillingerne som normalt.

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

For at skifte sprog, brug blot vælgeren i toppen. Vælg det sprog, du ønsker at konfigurere Clerk til, og angiv dine ønskede indstillinger. Gentag for hver sprog.

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

Synkroniser domæner #

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

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

Når Synk er gennemført, er dit domæne klar og bruger samme opsætning som din primære butik.

Shortcode-integration #

Hvis du bruger en Shortcode editor som Elementor, kan vores normale anbefalingskodesnip ikke blive vist på grund af, at produkt-ID’et er syntakseret anderledes i Elementor end i et almindeligt HTML-blok.

Hvis du bruger Hooks, kan du gå til Appearance -> Custom Layouts -> Insert og indsætte shortcoden på det Hook, der tilhører Clerk (en udvikler kan evt. oprette disse, hvis de ønsker Clerk som 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 énkle parenteser, og prøv derefter med dobbelte parenteser, hvis det ikke virker:

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

Hvis denne 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 slet ikke bruger nogen Editor – gå til Appearance > Personalization, klik på produktsiden, og følg derefter disse trin Widget > Shopsidebar 1 > add widget > Clerk Content.

WP Bakery Builder #

Integration i temafiler: Tilføjelse af et Produkt Side Slider til alle sider

  1. Naviger til Appearance > Theme File Editor > WooCommerce > content-single-product.php (eller en tilsvarende fil, hvor din produktsides layout defineres).

  2. Indsæt span-koden det ønskede sted i filen for at vise slideren. Denne proces minder om æ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>

Visuelle hooks #

Indenfor WooCommerce oprettes bestemte hjemmesider ved hjælp af Visual Hooks i stedet for at blive rendered ud fra en HTML-fil.

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

functions.php-filen ligger normalt på denne sti:

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

Eksempel: Produktside #

For eksempel, for at tilføje et Recommendations element med Elementet @product-page-alternatives til din produktside, skal du inkludere følgende kode indenfor 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>";
}

Eksempel: Kurvside #

Et andet eksempel for at tilføje et Recommendations element 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>";
}

Hvis du vil bruge dine egne Recommendation Elements på disse sider, skal du erstatte eksempel-<span>-blokene med embed-koderne fra dine Elements i my.clerk.io.

Værdien sat i add_action(), 5 i dette eksempel, fortæller WooCommerce prioriteten af Elementet, hvilket påvirker hvor tidligt Elementet vises i Visual Hook’en.

Bemærk: Ved fastsættelse af prioritet accepterer WooCommerce kun multipla af 5.

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

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

Powerstep-problemer #

Dobbeltrendering #

Hvis du oplever et problem, hvor Powerstep vises to gange, skal du opdele siden for at løse det.

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

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

  3. Klik på “OK” i pop op-vinduet der vises.

  4. Flyt til sidst [clerk-powerstep] indenfor [row] [col] og [/row] [/col] tags, og klik Save.

Manglende rendering #

Hvis Powerstep stadig ikke vises, skal du muligvis deaktivere WooCommerces indstilling for Vogn-omdirigering.

For at gøre dette, følg disse trin:

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

  2. Sørg for, at begge bokse er ubebøjet.

  3. Klik Save changes i bunden af siden.

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