Magento 1

Search

Tilføj kraftfuld søgefunktionalitet til din Magento 1 webshop.

Clerk.io tilbyder tre forskellige søgeløsninger, der kan bruges sammen eller hver for sig:

En Instant Search-dropdown.
En Search Page med Faceted Search-filtrering.
En Omnisearch-overlay, der kombinerer begge.

Denne artikel forklarer, hvordan du kommer i gang med Search på Magento 1.

Generelt #

For at aktivere Search-funktioner skal du bruge Magento-extension-indstillingerne: System > Configuration > Clerk > Settings. For at tilføje synkroniseringsdetaljer eller starte en synkronisering skal du gå til my.clerk.io > Data > Configuration.

Instant Search #

Instant Search giver realtime resultater, mens kunderne skriver, og viser dem i en dropdown under søgefeltet.

Opret Design #

Du kan enten bruge Design Editor til at konfigurere det visuelt eller bruge code designs.

Design Editor #

Gå til Search > Designs og klik på New Design.
Vælg Other designs > Instant Search.
Vælg fra listen over designtemplates, hvilket du vil starte med.
Giv det et navn, og klik på Create design.
Foretag de ændringer, du ønsker i designet.

Code Design #

Gå til Search > Designs og klik på New Design.
Vælg Other designs > Blank > With code.
Giv det et navn, og klik på Save.
Opret et codedesign fra bunden med Liquid code.

Hvis du vil have et startdesign, kan du tjekke Instant Search template længere nede.

Opret Element #

Dette indeholder alle indstillingerne, der bruges til at vise Instant Search-dropdown og gøre det indlejringsbart på dit website.

Gå til Search > Elements.
Klik på New Element.
Navngiv det “Live Search”.
Under Element type, vælg Live-search i dropdownen.
Under Design vælg det design, du har oprettet, fra dropdownen.
Klik på Save øverst på skærmen.

Tilføj til Website #

Aktivér via Magento-extensionen:

Gå til System > Configuration > Clerk > Settings.
Under Live-Search Settings sæt Enabled til Yes. Konfigurér evt.:
- Dropdown Positioning hvis dropdownen ikke er justeret korrekt.
- Antal foreslåede produkter, kategorier og sider der skal vises.
- Search Input Selector og Search Form Selector hvis dropdownen ikke vises.
Klik på Save Config.

Search Page #

Search Page giver en fuldskærms søgeresultatside med avancerede filtreringsmuligheder.

Opret Design #

Du kan enten bruge Design Editor til at konfigurere det visuelt eller anvende code designs.

Design Editor #

Gå til Search > Designs og klik på New Design.
Vælg Other designs > Search Page.
Vælg fra listen over designtemplates, hvilket du vil starte med.
Giv det et navn, og klik på Create design.
Foretag de ændringer, du ønsker i designet.

Code Design #

Gå til Search > Designs og klik på New Design.
Vælg Other designs > Blank > With code.
Giv det et navn, og klik på Save.
Opret et codedesign fra bunden med Liquid code.

Hvis du vil have et startdesign, kan du tjekke Search Page template længere nede.

Opret Element #

Dette indeholder alle indstillinger til at vise Search Page og gøre det indlejringsbart på dit website.

Gå til Search > Elements.
Klik på New Element.
Navngiv det “Search Page”.
Under Element type, vælg Search page fra dropdownen.
Under Design vælg det design, du har oprettet, fra dropdownen.
Klik på Save øverst på skærmen.

Tilføj til Website #

Aktivér via Magento-extensionen:

Gå til System > Configuration > Clerk > Settings.
Under Search Settings sæt Enabled til Yes, og klik på Save Config.

For at aktivere filtre, gå til Faceted Search:

Sæt Enabled til Yes.
Vælg hvilke Attributes der skal vises, og konfigurér labels og rækkefølge.

Omnisearch #

Omnisearch kombinerer Instant Search og Search Page i et enkelt overlay, som åbner, når brugeren fokuserer på søgefeltet.

Opret Design #

Omnisearch bruger et codedesign.

Gå til Search > Designs og klik på New Design.
Vælg Omni-search.
Vælg en template, giv den et navn, og klik på Save.
Tilpas designet efter behov. Se Omnisearch guide for flere detaljer.

Opret Element #

Gå til Search > Elements.
Klik på New Element.
Navngiv det “Omni-Search”.
Under Element type, vælg Omni-search.
Under Design vælg dit Omnisearch-design.
Klik på Save.

Tilføj til Website #

Du kan indsætte Omnisearch med injection eller indlejret kode. Hvis du bruger indlejret kode, skal du angive en CSS selector for søgefeltet med data-trigger-element.

Eksempel på embed-kode:

<span class="clerk"
  data-template="@omni-search"
  data-api="search/omni"
  data-trigger-element="#search">
</span>

Starttemplates #

Hvis du vil bruge codedesigns, kan disse templates give dig et forspring. De indeholder de grundlæggende UI-elementer, der udgør Instant Search og Search Page, og som du derefter kan tilpasse til dine behov.

Instant Search Code #

Dette indeholder HTML- og CSS-delene til visning af en Instant Search-dropdown. Tilføj disse til et codedesign i my.clerk.io.

HTML #

<div class="clerk-instant-search">
    {% if hits.length == 0 %}
        <div class="clerk-instant-search-no-results">
            Intet matchede: <b>{{ query }}</b>... prøv en enklere søgning!
        </div>
    {% endif %}

    {% if content.query != response.query %}
        <div class="clerk-instant-search-alternate-query">
            <i class="fas fa-search clerk-icon" aria-hidden="true"></i> Viser resultater for: <b>{{ query }}</b>
        </div>
    {% endif %}

    <div class="clerk-instant-search-grid">
        {% if products.length > 0 %}
            <div class="clerk-instant-search-col clerk-col-1">
                <div class="clerk-instant-search-products">
                    <div class="clerk-instant-search-title">Produkter</div>
                    {% for product in products %}
                        <a href="{{ product.url }}">
                            <div class="clerk-instant-search-product clerk-instant-search-key-selectable">
                                <div class="clerk-instant-search-product-image" style="background-image: url('{{ product.image }}');"></div>
    
                                <div>
                                    <div class="clerk-instant-search-product-name">{{ product.name | highlight query }}</div>
        
                                    {% if product.price < product.list_price %}
                                        <div class="clerk-instant-search-product-list-price">{{ product.list_price | money }}</div>
                                    {% endif %}
                                    <div class="clerk-instant-search-product-price">{{ product.price | money }}</div>
                                </div>
                                
                                <div>
                                    <div class="clerk-instant-search-product-button">Køb nu</div>
                                </div>
                            </div>
                        </a>
                    {% endfor %}
    
                    {% if hits > products.length %}
                        <div class="clerk-desktop-button clerk-instant-search-more-results clerk-instant-search-key-selectable">
                            <a class="clerk-view-more-results-button" href="/search?q={{ query }}">
                                <u>Se <b>{{ hits }}</b> flere resultater for "<i>{{ query }}</i>"</u>
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endif %}

        {% if (suggestions.length + categories.length + pages.length) > 0 %}
            <div class="clerk-instant-search-col clerk-col-2">
                {% if suggestions.length > 1 %}
                    <div class="clerk-instant-search-suggestions">
                        <div class="clerk-instant-search-title">Søgeforslag</div>
                        {% for suggestion in suggestions %}
                            {% if suggestion != query %}
                                <div class="clerk-instant-search-suggestion clerk-instant-search-key-selectable">
                                    <a href="/search?q={{ suggestion highlight query 'bold' true }}">
                                    <i class="fas fa-search clerk-icon" aria-hidden="true"></i>{{ suggestion }}
                                    </a>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                {% endif %}
        
                {% if categories.length > 0 %}
                    <div class="clerk-instant-search-categories">
                        <div class="clerk-instant-search-title">Kategorier</div>
                        {% for category in categories %}
                            <div class="clerk-instant-search-category clerk-instant-search-key-selectable">
                                <a href="{{ category.url }}">
                                    {{ category.name | highlight query }}
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
        
                {% if pages.length > 0 %}
                    <div class="clerk-instant-search-pages">
                        <div class="clerk-instant-search-title">Relateret indhold</div>
                        {% for page in pages %}
                            <div class="clerk-instant-search-category clerk-instant-search-key-selectable">
                                <a href="{{ page.url }}">
                                    <div class="name">{{ page.title | highlight query 'bold' true }}</div>   
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        {% endif %}
         {% if hits > products.length %}
            <div class="clerk-mobile-button clerk-instant-search-more-results clerk-instant-search-key-selectable">
                <a href="/search?q={{ query }}">
                    Se <b>{{ hits }}</b> flere resultater for "<i>{{ query }}</i>"
                </a>
            </div>
        {% endif %}
    </div>
</div>

CSS #

.clerk-instant-search { padding: 20px; }
.clerk-instant-search-container a { color: black !important; text-decoration: none !important; }
.clerk-instant-search-container a:hover { color: #b6c254 !important; }
.clerk-instant-search { overflow: hidden; width: 100%; min-width: 650px; max-width: 1000px; margin: .2em auto; background-color: white; border: 1px solid #eee; border-top: 0px; border-radius: 5px 5px 10px 10px; box-shadow: 0 1em 2em 1em rgba(0,0,0,.2); }
.clerk-instant-search-no-results { padding: 1em; font-style: italic; text-align: center; }
.clerk-instant-search-alternate-query { margin: 0 0 5px 0; }
.clerk-instant-search-more-results { padding: 1em; font-size: 1.2em; text-align: center; }
.clerk-instant-search-title { color: #b6c254; margin: 20px 0 5px; padding: 0 0 10px; text-transform: uppercase; font-size: 1em; border-bottom: 1px solid #000; }
.clerk-instant-search-products { padding-right: 2em; }
.clerk-instant-search-product { display: flex; padding: .2em; color: gray; }
.clerk-instant-search-product:hover { background-color: rgba(46, 204, 113, .1); }
.clerk-instant-search-product:hover .clerk-instant-search-product-button { transform: scale(1.05); }
.clerk-instant-search-product > * { flex: 1 1 auto; }
.clerk-instant-search-product > *:first-child, .clerk-instant-search-product > *:last-child { flex: 0 0 auto; }
.clerk-instant-search-product-image { display: inline-block; width: 3em; height: 3em; margin-right: 1em; background-position: center center; background-repeat: no-repeat; background-size: contain; }
.clerk-instant-search-product-name { overflow: hidden; height: 1.2em; margin-bottom: .2em; }
.clerk-instant-search-product-list-price { display: inline-block; margin-right: .5em; opacity: .8; font-weight: normal; text-decoration: line-through; color: gray; }
.clerk-instant-search-product-price { display: inline-block; font-weight: bold; }
.clerk-icon { color: lightgray; margin-right: .5em; }
.clerk-instant-search-suggestions { margin-bottom: 1em; }
.clerk-instant-search-suggestion { padding: .1em; }
.clerk-instant-search-categories { margin-bottom: 1em; }
.clerk-instant-search-category { padding: 5px; margin: 5px; width: auto; display: inline-block; border: 1px solid black; border-radius: 2px; }
.clerk-instant-search-pages { margin-bottom: 1em; }
.clerk-instant-search-page { padding: .1em; }
@media screen and (min-width: 1200px) { .clerk-instant-search-container { width: 50%; } .clerk-instant-search-grid { display: flex; } .clerk-col-1 { flex: 2; } .clerk-col-2 { flex: 1; } .clerk-mobile-button { display: none; } }
@media screen and (min-width: 768px) and (max-width: 1200px){ .clerk-instant-search-container { right: 0 !important; left: 0 !important; } .clerk-mobile-button { display: none; } }
@media screen and (max-width: 767px) { .clerk-instant-search-container { right: 0 !important; } .clerk-desktop-button { display: none; } }
@media screen and (min-width: 376px) and (max-width: 800px) { .clerk-instant-search { min-width: 0 !important; } }
@media screen and (max-width: 375px) { .clerk-instant-search { min-width: 200px !important; } .clerk-instant-search-col { margin: 0 0 20px 0; } .clerk-instant-search-product-name { height: 3em !important; } }

Search Page Code #

Dette indeholder HTML- og CSS-delene til visning af en Search Page. Tilføj disse til et codedesign i my.clerk.io.

HTML #

<div class="clerk-search-result">
    <div class="clerk-search-result-headline">{{ headline }}</div>
    <div class="clerk-grid">
        {% for product in products %}
            <div class="clerk-grid-item">
                <div class="clerk-grid-product">
                    <a href="{{ product.url }}">
                        {% if product.price < product.list_price %}
                            <div class="clerk-grid-badge">På tilbud</div>
                        {% endif %}
                        <div class="clerk-grid-image" style="background-image: url('{{ product.image }}');"></div>
                        <div class="clerk-grid-brand">{{ product.brand }}</div>
                        <div class="clerk-grid-name">{{ product.name }}</div>
                        
                        <div class="clerk-grid-pricing">
                            {% if product.price < product.retail_price %}
                                <div class="clerk-grid-list-price">£{{ product.retail_price | money }}</div>
                            {% endif %}
                            
                            <div class="clerk-grid-price">£{{ product.price | money }}</div>
                        </div>
                    </a>
                    {% if product.stock == 1 %}
                        <a class="clerk-not-in-stock" href="{{ product.url }}" data-event-type="product-click">
                            <div class="clerk-grid-button-not-in-stock">Ikke på lager</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-grid-button">Læg i kurv</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>

    {% if count > products.length %}
        <div class="clerk-load-more-button" onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">Vis flere resultater</div>
    {% endif %}
</div>

CSS #

#clerk-search-results { margin: 0; }
.clerk-search-result { margin: 1em 0; }
.clerk-search-result-headline { font-weight: bold; font-size: 2em; text-align: center; }
.clerk-grid { display: flex; flex-flow: row wrap; }
.clerk-grid-item { margin: auto; }
.clerk-grid-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-grid-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-grid-tags { position: absolute; top: .8em; left: .8em; }
.clerk-grid-tag { display: inline-block; padding: .2em .8em; border-radius: .3em; background-color: gray; font-size: 10px; color: white; letter-spacing: 1px; }
.clerk-grid-image { width: 100%; height: 8em; margin-bottom: 1em; background-position: center center; background-repeat: no-repeat; background-size: contain; }
.clerk-grid-brand { font-size: 0.9em; color: #757575; }
.clerk-grid-name { height: 3em; overflow: hidden; color: #4a3b40; font-weight:bold; font-size: 15px; margin-bottom: 1em; }
.clerk-grid-pricing { display: flex; margin-bottom: 1em; }
.clerk-grid-price { flex: 1; color: #757575; font-weight: bold; }
.clerk-grid-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-grid-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-grid-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: 1025px) { .clerk-grid-item { flex: 0 0 25%; margin: auto; } }
@media screen and (min-width: 500px) and (max-width: 1024px) { .clerk-grid-item { flex: 0 0 33%; margin: auto; } }
@media screen and (max-width: 499px) { .clerk-grid-item { flex: 0 0 100%; margin: auto; } }

Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.