Woocommerce

Recommendations

Automatiser og personalisere produkter på enhver side i WooCommerce.
Recommendations WooCommerce

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

For vores komplette Best Practices om, hvilke Recommendations du bør bruge, læs denne artikel.

Slider-opsætning #

Recommendations oprettes med Elements, som refererer til et Design. Nedenfor finder du den grundlæggende guide til opsætning af et Element.

Hvis du følger trinnene i my.clerk.io > Settings > Setup Guides, oprettes Elements for vores Best Practices automatisk.

Opret Design #

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

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

Design Editor #

  1. Gå til Recommendations > Designs og klik på New Design.
  2. Vælg Product Slider
  3. Vælg den designskabelon, du vil begynde med, fra listen.
  4. Giv det et navn, og klik på Create design.
  5. Lav de ønskede ændringer i designet.

Code Design #

  1. Gå til Recommendations > Designs og klik på New Design.
  2. Vælg Other designs > Blank > Code.
  3. Giv det et navn, og klik på Create design.
  4. Opret et codedesign fra bunden ved brug af Liquid code.

Hvis du ønsker et startdesign, så tjek Slider template længere nede.

Opret Element #

Dette indeholder alle indstillinger, der bruges til at vise Recommendations og gøre det muligt at indsætte på dit website. Følg disse trin for hvert Recommendations-banner, du ønsker at oprette.

  1. Gå til Recommendations > Elements.
  2. Klik på New Element.
  3. Giv det et beskrivende navn. Vi anbefaler at navngive det efter den side og logik, du ønsker at bruge. F.eks. “Home Page / Visitor Recommendations”.
  4. Under Element type, vælg den produktlogik, du ønsker at bruge, fra dropdown-menuen. Du kan se en oversigt over alle product logics her.
  5. Under Design vælg det design, du har oprettet, fra dropdown-menuen og vælg, hvor mange produkter du vil vise.
  6. Klik på Save øverst på skærmen.

Tilføj til website #

For at tilføje Clerk Recommendations på dit website, har du tre forskellige muligheder: Injection, Embedded code, og via Plugin.

  1. Åbn fanen Insert into website.
  2. Her har du to muligheder:
    • Ved at bruge injection kan du indsætte koden ved at bruge en CSS-selector.
    • Ved at bruge embedded code kan du manuelt indsætte koden på dit website.
  3. Vælg den mulighed, der er nemmest for dig at bruge.
  4. For nogle Logics vil du se dropdown-menuen Choose your platform. Vælg WooCommerce i disse tilfælde. Dette udfylder embedkoden med de korrekte WooCommerce-shortcodes.

Plugin-opsætning #

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

  1. Gå til WooCommerce-backend.
  2. Vælg Clerk i venstre sidemenu.
  3. Find Element-indstillingen, du ønsker at aktivere.
  4. Klik på afkrydsningsfeltet med etiketten Enabled.
  5. Sørg for, at Element-feltet indeholder navnet på dit Recommendation Element (uden “@”). Det står i Element-embedkoden som dit data template-navn, f.eks. data-template=@product-page-alternatives.

my.clerk.io Opsætning #

  1. Gå til Recommendations > Elements.
  2. Vælg det ønskede indhold.
  3. Åbn fanen Insert into website.
  4. Her har du to muligheder:
    • Ved at bruge injection kan du indsætte koden via en CSS-selector.
    • Ved at bruge embedded code kan du manuelt indsætte koden på dit website.
  5. Vælg den mulighed, der er nemmest for dig.
  6. Ved embedded code, tilføj enhver nødvendig frontend-logik for at indsætte f.eks. et produkt- eller kategori-ID. Dette afhænger af den logik, du vælger.

Her er et komplet Recommendations embed code-eksempel, med et prøveprodukt-ID:

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

Sider #

Nedenfor listes de specifikke sider, hvor du bør indsætte Recommendations, og hvilke typer du bør bruge, for at følge vores Best Practices.

Forside #

  1. I my.clerk.io, opret 3 Elements med følgende logikker:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Indsæt embedkoderne i din forside-skabelon/blok.

Hvis du ønsker at vise alle bannerne oven på hinanden, indsæt alle embedkoderne samme sted. Vil du dele dem på forsiden, gentag blot processen flere gange.

Kategoriside #

  1. I my.clerk.io, opret et Element med logikken Bestsellers In Category.
  2. I dropdown-menuen Insert into website > Choose your platform, vælg WooCommerce og kopier embedkoden.
  3. Indsæt embedkoden i din kategoriside-skabelon, eller brug plugin-indstillingerne til at aktivere den.

Produktside #

  1. I my.clerk.io, opret 2 Elements med følgende logikker:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. I dropdown-menuen Insert into website > Choose your platform, vælg WooCommerce for hver af dem og kopier embedkoderne.
  3. Indsæt embedkoderne i din produktside-skabelon, eller brug plugin-indstillingerne til at aktivere dem.

Add-To-Basket Step #

  1. I my.clerk.io, opret et Element med logikken Best Cross-Sell Products.
  2. Giv det navnet “Add-To-Basket / Others Also Bought”. Dette er vigtigt, for at embedkoden fungerer korrekt.
  3. Klik på Save øverst på siden.
  4. I WooCommerce-backend, i venstre sidemenu, gå til Pages.
  5. Øverst på siden, klik på Add New.
  6. Giv powerstep-siden et beskrivende navn, f.eks. “Produkt tilføjet til kurven!”, da dette vises som titel på din powerstep.
  7. I det store tekstfelt, skriv [clerk-powerstep], og klik på Publish.
  8. Gå til Clerk > Clerk Settings i sidemenuen og find Powerstep Settings.
  9. Indsæt i Element-feltet ID’erne på de Elements, du har oprettet, adskilt af komma. ID’et står i Element-embedkoden som dit data template-navn, f.eks. data-template=@power-step-others-also-bought.
  10. Vælg det sidenavn, du har oprettet, under Powerstep Page, og afkryds Enabled.
  11. Klik på Save Settings.

Hvis du oplever problemer med powerstep, se denne guide.

Kurvside #

  1. I my.clerk.io, opret et Element med logikken Best Cross-Sell Products.
  2. I dropdown-menuen Insert into website > Choose your platform, vælg WooCommerce, og kopier embedkoden.
  3. Indsæt embedkoden i din kurvside-skabelon, eller brug plugin-indstillingerne til at aktivere den.

Exit Intent #

  1. I my.clerk.io, opret et Element med logikken Visitor Recommendations.
  2. Du kan aktivere det via plugin eller manuelt. Nedenfor er trinene for begge muligheder.

Plugin-opsætning #

For at opsætte Exit Intent via pluginet, følg disse 5 trin:

  1. Opret nyt Element i my.clerk.io og navngiv det Exit Intent.

  2. Vælg en logik for det – vi foreslår “Visitor Recommendations”.

  3. I WooCommerce-backend, gå til Clerk i sidemenuen og find Exit-Intent Settings.

  4. Afkryds Enabled, og sørg for, at Template-feltet indeholder “exit-intent”.

  5. Klik på Save Settings for at aktivere det.

Manuelt opsætning #

Hvis du ønsker at konfigurere Exit-Intent manuelt, følg disse trin:

  1. Opret nyt Element i my.clerk.io og navngiv det Exit Intent.

  2. Style dit Element i Designs på my.clerk.io

  3. Vælg en logik for det – vi foreslår “Visitor Recommendations”.

  4. Fra Insert Into Website, kopier den givne embedkode til denne WooCommerce-fil, lige over Clerk.io tracking-scriptet: wp-content > plugins > clerkio > includes > class-clerk-visitor-tracking.php

  5. Tilføj data-exit-intent="true" til embedkoden, du lige har placeret i class-clerk-visitor-tracking.php. Sådan her:

<!-- Start of 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>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Bemærk: Alle recommendations indeholdende data-exit-intent="true" vil udløse exit intent pop-up’en.

Startskabeloner #

Hvis du vil bruge codedesigns, kan disse skabeloner hjælpe dig i gang.

Slider-kode #

Denne skabelon vil vise en standard-slider med forskellige produktoplysninger, som du kan tilpasse efter 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">On Sale</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">Out of Stock</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">Add to Cart</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.