Magento 1

Recommendations

Automatiser og personalisere produkter på enhver side i Magento 1.

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

For vores komplette Best Practices, læs denne artikel om hvilke Recommendations du bør anvende.

Slider-opsætning #

Recommendations oprettes med Elements, der henviser 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 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 kodedesigns.

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 designtemplate, du vil starte med, fra listen.
  4. Giv det et navn, og klik på Create design.
  5. Foretag de ændringer, du ønsker til 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 kodedesign fra bunden med Liquid code.

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

Opret Element #

Dette indeholder alle indstillinger, der bruges til at vise Recommendations og gøre det muligt at indlejre 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 efter siden og logikken, du vil bruge. F.eks. “Home Page / Visitor Recommendations”.
  4. Under Element type, vælg den produktlogik, du vil bruge, fra dropdown-menuen. Du kan se en oversigt over alle produktlogikker her.
  5. Under Design vælg det design, du har oprettet, fra dropdown-menuen og vælg antallet af produkter, du ønsker at vise.
  6. Klik på Save øverst på skærmen.

Tilføj til Website #

For at tilføje Clerk Recommendations til dit website har du to muligheder: Injection og Embedded code.

  1. Åbn fanen Insert into website.
  2. Her har du to muligheder:
    • Brug af injection giver dig mulighed for at indsætte koden via en CSS-selector.
    • Brug af embedded code giver dig mulighed for at indsætte koden manuelt på dit website.
  3. Vælg den mulighed, der er nemmest for dig.
  4. For nogle Logics ser du dropdown-menuen Choose your platform. Vælg Magento 1 i disse tilfælde. Dette udfylder embedkoden med de korrekte Magento 1-shortcodes.

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

Extension-opsætning #

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

  1. I Magento, gå til System > Configuration > Clerk settings og vælg den korrekte Store View.
  2. For hver sidelokation, aktiver og udfyld templates/indhold:
    • Product Page Settings: indstil Enable til Yes og sørg for, at templates-feltet indeholder dine Slider IDs (kommasepareret, uden “@”).
    • Category Page Settings: indstil Enable til Yes og tilføj dine Slider IDs.
    • Cart Settings: indstil Enable 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 1 er typiske placeringer:

    • Forside: CMS > Pages > Home page under Content.
    • Produktside: app/design/frontend/TEMPLATE_NAME/default/template/catalog/product/view.phtml med data-products sat til <?php echo Mage::registry('current_product')->getId(); ?>.
    • Kategoriside: app/design/frontend/TEMPLATE_NAME/default/template/catalog/category/view.phtml med data-category sat til <?php echo Mage::getModel('catalog/layer')->getCurrentCategory()->getId(); ?>.
    • Kurvside: i din cart-template, sæt data-products til de aktuelle kurv-produkt-IDs, f.eks.:
    data-products="[<?php $i = 0; foreach(Mage::getSingleton('checkout/session')->getQuote()->getAllVisibleItems() as $_item) { if ($i > 0) { echo ','; } echo $_item->getProductId(); $i++; } ?>]"

Sider #

Nedenfor finder du de specifikke sider, hvor du bør indsætte Recommendations, og hvilke typer der bør bruges 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-template/blok.

Kategoriside #

  1. I my.clerk.io, opret et Element med logikken Bestsellers In Category.
  2. I dropdown-menuen Insert into website > Choose your platform, vælg Magento 1, og kopier embedkoden.
  3. Gå til Magento 1’s theme-filer og find den fil, der genererer dine kategorisider. Dette er oftest app/design/frontend/TEMPLATE_NAME/default/template/catalog/category/view.phtml.
  4. Indsæt embedkoden et sted under titel og beskrivelse. Sæt data-category til <?php echo Mage::getModel('catalog/layer')->getCurrentCategory()->getId(); ?>.

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ælg Magento 1 for hver af dem og kopier embedkoderne.
  3. I Magento 1 theme-filerne, find den fil, der genererer dine produktsider. Dette er oftest app/design/frontend/TEMPLATE_NAME/default/template/catalog/product/view.phtml.
  4. Indsæt embedkoder et sted under produktbeskrivelsen. Sæt data-products til <?php echo Mage::registry('current_product')->getId(); ?>.

Add-To-Basket Trin #

  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 på Save øverst på siden.
  4. For at aktivere add-to-basket-Powerstep ved brug af Magento-udvidelsen:
    1. Gå til System > Configuration > Clerk.
    2. Under Power step settings, tilføj dine Element IDs (kommasepareret) i Templates.
    3. Indstil Enable til Yes og klik på Save Config.

Kurvside #

  1. I my.clerk.io, opret et Element med logikken Best Cross-Sell Products.
  2. I dropdown-menuen Insert into website > Choose your platform, vælg Magento 1, og kopier embedkoden.
  3. Gå til Magento 1’s theme-filer og find den fil, der genererer dine kurvsider.
  4. Indsæt embedkoden et sted under kurvartiklerne og checkout-knappen. Sæt data-products til de aktuelle kurv-produkt-IDs.

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 trinene for begge muligheder.

Extension-opsætning #

Med udvidelsen:

  1. Gå til System > Configuration > Clerk Settings og vælg den korrekte Store View.
  2. Under Exit-Intent Settings, indstil Enable til Yes og sørg for, at Element/Templates-feltet indeholder dit Element ID (f.eks. exit-intent).
  3. Klik på Save Config.

Manuel opsætning #

Manuel indlejring (ældre versioner af udvidelsen): tilføj følgende til app/design/frontend/base/default/template/clerk/tracking.phtml:

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

Startskabeloner #

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

Slider-kode #

Denne skabelon vil vise en standard-slider med almindelige produktinformationer, som du kan tilpasse til dit 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.