Woocommerce

Recommendations

Automatiser og personaliser produkter på enhver side i WooCommerce.
Recommendations 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 Recommendations ved at bruge WooCommerce plugin.

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

Slider Opsætning #

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

Hvis du følger trinnene i my.clerk.io > Settings > Setup Guides vil Elements til vores Best Practices automatisk blive oprettet.

Opret Design #

Recommendations vises som standard som en slider. 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 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 designtemplate, du ønsker at starte med.
  4. Giv det et navn, og klik på Create design.
  5. Foretag de ændringer, du ønsker, 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 code design fra bunden med Liquid code.

Hvis du vil have et startdesign, se Slider template længere nede.

Opret Content #

Dette indeholder alle indstillinger brugt til at vise Recommendations og gøre det indlejringsbart på dit website. Følg disse trin for hver Recommendations-banner, du vil oprette.

  1. Gå til Recommendations > Elements.
  2. Klik på New Content.
  3. Giv det et beskrivende navn. Vi anbefaler, at du navngiver det efter siden og logikken, du vil bruge. F.eks. “Home Page / Visitor Recommendations”.
  4. Under Content type, vælg den produktlogik, du vil bruge, fra dropdown-menuen. Du kan se et overblik over alle produktlogikker 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:
    • Brug af injection lader dig indsætte koden ved hjælp af en CSS selector.
    • Brug af embedded code lader dig indsætte koden manuelt på dit website.
  3. Vælg den mulighed, der er lettest 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 det Element-indstilling, du vil aktivere.
  4. Klik på afkrydsningsfeltet mærket Enabled.
  5. Sørg for, at feltet Content indeholder navnet på dit Recommendation Element (uden “@”). Det står i embedkoden for Elementet 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 content.
  3. Åbn fanen Insert into website.
  4. Her har du to muligheder:
    • Brug af injection lader dig indsætte koden med en CSS selector.
    • Brug af embedded code lader dig indsætte koden manuelt på dit website.
  5. Vælg den mulighed, der er lettest for dig at bruge.
  6. For embedded code: tilføj eventuel nødvendig frontend logik for at indsætte f.eks. et produkt- eller kategori-ID. Dette afhænger af den valgte logik.

Her er et komplet Recommendations embed code eksempel med et eksempel produkt-ID:

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

Sider #

Nedenfor er de specifikke sider, hvor du bør indsætte Recommendations, og hvilke typer du skal 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 template/blok.

Hvis du ønsker at vise alle bannere oven på hinanden, indsæt alle embedkoder på samme placering. Hvis du vil fordele dem på forsiden, gentag blot ovenstående proces flere gange.

Kategoriside #

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

Produktside #

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

Add-To-Basket Trin #

  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 menu, gå til Pages.
  5. Øverst på siden, klik på Add New.
  6. Giv powerstep-siden et meningsfuldt 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 feltet Content ID’erne på de Elements, du har oprettet, adskilt af komma. ID’et står i embedkoden som dit data template navn, f.eks. data-template=@power-step-others-also-bought.
  10. Vælg det sidens navn, du oprettede under Powerstep Page, og marker Enabled.
  11. Klik på Save Settings.

Hvis du har problemer med powerstep, se denne guide.

Kurvside #

  1. I my.clerk.io, opret et Element med logikken Best Cross-Sell Products.
  2. I Insert into website > Choose your platform dropdown, vælg WooCommerce, og kopier embedkoden.
  3. Indsæt embedkoden i din kurvside-template, eller brug plugin-indstillinger 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. Herunder følger trinnene for begge muligheder.

Plugin Opsætning #

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

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

  2. Vælg en logik til det – vi anbefaler “Visitor Recommendations”.

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

  4. Marker Enabled, og tjek at Template-feltet indeholder “exit-intent”.

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

Manuel Opsætning #

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

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

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

  3. Vælg en logik til det – vi anbefaler “Visitor Recommendations”.

  4. Fra Insert Into Website, kopier den angivne embed kode 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 netop 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 med data-exit-intent="true" vil udløse exit intent pop-up’en.

Startskabeloner #

Hvis du ønsker at bruge code designs, kan disse skabeloner hjælpe dig i gang.

Slider Code #

Denne template viser en standard slider med forskellige produktinformationer, som du kan tilpasse til dit 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.