Woocommerce

FAQ

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

Oplever du 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 i ikke-standard positioner.

Dette betyder, at Clerk-pluginet muligvis 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.

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

Search field in WooCommerce

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 gør det muligt at søge gennem filerne.

Åbn i editor #

Åbn mappen i din foretrukne kodeeditor.

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

Vælg themes-mappen, som du gemte i det tidligere 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 filtypen for WooCommerce-temafiler.

Hvis du allerede har opsat søgning og oprettet en side i WooCommerce til 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 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 form-indstillinger #

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

Du skal ændre tre ting:

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

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

  • Det skjulte input-felt med name="post_type" skal udkommenteres.

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

Search form before changes

Og bør 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 tillader dig at skrive brugerdefinerede JavaScript-funktioner, som 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 post.

  • Som en del af Clerk.js konfigurationen, med tracking-scriptet tilføjet på alle sider, hvilket muliggør 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 vilkårligt antal Formatters, 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 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 lave alt den funktionalitet i dine Designs, du har brug for.

HTTP-autentifikation #

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

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

Du kan løse det ved at indsætte autentifikationsoplysningerne 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 pluginet 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 ordredat til Clerk.

Dog kan serverens konfiguration i nogle tilfælde blokere importøren 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 dev-miljø kræver HTTP-autentifikation for adgang.

Dette løses ved at indsætte Username og Password som en del af Import URL:

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 stadig opstår, check følgende:

  • Autentifikationsdelen af kroppen kan blive fjernet fra anmodningen fra butikkens server.

  • Rate limit for serveren med hensyn til Cloudflare.

404 Not Found #

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

Oftest opstår det fordi pluginet enten:

  • Ikke er installeret overhovedet

  • Deaktiveret pga. en opdatering

  • Et cache gør, at linket ikke bliver 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 autoopdaterede pluginet, deaktiverer WooCommerce nogle gange pluginet. Hvis det er sket, gå til Plugins > Clerk og klik på Aktiver.

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

  3. Hvis det stadig ikke synkroniserer korrekt, gå til din WooCommerce-backend, så Settings > Permalinks og sæt Common Settings til Month and name og tryk 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 henvendelser.

Du kan løse det 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, hvilket gør, at importøren laver færre, men større anmodninger.

Hvis du bruger hostprovideren Byte.nl, returnerer importøren ofte denne fejl pga. deres ratelimiter. I så fald kontakt 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 var i stand til at specificere hvilken fejl der opstod.

I disse tilfælde, tjek din Server Log for at identificere hvilken proces der crashede og hvorfor.

I de fleste tilfælde skyldes det blot et produkt med et ugyldigt 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. Problemet skabes her af ‘woocommerce-gateway-klarna’-pluginet, der ikke opdateres.

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

Find:

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

og ret 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 håndtere anmodningen.

Prøv igen senere.

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

For at bekræfte, tjek serverload og vurder aktuelt forbrug.

520 Unknown Error #

Normalt returneres denne fejl fra Cloudflare, og opstår ofte pga. en flaskehals i WooCommerce, der forårsager problemer ved højere 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 nogle få minutter og prøv synkronisering igen for at se, om serveren var travl.

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

Invalid API response #

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

Dette bør aldrig være slået til på et live-setup, da det sænker hastigheden på sider og potentielt viser fejlmeddelelser i frontend.

Synkproblemet sker, hvis WooCommerce støder på en fejl mens produktdata til import genereres.

Dette kan løses ved deaktivering af 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 en alternativ løsning:

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

Fejl vil stadig blive logget, selv når Debug Mode ikke er aktiv, 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 nemmere at installere Clerk på enhver webshop.

Da de to versioner fungerer en smule 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 skabelonsproget, men kan også nemt oprettes med 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 lave nye.

Du kan lave dine Clerk.js 2-designs enten ved at lave dem igen i Design Editor, eller ved at konvertere din gamle kode-designs til Liquid.

Nedenfor er en beskrivelse af, hvordan du konverterer gamle kode-designs til Liquid.

Design Editor-mulighed #

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

  2. Vælg en designtype udover 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 skal du klikke på et hvilket som helst eksisterende element som navn, billede, knap 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 Step 2 i guiden.

  5. Gå til Recommendations/Search > Elements og skift dit Clerk Element til at bruge dit nye Design og klik på 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 denne guide.

Konvertering af designs #

Da Clerk.js 2 bruger det mere fleksible skabelonsprog 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 blankt 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 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 den 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 udenom, og kopier også CSS.

  7. Konverter designet til Liquid-syntaks. Den vigtigste forskel er, at de gamle designs brugte syntaksen {{ formatter attribute }}, mens v2 bruger syntaksen {{ product.attribute | formatter }}.

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

  9. Hvis du bruger {{#if}} eller {{#is}}-udtryk, skal de 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 din Element-blok til at bruge dit nye Design.

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

  4. Opdater endelig pluginet ved at følge denne guide.

Multi-sprog opsætning #

Når du bruger WPML i WooCommerce kan du skille dine sprog ad via URL, såsom:

Har du unikke URLs som disse, kan du udvide WooCommerce-pluginet til at understøtte WPML.

Det er også OK at definere sproget via lang parameter. F.eks.:

Kopier 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å denne måde kan du adskille produkter, salg, valutaer osv. og holde styr på hvert domæne.

Når du er færdig med startopsætningen, klik på øverst i venstre side-menu og klik på "+ Add new store" nederst i listen (typisk under eksisterende store(s) og din virksomhedsnavn).

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

Add new store in WooCommerce

Dette medfører, at Elements og Designs fra din hovedbutik overføres. Husk at oversætte Headlines til det rigtige sprog også.

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 burde WPML være understøttet.

I indstillingspanelet for WooCommerce ser du indstillingerne som normalt.

Hvis WPML er aktivt på din WordPress-side, vil du øverst i indstillingerne se Multi Language Scope med det aktuelle sprog.

For at skifte sprog, brug blot vælgeren øverst. Vælg det sprog, du vil konfigurere Clerk til, og angiv dine ønskede indstillinger. Gentag for hvert sprog.

Bemærk at valg af All Languages fra denne dropdown frarådes, da det kun gemmer dine indstillinger som fallback.

Synk domæner #

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

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

Når synkroniseringen er færdig, er dit domæne klar og anvender samme opsætning som hovedbutikken.

Shortcode-integration #

Hvis du bruger en Shortcode-editor som Elementor, gengives vores normale anbefalingskodesnippet måske ikke, da produkt-ID syntaksen er 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å den hook, der tilhører Clerk (en udvikler kan oprette disse, hvis de ønsker at Clerk skal være en hook).

Udskift kode #

For at indsætte koden, udskift:

<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 kun med enkle parenteser, og hvis det ikke virker, så med dobbelte:

<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 ikke bruger en editor, gå til Appearance > Personalization og klik derefter på produktsiden. Følg så disse trin Widget > Shopsidebar 1 > add widget > Clerk Content.

WP Bakery Builder #

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

  1. Gå til Appearance > Theme File Editor > WooCommerce > content-single-product.php (eller en lignende fil hvor produktside-layoutet defineres).

  2. Indsæt span-koden det ønskede sted i filen, hvor du vil vise slideren. Processen ligner æ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 #

I WooCommerce er visse sider oprettet med Visual Hooks i stedet for traditionelle HTML-filer.

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 findes normalt på følgende sti:

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

Eksempel på produktside #

For eksempel, for at tilføje et Recommendations-element med Elementet @product-page-alternatives til din produktside, indsæt følgende kode i de overordnede <?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 på kurvside #

Et andet eksempel for at tilføje et Recommendations-element til Add-to-Cart-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 tilføje dine egne Recommendation-elementer til ovenstående sider, husk at udskifte koden inden for -tags med den embed-kode, der gives i dine Recommendations Elements i my.clerk.io, som nedenfor:

Clerk embed code example

Værdien i add_action(), 5 i dette eksempel, fortæller WooCommerce prioriteten for det Element som tilføjes, hvilket påvirker hvor tidligt Elementet vises i Visual Hook’en.

Bemærk: Ved valg af 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 #

Vises to gange #

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

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

  2. Vælg Shortcodes øverst til højre, og klik derefter på Row / Columns.

  3. Klik “OK” i pop-op’en der vises.

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

Vises ikke #

Hvis Powerstep stadig ikke vises, skal du muligvis deaktivere WooCommerces Cart Redirect-indstilling.

Følg disse trin for at gøre dette:

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

  2. Sørg for, at begge bokse er slået fra.

  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.