Prestashop

Recommendations

Automatiser og personalisere produkter på enhver side i Prestashop.

Clerk.io tilbyder mere end 20 forskellige typer 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 PrestaShop modulet.

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 den grundlæggende vejledning til opsætning af et Element.

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

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 alle de 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 det et navn, og klik Create design..
  5. Foretag eventuelle æ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 Create design..
  4. Opret et codedesign fra bunden ved hjælp af Liquid code.

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

Opret Indhold #

Dette indeholder alle indstillinger, der bruges til at vise Recommendations, samt gør dem indlejrbare 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 navngive det ud fra 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 Save øverst på skærmen.

Tilføj til Website #

For at tilføje Clerk Recommendations til dit website har du tre muligheder: Injection, Embedded code og via Module.

  1. Åbn fanen Insert into website.
  2. Her har du to muligheder:
    • Brug af injection giver dig mulighed for at indsætte koden ved at bruge en CSS selector.
    • Brug af embedded code giver dig mulighed for at indsætte koden manuelt 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 PrestaShop i disse tilfælde. Dette udfylder embedkoden med de korrekte PrestaShop shortcodes.

Module Opsætning #

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

  1. I PrestaShop, gå til Modules and Services > Clerk > Configure.
  2. For hvert sektion, aktiver og udfyld skabeloner/indhold:
    • Produktside: sæt Enabled til Yes og sørg for, at skabelonfeltet indeholder dine Slider IDs (kommasepareret, uden “@”).
    • Kategoriside: sæt Enabled til Yes og tilføj dine Slider IDs.
    • Kurvside: sæt Enabled til Yes og tilføj dit Slider ID.
  3. Klik Save.

my.clerk.io Opsætning #

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

For embedded code på PrestaShop er typiske placeringer og filstier:

  • Forside: Indsæt embedkoden i din forside-skabelon/CMS-blok (f.eks. Ap PageBuilder RawHTML).
  • Produktside: themes/TEMPLATE_NAME/product.tpl — sæt data-products til [{$smarty.get.id_product}].
  • Kategoriside: themes/TEMPLATE_NAME/category.tpl — sæt data-category til {$smarty.get.id_category}.
  • Kurvside: themes/TEMPLATE_NAME/shopping-cart.tpl — sæt data-products til [{foreach $products as $product name=products}{$product.id_product|intval}{if not $smarty.foreach.products.last},{/if}{/foreach}].

Her er et komplet Recommendations embedcode-eksempel, 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, samt 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/CMS-blok (f.eks. Ap PageBuilder RawHTML).

Hvis du vil vise alle bannere ovenpå hinanden, skal du indsætte alle embedkoder i samme boks. Hvis du vil splitte dem på tværs af forsiden, skal du blot følge ovenstående proces 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 PrestaShop, og kopier embedkoden.
  3. Gå til PrestaShops temafiler og find filen, der genererer dine Kategorisider. Det er oftest themes/TEMPLATE_NAME/category.tpl.
  4. Indsæt embedkoden et sted under titlen og beskrivelsen. Sæt data-category til {$smarty.get.id_category}.

Produktside #

  1. I my.clerk.io, opret 2 Sliders med følgende logikker:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. I Insert into website > Choose your platform dropdown, vælg PrestaShop for hver af dem og kopier embedkoderne.
  3. I PrestaShops temafiler, find filen, der genererer dine produktsider. Det er oftest themes/TEMPLATE_NAME/product.tpl.
  4. Indsæt embedkoderne et sted under produktbeskrivelsen. Sæt data-products til [{$smarty.get.id_product}].

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 Save øverst på siden.
  4. I PrestaShop backend, gå til Modules And Services -> Clerk -> Configure.
  5. Under Powerstep Settings, indsæt ID’erne på de elementer, du har oprettet, adskilt med komma, i feltet Templates. ID’et findes i elementets embedkode som dit data template-navn, f.eks. data-template=@power-step-others-also-bought.
  6. Sæt Enabled til Yes.
  7. Klik Save.

Du kan finde ID’erne på hvert element, du har oprettet, i din Clerk backend under Recommendations -> Elements -> Edit (antallet af elementer varierer mellem 1 og 4 for Tilføj-til-Kurv trinnet).

For at gøre det muligt at vise Tilføj-til-Kurv trinnet, skal du deaktivere PrestaShops standard Ajax-kurv:

  1. I PrestaShop backend, gå til Modules And Services.
  2. Find Cart Block og klik Configure.
  3. Sæt Ajax cart til No.
  4. Klik Save.

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 PrestaShop, og kopier embedkoden.
  3. Gå til PrestaShops temafiler og find filen, der genererer dine kurvsider. Det er oftest themes/TEMPLATE_NAME/shopping-cart.tpl.
  4. Indsæt embedkoden et sted under kurvvarerne og checkout-knappen. Sæt data-products til [{foreach $products as $product name=products}{$product.id_product|intval}{if not $smarty.foreach.products.last},{/if}{/foreach}].

Exit Intent #

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

Module Opsætning #

Sådan opsætter du Exit Intent via modulet på fem trin:

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

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

  3. I PrestaShop backend, gå til Modules and Services i sidemenuen, og find Clerk module.

  4. Find Exit Intent Settings. Sæt Enabled til YES, og sørg for at Template feltet indeholder “exit-intent”.

  5. Klik Save for at aktivere det.

Manuel Opsætning #

Hvis du vil konfigurere Exit Intent manuelt, følg disse trin:

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

  2. Style din slider 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 tilhørende embedkode til denne PrestaShop-fil, lige over Clerk.io sporingsscriptet: modules->clerk->views->templates->hook->visitor_tracking.tpl.

  5. Tilføj data-exit-intent="true" til embedkoden, du netop har indsat i visitor_tracking.tpl. 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-uppen.

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 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.