Magento 2

Recommendations

Backend i Clerk.io backend

Clerk.io tilbyder mere end 23 forskellige typer af produktlogikker, hvilket gør det muligt for dig at vise fuldautomatiske produkter på enhver side. Denne artikel forklarer, hvordan du kommer i gang med at bruge et Clerk.js setup i Magento 2.

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

Slider-opsætning #

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

Hvis du følger trinnene i my.clerk.io > Settings > Setup Guides oprettes Elements 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 elements, du opretter.

Design Editor #

  1. Gå til Recommendations > Designs og klik på New Design.
  2. Vælg Product Slider
  3. Vælg den skabelon, du vil starte med, fra listen.
  4. Giv den et navn og klik på 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 den et navn og klik på Create design.
  4. Opret et code design fra bunden ved brug af Liquid code.

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

Opret Element #

Dette indeholder alle indstillinger, der bruges til at vise Recommendations og gøre det indlejringsbart 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 ønsker at bruge. F.eks. “Forside / Visitor Recommendations”.
  4. I Element type, vælg den produktlogik, du ønsker, fra dropdown-menuen. Du kan se et overblik over alle product logics her.
  5. I Design vælg det design, du har oprettet, fra dropdown-menuen og vælg det antal produkter, du ønsker at vise.
  6. Klik på Save øverst på skærmen.

Tilføj til hjemmeside #

  1. Åbn fanen Insert into website.
  2. Her har du to muligheder:
    • Brug af injektion giver dig mulighed for at indsætte koden via en CSS selector.
    • Brug af embedded code giver dig mulighed for manuelt at indsætte koden i din hjemmeside.
  3. Vælg den mulighed, der er lettest for dig.
  4. For nogle Logics vil du se Choose your platform dropdown. Vælg Magento 2 i disse tilfælde. Dette forudfylder embedkoden med de korrekte Magento 2 shortcodes.

For at tilføje sync detaljer eller starte en sync, gå til my.clerk.io > Data > Configuration.

Udvidelsesopsætning #

Brug Magento 2 udvidelsen for at aktivere sliders på nøglesider:

  1. Gå til Stores > Configuration > Clerk > Configuration og vælg det korrekte Store View.
  2. For hver sektion, aktiver og udfyld skabeloner/indhold:
    • Product Settings: Sæt Enabled til Yes og bekræft at skabelonfeltet indeholder dine Slider ID’er (kommasepareret, uden “@”).
    • Category Settings: Sæt Enabled til Yes og tilføj dine Slider ID’er.
    • Cart Settings: Sæt Enabled til Yes og tilføj dit Slider ID.
  3. Klik på Save Config.

my.clerk.io opsætning #

  1. Gå til Recommendations > Elements.
  2. Vælg den slider, du vil indsætte.
  3. Åbn fanen Insert into website.
  4. Vælg en af følgende:
  5. For embedded code på Magento 2, er de typiske placeringer:
    • Forside: Content > Blocks > Home page block under Indhold.
    • Produktside: vendor/magento/module-catalog/view/frontend/templates/product/details.phtml med data-products sat til det aktuelle produkt-ID.
    • Kategori-side: vendor/magento/module-catalog/view/frontend/templates/category/products.phtml med data-category sat til det aktuelle kategori-ID.
    • Kurvside: vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml med data-products sat til kurvens produkt-ID’er.

Sider #

Nedenfor er de specifikke sider, hvor du bør indsætte Recommendations, samt hvilke typer du bør anvende 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 forsidens template/blok.

Kategori-side #

  1. I my.clerk.io, opret et Element med logic Bestsellers In Category.
  2. I Insert into website > Choose your platform dropdown, vælg Magento 2, og kopier embedkoden.
  3. Gå til Magento 2’s tema-filer og find filen, som genererer dine Kategori-sider. Dette er typisk vendor/magento/module-catalog/view/frontend/templates/category/products.phtml.
  4. Indsæt embedkoden et sted under titel og beskrivelse. Sæt data-category til det aktuelle kategori-ID.

Produktside #

  1. I my.clerk.io, opret 2 Elements med følgende logics:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. I Insert into website > Choose your platform dropdown, vælg Magento 2 for hver og kopier embedkoderne.
  3. I Magento 2 tema-filer, find filen der genererer dine produktsider. Dette er typisk vendor/magento/module-catalog/view/frontend/templates/product/details.phtml.
  4. Indsæt embedkoderne et sted under produktbeskrivelsen. Sæt data-products til det aktuelle produkt-ID.

Add-To-Basket-trin #

  1. Hvis du ikke allerede har gjort det, opret det Element, du vil bruge i dit Add-To-Basket Step (Power Step).

  2. I Magento 2 backend, gå til Stores -> Configuration -> Clerk -> Configuration og find Powerstep settings.

  3. Sæt Enabled til Yes.

  4. Vælg Popup eller Page og indtast ID’erne på dine Elements, adskilt af kommaer.

  5. Klik på Save Config.

For at finde et Element ID, gå til Recommendations > Elements i my.clerk.io og åbn Elementet. Brug ID’et vist i dets indstillinger. Du kan tilføje ét til fire Elements til Add-To-Basket-trinnet.

Kurvside #

  1. I my.clerk.io, opret et Element med logic Best Cross-Sell Products.
  2. I Insert into website > Choose your platform dropdown, vælg Magento 2, og kopier embedkoden.
  3. Gå til Magento 2’s tema-filer og find filen, der genererer dine kurvsider. Dette er typisk vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml.
  4. Indsæt embedkoden et sted under kurvvarer og checkout-knappen. Sæt data-products til kurvens produkt-ID’er.

Exit Intent #

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

Udvidelsesopsætning #

Fra v2.2.3, kan Exit-Intent aktiveres direkte fra udvidelsen med disse trin:

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

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

  3. I Magento2 backend, gå til Stores->Configuration->Configuration i side-menuen og find Exit-Intent Settings.

  4. Sæt flueben ved Enabled og bekræft at feltet Element indeholder “exit-intent”.

  5. Klik på Save Config for at aktivere det.

Manuel opsætning #

Opsætningen består af 4 trin:

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

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

  3. Fra Insert Into Website, kopier den givne embedkode til starten af denne Magento2-fil på FTP:

    vendor->clerk->magento2->view->frontend->templates->tracking.phtml

  4. Tilføj: data-exit-intent=“true” til den embedkode, du netop har indsat. Sådan her:

<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Bemærk: Alle recommendations, der indeholder data-exit-intent=“true” vil udløse exit intent-pop-up’en.

Startskabeloner #

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

Slider-kode #

Denne skabelon vil vise en standard-slider med almindelig produktinformation, 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-view-product" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-slider-button">View Product</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-view-product, .clerk-view-product: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;
}

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

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