Vtex

Search

Search code

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

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

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

Crear diseño #

Puedes utilizar el Editor de Diseño para configurarlo visualmente, o utilizar diseños con código.

Editor de diseño #

  1. Ve a Search > Designs y haz clic en New Design.
  2. Elige Other designs > Instant Search.
  3. De la lista de plantillas de diseño, elige con cuál quieres comenzar.
  4. Asígnale un nombre y haz clic en Create design.
  5. 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 tienda online.

setup guide live search

Haz clic en Publish cuando estés satisfecho con el estilo.

Puedes cambiar fácilmente tus diseños y contenido más adelante, en Designs and Content en el menú de la izquierda.

Diseño con código #

  1. Ve a Search > Designs y haz clic en New Design.
  2. Elige Other designs > Blank > With code.
  3. Asigna un nombre y haz clic en Save.
  4. Crea un diseño desde cero usando Liquid code.

Si deseas un diseño de inicio, consulta la plantilla de Instant Search más abajo.

Crear contenido #

Esto contiene todos los ajustes usados para mostrar el menú desplegable de Instant Search y permite incrustarlo en tu sitio web.

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

Añadir al sitio web #

  1. Desde los ajustes de Contenido, abre la pestaña Insert into website.
  2. Aquí tienes dos opciones:
    • Usar injection te permite insertar el código usando un selector de CSS.
    • Usar embedded code te permite insertar el código manualmente en tu sitio.
  3. Elige la opción que te resulte más fácil.
  4. La App crea un campo de entrada de búsqueda de componente para usar en tu cabecera: clerkio_searchinput. Por defecto, este campo te lleva a la ruta de página dedicada creada por la app.

Search Page #

Search Page
Search Page ofrece una experiencia de búsqueda a página completa con opciones de filtrado avanzadas. Se utiliza para mostrar todas las coincidencias de la consulta de búsqueda del cliente.

Crear diseño #

Puedes utilizar el Editor de Diseño para configurarlo visualmente, o utilizar diseños con código.

Editor de diseño #

  1. Ve a Search > Designs y haz clic en New Design.
  2. Elige Other designs > Search Page.
  3. De la lista de plantillas de diseño, elige con cuál quieres comenzar.
  4. Asígnale un nombre y haz clic en Create design.
  5. 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 tienda online.

setup guide search page

Haz clic en Publish cuando estés satisfecho con el estilo.

Puedes cambiar fácilmente tus diseños y contenido más adelante, en Designs and Content en el menú de la izquierda.

Diseño con código #

  1. Ve a Search > Designs y haz clic en New Design.
  2. Elige Other designs > Blank > With code.
  3. Asigna un nombre y haz clic en Save.
  4. Crea un diseño desde cero usando Liquid code.

Si deseas un diseño inicial, consulta la plantilla de Search Page más abajo.

Crear contenido #

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

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

Añadir al sitio web #

  1. Desde los ajustes de Contenido, abre la pestaña Insert into website.
  2. Aquí tienes dos opciones:
    • Usar injection te permite insertar el código usando un selector de CSS.
    • Usar embedded code te permite insertar el código manualmente en tu sitio.
  3. Elige la opción que te resulte más fácil.
  4. En el tema de tu tienda, añade clerkiopartnerdk.integration-vtex 1.x como theme peerDependency en el archivo manifest.json:
"peerDependencies": {
    "clerkiopartnerdk.integration-vtex": "1.x"
}
  1. 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 de página de búsqueda dedicada en /clerk-search?searchTerm=__QUERY__. Esta ruta ya tiene el bloque clerkio_searchpage añadido en el cuerpo.

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

Omnisearch #

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

Para aplicaciones de una sola página (SPA), debe activarse una función adicional para integrar Omnisearch. La función, SPA Auto Detect Changes, puede activarse navegando a my.clerk.io > Settings > Features.

Features SPA changes

Crear diseño #

Omnisearch sólo funciona con diseños de código, ya que tiene un layout más complejo que puedes modificar como desees.

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

Crear contenido #

Esto contiene todos los ajustes usados para mostrar Omnisearch y permite incrustarlo en tu sitio web.

  1. Ve a Search > Elements.
  2. Haz clic en New Element.
  3. Nómbralo “Omni-Search”.
  4. Añade una etiqueta de seguimiento - también debe ser simplemente “Omni-Search”.
  5. En Element type, selecciona Omni-search del desplegable.
  6. En Design selecciona el diseño que creaste en el desplegable.
  7. Haz clic en Save en la parte superior de la pantalla.

Añadir al sitio web #

  1. Desde los ajustes de Contenido, abre la pestaña Insert into website.
  2. Aquí tienes dos opciones:
    • Usar injection te permite insertar el código usando un selector de CSS.
    • Usar embedded code te permite insertar el código manualmente en tu sitio.
  3. Elige la opción que te resulte más fácil.
  4. Si eliges la opción de código embebido, reemplaza INSERT_CSS_SELECTOR[...] por una clase o ID única de tu campo de búsqueda. Omnisearch se mostrará cuando se haga clic en el campo que coincida con ese selector.

Plantillas iniciales #

Si deseas utilizar diseños con código, estas plantillas te ayudan a empezar. Contienen los elementos básicos de la interfaz que conforman Instant Search y Search Page, que luego puedes modificar según tus necesidades.

Esto contiene las partes HTML y CSS para mostrar un menú desplegable de Instant Search. Añade esto a un diseño con código 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 de Search Page #

Esto contiene las partes HTML y CSS para mostrar una Search Page. Añade esto a un diseño con código 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.