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 fuldt automatiserede produkter på enhver side. Denne artikel forklarer, hvordan du kommer i gang med Recommendations ved hjælp af 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 er en grundlæggende guide til opsætning af et Element.

Når du følger trinene i my.clerk.io > Settings > Setup Guides oprettes Elements til vores Best Practices automatisk.

Opret Design #

Recommendations vises som en slider som standard. 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 ethvert 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 starte med, fra listen.
  4. Giv designet et navn og klik på Create design.
  5. Foretag de ønskede ændringer til designet.

Code Design #

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

Hvis du ønsker et udgangspunkt, kan du finde Slider template længere nede.

Opret Element #

Dette indeholder alle indstillinger, der bruges til at vise Recommendations og gør det indlejringsbart på din hjemmeside. Følg disse trin for hver 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 du navngiver det ud fra siden og logikken, du ønsker at bruge. F.eks. “Home Page / Visitor Recommendations”.
  4. Under Element type, vælger du den ønskede produktlogik fra dropdown-menuen. Du kan se en oversigt over alle product logics her.
  5. Under Design vælger du det design, du har oprettet fra dropdown-menuen, og vælger antallet af produkter, du vil vise.
  6. Klik på Save øverst på skærmen.

Tilføj til hjemmeside #

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

  1. Åbn fanen Insert into website.
  2. Her har du to muligheder:
    • Injection gør det muligt at indsætte koden ved hjælp af en CSS selector.
    • Embedded code gør det muligt at indsætte koden manuelt på din hjemmeside.
  3. Vælg den mulighed, der er nemmest for dig.
  4. For nogle Logics vil du se dropdown-menuen Choose your platform. Vælg WooCommerce i disse tilfælde. Dette udfylder automatisk 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 den Element-indstilling, du ønsker at aktivere.
  4. Klik på afkrydsningsfeltet Enabled.
  5. Kontroller, at feltet Element indeholder navnet på dit Recommendation Element (uden “@”). Det fremgår af 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:
    • Injection gør det muligt at indsætte koden ved hjælp af en CSS selector.
    • Embedded code gør det muligt at indsætte koden manuelt på din hjemmeside.
  5. Vælg den mulighed, der er nemmest for dig.
  6. For embedded code kan du tilføje eventuel nødvendig frontend logik til at indsætte fx produkt- eller kategori-id. Dette afhænger af den valgte logik.

Her er et komplet eksempel på Recommendations embedkode med et eksempel på produkt-id:

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

Sider #

Nedenfor finder du 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 vil vise alle bannere oven på hinanden, skal du indsætte alle embedkoder til samme placering. Hvis du ønsker at opdele dem på forsiden, skal du blot følge ovenstående proces flere gange.

Kategori-side #

  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 for 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 dropdown-menuen Insert into website > Choose your platform vælg WooCommerce for dem hver især, og kopier embedkoderne.
  3. Indsæt embedkoderne i din produktside-skabelon, eller brug plugin-indstillingerne for at aktivere dem.

Tilføj-til-kurv-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 i toppen af siden.
  4. I WooCommerce backend, i venstre sidemenu, gå til Pages.
  5. Klik på Add New. øverst på siden.
  6. Giv powerstep-siden et meningsfuldt navn, som “Produkt tilføjet til kurven!”, da dette vises som titlen på din powerstep.
  7. I det store tekstfelt skal du skrive [clerk-powerstep] og klikke 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 med komma. ID’et findes 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 sæt kryds ved Enabled.
  11. Klik på Save Settings.

Hvis du har problemer med powerstep, kan du se denne guide.

Kurv-side #

  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 for at aktivere det.

Exit Intent #

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

Plugin-opsætning #

For at opsætte Exit Intent via plugin skal du følge disse 5 trin:

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

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

  3. Gå til WooCommerce backend, vælg Clerk i side-menuen og find Exit-Intent Settings.

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

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

Manuel opsætning #

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

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

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

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

  4. Fra Insert Into Website, kopier den givne embedkode til denne WooCommerce-fil, lige oven 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 indsat 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, der indeholder data-exit-intent="true", vil udløse exit intent pop up.

Startskabeloner #

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

Slider kode #

Denne skabelon viser en standard slider med forskellig produktinformation, som du kan tilpasse efter 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.