Lightspeed

Search

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

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 Faceted Search.
Un overlay de Omnisearch que combina ambas.

Este artículo explica cómo comenzar con Search en Lightspeed.

General #

Para incorporar tu código embebido tanto para Live Search como para Search Page, necesitarás acceder a los archivos de tu tema. Para hacerlo, haz clic en “Design” en el menú lateral izquierdo y luego haz clic en “Code bewerken” en el desplegable de Geavanceerd

Para agregar detalles de sincronización o iniciar una sincronización, ve a my.clerk.io > Data > Configuration.

Instant Search #

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

Crear Diseño #

Puedes usar el Design Editor para configurarlo visualmente, o usar 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 deseas comenzar.
Asígnale un nombre y haz clic en Create design.
Realiza cualquier cambio que desees en el diseño.

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 code design desde cero usando Liquid code.

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

Crear Elemento #

Esto contiene todos los ajustes usados para mostrar el desplegable de Instant Search, y hacerlo embebible 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.
Haz clic en Save en la parte superior de la pantalla.

Añadir al Sitio Web #

En tu archivo de layout principal (posiblemente fixed.rain o custom.rain), coloca el código de incrustación de Live Search justo antes de la etiqueta de cierre .

Actualiza el placeholder en “data-instant-search” para incluir la clase o el ID de la consulta utilizado en tu tienda online (en este ejemplo, “#searchInput”).

<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="#searchInput"
  data-instant-search-positioning="left">
</span>

Search Page #

Search Page proporciona una experiencia de búsqueda a pantalla completa con opciones avanzadas de filtrado. Se utiliza para mostrar todas las coincidencias para la consulta de búsqueda de un cliente.

Crear Diseño #

Puedes usar el Design Editor para configurarlo visualmente, o usar 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 deseas comenzar.
Asígnale un nombre y haz clic en Create design.
Realiza cualquier cambio que desees en el diseño.

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 code design desde cero usando Liquid code.

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

Crear Elemento #

Esto contiene todos los ajustes usados para mostrar la Search Page, y hacerla embebible en 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 desplegable.
En Design selecciona el diseño que creaste.
Haz clic en Save en la parte superior de la pantalla.

Añadir al Sitio Web #

En Lightspeed, la Search Page se encuentra dentro del archivo Categories (collection.rain).

Después de crear tu Search Page Element y Design en my.clerk.io, coloca el código de incrustación de Search Page donde desees que aparezca la página dentro del código collection.rain.

Asegúrate de actualizar el data-query para referenciar adecuadamente la consulta de búsqueda; en Lightspeed, esto es {{page.search}}. Agrega una declaración “if” para referenciar correctamente la Search Page, y mostrar el código de categoría cuando no sea una Search Page:

{% if page.search %}
<div class="page-width clerk-page-width">
  <span
      id="clerk-search"
      class="clerk"
      data-template="@search-page"
      data-target="#clerk-search-results"
      data-query="{{ page.search }}"
      data-facets-attributes='["price","categories","vendor"]'
      data-facets-titles='{"price":"Price","categories":"Categories","vendor":"Brand"}'
      data-facets-target="#clerk-search-filters"
      data-facets-price-prepend="€"
      data-facets-in-url="false"
      data-facets-view-more-text="View More"
      data-facets-searchbox-text="Search for "> 
  </span>

  <div id="clerk-show-facets" onclick="toggleFacets()">Filtros</div>

  <div class="clerk_flex_wrap">
    <div id="clerk-facets-container">
      <div id="clerk-search-filters"></div>
    </div>
    <div id="clerk-search-results"></div>
  </div>

  <script>
    function toggleFacets(){
      el = document.getElementById('clerk-facets-container');
      el.classList.toggle('active');
    }
  </script>

  <style>
    #clerk-show-facets { width: 70%; height: 40px; margin: 20px auto; background-color: #333; color: white; text-align: center; border-radius: 2px; line-height: 40px; cursor: pointer; }
    .clerk-page-width { display: flow-root; }
    #clerk-search-results { width: 80%; }
    #clerk-show-facets { display: none; }
    .clerk_flex_wrap { display: flex; flex-direction: row; }
    .active { display: block !important; }
    @media only screen and (max-width : 800px) {
      #clerk-search-filters { width: 100% !important; }
      #clerk-facets-container { display: none; }
      #clerk-show-facets { display: block; }
      .clerk_flex_wrap { flex-direction: column; }
      #clerk-search-results { display: block; width: 100%; }
    }
  </style>
</div>
{% else %}

<!--CATEGORY_CODE_HERE-->

{% endif %}

Si tienes un snippet configurado para tu página de búsqueda (algo como snippets/search.rain), asegúrate de comentar todo el snippet para evitar que esa página de búsqueda se muestre en tu tienda online. Además, asegúrate de que tu código de categoría se coloque donde está escrito CATEGORY_CODE_HERE en el ejemplo anterior.

Omnisearch #

Omnisearch combina Instant Search y Search Page en un solo overlay que se abre cuando el usuario enfoca el campo de entrada de búsqueda.

Crear Diseño #

Omnisearch utiliza un code design.

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

Crear Elemento #

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 embedded code, configura un selector CSS para el campo de búsqueda usando data-trigger-element.

Ejemplo de código de incrustación:

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

Plantillas de Inicio #

Si deseas usar code designs, estas plantillas pueden ayudarte a comenzar. Contienen los elementos de UI básicos que conforman Instant Search y Search Page, que luego puedes modificar según tus necesidades.

Código de Instant Search #

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">
            Nada coincide: <b>{{ query }}</b>... ¡intenta una búsqueda más simple!
        </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> Mostrando resultados para: <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">Productos</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">Comprar Ahora</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>Ver <b>{{ hits }}</b> más resultados para "<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">Sugerencias de búsqueda</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">Categorías</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">Contenido Relacionado</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 }}">
                    Ver <b>{{ hits }}</b> más resultados para "<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; } }

Código de Search Page #

Contiene las partes HTML y CSS 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">En oferta</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">Agotado</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">Añadir al carrito</div>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>

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