Magento 1

Recommendations

Automatisér og personalisér produkter på enhver side i Magento 1.

Clerk.io tilbyder mere end 23 forskellige typer af produktlogikker, hvilket gør det muligt for dig at vise helt automatiserede 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 fulde Best Practices, læs denne artikel om hvilke Recommendations du bør bruge.

Slider-opsætning #

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

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

Opret Design #

Recommendations vises som standard i en slider. 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 alle de 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 ønsker at starte med, fra listen.
  4. Giv den 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 hjælp af Liquid code.

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

Opret Element #

Dette indeholder alle indstillinger, der bruges til at vise Recommendations og gør 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 siden og logikken, du ønsker at bruge. F.eks. “Home Page / Visitor Recommendations”.
  4. I Element type, vælg den produktlogik, du ønsker at bruge, fra dropdown-menuen. Du kan se et overblik over alle produktlogikker 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 på hjemmeside #

For at tilføje Clerk Recommendations på din hjemmeside 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 med en CSS-selector.
    • Brug af embedded code giver dig mulighed for at indsætte koden manuelt på din hjemmeside.
  3. Vælg den mulighed, der er nemmest for dig.
  4. For nogle Logics vil du se dropdown-menuen Choose your platform. Vælg Magento 1 i disse tilfælde. Dette udfylder embedcode 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 skal du gå til System > Configuration > Clerk settings og vælge det korrekte Store View.
  2. For hver side-sektion, aktiver og udfyld templates/indhold:
    • Product Page Settings: sæt Enable til Yes og sørg for, at feltet templates indeholder dine Slider IDs (kommasepareret, uden “@”).
    • Category Page Settings: sæt Enable til Yes og indsæt dine Slider IDs.
    • Cart Settings: sæt Enable til Yes og indsæt 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 nuværende cart product IDs, fx:
    data-products="[<?php $i = 0; foreach(Mage::getSingleton('checkout/session')->getQuote()->getAllVisibleItems() as $_item) { if ($i > 0) { echo ','; } echo $_item->getProductId(); $i++; } ?>]"

Sider #

Nedenfor 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 embedcodes i din forside-template/blok.

Kategoriside #

  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 1, og kopier embedcode.
  3. Gå til Magento 1-temafilerne og find den fil, der genererer dine kategorisider. Dette er ofte app/design/frontend/TEMPLATE_NAME/default/template/catalog/category/view.phtml.
  4. Indsæt embedcode 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, vælg Magento 1 for hver af dem og kopier embedcodes.
  3. I Magento 1-temafilerne, find den fil, der genererer dine produktsider. Dette er oftest app/design/frontend/TEMPLATE_NAME/default/template/catalog/product/view.phtml.
  4. Indsæt embedcodes 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 embedcode virker korrekt.
  3. Klik på Save øverst på siden.
  4. For at aktivere add-to-basket-Powerstep med Magento-udvidelsen:
    1. Gå til System > Configuration > Clerk.
    2. Under Power step settings, tilføj dine Element IDs (kommasepareret) i Templates.
    3. Sæt 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 Insert into website > Choose your platform dropdown, vælg Magento 1, og kopier embedkoden.
  3. Gå til Magento 1-temafilerne, og find filen, der genererer dine cart-sider.
  4. Indsæt embedkoden et sted under cart items og checkout-knappen. Sæt data-products til de nuværende cart product 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 finder du trinene for begge muligheder.

Extension-opsætning #

Ved brug af udvidelsen:

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

Manuel opsætning #

Manuel indlejring (ældre udvidelsesversioner): 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 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 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.