Vtex

Search

Search code

Clerk.io bietet drei verschiedene Search-Lösungen an, die zusammen oder einzeln verwendet werden können:

Dieser Artikel erklärt, wie man mit einem Clerk.js Setup in VTEX startet.

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

Design erstellen #

Du kannst entweder den Design Editor für eine visuelle Konfiguration verwenden oder Code Designs nutzen.

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, mit welcher du starten möchtest.
  4. Vergib einen Namen und klicke auf Create design.
  5. Nimm alle gewünschten Änderungen am Design vor.

Du kannst den Setup Guide mit dem Titel SEARCH unter der Option Getting Started verwenden, um Designs und Content schnell zu erstellen, die das gleiche Farbschema und den Stil wie dein Webshop haben.

setup guide live search

Klicke auf Publish, wenn du mit dem Styling zufrieden bist.

Du kannst deine Designs und Inhalte später ganz einfach unter Designs and Elements im linken Menü ändern.

Code Design #

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

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

Element erstellen #

Dies enthält alle Einstellungen, die verwendet werden, um das Instant Search Dropdown anzuzeigen und es auf deiner Website einbettbar zu machen.

  1. Gehe zu Search > Elements.
  2. Klicke auf New Element.
  3. Gib ihm den Namen “Live Search”.
  4. Wähle in Element type Live-search aus dem Dropdown.
  5. Wähle in Design das von dir erstellte Design aus dem Dropdown.
  6. Klicke oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

  1. Öffne im Element die Registerkarte Insert into website.
  2. Hier hast du zwei Möglichkeiten:
    • Mit Injection kannst du den Code per CSS-Selektor einfügen.
    • Mit Embedded Code kannst du den Code manuell in deine Website einfügen.
  3. Wähle die für dich einfachste Option.
  4. Die App erstellt ein Suchfeld-Komponenten-Element zur Nutzung im Header: clerkio_searchinput. Standardmäßig führt dieses Suchfeld zur dedizierten Seitenroute, die von der App erstellt wurde.

Search Page #

Search Page
Die Search Page bietet ein vollflächiges Sucherlebnis mit erweiterten Filteroptionen. Damit werden alle Treffer zu einer Suchanfrage angezeigt.

Design erstellen #

Du kannst entweder den Design Editor für eine visuelle Konfiguration verwenden oder Code Designs nutzen.

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, mit welcher du starten möchtest.
  4. Vergib einen Namen und klicke auf Create design.
  5. Nimm alle gewünschten Änderungen am Design vor.

Du kannst den Setup Guide mit dem Titel SEARCH unter der Option Getting Started verwenden, um Designs und Content schnell zu erstellen, die das gleiche Farbschema und den Stil wie dein Webshop haben.

setup guide search page

Klicke auf Publish, wenn du mit dem Styling zufrieden bist.

Du kannst deine Designs und Inhalte später ganz einfach unter Designs and Elements im linken Menü ändern.

Code Design #

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

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

Element erstellen #

Dies enthält alle Einstellungen, die für die Anzeige der Search Page benötigt werden, und macht sie auf deiner bestehenden Suchseite einbettbar.

  1. Gehe zu Search > Elements.
  2. Klicke auf New Element.
  3. Gib ihm den Namen “Search Page”.
  4. Wähle in Element type Search page aus dem Dropdown.
  5. Wähle in Design das von dir erstellte Design aus dem Dropdown.
  6. Klicke oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

  1. Öffne im Element die Registerkarte Insert into website.
  2. Hier hast du zwei Möglichkeiten:
    • Mit Injection kannst du den Code per CSS-Selektor einfügen.
    • Mit Embedded Code kannst du den Code manuell in deine Website einfügen.
  3. Wähle die für dich einfachste Option.
  4. Füge in deinem Store-Theme clerkiopartnerdk.integration-vtex 1.x als Theme peerDependency in der Datei manifest.json hinzu:
"peerDependencies": {
    "clerkiopartnerdk.integration-vtex": "1.x"
}
  1. Füge den Block clerkio_searchpage auf der dedizierten Landing Search Page hinzu.
{
  "responsive-layout.desktop#searchpage": {
    "children": ["clerkio_searchpage"]
  }
}

Die App erstellt außerdem eine eigene Search Page Route unter /clerk-search?searchTerm=__QUERY__. Diese Route enthält bereits den Block clerkio_searchpage im Body.

Nach dem Aktivieren der Funktionen kannst du die SEARCH-Funktion von Clerk.io in deinem Webshop sehen.

Omnisearch #

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

Für Single Page Applications (SPAs) muss eine zusätzliche Funktion aktiviert werden, um Omnisearch zu integrieren. Das Feature SPA Auto Detect Changes kann aktiviert werden, indem du zu my.clerk.io > Settings > Features navigierst.

Features SPA changes

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, mit welcher du starten möchtest.
  4. Vergib einen Namen und klicke auf Save.
  5. Nimm alle gewünschten Anpassungen am Design vor. Der Omnisearch Guide bietet weitere Informationen dazu.

Element erstellen #

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

  1. Gehe zu Search > Elements.
  2. Klicke auf New Element.
  3. Gib ihm den Namen “Omni-Search”.
  4. Füge ein Tracking-Label hinzu – dieses sollte ebenfalls einfach “Omni-Search” lauten.
  5. Wähle in Element type Omni-search aus dem Dropdown.
  6. Wähle in Design das von dir erstellte Design aus dem Dropdown.
  7. Klicke oben auf dem Bildschirm auf Save.

Zur Website hinzufügen #

  1. Öffne im Element die Registerkarte Insert into website.
  2. Hier hast du zwei Möglichkeiten:
    • Mit Injection kannst du den Code per CSS-Selektor einfügen.
    • Mit Embedded Code kannst du den Code manuell in deine Website einfügen.
  3. Wähle die für dich einfachste Option.
  4. Wenn du die eingebettete Code-Option verwendest, ersetze INSERT_CSS_SELECTOR[...] durch eine eindeutige Klasse oder ID für dein Suchfeld. Die Omnisearch wird angezeigt, wenn das Eingabefeld zum entsprechenden Selektor angeklickt wird.

Start-Templates #

Wenn du Code Designs nutzen möchtest, können dich diese Templates beim Einstieg unterstützen. Sie enthalten die grundlegenden UI-Elemente, die Instant Search und Search Page ausmachen und können anschließend an deine Bedürfnisse angepasst werden.

Instant Search Code #

Dies beinhaltet die HTML- und CSS-Teile für die Anzeige eines Instant Search Dropdowns. Füge diese in ein Code Design auf 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 beinhaltet die HTML- und CSS-Teile für die Anzeige einer Search Page. Füge diese in ein Code Design auf 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.