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 fulde Best Practices, læs denne artikel om hvilke Recommendations du bør bruge.

Slider-opsætning #

Recommendations oprettes med Elements, der henviser til et Design. Nedenfor er grundguiden til opsætning af et Element.

Følger du trinene i my.clerk.io > Settings > Setup Guides vil elementerne til vores Best Practices automatisk blive oprettet.

Opret Design #

Recommendations vises som en slider som standard. Dette gør det muligt for kunderne 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 hvilket som helst antal Recommendations-elementer, du opretter.

Design Editor #

  1. Gå til Recommendations > Designs og klik på New Design.
  2. Vælg Product Slider
  3. Vælg den ønskede designtemplate fra listen.
  4. Giv det et navn og klik på Create design.
  5. Foretag de ændringer, du ønsker på 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 brug af Liquid code.

Hvis du vil have et startdesign, kan du se Slider template længere nede.

Opret Element #

Dette indeholder alle indstillingerne, der bruges til at vise Recommendations og gøre dem indlejelige 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 logikken, du vil bruge. F.eks. “Forside / Besøgsanbefalinger”.
  4. Under Element type, vælger du den produktlogik, du vil bruge fra dropdownen. Du kan se en oversigt over alle produktlogikker her.
  5. Under Design vælger du det design, du har oprettet fra dropdownen og vælger 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:
    • Ved at bruge injection kan du indsætte koden via en CSS selector.
    • Ved at bruge embedded code kan du indsætte koden manuelt på din hjemmeside.
  3. Vælg den mulighed, der er nemmest for dig at bruge.
  4. For nogle Logics vil du se Choose your platform dropdown. Vælg Magento 2 i disse tilfælde. Dette vil udfylde embedkoden med de korrekte Magento 2 shortcodes.

For at tilføje synkroniseringsdetaljer eller starte en synkronisering, 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 af siden, aktiver og udfyld skabelonerne/indholdet:
    • Product Settings: sæt Enabled til Yes og sørg for, at templatens felt indeholder dine Slider IDs (kommasepareret, uden “@”).
    • Category Settings: sæt Enabled til Yes og tilføj dine Slider IDs.
    • 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 ønsker at indsætte.
  3. Åbn fanen Insert into website.
  4. Vælg en af følgende:
    • Ved at bruge injection indsættes koden via en CSS selector.
    • Ved at bruge embedded code indsættes koden manuelt.
  5. Typiske placeringer for embedded code på Magento 2 er:
    • 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.
    • Kategorieside: vendor/magento/module-catalog/view/frontend/templates/category/products.phtml med data-category sat til den aktuelle kategori ID.
    • Kurvside: vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml med data-products sat til kurvens produkt ID’er.

Sider #

Herunder er de specifikke sider, hvor du bør 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 din forsidetemplate/blok.

Kategorieside #

  1. I my.clerk.io, opret et Element med logikken 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, der genererer dine kategoriesider. Dette er oftest 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 logikker:
    • Best Alternative Products
    • Best Cross-Sell Products
  2. I Insert into website > Choose your platform dropdown, vælg Magento 2 for hver af dem og kopier embedkoderne.
  3. I Magento 2 tema-filerne, find filen, 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, opret det Element, du vil bruge i dit Add-To-Basket-trin (Power Step).

  2. Gå i Magento 2 backend 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 kommaer.

  5. Klik på Save Config.

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

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

Kurvside #

  1. I my.clerk.io, opret et Element med logikken 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 oftest vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml.
  4. Indsæt embedkoden et sted under kurvitems og checkout-knap. Sæt data-products til kurvens produkt ID’er.

Exit Intent #

  1. I my.clerk.io, opret et Element med logikken Visitor Recommendations.
  2. Du kan aktivere det via extension eller manuelt. Herunder finder du trin for begge muligheder.

Extension-opsætning #

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

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

  2. Vælg en logik til det – vi anbefaler “Visitor Recommendations”.

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

  4. Sæt flueben ved Enabled 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 til det – vi foreslår “Visitor Recommendations”.

  3. Fra Insert Into Website kopierer du den angivne 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 embedkoden du netop har indsat. Således:

<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’en.

Startskabeloner #

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

Slider-kode #

Denne skabelon renderer en standard slider med almindelig 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-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.