Woocommerce

Search

Fügen Sie leistungsstarke Suchfunktionen zu Ihrem WooCommerce-Webshop hinzu.

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

Dieser Artikel erklärt, wie Sie mit der Suche mit dem WooCommerce-Plugin beginnen können.

Sofortige Suche #

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

Design erstellen #

Sie können entweder den Design-Editor verwenden, um es visuell zu konfigurieren, oder Code-Designs verwenden.

Design-Editor #

  1. Gehen Sie zu Search > Designs und klicken Sie auf Neues Design.
  2. Wählen Sie Andere Designs > Sofortige Suche.
  3. Wählen Sie aus der Liste der Designvorlagen, mit welcher Sie beginnen möchten.
  4. Geben Sie ihm einen Namen und klicken Sie auf Design erstellen.
  5. Nehmen Sie alle gewünschten Änderungen am Design vor.

Code-Design #

  1. Gehen Sie zu Search > Designs und klicken Sie auf Neues Design.
  2. Wählen Sie Andere Designs > Leer > Mit Code.
  3. Geben Sie ihm einen Namen und klicken Sie auf Speichern.
  4. Erstellen Sie ein Code-Design von Grund auf mit Liquid-Code.

Wenn Sie ein Startdesign möchten, überprüfen Sie die Sofortige Suche-Vorlage weiter unten.

Inhalt erstellen #

Dies enthält alle Einstellungen, die verwendet werden, um das Sofortige Suche-Dropdown anzuzeigen und es in Ihre Website einbettbar zu machen.

  1. Gehen Sie zu Search > Content.
  2. Klicken Sie auf Neuer Inhalt.
  3. Nennen Sie es “Live-Suche”.
  4. Wählen Sie in Inhaltstyp Live-Suche aus dem Dropdown-Menü.
  5. Wählen Sie in Design das Design aus, das Sie aus dem Dropdown-Menü erstellt haben.
  6. Klicken Sie oben auf dem Bildschirm auf Speichern.

Zur Website hinzufügen #

Um die Live-Suche auf Ihrer Website hinzuzufügen, folgen Sie diesen Schritten:

  1. Gehen Sie in Ihr WooCommerce-Backend.
  2. Klicken Sie auf Clerk im linken Seitenmenü.
  3. Scrollen Sie zum Abschnitt Live-Suche-Einstellungen.
  4. Aktivieren Sie das Kontrollkästchen für “Aktiviert”.
  5. Ändern Sie den Rest der Konfiguration basierend auf Ihren Bedürfnissen.
  6. Fügen Sie den Live-Suche-Eingabeselektor und den Live-Suche-Formularselektor ein.
  7. Klicken Sie auf Einstellungen speichern.

Alternativ können Sie die Injection Funktion verwenden.

Suchseite #

Die Suchseite bietet ein vollständiges Sucherlebnis mit erweiterten Filteroptionen. Dies wird verwendet, um jedes einzelne Ergebnis für die Suchanfrage eines Kunden anzuzeigen.

Design erstellen #

Sie können entweder den Design-Editor verwenden, um es visuell zu konfigurieren, oder Code-Designs verwenden.

Design-Editor #

  1. Gehen Sie zu Search > Designs und klicken Sie auf Neues Design.
  2. Wählen Sie Andere Designs > Suchseite.
  3. Wählen Sie aus der Liste der Designvorlagen, mit welcher Sie beginnen möchten.
  4. Geben Sie ihm einen Namen und klicken Sie auf Design erstellen.
  5. Nehmen Sie alle gewünschten Änderungen am Design vor.

Code-Design #

  1. Gehen Sie zu Search > Designs und klicken Sie auf Neues Design.
  2. Wählen Sie Andere Designs > Leer > Mit Code.
  3. Geben Sie ihm einen Namen und klicken Sie auf Speichern.
  4. Erstellen Sie ein Code-Design von Grund auf mit Liquid-Code.

Wenn Sie ein Startdesign möchten, überprüfen Sie die Suchseite-Vorlage weiter unten.

Inhalt erstellen #

Dies enthält alle Einstellungen, die verwendet werden, um die Suchseite anzuzeigen und sie in Ihre bestehende Suchseite einbettbar zu machen.

  1. Gehen Sie zu Search > Content.
  2. Klicken Sie auf Neuer Inhalt.
  3. Nennen Sie es “Suchseite”.
  4. Wählen Sie in Inhaltstyp Suchseite aus dem Dropdown-Menü.
  5. Wählen Sie in Design das Design aus, das Sie aus dem Dropdown-Menü erstellt haben.
  6. Klicken Sie oben auf dem Bildschirm auf Speichern.

Zur Website hinzufügen #

Um die Suchseite auf Ihrer Website hinzuzufügen, folgen Sie diesen Schritten:

  1. Gehen Sie in Ihr WooCommerce-Backend.
  2. Gehen Sie zu Seiten.
  3. Klicken Sie oben auf der Seite auf Neu hinzufügen.
  4. Geben Sie der Suchergebnisseite einen Namen, wie “Suchergebnisse”.
  5. Geben Sie im Textfeld [clerk-search] ein und drücken Sie Veröffentlichen.
  6. Klicken Sie dann auf Clerk im linken Seitenmenü.
  7. Scrollen Sie zum Abschnitt Suchseiten-Einstellungen.
  8. Aktivieren Sie das Kontrollkästchen für Aktiviert.
  9. Wählen Sie im Suchseite-Feld den neu erstellten Seitennamen aus Punkt 4 aus.
  10. Ändern Sie den Rest der Konfiguration basierend auf Ihren Bedürfnissen und klicken Sie auf Einstellungen speichern.

Facetten #

Mit der facettierten Suche können Sie Filter auf Ihrer Clerk-Suchseite erstellen, die es Ihren Kunden erleichtern, durch die Suchergebnisse zu navigieren.

Befolgen Sie diese Schritte, um Filter auf Ihrer Clerk-Suchseite hinzuzufügen:

  1. Öffnen Sie Ihr WooCommerce-Backend.
  2. Klicken Sie im linken Seitenmenü auf Clerk.
  3. Scrollen Sie nach unten zum Abschnitt Facettierte Navigation.
  4. Aktivieren Sie das Kontrollkästchen für Aktiviert.
  5. Geben Sie im Benutzerdefinierte Attribute hinzufügen-Feld das Attribut ein, das Sie als Filter verwenden möchten, und klicken Sie auf Hinzufügen.
  6. Legen Sie einen Anzeigetitel fest, wählen Sie eine Position und aktivieren Sie das Kontrollkästchen Anzeigen.
  7. Klicken Sie auf Einstellungen speichern. Ihre Suchseite wird jetzt Filter enthalten.

Omnisearch #

Omnisearch woocommerce
Der Omnisearch kombiniert die Sofortige Suche und die Suchseite in einem einzigen Overlay, das angezeigt wird, wenn der Benutzer in das Suchfeld klickt.

Design erstellen #

Omnisearch funktioniert nur mit Code-Designs, da es ein komplexeres Layout hat, das auf beliebige Weise angepasst werden kann.

  1. Gehen Sie zu Search > Designs und klicken Sie auf Neues Design.
  2. Wählen Sie Omni-Suche.
  3. Wählen Sie aus der Liste der Designvorlagen, mit welcher Sie beginnen möchten.
  4. Geben Sie ihm einen Namen und klicken Sie auf Speichern.
  5. Nehmen Sie alle gewünschten Anpassungen am Design vor. Der Omnisearch-Leitfaden enthält weitere Informationen dazu, wie Sie dies tun können.

Inhalt erstellen #

Dies enthält alle Einstellungen, die verwendet werden, um den Omnisearch anzuzeigen und ihn in Ihre Website einbettbar zu machen.

  1. Gehen Sie zu Search > Content.
  2. Klicken Sie auf Neuer Inhalt.
  3. Nennen Sie es “Omni-Suche”.
  4. Fügen Sie ein Tracking-Label hinzu - dies sollte ebenfalls nur “Omni-Suche” sein.
  5. Wählen Sie in Inhaltstyp Omni-Suche aus dem Dropdown-Menü.
  6. Wählen Sie in Design das Design aus, das Sie aus dem Dropdown-Menü erstellt haben.
  7. Klicken Sie oben auf dem Bildschirm auf Speichern.

Zur Website hinzufügen #

  1. Öffnen Sie im Inhaltsbereich die Registerkarte In Website einfügen.
  2. Hier haben Sie zwei Optionen:
    • Mit Injection können Sie den Code mithilfe eines CSS-Selectors einfügen.
    • Mit eingebettetem Code können Sie den Code manuell in Ihre Website einfügen.
  3. Wählen Sie die Option, die für Sie am einfachsten zu verwenden ist.
  4. Wenn Sie die Option für eingebetteten Code verwenden, ersetzen Sie INSERT_CSS_SELECTOR[...] durch eine eindeutige Klasse oder ID für Ihr Suchfeld. Der Omnisearch wird angezeigt, wenn das Eingabefeld, das dem Selektor entspricht, angeklickt wird.

Hier ist ein vollständiges Beispiel für den Einbettungscode von Omni-Suche mit #search als CSS-Selektor:

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

Startvorlagen #

Wenn Sie Code-Designs verwenden möchten, können Ihnen diese Vorlagen den Einstieg erleichtern. Sie enthalten die grundlegenden UI-Elemente, die die Sofortige Suche und die Suchseite ausmachen, die Sie dann nach Ihren Bedürfnissen anpassen können.

Sofortige Suche Code #

Dies enthält die HTML- und CSS-Teile für die Anzeige eines Sofortige Suche-Dropdowns. Fügen Sie diese zu einem Code-Design in my.clerk.io hinzu.

HTML #

<div class="clerk-instant-search">
    {% if hits.length == 0 %}
        <div class="clerk-instant-search-no-results">
            Nichts gefunden: <b>{{ query }}</b>... versuchen Sie eine einfachere Suche!
        </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> Ergebnisse für: <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">Produkte</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">Jetzt kaufen</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>Siehe <b>{{ hits }}</b> weitere Ergebnisse für "<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">Suchvorschläge</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">Kategorien</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">Verwandte Inhalte</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 }}">
                    Siehe <b>{{ hits }}</b> weitere Ergebnisse für "<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;
}


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

/* Vorschläge */

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

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

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



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


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

Suchseite Code #

Dies enthält die HTML- und CSS-Teile für die Anzeige einer Suchseite. Fügen Sie diese zu einem Code-Design in my.clerk.io hinzu.

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">Im Angebot</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">Nicht auf 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">In den Warenkorb</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>

    {% if count > products.length %}
        <div class="clerk-load-more-button" onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">Weitere Ergebnisse anzeigen</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.