Magento 2

Recommendations

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

For vores komplette Best Practices, læs denne artikel om, hvilke Recommendations der skal bruges.

Slider-opsætning #

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

Ved at følge trinene i my.clerk.io > Settings > Setup Guides opretter du automatisk Elements for 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 et vilkårligt antal Recommendations-elements, som 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 designskabelon-listen.
  4. Giv det et navn og klik på Create design.
  5. Foretag de æ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 på Create design.
  4. Opret et codedesign fra bunden ved at bruge Liquid code.

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

Opret Element #

Dette indeholder alle de indstillinger, der bruges til at vise Recommendations, og gøre det muligt at indlejre det 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 navngive det ud fra side og logik, du vil bruge. F.eks. “Home Page / Visitor Recommendations”.
  4. I Element type, vælger du den produktlogik, du ønsker, fra dropdown-menuen. Du kan se et overblik over alle product logics her.
  5. Under Design vælger du det design, du har oprettet, fra dropdown-menuen og vælger antallet af produkter, der skal vises.
  6. Klik på Save øverst på skærmen.

Tilføj på hjemmeside #

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

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

Extension-opsætning #

Brug Magento 2 extension til at aktivere sliders på nøglesider:

  1. Gå til Stores > Configuration > Clerk > Configuration og vælg den korrekte Store View.
  2. For hver sektion på siden aktiveres og udfyldes skabeloner/indhold:
    • Product Settings: sæt Enabled til Yes og sørg for, 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:
    • Ved at bruge injection indsættes koden ved hjælp af en CSS-selector.
    • Ved at bruge embedded code indsættes koden manuelt.
  5. For embedded code på Magento 2 er typiske placeringer:
    • Forside: Content > Blocks > Home page block under Content.
    • 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.
    • Kurv-side: vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml med data-products sat til ID’erne af produkterne i kurven.

Sider #

Nedenfor er de specifikke sider, hvor du skal indsætte Recommendations, og 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 logikker:
    • Visitor Recommendations
    • Bestsellers
    • Hot Products
  2. Indsæt embedkoderne i dit forside-template/-blok.

Kategori-side #

  1. I my.clerk.io, opret et Element med logikken Bestsellers In Category.
  2. I Insert into website > Choose your platform-dropdown-menuen, vælg Magento 2, og kopier embedkoden.
  3. Gå til Magento 2’s theme-filer og find den fil, der genererer dine kategori-sider. Dette er oftest vendor/magento/module-catalog/view/frontend/templates/category/products.phtml.
  4. Indsæt embedkoden et sted under titlen og beskrivelsen. Sæt data-category til det aktuelle kategori-ID.

Produktside #

  1. I my.clerk.io, opret 2 Elements med følgende logikker:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. I Insert into website > Choose your platform-dropdown-menuen vælges Magento 2 for hver af dem og embedkoderne kopieres.
  3. I Magento 2 theme-filerne, find den fil, der genererer dine produktsider. Dette er oftest 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, skal du oprette det Element, du ønsker at bruge i Add-To-Basket-trinnet (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-muligheden, og indtast ID’erne på dine Elements, adskilt med komma.

  5. Klik på Save Config.

Du kan finde ID’erne for hvert Element, du har oprettet, i din Clerk backend ( my.clerk.io), under Recommendations -> Elements -> Edit (antallet af Elements varierer fra 1 til 4 for Add-To-Basket-trinnet):

Her er et eksempel på, hvordan du finder Elementets ID:

Kurv-side #

  1. I my.clerk.io, opret et Element med logikken Best Cross-Sell Products.
  2. I Insert into website > Choose your platform-dropdown-menuen, vælg Magento 2, og kopier embedkoden.
  3. Gå til Magento 2’s theme-filer og find den fil, der genererer dine kurvsider. Dette er oftest vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml.
  4. Indsæt embedkoden et sted under varerne i kurven og checkout-knappen. Sæt data-products til ID’erne af produkterne i kurven.

Exit Intent #

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

Extension-opsætning #

Fra v2.2.3 kan Exit-Intent aktiveres direkte fra extension ved disse trin:

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

  2. Vælg en logik 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. Marker Enabled-boksen, og sørg for, at Element-feltet 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 logik for det – vi foreslår “Visitor Recommendations.”

  3. Fra Insert Into Website kopier den givne embedkode til toppen af denne Magento2-fil via FTP:

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

  4. Tilføj: data-exit-intent=“true” til den embedkode, du lige 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-popup.

Startskabeloner #

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

Slider Code #

Denne skabelon vil vise en standard slider med almindelige 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-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.