Any (webshop)

Recommendations

Automatiser og personalisere produkter på enhver side.
Anbefalinger

Clerk.io tilbyder mere end 23 forskellige typer produktlogikker, hvilket gør det muligt for dig at vise helt automatiserede produkter på enhver side. Denne artikel forklarer, hvordan du kommer i gang med at bruge en Clerk.js opsætning.

For vores fulde bedste praksis for, hvilke anbefalinger du skal bruge, læs denne artikel.

Opret Design #

Anbefalinger vises som en slider som standard. 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 kode designs.

Et design kan genbruges til et vilkårligt antal Anbefalingsindhold, du opretter.

Design Editor #

  1. Gå til Anbefalinger > Designs og klik Nyt Design.
  2. Vælg Produkt Slider
  3. Vælg en af design skabelonerne, du vil starte med.
  4. Giv det et navn og klik Opret design.
  5. Foretag de ændringer, du ønsker til designet.

Kode Design #

  1. Gå til Anbefalinger > Designs og klik Nyt Design.
  2. Vælg Andre designs > Blank > Kode.
  3. Giv det et navn og klik Opret design.
  4. Opret et kode design fra bunden ved hjælp af Liquid kode.

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

Opret Indhold #

Dette indeholder alle indstillinger, der bruges til at vise Anbefalingsslideren og gøre den indlejret på dit website. Følg disse trin for hver Anbefalingsbanner, du ønsker at oprette.

  1. Gå til Anbefalinger > Indhold.
  2. Klik Nyt Indhold.
  3. Giv det et beskrivende navn. Vi anbefaler at navngive det baseret på den side og logik, du ønsker at bruge. F.eks. “Hjemmeside / Besøgsanbefalinger”.
  4. I Indholdstype, vælg den produktlogik, du ønsker at bruge fra dropdown-menuen. Du kan se en oversigt over alle produktlogikker her.
  5. I Design vælg det design, du har oprettet fra dropdown-menuen, og vælg antallet af produkter, du ønsker at vise.
  6. Klik Gem øverst på skærmen.

Tilføj til Website #

  1. Åbn fanen Indsæt i website.
  2. Her har du to muligheder:
    • Ved at bruge injektion kan du indsætte koden ved hjælp af en CSS-selektor.
    • Ved at bruge indlejret kode kan du indsætte koden manuelt på dit website.
  3. Vælg den mulighed, der er nemmest for dig at bruge.
  4. For indlejret kode, tilføj eventuel nødvendig frontend-logik for at indsætte f.eks. et produkt- eller kategori-ID. Dette afhænger af den logik, du vælger.

Her er et komplet eksempel på indlejringskode til Anbefalinger, med et eksempel på produkt-ID:

<span class="clerk"
  data-template="@product-page-alternatives"
  data-products=[123]>
</span>

Startskabelon #

Hvis du vil bruge kode designs, kan denne skabelon hjælpe dig i gang. Den vil gengive en standard slider med forskellige produktinformationer, 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">På udsalg</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">Udsolgt</div>
                        </a>
                    {% else %}
                        <a class="clerk-add-to-cart" href="/cart.php?action=add&amp;product_id={{ product.id }}" data-event-type="product-click">
                            <div class="clerk-slider-button">Tilføj til kurv</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-add-to-cart, .clerk-add-to-cart: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;

    cursor: pointer;
}


.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;

    cursor: pointer;
}

@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.