Smartweb

Search

Agrega una funcionalidad de búsqueda potente a tu tienda web Smartweb.

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

Un Instant Search Dropdown.
Una Search Page con filtrado por Faceted Search.
Un Omnisearch overlay que combina ambas.

Este artículo explica cómo empezar a usar Search en Smartweb.

General #

Utiliza el Smartweb Design Manager para insertar códigos de inserción. Para añadir detalles de sincronización o iniciar una sincronización, ve a my.clerk.io > Data > Configuration.

Instant Search #

Instant Search proporciona resultados en tiempo real a medida que los clientes escriben, mostrados en un desplegable bajo el 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 empezar.
Ponle un nombre y haz clic en Create design.
Realiza los cambios que desees en el diseño.

Code Design #

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

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

Crear contenido #

Aquí se configuran todos los ajustes utilizados para mostrar el desplegable de Instant Search y hacerlo insertable en tu sitio web.

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

Añadir al sitio web #

En Smartweb, ve a Kontrolpanel > Design Manager > Rediger filer > Partials > top.tpl y añade id="live-search" a tu campo de búsqueda.
Luego abre index.tpl e inserta el código de inserción justo antes de </body>:

<span 
  class="clerk" 
  data-template="@live-search"
  data-instant-search-suggestions="6"
  data-instant-search-categories="6"
  data-instant-search-pages="6" 
  data-instant-search="#live-search"
  data-instant-search-positioning="left">
</span>

Search Page #

La Search Page proporciona una experiencia de búsqueda a pantalla completa con opciones avanzadas de filtrado.

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 empezar.
Ponle un nombre y haz clic en Create design.
Realiza los cambios que desees en el diseño.

Code Design #

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

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

Crear contenido #

Aquí se configuran todos los ajustes utilizados para mostrar la Search Page y hacerla insertable en tu sitio web.

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

Añadir al sitio web #

Smartweb genera tanto las páginas de categoría como las de búsqueda desde la misma plantilla. Usa una declaración IF en modules > product > product-list-js-entity.tpl para mostrar la Search Page cuando {$field == 'search'} y contenido de categoría en caso contrario. Inserta el código de inserción en la rama de búsqueda:

{if $field == 'search'}
  <span
    id="clerk-search"
    class="clerk"
    data-template="@search-page"
    data-target="#clerk-search-results"
    data-query="{$itemId}">
  </span>
{else}
  {* category code *}
{/if}

Omnisearch #

El Omnisearch combina Instant Search y Search Page en una sola superposición que se abre cuando el usuario enfoca el campo de búsqueda.

Crear diseño #

Omnisearch utiliza un diseño por código.

Ve a Search > Designs y haz clic en New Design.
Elige Omni-search.
Elige una plantilla, ponle un nombre y haz clic en Save.
Ajusta el diseño según sea necesario. Consulta la Omnisearch guide para más detalles.

Crear contenido #

Ve a Search > Elements.
Haz clic en New Element.
Nómbralo “Omni-Search”.
En Element type, selecciona Omni-search.
En Design selecciona tu diseño de Omnisearch.
Haz clic en Save.

Añadir al sitio web #

Puedes insertar Omnisearch usando injection o embedded code. Si usas código embebido, configura un selector CSS para el campo de búsqueda utilizando data-trigger-element (por ejemplo, #live-search).

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

Con el faceted search puedes crear filtros en tu Clerk Search Page para que tus clientes naveguen más fácilmente por los resultados.

Hay dos maneras de añadir facets en Smartweb:

Añadir atributos de faceta a tu código de inserción de Search Page usando los atributos data-facets-* (la forma más rápida).
O crear un diseño de Facets por separado en my.clerk.io y mostrarlo en un contenedor específico.

Ejemplo usando atributos embed:

<span
  id="clerk-search"
  class="clerk"
  data-template="@search-page"
  data-target="#clerk-search-results"
  data-query="{$itemId}"
  data-facets-attributes='["price","categories","vendor"]'
  data-facets-titles='{"price":"Price","categories":"Categories"}'
  data-facets-target="#clerk-search-filters">
</span>

Asegúrate de que tu diseño incluya un contenedor para facets (por ejemplo, #clerk-search-filters) y un contenedor para resultados (por ejemplo, #clerk-search-results).

Plantillas iniciales #

Si quieres utilizar code designs, estas plantillas te pueden servir de punto de partida. Contienen los elementos básicos de interfaz necesarios para el Instant Search y la Search Page, que luego puedes modificar a tu gusto.

Instant Search Code #

Contiene las partes HTML y CSS para mostrar un desplegable de Instant Search. Añade esto 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: 0 0 5px 0; }
.clerk-instant-search-more-results { padding: 1em; font-size: 1.2em; text-align: center; }
.clerk-instant-search-title { color: #b6c254; margin: 20px 0 5px; padding: 0 0 10px; text-transform: uppercase; font-size: 1em; border-bottom: 1px solid #000; }
.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-icon { color: lightgray; margin-right: .5em; }
.clerk-instant-search-suggestions { margin-bottom: 1em; }
.clerk-instant-search-suggestion { padding: .1em; }
.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; }
.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: 0 !important; left: 0 !important; } .clerk-mobile-button { display: none; } }
@media screen and (max-width: 767px) { .clerk-instant-search-container { right: 0 !important; } .clerk-desktop-button { display: none; } }
@media screen and (min-width: 376px) and (max-width: 800px) { .clerk-instant-search { min-width: 0 !important; } }
@media screen and (max-width: 375px) { .clerk-instant-search { min-width: 200px !important; } .clerk-instant-search-col { margin: 0 0 20px 0; } .clerk-instant-search-product-name { height: 3em !important; } }

Search Page Code #

Contiene las partes HTML y CSS necesarias para mostrar una Search Page. Añade esto 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: 0; }
.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.

Search

General #

Instant Search #

Crear diseño #

Design Editor #

Code Design #

Crear contenido #

Añadir al sitio web #

Search Page #

Crear diseño #

Design Editor #

Code Design #

Crear contenido #

Añadir al sitio web #

Omnisearch #

Crear diseño #

Crear contenido #

Añadir al sitio web #

Facets #

Plantillas iniciales #

Instant Search Code #

HTML #

CSS #

Search Page Code #

HTML #

CSS #