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

WooCommerce-temaer placerer ofte hooks i ikke-standard positioner.

Det betyder, at Clerk-pluginet muligvis ikke automatisk kan indsætte embed-koderne.

Følg disse trin for manuelt at indsætte koderne efter behov.

Find søgefeltet #

Start med at finde dit søgefelt.

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 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 den themes mappe, du gemte i det forrige trin.

Søg i filer #

Nu kan du søge gennem filerne.

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

Hvis du allerede har opsat søgefunktionen og oprettet en side i WooCommerce til søgeresultater, men dit søgefelt ikke linker korrekt, så følg disse trin.

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

Find evt. HTML, der virker unikt for søgefeltet, for eksempel searchform:

Search form HTML

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

Search results in editor

Find den tilsvarende fil på FTP.

Opdater formularindstillinger #

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

Du skal ændre tre ting:

  • URL’en, som kunder videresendes til, findes ofte i <form>-elementet, og skal matche navnet på den side, du oprettede 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.

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 linket til søgesiden, når du søger: www.mywebshop.com/soegeresultater?searchterm=test.

Brug af formateringsfunktioner #

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 laves som en separat post.

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

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

Eksempel på formatter #

Et eksempel kan ses herunder:

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 #

Når 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 gør det muligt at oprette den funktionalitet i dine Designs, du har brug for.

HTTP-godkendelse #

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

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

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 pluginet til den nyeste version for at få alle opdaterede funktioner fra Clerk.

Når du importerer data med Clerks WooCommerce Plugin, er det din webshops server, der sender produkt-, kategori- og ordredetaljer til Clerk.

Men i nogle tilfælde kan serverens konfiguration blokere importen i at tilgå dataene, hvilket giver en fejl i Data Sync.

Herunder er en liste over de mest almindelige fejl og hvordan de løses.

401 Unauthorized #

Denne fejl opstår, hvis din webshop eller dit udviklingsmiljø kræver HTTP-godkendelse for 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 for, at importøren får adgang.

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

Den seneste IP-adresse 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:

  • Authentication-delen af requestens body kan være fjernet af shoppens server.

  • Rate limit for serveren ift. Cloudflare.

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

404 Not Found #

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

Oftest skyldes det, at pluginet enten er:

  • Ikke installeret

  • Deaktiveret pga. opdatering

  • En cache gør, at linket ikke bliver initialiseret

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

Følg disse fejlfindingstrin for at løse fejlen:

  1. Sørg for, at du har installeret Plugin korrekt, og at det er aktiveret. Hvis du for nylig auto-opdaterede pluginet, deaktiverer WooCommerce nogle gange pluginet. Er dette sket, så gå til Plugins > Clerk og klik på Aktiver.

  2. Ryd webshoppens cache før du prøver en ny import.

  3. Hvis det stadig ikke synkroniserer korrekt, så gå til din WooCommerce-backend, dernæst Settings > Permalinks og ændr 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 requests.

Du kan løse det ved enten at:

  • Sætte request limit højere på serveren.

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

Hvis du bruger Byte.nl som host, returnerer importøren ofte denne fejl pga. deres rate limiter. Kontakt i så fald Byte.nls support og bed dem whiteliste importørens User-Agent “clerk”.

500 Internal Server Error #

Denne fejl betyder, at din server oplevede en intern fejl og ikke kunne specificere, hvilken fejl der opstod.

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

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

Et eksempel på en sådan fejl kan opstå efter opgradering af både WooCommerce og Klarna. I dette tilfælde skyldes fejlen ‘woocommerce-gateway-klarna’-pluginet, som ikke bliver opgraderet.

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 forespørgslen.

Prøv igen senere.

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

Tjek serverbelastningen for at bekræfte og vurder dens aktuelle brug.

520 Unknown Error #

Denne fejl returneres typisk fra Cloudflare, og sker oftest pga. en flaskehals i WooCommerce ved høj Page Size.

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 som regel, hvis serveren er for travl til at svare, eller hvis importøren ikke har adgang til serveren.

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

  2. Hvis det stadig ikke virker, sørg for at whitelist importørens IP i din server-konfiguration. Den seneste IP-adresse findes her.

Ugyldigt API-svar #

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

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

Synkroniseringsproblemet sker, hvis WooCommerce støder på en fejl, mens produktdata genereres 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 alternativ:

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

Fejl vil stadig blive logget, selv når Debugging ikke er slået til, men 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 korrekt.

De to væsentligste forskelle i Clerk.js 2 er:

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

  • Scriptet skal indsættes lige før </head>-taget 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 enten at gentage dem i Design Editor, eller ved at konvertere din gamle kode-Design til Liquid.

Herunder finder du vejledning til at konvertere gamle kode-Designs til Liquid.

Design Editor-mulighed #

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

  2. Vælg en design-type (andet 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 kan du klikke på alle eksisterende elementer som navn, billede, knap osv. for at redigere dem, eller tilføje nye elementer til Designet.

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

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

Konvertering af designs #

Da Clerk.js 2 bruger det mere fleksible template-sprog Liquid, skal Designs konverteres 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 tilføje “V2” for at gøre det tydeligt, at du bruger Clerk.js 2 designs.

  3. Klik på Create Design.

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

  5. Gå tilbage til design-oversigten og klik på Edit Design for dit Clerk.js 1 Design. Vi anbefaler at gøre dette i en ny fane, så du let kan kopiere koden.

  6. Kopiér din gamle Clerk.js 1 Design over i dit nye Clerk.js 2 Design.

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

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

    • Kopiér din gamle Product HTML inden i for-loopet, din gamle Container Code uden om og kopier CSS med.

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

  8. Ret alle dine attributter til det nye format.

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

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

  4. Til sidst, opgradér pluginet ved at følge denne guide.

Opsætning af flere sprog #

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

Hvis du har unikke URLs som disse, kan du udvide WooCommerce-pluginet 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 i flere domæner på i standardopsætning er at oprette en separat Store for hvert domæne i my.clerk.io.

Så kan du holde styr på produkter, salg, valutaer mv. for hvert domæne for sig.

Når du er færdig med grundopsætningen, klik på øverste venstre hjørne af sidemenuen og klik så på "+ Add new store", som er sidste valgmulighed i rullemenuen (typisk under eksisterende store(s) og firmanavn).

På Add New Store siden, udfyld webshoppens oplysninger og vælg din hovedbutik fra Copy Elements From Existing Store dropdown, og klik Add Store:

Add new store in WooCommerce

Dette overfører Elements og Designs fra din hovedbutik. Husk også at oversætte Headlines til det rette 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, understøttes WPML.

I indstillingspanelet for WooCommerce ser du indstillingerne som normalt.

Hvis WPML er aktiv og konfigureret i din WordPress-installation, ser du Multi Language Scope med det aktuelle sprog øverst i indstillingssiden.

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

Bemærk, at det ikke anbefales at vælge All Languages i denne dropdown ved gemning, da det kun gemmer dine indstillinger som fallback.

Synkronisér domæner #

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

Da du allerede har installeret extensionen, kan du springe første trin over og starte konfigurationen og datasynkroniseringen direkte.

Når synkroniseringen er færdig, er domænet klar og bruger samme opsætning som din hovedbutik.

Shortcode-integration #

Hvis du bruger en Shortcode-editor som Elementor, kan vores normale Recommendations-kode muligvis ikke vises, fordi produkt-ID’et har en anden syntaks i Elementor end i en almindelig 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 lave disse, hvis de ønsker Clerk som Hook).

Erstat kode #

For at indsætte koden skal du erstatte:

<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 almindelige firkantede parenteser og derefter, hvis det ikke virker, med dobbelte parenteser:

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

Hvis dette 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 klik på produktsiden og følg så Widget > Shopsidebar 1 > add widget > Clerk Content.

WP Bakery Builder #

Integration i temafiler: Tilføjelse af Product Page Slider til alle sider

  1. Gå til Appearance > Theme File Editor > WooCommerce > content-single-product.php (eller tilsvarende fil hvor produktlayoutet defineres).

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

I WooCommerce er visse websider lavet med Visual Hooks i stedet for at blive rendret fra en HTML-fil.

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

functions.php-filen findes som regel på følgende sti:

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

Produktsside-eksempel #

For eksempel, for at tilføje et Recommendations-element med Elementet @product-page-alternatives til din produktside, skal du inkludere følgende kode inden for de store <?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, husk at udskifte koden i -tags med embed-koden fra dine Recommendations Elements i my.clerk.io, som nedenfor:

Clerk embed code example

Værdien sat i add_action(), 5 i dette eksempel, fortæller WooCommerce prioriteten af det tilføjede Element, hvilket bestemmer, hvor tidligt elementet vises i den Visual Hook.

Bemærk: WooCommerce accepterer kun multipla af 5 som prioritet.

Mere info om WooCommerce-websider, der anvender Visual Hooks:

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

Powerstep-problemer #

Dobbelt visning #

Hvis du oplever, at Powerstep vises to gange, er du nødt til at splitte siden for at løse det.

  1. I WooCommerce-backend, gå til din Powerstep-side under Pages.

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

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

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

Vises ikke #

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

Følg disse trin:

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

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

  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.