Woocommerce

FAQ

Manuel installation af elementer #

WooCommerce er bygget op omkring temaer, hvilket ofte betyder, at Clerk.io plugin ikke kan indsætte vores indlejringskoder, fordi hooks ikke er placeret i standardpositioner.

Følg disse trin for manuelt at indsætte koder, hvis det er tilfældet.

  1. Start med at finde din søgeformular. Du kan gøre dette ved at inspicere dit website og finde en unik tekst til feltet.

  1. Åbn din webshops FTP-filer og find public\_html > wp-content > themes

  2. Træk temaer mappen til dit skrivebord for at kopiere den til din computer. Dette vil give dig mulighed for at søge i filen.

  3. I dit foretrukne kode redigeringssoftware åbner du mappen, f.eks. i Sublime: Project > Add Folder to Project.

  4. Vælg temaer mappen, som du gemte på din computer under trin 3.

  5. Nu kan du søge i filerne. Du kan endda vælge kun at søge i .php filer, som normalt er den filtype, der bruges til tema-filer i WooCommerce.

2. Få linket til søgesiden til at fungere #

Hvis du allerede har fulgt guiden til opsætning af søgning og har oprettet en side i WooCommerce til søgningens resultater, men dit søgefelt ikke linker korrekt, er dette, hvad du skal gøre.

1. Start med at se på webshoppen i din browser. Vi anbefaler at bruge Chrome.

2. Find enhver HTML, der ser ud til at være unik for søgefeltet. For eksempel søgeformular:

3. Søg efter dette i Sublime for at finde en liste over filer, som det er i:

4. Find den matchende fil på FTP.

5. Nu kan du ændre de nødvendige indstillinger for at få Clerk.io til at linke til den korrekte side. De 3 ting, du skal ændre, er:

  • URL’en, som kunden er linket til, ofte fundet i

    elementet, skal ændres for at matche navnet på den side, du har oprettet i WooCommerce. Dette vil ofte være “soegeresultater” eller “search-results”

  • “name” attributten for input-feltet, der skal være searchterm

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

6. En søgeformular kunne se sådan ud før ændringen:

7. Og bør se sådan ud efter ændringen:

8. Nu skal du være linket til søgesiden, når du søger: www.mywebshop.com/soegeresultater?searchterm=test

Brug af formattere i designs #

Clerk.js giver dig mulighed for at skrive brugerdefinerede javascript-funktioner, der tilføjer ny funktionalitet til Designs.

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

  • Via my.clerk.io > Settings > Formatters, hvor hver formatter oprettes som en separat post.
  • Som en del af Clerk.js konfigurationen, med tracking-scriptet tilføjet til alle sider, hvilket giver mulighed for at definere flere formattere på én gang.

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

Et eksempel kan ses nedenfor:

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

Du kan skrive et hvilket som helst antal Formattere, 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;
   }
}

Efter at have oprettet dine Formattere, kan du bruge dem i dine Designs ved hjælp af denne syntaks:

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

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

Synkronisering med HTTP Auth #

Ofte bruges HTTP-godkendelse på staging-sider for at undgå uinviterede besøgende.

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

Du kan nemt verificere importøren ved at indsætte godkendelsesoplysningerne i import-URL’en som nedenfor, i Data Sync på my.clerk.io:

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

Almindelige synkroniseringsproblemer #

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

Når du importerer data med Clerk.io’s WooCommerce Plugin, er webshoppens server ansvarlig for at sende produkt-, kategori- og ordredata til Clerk.io.

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

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

401 Serverfejl: Uautoriseret #

Denne fejl opstår, hvis din webshop/dev-miljø kræver HTTP-godkendelse for at få adgang til det.

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

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

403 Serverfejl: Forbudt #

Denne fejl opstår, hvis din server blokerer importøren fra at få adgang til det. I de fleste tilfælde skal du blot whiteliste importørens IP-adresse for at give den adgang.

Den nyeste IP-adresse kan findes her.

Sørg også for, at Offentlig nøgle, Privat nøgle og Import-URL er korrekte for den butik, du opererer inden for my.clerk.io.

Hvad hvis jeg allerede har whitelisted, men den samme fejl stadig opstår?

Hvis du har whitelisted importørens IP-adresse, men fejlen fortsætter, anbefaler vi at tjekke følgende:

  • Godkendelsesdelen af anmodningen kan være blevet fjernet fra anmodningen fra butikkens server.
  • Rategrænsen for serveren i forhold til cloudflares.

404 Serverfejl: Ikke fundet #

Denne fejl opstår, hvis importøren ikke kunne få adgang til linket, der sender os data fra webshoppen. I de fleste tilfælde sker det, fordi plugin’et enten er:

  • Slet ikke installeret

  • Deaktiveret på grund af en opdatering

  • En cache forårsager, at linket ikke bliver initialiseret

  • WooCommerce permalinks er indstillet til Post navn i stedet for Måned og navn

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

  1. Sørg for, at du har installeret Plugin korrekt, og at den er aktiveret. Hvis du for nylig har opdateret plugin’et automatisk, deaktiverer WooCommerce nogle gange plugin’et. Hvis dette er sket, skal du blot gå til Plugins > Clerk og klikke på Aktiver.

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

  3. Hvis det stadig ikke synkroniserer korrekt, gå ind i din WooCommerce backend, så Settings > Permalinks og ændre Almindelige indstillinger til Måned og navn og tryk på Gem ændringer:

429 Serverfejl: For mange anmodninger #

Denne fejl opstår, hvis din server nægter importøren adgang på grund af for mange indkommende anmodninger.

Du kan løse dette ved enten:

  • At sætte anmodningsgrænsen højere for din server.
  • At sætte Side størrelse til en højere værdi i my.clerk.io > System Status > Data Sync, hvilket får importøren til at lave færre, større anmodninger.

Hvis du bruger hostudbyderen Byte.nl, returnerer importøren normalt denne fejl på grund af deres rate limiter. I dette tilfælde skal du blot kontakte Byte.nl support og bede dem om at whiteliste importørens User-Agent “clerk”.

500 Intern serverfejl #

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

I disse tilfælde kan du tjekke din Serverlog for at identificere, hvilken proces der gik ned, og hvorfor. I de fleste tilfælde skyldes det simpelthen et produkt med en ugyldig attribut eller en funktion, der kaldes forkert i webshoppen.

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

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

Se efter:

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

og ændre det til:

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

503 Serverfejl: Tjenesten er utilgængelig #

Denne fejl er typisk midlertidig og opstår, når serveren er for travl til at behandle anmodningen. Prøv venligst igen senere.

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

For at bekræfte, tjek serverbelastningen og vurder dens nuværende brug.

520 Webserver returnerede en ukendt fejl #

Normalt returneres denne fejl fra CloudFlare, og sker ofte på grund af en flaskehals i WooCommerce, der forårsager problemer med højere side størrelser.

For at løse det, skal du blot sætte din side størrelse til 50 i my.clerk.io > System Status > Data Sync og køre en ny Data Sync.

522 Serverfejl: Forbindelsen timed out #

Denne fejl opstår normalt, 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 travlt.
  2. Hvis det stadig ikke virker, skal du sørge for at whiteliste importørens IP i din serverkonfiguration. Den nyeste IP-adresse kan findes her.

Ugyldigt svar returneret fra WooCommerce API #

Denne fejl opstår normalt, hvis WooCommerce’s Debugging er blevet aktiveret. Dette er aldrig en god idé at have aktiveret på en live-opsætning, da det sænker siderne og potentielt viser fejlmeddelelser i frontend.

Synkroniseringsproblemet opstår, hvis WooCommerce støder på en fejl, mens den genererer produktdataene til importen.

Dette kan løses ved at deaktivere Debugging i wp-config.php ved at indstille define(WP_DEBUG’, false).

Denne guide forklarer det i 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 de ikke er i Debug-tilstand, men de vil blive logget til en fil i stedet.

Opgradering til Clerk.js 2 #

Clerk.js 2 er en hurtigere og meget mere fleksibel version af vores JavaScript-bibliotek, der gør installationen af Clerk.io på enhver webshop til en leg.

Men da de to versioner fungerer lidt forskelligt, skal du følge disse trin for at opgradere med succes.

De to hovedforskelle i Clerk.js 2 er:

  • Designs i my.clerk.io bruger Liquid, men kan også nemt oprettes ved hjælp af Design Editor.

  • Scriptet skal indsættes lige før tagget i din webshops skabelon.

Opret Designs #

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

Du kan oprette dine Clerk.js 2 Designs enten ved at lave dem om i Design Editor, eller ved at konvertere din gamle kode Designs til Liquid, som den nedenstående guide forklarer, hvordan du gør. Nedenfor er en beskrivelse af, hvordan du konverterer dine gamle kode Designs til Liquid.

Mulighed 1: Design Editor Designs #

  1. Gå til my.clerk.io > Recommendations/Search > Designs > New Design.
  2. Vælg en design type, 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 til dette.
  3. I Design Editor skal du klikke på et af de eksisterende elementer som navn, billede, knap osv. for at redigere det, eller tilføje nye elementer til designet.
  4. Klik på Publicer design når du er færdig, og gå til Trin 2 i guiden.
  5. Til sidst skal du gå til Recommendations/Search > Content og ændre dit Clerk.io-indhold til at bruge dit nye design, og derefter klikke på Update Content.
  6. Dette vil midlertidigt forårsage, at de ikke vises på din webshop, indtil du har indsat Clerk.js 2 som beskrevet længere nede i denne guide.

Mulighed 2: Konvertering af Designs #

Da Clerk.js 2 bruger det mere fleksible skabelonsprog Liquid, skal du konvertere Designs til dette sprog.

  1. Start med at 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 til dette.
  3. Klik på Opret design.
  4. Dette vil give dig et tomt design med produkt HTML og CSS, som du kan bruge.
  5. Gå tilbage til designoversigten og klik på Rediger design for dit Clerk.js 1 Design. Vi anbefaler at gøre dette i en ny fane, så du nemt kan kopiere koden.
  6. Nu skal du kopiere det gamle Clerk.js 1 Design til dit nye Clerk.js 2 Design.
    • Du vil bemærke, at der ikke er Container kode i din nye.
    • Dette skyldes, at Liquid bruger for loops til at gengive alle produkterne.
    • Kopier dit gamle Produkt HTML inden for-loopet, din gamle Container kode omkring det og kopier også CSS.
  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. Gå gennem alle dine attributter og ændre dem til det nye format.
  9. Hvis du bruger {{#if}} eller {{#is}} udsagn, 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 #
// Produkt 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 kode
<h2>{{ headline }}</h2>
<ul id="{{ $id }}" class=":target clerk-slider"></ul>

<!-- Denne kode opretter slideren ved dens 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 nu på Opdater design for at gemme ændringerne.
  2. Til sidst skal du gå til Recommendations/Search > Content og ændre dit indholdsblok til at bruge dit nye design.
  3. Klik på Opdater indhold. Dette vil midlertidigt forårsage, at de ikke vises på din webshop, indtil du er færdig med Trin 2. Vælg det nye design for alt indhold, der skal opdateres.
  4. Endelig opgrader plugin’et, ved at følge denne guide.

Flersprog #

Når du bruger WPML i WooCommerce, bør du være i stand til at differentiere dine sprog ved 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. F.eks.

Kopier butik #

Den nemmeste måde at implementere Clerk.io i flere domæner i standardopsæ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 osv. for at holde styr på hvert domæne.

Når du er færdig med den indledende opsætning, skal du klikke på den øverste venstre hjørne af side-menuen og derefter klikke på "+ Tilføj ny butik" den sidste mulighed i rullelisten (generelt under dine eksisterende butik(ker) og dit firmanavn).

På siden Tilføj ny butik skal du udfylde oplysningerne om din webshop og vælge din hovedbutik fra dropdown-menuen Kopier indhold fra eksisterende butik, og derefter klikke på Tilføj butik:

Dette vil overføre Indholdet og Designs fra din hovedbutik. Husk at oversætte Overskrifter til det rigtige sprog også.

Installer og konfigurer #

Officiel support til WPML er blevet tilføjet til Clerk.io WooCommerce Extension, hvilket betyder, at så længe du bruger den version eller en nyere, bør WPML være understøttet.

I indstillingspanelet for woocommerce vil du se 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 sproget skal du blot bruge vælgeren i toppanelet. Du skal vælge det sprog, du ønsker at konfigurere Clerk til, og give dine ønskede indstillinger. Gentag dette for hvert sprog.

Bemærk, at det ikke anbefales at vælge Alle sprog fra denne dropdown, når du gemmer din konfiguration, da det kun vil gemme dine indstillinger som en fallback.

Synkroniser dine domæner #

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

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

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

Indsæt ved hjælp af shortcodes #

Shortcode integration #

Hvis du bruger en Shortcode-editor som Elementor, så kan vores almindelige anbefalede kode-snippet muligvis ikke blive gengivet på grund af produkt-ID’et, der er syntaktisk anderledes i Elementor end i et normalt HTML-blok.

Hvis du bruger Hooks, kan du gå til Appearance -> Custom Layouts -> Insert shortcode på den Hook, der tilhører Clerk (i tilfælde, kan en udvikler oprette disse, hvis han ønsker, at Clerk skal være en Hook).

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

<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 kodeindsættelse #

Hvis du ikke kan indsætte shortcode eller ikke bruger nogen form for editor, skal du gå til Appearence > Personalization og derefter klikke på produkt siden og følge disse trin Widget > Shopsidebar 1 > add widget > Clerk Content.

WP Baker Builder #

Tema Fil Integration: Tilføjelse af en Produkt Side Slider til Alle Sider

  1. Naviger til Appearance > Theme File Editor > WooCommerce > content-single-product.php (eller en lignende fil, hvor din produkt side layout er defineret).
  2. Indsæt span-koden på det ønskede sted i filen for at vise slideren. Denne proces ligner at foretage æ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>

Tilføjelse af anbefalinger med visuelle hooks #

Inden for WooCommerce oprettes visse webstedssider ved hjælp af Visuelle Hooks i stedet for at blive gengivet fra en HTML-fil. For at tilføje indhold til sider oprettet via Visuelle Hooks, skal du indsætte Clerk.io-indholdet i webshopens aktive functions.php fil.

funktionen.php filen er normalt placeret på følgende sti:

/wp-content/themes/DIT-TEMA-NAVN-child-theme/functions.php

For eksempel, for at tilføje en anbefalingsslider med indholdet @product-page-alternatives til din produkt side, ville du inkludere følgende kode inden for de hoved <php? ?> tags i functions.php:

// CLERK TILFØJ PRODUKT SIDE 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>";
}

Og et andet eksempel for at tilføje en anbefalingsslider til Tilføj-til-kurv-siden:

// CLERK TILFØJ KURV 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 anbefalingsslidere til de ovenstående sider, skal du huske at erstatte koden inden for tags med indlejringskoden, der leveres i dit anbefalingsindhold i my.clerk.io, som nedenfor:

Den værdi, der er indstillet i add_action(), 5 i dette eksempel, fortæller WooCommerce prioriteten af det indhold, der tilføjes, hvilket igen påvirker, hvor tidligt indholdet vises i den visuelle hook. Bemærk: Når du indstiller prioritet, accepterer WooCommerce kun multipler af 5.

Mere info om WooCommerce webstedssider, der bruger visuelle hooks:

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

Powerstep problemer #

Powerstep gengiver to gange #

Hvis du støder på 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 oprettede i Sider.
  2. Vælg Shortcodes i øverste højre hjørne, og klik derefter på Row / Columns.
  3. Klik derefter på “OK” i pop op-vinduet, der vises.
  4. Flyt til sidst [clerk-powerstep] inden for [row] [col] og [/row] [/col] tags, og klik på Gem.

Powerstep gengiver ikke #

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

For at gøre dette skal du følge disse trin:

  1. Gå til WooCommerce > Indstillinger > Produkter og find Add to cart behaviour.
  2. Sørg for, at begge bokse ikke er markeret.
  3. Klik på Gem ændringer nederst på siden.

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