Woocommerce

Recommendations

Automatiser og personalisere produkter på enhver side i WooCommerce.

Clerk.io tilbyder mere end 23 forskellige typer produktlogik, 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 du skal bruge, læs denne artikel.

Opret Design #

Anbefalinger vises som en slider som standard. Dette giver kunderne mulighed for 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 Anbefalinger > Designs og klik Nyt Design.
Vælg Produkt Slider
Fra listen over designskabeloner, vælg den, du vil starte med.
Giv det et navn og klik Opret design.
Foretag de ændringer, du ønsker til designet.

Kode Design #

Gå til Anbefalinger > Designs og klik Nyt Design.
Vælg Andre designs > Blank > Kode.
Giv det et navn og klik Opret design.
Opret et kodedesign fra bunden ved hjælp af Liquid-kode.

Hvis du vil have 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 Anbefalinger > Indhold.
Klik Nyt Indhold.
Giv det et beskrivende navn. Vi anbefaler at navngive det baseret på siden og logikken, du ønsker at bruge. F.eks. “Forside / Besøger Anbefalinger”.
I Indholdstype, 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 Gem ø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 Indholdindstilling, du gerne vil aktivere.
Klik på afkrydsningsfeltet mærket Aktiveret.
Sørg for, at Indhold-feltet indeholder navnet på dit Anbefalingsindhold (eksklusive “@”). Det er angivet inden for indholdets indlejringskode som dit dataskabelon navn, f.eks. data-template=@product-page-alternatives.

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

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

Clerk Opsætning #

Gå til Anbefalinger > Indhold.
Vælg det valgte indhold.
Åbn Indsæt i 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 enhver 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, skal du oprette det Indhold, som du vil bruge i din Tilføj-til-kurv Powerstep.
I WooCommerce backend, i venstre side-menu, gå til Sider.
Øverst på siden, klik Tilføj Ny.
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 Udgiv.
Gå til Clerk > Clerk Indstillinger i side-menuen og find Powerstep Indstillinger.
Indsæt i Indhold-feltet ID’erne for de Indholdsblokke, du har oprettet, adskilt af kommaer. ID’et er angivet inden for indholdets indlejringskode som dit dataskabelon navn, f.eks. data-template=@power-step-others-also-bought.
Vælg sidenavnet, du har oprettet under Powerstep Side og tjek Aktiveret.
Klik Gem Indstillinger.

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

Exit Intent #

Exit Intent pop-up’en reagerer, når en besøgende prøver 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 pluginet, 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øger Anbefalinger”.
I WooCommerce backend, gå til Clerk i side-menuen og find Exit-Intent Indstillinger.
Tjek Aktiveret, og sørg for, at Skabelon-feltet indeholder “exit-intent”.
Klik Gem Indstillinger for at aktivere det.

Clerk Opsætning #

Hvis du vil konfigurere Exit-Intent manuelt, følg 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øger Anbefalinger”.
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 pop op.

Startskabelon #

Hvis du vil bruge kodedesign, kan denne skabelon få 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.