DanDomain Classic

Search

Fügen Sie leistungsstarke Suchfunktionen zu Ihrem DanDomain Classic-Webshop hinzu.
Backend in the Clerk.io backend

Clerk.io bietet drei verschiedene Suchlösungen, die zusammen oder einzeln verwendet werden können:

Dieser Artikel erklärt, wie man startet, wenn die Clerk.io DanDomain Classic App verwendet wird.

Instant Search liefert Suchergebnisse in Echtzeit, während die Kunden tippen. Diese werden in einem Dropdown unter dem Suchfeld angezeigt.

Design erstellen #

Du kannst entweder den Design Editor nutzen, um das Design visuell zu konfigurieren, oder Code Designs verwenden.

Design Editor #

  1. Gehe zu Search > Designs und klicke auf New Design.
  2. Wähle Other designs > Instant Search.
  3. Wähle aus der Liste der Designvorlagen aus, mit welcher du starten möchtest.
  4. Gib einen Namen ein und klicke auf Create design.
  5. Nimm gewünschte Änderungen am Design vor.

Code Design #

  1. Gehe zu Search > Designs und klicke auf New Design.
  2. Wähle Other designs > Blank > With code.
  3. Gib einen Namen ein und klicke auf Save.
  4. Erstelle ein Code Design von Grund auf mit Liquid code.

Wenn du ein Startdesign möchtest, sieh dir weiter unten die Instant Search template an.

Element erstellen #

Dieses enthält alle Einstellungen, um das Instant Search Dropdown anzuzeigen und es auf deiner Webseite einbettbar zu machen.

  1. Gehe zu Search > Elements.
  2. Klicke auf New Element.
  3. Benenne es “Live Search”.
  4. Wähle im Element type Live-search im Dropdown aus.
  5. Wähle unter Design das zuvor erstellte Design aus dem Dropdown aus.
  6. Klicke oben auf der Seite auf Save.

Zur Website hinzufügen #

  1. Öffne die Clerk.io DanDomain Classic App.
  2. Aktiviere Live-Search und Include Categories.
  3. Klicke auf Gem.
  4. Optional:
    • Falls das Dropdown falsch platziert ist, passe Dropdown Positioning an.
    • Lege fest, wie viele Vorschläge, Kategorien und Seiten angezeigt werden.
    • Wenn es nicht angezeigt wird, setze Search Input Selector und Search Form Selector.

Search Page #

Die Search Page bietet ein ganzseitiges Sucherlebnis mit erweiterten Filteroptionen. Hier wird jedes einzelne Suchergebnis für die Suchanfrage des Kunden angezeigt.

Design erstellen #

Du kannst entweder den Design Editor nutzen, um das Design visuell zu konfigurieren, oder Code Designs verwenden.

Design Editor #

  1. Gehe zu Search > Designs und klicke auf New Design.
  2. Wähle Other designs > Search Page.
  3. Wähle aus der Liste der Designvorlagen aus, mit welcher du starten möchtest.
  4. Gib einen Namen ein und klicke auf Create design.
  5. Nimm gewünschte Änderungen am Design vor.

Code Design #

  1. Gehe zu Search > Designs und klicke auf New Design.
  2. Wähle Other designs > Blank > With code.
  3. Gib einen Namen ein und klicke auf Save.
  4. Erstelle ein Code Design von Grund auf mit Liquid code.

Wenn du ein Startdesign möchtest, sieh dir weiter unten die Search Page template an.

Element erstellen #

Dieses enthält alle Einstellungen, um die Search Page anzuzeigen und sie in deine bestehende Suchseite einzubetten.

  1. Gehe zu Search > Elements.
  2. Klicke auf New Element.
  3. Benenne es “Search Page”.
  4. Wähle im Element type Search page im Dropdown aus.
  5. Wähle unter Design das zuvor erstellte Design aus dem Dropdown aus.
  6. Klicke oben auf der Seite auf Save.

Zur Website hinzufügen #

  1. Lade den Ordner mit den Dateien der Search Page aus deinem Clerk.io Konto herunter. Die Datei search.asp im Ordner clerk wird für die Search Page verwendet.

  2. Entpacke ihn und verbinde dich per FTP mit deinem Shop.

  3. Lade den Ordner clerk neben deinen Ordner images hoch.

  4. Öffne die Clerk.io DanDomain Classic App.

  5. Aktiviere Search und klicke auf Gem.

Omnisearch #

Die Omnisearch kombiniert Instant Search und Search Page in einem Overlay, das angezeigt wird, wenn der Nutzer in das Suchfeld klickt.

Design erstellen #

Omnisearch funktioniert nur mit Code Designs, da das Layout komplexer ist und beliebig angepasst werden kann.

  1. Gehe zu Search > Designs und klicke auf New Design.
  2. Wähle Omni-search.
  3. Wähle aus der Liste der Designvorlagen aus, mit welcher du starten möchtest.
  4. Gib einen Namen ein und klicke auf Save.
  5. Passe das Design nach deinen Wünschen an. Weitere Infos gibt es im Omnisearch guide.

Element erstellen #

Dieses enthält alle Einstellungen, um die Omnisearch anzuzeigen und sie auf deiner Webseite einbettbar zu machen.

  1. Gehe zu Search > Elements.
  2. Klicke auf New Element.
  3. Benenne es “Omni-Search”.
  4. Füge ein Tracking-Label hinzu – dies sollte ebenfalls “Omni-Search” sein.
  5. Wähle im Element type Omni-search im Dropdown aus.
  6. Wähle unter Design das zuvor erstellte Design aus dem Dropdown aus.
  7. Klicke oben auf der Seite auf Save.

Zur Website hinzufügen #

Omnisearch erfordert eine manuelle Implementierung mit Embedded Code. Öffne in den Element-Einstellungen die Registerkarte Insert into website und nutze die Option für embedded code. Ersetze INSERT_CSS_SELECTOR[...] durch eine eindeutige Klasse oder ID deines Suchfeldes. Omnisearch wird angezeigt, sobald ein passendes Suchfeld angeklickt wird.

Hier ein vollständiges Beispiel für den Omni-search Einbettungscode:

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

Facetten #

Um Filter auf der Search Page hinzuzufügen, aktiviere Faceted Search in der App. Mit Added Facet kannst du Attribute hinzufügen, im Facetten-Überblick Titel, Reihenfolge und Sichtbarkeit einstellen.

Start-Templates #

Wenn du Code Designs verwenden möchtest, können diese Vorlagen dir den Einstieg erleichtern. Sie enthalten die grundlegenden UI-Elemente für Instant Search und Search Page, die du nach Bedarf verändern kannst.

Instant Search Code #

Dies enthält die HTML- und CSS-Teile zur Darstellung eines Instant Search Dropdowns. Füge dies in ein Code Design in my.clerk.io ein.

HTML #

<div class="clerk-instant-search">
    {% if hits.length == 0 %}
        <div class="clerk-instant-search-no-results">
            Nothing matched: <b>{{ query }}</b>... try a simpler search!
        </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> Showing results 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">Products</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">Buy Now</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>See <b>{{ hits }}</b> more results 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">Search Suggestions</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">Categories</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">Related Content</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 }}">
                    See <b>{{ hits }}</b> more results 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: 0px 0px 5px 0px;
}

.clerk-instant-search-more-results {
    padding: 1em;

    font-size: 1.2em;
    
    text-align: center;
}

.clerk-instant-search-title {
    color: #b6c254;
    margin: 20px 0px 5px 0px;
    padding: 0px 0px 10px 0px;
    text-transform: uppercase;
    font-size: 1em;
    border-bottom: 1px solid #000000;
}

/* Products */
.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-instant-search-product-button {
    display: block;

    margin: .2em auto;
    padding: .8em 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: .8em;

    cursor: pointer;
}

/* Suggestions */

.clerk-icon {
    color: lightgray;
    margin-right: .5em;  
}

.clerk-instant-search-suggestions {
    margin-bottom: 1em;
}

.clerk-instant-search-suggestion {
    padding: .1em;
}

/* Categories */
.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;
}

/* Pages */
.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: 0px !important;
        left: 0px !important;
    }
    .clerk-mobile-button {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .clerk-instant-search-container {
        right: 0px !important;
    }
    .clerk-desktop-button {
        display: none;
    }
}

@media screen and (min-width: 376px) and (max-width: 800px) {
    .clerk-instant-search {
            min-width: 0px !important;
    }
}

@media screen and (max-width: 375px) {
    .clerk-instant-search {
        min-width: 200px !important;
    }
    .clerk-instant-search-col {
        margin: 0px 0px 20px 0px;
    }
    .clerk-instant-search-product-name {
        height: 3em !important;
    }
}

Search Page Code #

Dies enthält die HTML- und CSS-Teile zur Darstellung einer Search Page. Füge dies in ein Code Design in my.clerk.io ein.

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">On Sale</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">Out of Stock</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">Add to Cart</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>

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

CSS #

#clerk-search-results {
    margin: 0px;
}

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

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.