Prestashop

Recommendations

Automatiser og personalisere produkter på enhver side i Prestashop.

Clerk.io tilbyder mere end 20+ forskellige typer af produktlogik, 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 hjælp af PrestaShop modulet.

For vores komplette bedste praksis om, hvilke Recommendations du bør bruge, læs denne artikel.

Opsætning af Slider #

Recommendations oprettes med Sliders, som refererer til et Design. Herunder er den grundlæggende vejledning til opsætning af en Slider.

Hvis du følger trinene i my.clerk.io > Settings > Setup Guides, bliver Sliderne til vores bedste praksis automatisk oprettet.

Opret Design #

Recommendations vises som en slider som standard. Dette tillader 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 sliders, 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 vil starte med, fra listen.
  4. Giv den et navn, og klik på Create design..
  5. Lav 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 den et navn, og klik på Create design..
  4. Opret et codedesign fra bunden med Liquid code.

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

Opret Indhold #

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

  1. Gå til Recommendations > Sliders..
  2. Klik på New Content..
  3. Giv det et beskrivende navn. Vi anbefaler at navngive det efter siden og logikken, du ønsker at bruge. F.eks. “Home Page / Visitor Recommendations”.
  4. Under Content type, vælger du den produktlogik, du ønsker, fra dropdown-listen. Du kan se en oversigt over alle product logics her.
  5. Under Design vælger du designet, du har oprettet, fra dropdown-listen og vælger, hvor mange produkter du vil vise.
  6. Klik på Save øverst på siden.

Tilføj til Website #

For at tilføje Clerk Recommendations til dit website har du tre forskellige 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 hjælp af en CSS-selector.
    • Brug af embedded code gør det muligt at indsætte koden manuelt på dit website.
  3. Vælg den mulighed, der er lettest for dig.
  4. For nogle logikker vil du se Choose your platform dropdown. Vælg PrestaShop i disse tilfælde. Dette udfylder det indlejrede kodefelt med de rigtige 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 hver sektion på siden skal du aktivere og udfylde 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 på Save.

my.clerk.io Opsætning #

  1. Gå til Recommendations > Sliders..
  2. Vælg det ønskede 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 brug af en CSS-selector.
    • Brug af embedded code gør det muligt at indsætte koden manuelt på dit website.
  5. Vælg den mulighed, der er lettest for dig.
  6. For embedded code, tilføj den nødvendige frontend-logik, eksempelvis indsættelse af et produkt- eller kategori-ID. Dette afhænger af valgt logik.

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

  • Forside: indsæt embed koden i dit forside-tema/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 embed code 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, og hvilke typer du bør bruge, for at følge vores bedste praksis.

Forside #

  1. I my.clerk.io skal du oprette 3 Sliders med følgende logikker:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Indsæt embedkoderne i din forside-skabelon/CMS-blok (fx Ap PageBuilder RawHTML).

Hvis du ønsker at vise alle bannere ovenpå hinanden, indsæt alle embedkoder i samme boks. Hvis du vil opdele dem forskellige steder på forsiden, skal du blot gentage ovenstående proces flere gange.

Kategoriside #

  1. I my.clerk.io skal du oprette en Slider med logikken Bestsellers In Category.
  2. I Insert into website > Choose your platform dropdown, vælg PrestaShop og kopier embedkoden.
  3. Gå til PrestaShops temafiler og find filen, der genererer dine kategorisider. Dette er oftest themes/TEMPLATE_NAME/category.tpl.
  4. Indsæt embedkoden et sted under title og beskrivelse. Sæt data-category til {$smarty.get.id_category}.

Produktside #

  1. I my.clerk.io skal du oprette 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 dem begge, og kopier embedkoderne.
  3. I PrestaShop temafilerne, find filen der genererer dine produktsider. Dette er oftest themes/TEMPLATE_NAME/product.tpl.
  4. Indsæt embedkoderne et sted under produktbeskrivelsen. Sæt data-products til [{$smarty.get.id_product}].

Add-To-Basket Trin #

  1. I my.clerk.io skal du oprette en Slider med logikken Best Cross-Sell Products.
  2. Giv den navnet “Add-To-Basket / Others Also Bought”. Dette er vigtigt for at embedkoden fungerer korrekt.
  3. Klik på 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 sliders, du har oprettet, adskilt med komma i Templates feltet. ID’et findes i slider-embed-koden som dit data template-navn, fx data-template=@power-step-others-also-bought.
  6. Sæt Enabled til Yes.
  7. Klik på Save.

Du kan finde ID’erne på hver slider, du har oprettet, i din Clerk backend under Recommendations -> Sliders -> Edit (antallet af sliders varierer mellem 1 og 4 for Add-To-Basket-trinnet).

For at muliggøre, at Add-To-Basket-trinnet vises, 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 skal du oprette en Slider med logikken Best Cross-Sell Products.
  2. I Insert into website > Choose your platform dropdown, vælg PrestaShop, og kopier embedkoden.
  3. Gå til PrestaShops temafiler og find filen, der genererer dine kurvsider. Dette er oftest themes/TEMPLATE_NAME/shopping-cart.tpl.
  4. Indsæt embedkoden under kurvitems 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 skal du oprette en Slider med logikken Visitor Recommendations.
  2. Du kan aktivere den gennem modulet eller manuelt. Herunder er trinene for begge muligheder.

Module-opsætning #

Sådan sætter du Exit Intent op gennem modulet, følg disse fem trin:

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

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

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

  4. Gå til Exit Intent Settings. Sæt Enabled til YES, og sørg for at Template feltet 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 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 til det – vi foreslår “Visitor Recommendations”.

  4. Fra Insert Into Website, kopier den angivne embed code 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åledes:

<!-- 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 aktivere exit intent-pop-up.

Startskabeloner #

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

Slider Code #

Denne skabelon viser 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.