Vtex

Search

Clerk.io ofrece tres soluciones de búsqueda distintas que pueden usarse juntas o por separado:

Un Instant Search desplegable.
Una Search Page con filtrado de búsqueda facetada.
Un Omnisearch superpuesto que combina ambas.

Este artículo explica cómo empezar a usar una Clerk.js setup en VTEX.

Instant Search #

Instant Search proporciona resultados de búsqueda en tiempo real a medida que los clientes escriben, mostrados en un menú desplegable debajo del campo de búsqueda.

Crear diseño #

Puedes usar el Design Editor para configurarlo visualmente, o utilizar code designs.

Design Editor #

Ve a Search > Designs y haz clic en New Design.
Elige Other designs > Instant Search.
De la lista de plantillas de diseño, elige con cuál quieres comenzar.
Asígnale un nombre y haz clic en Create design.
Realiza los cambios que desees en el diseño.

Puedes usar la guía de configuración titulada SEARCH bajo la opción Getting Started, para crear rápidamente Designs y Content que tengan la misma gama de colores y estilo que tu ecommerce.

Haz clic en Publish cuando te sientas satisfecho con el estilo.

Podrás cambiar fácilmente tus diseños y contenido más adelante, en Designs and Elements del menú izquierdo.

Code Design #

Ve a Search > Designs y haz clic en New Design.
Elige Other designs > Blank > With code.
Asígnale un nombre y haz clic en Save.
Crea un diseño de código desde cero usando Liquid code.

Si deseas un diseño inicial, revisa la Instant Search template más abajo.

Crear Element #

Esto contiene todos los ajustes para mostrar el Instant Search desplegable y permite incorporarlo a tu página web.

Ve a Search > Elements.
Haz clic en New Element.
Nómbralo “Live Search”.
En Element type, selecciona Live-search del menú desplegable.
En Design selecciona el diseño que creaste del menú desplegable.
Haz clic en Save en la parte superior de la pantalla.

Agregar al sitio web #

Desde la configuración del Element, abre la pestaña Insert into website.
Aquí tienes dos opciones:
- Usar la injection te permite insertar el código usando un selector CSS.
- Usar el embedded code te permite insertar el código manualmente en tu sitio web.
Elige la opción que sea más fácil para ti.
La aplicación crea un campo de entrada de búsqueda para usar en tu header: clerkio_searchinput. Por defecto este campo de entrada te lleva al route dedicado creado por la app.

Search Page #

La Search Page ofrece una experiencia de búsqueda en pantalla completa con opciones avanzadas de filtrado. Se utiliza para mostrar todas las coincidencias para la consulta de búsqueda del cliente.

Crear diseño #

Puedes usar el Design Editor para configurarlo visualmente, o utilizar code designs.

Design Editor #

Ve a Search > Designs y haz clic en New Design.
Elige Other designs > Search Page.
De la lista de plantillas de diseño, elige con cuál quieres comenzar.
Asígnale un nombre y haz clic en Create design.
Realiza los cambios que desees en el diseño.

Haz clic en Publish cuando te sientas satisfecho con el estilo.

Podrás cambiar fácilmente tus diseños y contenido más adelante, en Designs and Elements del menú izquierdo.

Code Design #

Ve a Search > Designs y haz clic en New Design.
Elige Other designs > Blank > With code.
Asígnale un nombre y haz clic en Save.
Crea un diseño de código desde cero usando Liquid code.

Si deseas un diseño inicial, revisa la Search Page template más abajo.

Crear Element #

Esto contiene todos los ajustes para mostrar la Search Page y permite incorporarla a tu página de búsqueda existente.

Ve a Search > Elements.
Haz clic en New Element.
Nómbralo “Search Page”.
En Element type, selecciona Search page del menú desplegable.
En Design selecciona el diseño que creaste del menú desplegable.
Haz clic en Save en la parte superior de la pantalla.

Agregar al sitio web #

Desde la configuración del Element, abre la pestaña Insert into website.
Aquí tienes dos opciones:
- Usar la injection te permite insertar el código utilizando un selector CSS.
- Usar el embedded code te permite insertar el código manualmente en tu sitio web.
Elige la opción que sea más fácil para ti.
En el tema de tu tienda, añade clerkiopartnerdk.integration-vtex 1.x como peerDependency del tema en el archivo manifest.json:

"peerDependencies": {
    "clerkiopartnerdk.integration-vtex": "1.x"
}

Añade el bloque clerkio_searchpage en la página de búsqueda dedicada.

{
  "responsive-layout.desktop#searchpage": {
    "children": ["clerkio_searchpage"]
  }
}

La App también creará una ruta dedicada para la página de búsqueda en /clerk-search?searchTerm=__QUERY__. Esta ruta ya incluye el bloque clerkio_searchpage en el body.

Después de habilitar las funciones, podrás ver la función SEARCH de Clerk.io en tu ecommerce.

Omnisearch #

Omnisearch combina el Instant Search y la Search Page en una única superposición que se muestra cuando el usuario hace clic dentro del campo de búsqueda.

Para Single Page Applications (SPAs), se debe habilitar una función adicional para integrar Omnisearch. La función, SPA Auto Detect Changes, puede activarse navegando a my.clerk.io > Settings > Features.

Crear diseño #

Omnisearch solo funciona con code designs, ya que tiene un layout más complejo que puede modificarse como quieras.

Ve a Search > Designs y haz clic en New Design.
Elige Omni-search.
De la lista de plantillas de diseño, elige con cuál quieres comenzar.
Asígnale un nombre y haz clic en Save.
Realiza los ajustes que quieras al diseño. La Omnisearch guide tiene más información sobre cómo hacerlo.

Crear Element #

Esto contiene todos los ajustes para mostrar el Omnisearch y permite incorporarlo a tu página web.

Ve a Search > Elements.
Haz clic en New Element.
Nómbralo “Omni-Search”.
Agrega una etiqueta de tracking; también debería llamarse “Omni-Search”.
En Element type, selecciona Omni-search del menú desplegable.
En Design selecciona el diseño que creaste del menú desplegable.
Haz clic en Save en la parte superior de la pantalla.

Agregar al sitio web #

Desde la configuración del Element, abre la pestaña Insert into website.
Aquí tienes dos opciones:
- Usar la injection te permite insertar el código usando un selector CSS.
- Usar el embedded code te permite insertar el código manualmente en tu sitio web.
Elige la opción que sea más fácil para ti.
Si utilizas la opción de embedded code, reemplaza INSERT_CSS_SELECTOR[...] con una clase o ID única para tu campo de búsqueda. Omnisearch se mostrará cuando el campo de entrada correspondiente al selector sea clicado.

Plantillas de inicio #

Si deseas utilizar code designs, estas plantillas pueden ayudarte a comenzar. Contienen los elementos básicos de la interfaz que componen Instant Search y Search Page, que después puedes modificar según tus necesidades.

Código para Instant Search #

Esto contiene las partes HTML y CSS para mostrar el menú desplegable de Instant Search. Añádelos a un code design en my.clerk.io.

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

Código para Search Page #

Esto contiene las partes HTML y CSS para mostrar una Search Page. Añádelos a un code design en 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">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;
    }
}

Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.