Woocommerce

Recommendations

Automatiser og personalisere produkter på enhver side i WooCommerce.

Clerk.io tilbyder mere end 23 forskellige typer produktlogikker, hvilket gør det muligt at vise fuldstændig 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 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
Vælg det designskabelon, du ønsker at starte med, fra listen.
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 kode design 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 Anbefalinger > Indhold.
Klik Nyt Indhold.
Giv det et beskrivende navn. Vi anbefaler at navngive det baseret på den side og logik, du ønsker at bruge. F.eks. “Hjemmeside / 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: Injektion, 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 Indhold-indstilling, du gerne vil aktivere.
Klik på afkrydsningsfeltet mærket Aktiveret.
Sørg for, at Indhold-feltet indeholder navnet på dit Anbefalingsindhold (uden “@”). Det er angivet inden for Indhold indlejringskode som dit dataskabelon navn, f.eks. data-template=@product-page-alternatives.

Her er et komplet eksempel på Anbefalings indlejringskode, med et eksempel 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:
- Ved at bruge injektion kan du indsætte koden ved hjælp af en CSS-vælger.
- Ved at bruge indlejret kode kan du 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 ønsker at bruge i dit Tilføj-til-Kurv Powerstep.
I WooCommerce backend, i venstre side-menu, gå til Sider.
Øverst på siden skal du klikke Tilføj Ny.
Giv powerstep-siden et meningsfuldt navn, som “Produkt tilføjet til kurven!”, da dette vil blive vist som titlen på dit powerstep.
I det store tekstfelt skal du skrive [clerk-powerstep], og klikke 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 Indhold 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 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 pluginet, følg disse 5 trin:

Opret nyt Indhold i my.clerk.io og navngiv det Exit Intent.
Vælg en logik for 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, 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 for 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 på 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 ønsker at bruge kode designs, 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">Ikke på lager</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.