Prestashop

Recommendations

Automatiser og personaliser produkter på enhver side i Prestashop.

Clerk.io tilbyder mere end 20 forskellige typer af produktlogikker, hvilket gør det muligt at vise fuldautomatisk udvalgte 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. Herunder finder du en grundlæggende guide til opsætning af en Element.

Hvis du følger trinene i my.clerk.io > Settings > Setup Guides, oprettes Elementsne til vores Best Practices automatisk.

Opret Design #

Recommendations vises som en slider som standard. Dette giver kunderne mulighed for at se flere produkter med færre klik. Du kan enten bruge Design Editor til at konfigurere det visuelt, eller benytte 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 starte med, fra listen.
  4. Giv det et navn, og klik på Create design..
  5. Foretag 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 code design fra bunden med Liquid code.

Hvis du ønsker et design at starte med, så se Slider template længere nede.

Opret Element #

Dette indeholder alle de indstillinger, der bruges til at vise Recommendations, og gør det muligt at implementere dem 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 den logik, du vil bruge. F.eks. “Home Page / Visitor Recommendations”.
  4. Under Element type, vælg den produktlogik, du ønsker at benytte, fra dropdown-menuen. Du kan se en oversigt over alle product logics her.
  5. Under Design vælg det design, du har oprettet, og vælg hvor mange produkter, der skal vises.
  6. Klik på Save øverst på skærmen.

Tilføj til Hjemmeside #

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

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

Module Setup #

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 hver sidetype, aktiver og udfyld skabeloner/indhold:
    • Produktside: sæt Enabled til Yes og sørg for, at feltet for skabeloner 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 på Save.

my.clerk.io Setup #

  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 med en CSS-selector.
    • Brug af embedded code gør det muligt at manuelt indsætte koden på din hjemmeside.
  5. Vælg den mulighed, der er lettest at bruge for dig.
  6. For embedded code, tilføj den nødvendige frontend-logik for at indsætte fx et produkt- eller kategori-ID. Dette afhænger af den valgte logik.

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

  • Forside: indsæt embed koden i din forside skabelon/CMS-blok (fx 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 embedkode-eksempel med et eksempel på produkt-ID:

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

Sider #

Herunder er de specifikke sider, hvor du bør indsætte Recommendations, samt 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 logics:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Indsæt embedkoderne i din forside-skabelon/CMS-blok (fx Ap PageBuilder RawHTML).

Hvis du vil vise alle banners oven på hinanden, skal du indsætte alle embedkoder i samme boks. Hvis du ønsker at placere dem forskellige steder på forsiden, skal du bare gentage 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 PrestaShop, og kopier embedkoden.
  3. Gå til PrestaShops tema-filer og find filen, der genererer dine kategorisider. Dette er oftest themes/TEMPLATE_NAME/category.tpl.
  4. Indsæt embedkoden et sted under titel og beskrivelse. Sæt data-category til {$smarty.get.id_category}.

Produktside #

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

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 virker korrekt.
  3. Klik på Save i toppen af siden.
  4. I PrestaShop backend, gå til Modules And Services -> Clerk -> Configure.
  5. Under Powerstep Settings, indsæt ID’erne på de elements, du har oprettet, adskilt af komma i feltet Templates. ID’et står 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 på Save.

Du finder ID’erne for hvert element, du har oprettet, i Clerk backend under Recommendations -> Elements -> Edit (antallet varierer mellem 1 og 4 på Add-To-Basket trinnet).

For at aktivere Add-To-Basket trinnet skal du deaktivere PrestaShops standard Ajax-kurv:

  1. I PrestaShop backend, gå til Modules And Services.
  2. Find Cart Block og klik på Configure.
  3. Sæt Ajax cart til No.
  4. Klik på 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 tema-filer og find filen, der genererer din kurvside. Dette er oftest themes/TEMPLATE_NAME/shopping-cart.tpl.
  4. Indsæt embedkoden under kurv-indholdet 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. Herunder er fremgangsmåden for begge løsninger.

Module Setup #

For at opsætte Exit Intent gennem modulet, følg disse fem trin:

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

  2. Vælg en logik for det – vi anbefaler “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 feltet Template indeholder “exit-intent”.

  5. Klik på Save 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 din slider under Designs på my.clerk.io.

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

  4. Under Insert Into Website, kopier den udleverede embedkode til denne PrestaShop-fil, lige over Clerk.io tracking-scriptet: modules->clerk->views->templates->hook->visitor_tracking.tpl.

  5. Tilføj data-exit-intent="true" til embedkoden, du lige 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 anbefalinger, der indeholder data-exit-intent="true", vil udløse en exit intent pop-up.

Startskabeloner #

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

Slider Kode #

Denne skabelon viser en standard slider med forskellige produktinformationer, 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.