Woocommerce

Recommendations

Automatiser og personalisere produkter på enhver side i WooCommerce.

Clerk.io tilbyder mere end 23 forskellige typer af produktlogikker, hvilket gør det muligt at vise helt automatiserede produkter på enhver side. Denne artikel forklarer, hvordan du kommer i gang med Anbefalinger ved hjælp af WooCommerce-pluginet.

For vores fulde bedste praksis om, hvilke Anbefalinger der skal bruges, læs denne artikel.

Opret Design #

Anbefalinger vises som en slider som standard. Dette gør det muligt for kunderne at se flere produkter med færre klik. Du kan enten bruge Design Editor til at konfigurere det visuelt, eller bruge kode designs.

Et design kan genbruges til et vilkårligt antal Anbefalingsindhold, du opretter.

Design Editor #

Gå til Recommendations > Designs og klik New Design.
Vælg Product Slider
Fra listen over designskabeloner, vælg den, du vil starte med.
Giv det et navn og klik Create design.
Foretag de ændringer, du ønsker til designet.

Kodedesign #

Gå til Recommendations > Designs og klik New Design.
Vælg Other designs > Blank > Code.
Giv det et navn og klik Create design.
Opret et kodedesign fra bunden ved hjælp af Liquid-kode.

Hvis du ønsker et startdesign, kan du tjekke Slider-skabelonen længere nede.

Opret Indhold #

Dette indeholder alle indstillinger, der bruges til at vise Anbefalingsslideren og gøre den indlejret på dit website. Følg disse trin for hver Anbefalingsbanner, du ønsker at oprette.

Gå til Recommendations > Content.
Klik New Content.
Giv det et beskrivende navn. Vi anbefaler at navngive det baseret på den side og logik, du ønsker at bruge. F.eks. “Hjemmeside / Besøgeranbefalinger”.
I Content type, vælg den produktlogik, du ønsker at bruge fra dropdown-menuen. Du kan se en oversigt over alle produktlogikker her.
I Design vælg det design, du har oprettet fra dropdown-menuen, og vælg antallet af produkter, du ønsker at vise.
Klik Save øverst på skærmen.

Tilføj til Website #

For at tilføje Clerk Anbefalinger på dit website har du tre forskellige muligheder: Injection, Indlejret kode, og gennem Plugin.

Plugin Opsætning #

Denne mulighed er tilgængelig for Kategori, Kurv, Produkt sider, Exit Intent og Powerstep.

Gå til WooCommerce backend.
Vælg Clerk i venstre side-menu.
Find den Indholdsindstilling, du gerne vil aktivere.
Klik på afkrydsningsfeltet mærket Enabled.
Sørg for, at Content-feltet indeholder navnet på dit Anbefalingsindhold (uden “@”). Det er angivet inden for indholdets indlejringskode som dit dataskabelonnavn, f.eks. data-template=@product-page-alternatives.

Her er et komplet eksempel på indlejringskode til Anbefalinger, med et eksempel på produkt-ID:

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

My.Clerk Opsætning #

Gå til Recommendations > Content.
Vælg det valgte indhold.
Åbn Insert into website fanen.
Her har du to muligheder:
- Brug af injection giver dig mulighed for at indsætte koden ved hjælp af en CSS-vælger.
- Brug af indlejret kode giver dig mulighed for at indsætte koden manuelt på dit website.
Vælg den mulighed, der er nemmest for dig at bruge.
For indlejret kode, tilføj eventuel nødvendig frontend-logik til at indsætte, for eksempel et produkt- eller kategori-ID. Dette afhænger af den logik, du vælger.

Powerstep #

For at aktivere tilføj-til-kurv Powerstep, følg disse trin:

Hvis du ikke allerede har gjort det, opret Indhold, som du ønsker at bruge i din Tilføj-til-kurv Powerstep.
I WooCommerce backend, i venstre side-menu, gå til Pages.
Øverst på siden, klik Add New.
Giv powerstep-siden et meningsfuldt navn, som “Produkt tilføjet til kurven!”, da dette vil blive vist som titlen på din powerstep.
I det store tekstfelt, skriv [clerk-powerstep], og klik Publish.
Gå til Clerk > Clerk Settings i side-menuen og find Powerstep Settings.
Indsæt i Content-feltet ID’erne på de indholdsblokke, du har oprettet, adskilt af kommaer. ID’et er angivet inden for indholdets indlejringskode som dit dataskabelonnavn, f.eks. data-template=@power-step-others-also-bought.
Vælg sidenavnet, du har oprettet under Powerstep Page og tjek Enabled.
Klik Save Settings.

Hvis du har problemer relateret til powerstep, kan du tjekke denne guide.

Exit Intent #

Exit Intent popup’en reagerer, når en besøgende forsøger at forlade din webshop. Den viser interessante produkter, hvilket muligvis konverterer en forladende besøgende til en køber.

Du kan aktivere det gennem plugin eller manuelt. Nedenfor er trinene for begge muligheder.

Plugin Opsætning #

For at opsætte Exit Intent gennem plugin’et, følg disse 5 trin:

Opret nyt Indhold i my.clerk.io og navngiv det Exit Intent.
Vælg en logik til det - Vi foreslår “Besøgeranbefalinger”.
I WooCommerce backend, gå til Clerk i side-menuen og find Exit-Intent Settings.
Tjek Enabled, og sørg for, at Template-feltet indeholder “exit-intent”.
Klik Save Settings for at aktivere det.

Clerk Opsætning #

Hvis du vil konfigurere Exit-Intent manuelt, skal du følge disse trin:

Opret nyt Indhold i my.clerk.io og navngiv det Exit Intent.
Stil dit Indhold i Designs på my.clerk.io
Vælg en logik til det - Vi foreslår “Besøgeranbefalinger”.
Fra Indsæt i Website, kopier den angivne indlejringskode til denne WooCommerce-fil, lige over Clerk.io tracking-scriptet: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php
Tilføj data-exit-intent="true" til den indlejringskode, du lige har placeret i class-clerk-visitor-tracking.php. Sådan:

<!-- Start af Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
    key: 'YOUR_STORE_PUBLIC_KEY'
  });
</script>
<!-- Slut af Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Bemærk: Alle anbefalinger, der indeholder data-exit-intent="true", vil udløse exit intent-popup’en.

Startskabelon #

Hvis du vil bruge kodedesign, kan denne skabelon hjælpe dig i gang. Den vil gengive en standard slider med forskellige produktinformationer, som du kan tilpasse til dine behov.

HTML #

<div class="clerk-recommendations">
    <h2 class="section-title" style="text-align:center; text-transform: uppercase;"><span>{{ headline }}</span></h2>

    <div class="clerk-slider">
         {% for product in products %}
            <div class="clerk-slider-item">
                <div class="clerk-slider-product">
                    <a href="{{ product.url }}">
                        {% if product.price < product.list_price %}
                            <div class="clerk-slider-badge">På udsalg</div>
                        {% endif %}
                        <div class="clerk-slider-image" style="background-image: url('{{ product.image }}');"></div>
                        <div class="clerk-slider-brand">{{ product.brand }}</div>
                        <div class="clerk-slider-name">{{ product.name }}</div>
                        
                        <div class="clerk-slider-pricing">
                            {% if product.price < product.retail_price %}
                                <div class="clerk-slider-list-price">£{{ product.retail_price | money }}</div>
                            {% endif %}
                            
                            <div class="clerk-slider-price">£{{ product.price | money }}</div>
                        </div>
                    </a>
                    {% if product.stock == 0 %}
                        <a class="clerk-not-in-stock" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button-not-in-stock">Udsolgt</div>
                        </a>
                    {% else %}
                        <a class="clerk-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Tilføj til kurv</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

CSS #

.clerk-recommendations {
    margin: 1em 0;
}

.clerk-recommendations-headline {
    font-weight: bold;
    font-size: 2em;

    text-align: center;
}

.clerk-slider-item {
    margin: auto;
}

.clerk-slider-product {
    position: relative;
    overflow: hidden;

    margin: 1em;
    padding: 1em;

    background-color: white;

    border: 1px solid #eee;
    border-radius: 1em;

    box-shadow: 0 .1em .2em 0 rgba(0,0,0,.08);

    text-align: center;
}

.clerk-slider-badge {
    position: absolute;
    top: 5px;
    right: -35px;

    display: inline-block;

    width: 120px;

    margin: 10px auto;
    padding: 5px 0;

    border-radius: 3px;

    background-color: #fbc531;

    font-size: 10px;
    color: white;

    text-align: center;
    letter-spacing: 1px;

    transform: rotate(45deg);
}

.clerk-slider-tags {
    position: absolute;
    top: .8em;
    left: .8em;
}

.clerk-slider-tag {
    display: inline-block;

    padding: .2em .8em;

    border-radius: .3em;

    background-color: gray;

    font-size: 10px;
    color: white;

    letter-spacing: 1px;
}

.clerk-slider-image {
    width: 100%;
    height: 8em;

    margin-bottom: 1em;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.clerk-slider-brand {
    font-size: 0.9em;
    color: #757575;
}

.clerk-slider-name {
    height: 3em;
    overflow: hidden;
    color: #4a3b40;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 1em;
}

.clerk-slider-pricing {
    display: flex;

    margin-bottom: 1em;
}

.clerk-slider-price {
    flex: 1;
    color: #757575;
    font-weight: bold;
}

.clerk-slider-list-price {
    flex: 1;
    
    opacity: .8;
    
    font-weight: normal;
    text-decoration: line-through;
    color: gray;
}

.clerk-add-to-cart, .clerk-add-to-cart:hover {
    color: white;
}

.clerk-not-in-stock, .clerk-not-in-stock:hover {
    color: #4a3b40;
}

.clerk-slider-button-not-in-stock {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: white;
    color: #4a3b40;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}

.clerk-slider-button {
    display: block;

    margin: 0 auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;

    cursor: pointer;
}


.clerk-load-more-button {
    display: block;
    
    width: 20em;

    margin: 1em auto;
    padding: .6em 2em;

    border: none;
    border-radius: .5em;

    background-color: #b6c254;
    color: white;

    text-transform: uppercase;
    text-align: center;

    white-space: nowrap;

    font-weight: bold;
    font-size: 1.2em;

    cursor: pointer;
}

@media screen and (min-width: 1100px){
    .clerk-slider-item {
        width: 20%;
    }
}

@media screen and (min-width: 900px) and (max-width: 1100px){
    .clerk-slider-item {
        width: 25%;
    }
}

@media screen and (min-width: 414px) and (max-width: 900px) {
    .clerk-slider-item {
        width: 50%;
    }
    .clerk-slider-button, .clerk-slider-button-not-in-stock {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 413px) {
    .clerk-slider-item {
        width: 100%;
    }
}

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