Magento 2

Recommendations

Clerk.io tilbyder mere end 23 forskellige typer produktlogikker, hvilket gør det muligt for dig at vise fuldautomatiserede 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 til opsætning af et Element.

Hvis du følger trinnene i my.clerk.io > Settings > Setup Guides, vil Elements til vores Best Practices automatisk blive oprettet.

Opret Design #

Recommendations vises som standard som en slider. 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 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 designskabelon, du vil starte med, fra listen.
  4. Giv det et navn, og klik på Create design.
  5. Foretag 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 det et navn, og klik på Create design.
  4. Opret et code design fra bunden ved hjælp af Liquid code.

Hvis du ønsker et startdesign, kan du tjekke Slider-skabelonen længere nede.

Opret Indhold #

Dette indeholder alle indstillinger, der bruges til at vise Recommendations og gøre det indlejrbart på din hjemmeside. Følg disse trin for hver Recommendations-banner, du vil oprette.

  1. Gå til Recommendations > Elements.
  2. Klik på New Content.
  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. Under Content type, vælger du den produktlogik, du vil bruge, fra dropdown-menuen. Du kan se et overblik over alle produktlogikker her.
  5. Under Design vælger du det design, du har oprettet, fra dropdown-menuen og vælger antallet af produkter, du vil 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 injection giver dig mulighed for at indsætte koden ved hjælp af 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 nemmest 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 forudfylder embedkoden med de korrekte Magento 2-shortcodes.

Hvis du vil tilføje synkroniseringsdetaljer eller starte en synkronisering, skal du gå til my.clerk.io > Data > Configuration.

Extension-opsætning #

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

  1. Gå til Stores > Configuration > Clerk > Configuration og vælg den rigtige Store View.
  2. For hvert sideafsnit skal du aktivere og udfylde skabeloner/indhold:
    • Product Settings: sæt Enabled til Yes og sørg for, at templates-feltet 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 ønsker at 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 Content.
    • Produktside: vendor/magento/module-catalog/view/frontend/templates/product/details.phtml med data-products sat til det aktuelle produkt-ID.
    • Kategoriside: 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, og 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 forside-skabelon/-blok.

Kategoriside #

  1. I my.clerk.io, opret et Element med logikken Bestsellers In Category.
  2. Under Insert into website > Choose your platform dropdown-menuen, vælg Magento 2 og kopier embedkoden.
  3. Gå til Magento 2’s temafiler og find filen, der genererer dine Kategorisider. Dette er ofte 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. Under Insert into website > Choose your platform dropdown-menuen, vælg Magento 2 for dem begge og kopier embedkoderne.
  3. I Magento 2-temafilerne skal du finde filen, der genererer dine produktsider. Dette er ofte 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 Content, du vil bruge i dit Add-To-Basket-trin (Power Step).

  2. I Magento 2-backend skal du gå til Stores -> Configuration -> Clerk -> Configuration og finde Powerstep settings.

  3. Sæt Enabled til Yes.

  4. Vælg indstillingen Popup eller Page, 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 for Add-To-Basket-trinnet):

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

Kurvside #

  1. I my.clerk.io, opret et Element med logikken Best Cross-Sell Products.
  2. Under Insert into website > Choose your platform dropdown-menuen, vælg Magento 2, og kopier embedkoden.
  3. Gå til Magento 2’s temafiler og find filen, der genererer dine kurvsider. Dette er ofte vendor/magento/module-checkout/view/frontend/templates/cart/cart.phtml.
  4. Indsæt embedkoden et sted under kurvvarerne og betalingsknappen. 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 udvidelsen eller manuelt. Nedenfor er trinnene for begge muligheder.

Extension-opsætning #

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

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

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

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

  4. Markér Enabled-feltet og sørg for, at Content-feltet indeholder “exit-intent”.

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

Manuel opsætning #

Opsætningen er 4 trin:

  1. Opret et nyt Website Content 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, kopier den leverede 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 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-popuppen.

Startskabeloner #

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

Slider-kode #

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