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 fuldautomatiske produkter på enhver side. Denne artikel forklarer, hvordan du kommer i gang med Recommendations ved brug af PrestaShop modulet.

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

Slider Opsætning #

Recommendations oprettes med Elements, der refererer til et Design. Nedenfor finder du den grundlæggende vejledning til opsætning af et Element.

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

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 bruge kode 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 fra listen af designtemplates den, du ønsker at starte med.
  4. Giv det et navn og klik på Create design..
  5. Foretag de ændringer, du ønsker i designet.

Kode 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 kodet 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 til at vise Recommendations og gøre det muligt at integrere det på dit website. 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. F.eks. “Home Page / Visitor Recommendations”.
  4. Under Element type, vælg den produktlogik, du ønsker at bruge, fra dropdown-menuen. Du kan se et overblik over alle produktlogikker her.
  5. Under Design vælg det design, du har oprettet, og vælg antallet af produkter, du vil vise.
  6. Klik 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 Insert into website fanen.
  2. Her har du to muligheder:
    • Brug af injection giver dig mulighed for at indsætte koden vha. en CSS selector.
    • Brug af embedded code giver dig mulighed for manuelt at indsætte koden på din hjemmeside.
  3. Vælg den mulighed, der er lettest for dig.
  4. For nogle Logics ser du 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 hver sektion, aktiver og udfyld templates/indhold:
    • Produktside: sæt Enabled til Yes og sørg for, at templates-feltet 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 ønskede indhold.
  3. Åbn Insert into website fanen.
  4. Her har du to muligheder:
    • Brug af injection gør det muligt at indsætte koden vha. en CSS selector.
    • Brug af embedded code gør det muligt at indsætte koden manuelt på hjemmesiden.
  5. Vælg den mulighed, der er lettest for dig.
  6. Ved embedded code skal du tilføje eventuel nødvendig frontend logik for f.eks. at indsætte produkt- eller kategori-ID. Dette afhænger af logikken, du vælger.

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

  • Forside: indsæt embedkoden i din forsidetemplate/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å produkt-ID:

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

Sider #

Nedenfor er 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 forsidetemplate/CMS-blok (fx Ap PageBuilder RawHTML).

Vil du vise alle bannere oven på hinanden, indsæt bare alle embedkoder i samme boks. Hvis du vil fordele dem på forsiden, gentag blot ovenstående proces flere gange.

Kategoriside #

  1. I my.clerk.io, opret et Element 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 den fil, der genererer dine kategorisider. Det 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 logikker:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. Under Insert into website > Choose your platform dropdown, vælg PrestaShop for dem begge og kopier embedkoderne.
  3. I PrestaShop temafiler, find den fil, 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}].

Add-To-Basket Step #

  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 IDs på de elementer, du oprettede, adskilt med komma, i Templates feltet. ID’et ses i elementets embed kode som dit data template navn, fx 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 til Add-To-Basket step).

For at gøre det muligt at vise Add-To-Basket step, skal du deaktivere den standard PrestaShop 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. Under 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. Det er oftest themes/TEMPLATE_NAME/shopping-cart.tpl.
  4. Indsæt embedkoden et sted under kurvvarer 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 ser du trinene for begge muligheder.

Module Opsætning #

Sådan opsætter du Exit Intent via 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 – 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 Template feltet indeholder “exit-intent”.

  5. Klik Save for at aktivere det.

Manuel Opsætning #

Hvis du ønsker at 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 i Designs på my.clerk.io.

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

  4. Fra Insert Into Website, kopier den medfølgende embed kode 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 embed koden, 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 recommendations som indeholder data-exit-intent="true" vil udløse exit intent pop-up’en.

Startskabeloner #

Hvis du vil bruge kode design, kan disse skabeloner hjælpe dig i gang.

Slider Kode #

Denne skabelon vil vise en almindelig slider med forskellig produktinformation, som du kan tilpasse til dine 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.