Woocommerce

Recommendations

Automatisér og personalisér 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 fuldautomatiserede produkter på enhver side. Denne artikel forklarer, hvordan du kommer i gang med Recommendations ved hjælp af WooCommerce-pluginet.

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

Slider-opsætning #

Recommendations oprettes med Elements, der refererer til et Design. Nedenfor er den grundlæggende guide til at opsætte et Element.

Ved at følge trinene i my.clerk.io > Settings > Setup Guides oprettes Elementer til 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-elementer, 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 ønsker at starte med.
  4. Giv den et navn og klik på Create design.
  5. Foretag eventuelle æ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. Lav et code design fra bunden ved hjælp af Liquid code.

Hvis du ønsker et startdesign, se Slider template længere nede.

Opret Element #

Dette indeholder alle indstillinger, der bruges til at vise Recommendations, og gør det muligt at indlejre det på din hjemmeside. Følg disse trin for hver Recommendations-banner, du vil oprette.

  1. Gå til Recommendations > Elements.
  2. Klik på New Element.
  3. Giv det et beskrivende navn. Vi anbefaler at navngive det ud fra siden og logikken, du vil bruge. Fx “Forside / Visitor Recommendations”.
  4. Under Element type, vælg den produktlogik, du vil bruge, fra rullemenuen. Du kan se et overblik over alle produktlogikker her.
  5. Under Design vælg det design, du har oprettet, og vælg antal produkter, du ønsker at 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:
    • Brug af Injection gør det muligt at indsætte koden ved hjælp af en CSS-selector.
    • Brug af embedded code gør det muligt at indsætte koden manuelt på din hjemmeside.
  3. Vælg den mulighed, der er nemmest for dig at bruge.
  4. For nogle Logics vil du se rullemenuen Choose your platform. Vælg WooCommerce i disse tilfælde. Dette udfylder embedkoden med de korrekte WooCommerce-kortkoder.

Plugin-opsætning #

Denne mulighed er tilgængelig for Kategori, Kurv, Produkt-sider, Exit Intent og Powerstep.

  1. Gå til WooCommerce backend.
  2. Vælg Clerk i menuen til venstre.
  3. Find den Element-indstilling, du ønsker at aktivere.
  4. Klik på afkrydsningsfeltet Enabled.
  5. Sørg for at Element-feltet indeholder navnet på dit Recommendation Element (uden “@”). Det står i Element embed-koden som din data template name, fx 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:
    • Brug af injection gør det muligt at indsætte koden ved brug af en CSS-selector.
    • Brug af embedded code gør det muligt at indsætte koden manuelt på din hjemmeside.
  5. Vælg den mulighed, der er nemmest for dig at bruge.
  6. For embedded code, tilføj nødvendig frontend logik, eksempelvis til at indsætte et produkt- eller kategori-ID. Dette afhænger af den logik, du vælger.

Her er et komplet eksempel på Recommendations embed-kode med et eksempel på et 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-skabelon/blok.

Hvis du ønsker at vise alle bannere oven på hinanden, indsæt alle embedkoder på samme sted. Hvis du vil fordele dem ud over forsiden, gentag blot processen flere gange.

Kategori-side #

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

Produkt-side #

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

Læg i 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 øverst på siden.
  4. I WooCommerce backend, i menuen til venstre, gå til Pages.
  5. Øverst på siden, klik på Add New.
  6. Giv powerstep-siden et sigende navn, som for eksempel “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 med komma. ID’et står i Element embed-koden som din data template name, fx data-template=@power-step-others-also-bought.
  10. Vælg det sidenavn, du har oprettet, under Powerstep Page, og marker Enabled.
  11. Klik på Save Settings.

Hvis du har problemer med powerstep, se denne guide.

Kurv-side #

  1. I my.clerk.io, opret et Element med logikken Best Cross-Sell Products.
  2. I rullemenuen 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 det.

Exit Intent #

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

Plugin-opsætning #

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

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

  2. Vælg en logik – Vi anbefaler “Visitor Recommendations”.

  3. I WooCommerce backend, gå til Clerk i menuen til venstre 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 vil konfigurere Exit Intent manuelt, følg disse trin:

  1. Opret et 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 – 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 embed-koden, 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, som indeholder data-exit-intent="true", vil aktivere exit intent-popup.

Startskabeloner #

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

Slider Code #

Denne skabelon vil vise en standard-slider med forskellige produktoplysninger, 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.