Woocommerce
Search
Agrega una potente funcionalidad de búsqueda a tu tienda WooCommerce.
Clerk.io ofrece tres soluciones de búsqueda distintas que se pueden usar juntas o por separado:
- Un Búsqueda Instantánea desplegable.
- Una Página de Búsqueda con filtrado de Búsqueda Facetada.
- Una superposición de Omnisearch que combina ambas.
Este artículo explica cómo comenzar con la Búsqueda utilizando el plugin de WooCommerce.
Búsqueda Instantánea #
Crear Diseño #
Puedes usar el Editor de Diseño para configurarlo visualmente, o usar diseños de código.
Editor de Diseño #
- Ve a Search > Designs y haz clic en Nuevo Diseño.
- Elige Otros diseños > Búsqueda Instantánea.
- De la lista de plantillas de diseño, elige con cuál quieres comenzar.
- Dale un nombre y haz clic en Crear diseño.
- Haz los cambios que desees en el diseño.
Diseño de Código #
- Ve a Search > Designs y haz clic en Nuevo Diseño.
- Elige Otros diseños > En blanco > Con código.
- Dale un nombre y haz clic en Guardar.
- Crea un diseño de código desde cero utilizando código Liquid.
Si deseas un diseño de inicio, consulta la plantilla de Búsqueda Instantánea más abajo.
Crear Contenido #
Esto contiene todas las configuraciones utilizadas para mostrar el desplegable de Búsqueda Instantánea y hacerlo embebible en tu sitio web.
- Ve a Search > Content.
- Haz clic en Nuevo Contenido.
- Nómbralo “Búsqueda en Vivo”.
- En Tipo de contenido, selecciona Búsqueda en vivo del desplegable.
- En Diseño selecciona el diseño que creaste del desplegable.
- Haz clic en Guardar en la parte superior de la pantalla.
Agregar al Sitio Web #
Para agregar la Búsqueda en Vivo en tu sitio web, sigue estos pasos:
- Accede a tu backend de WooCommerce.
- Haz clic en Clerk en el menú de la barra lateral izquierda.
- Desplázate a la sección de Configuración de Búsqueda en Vivo.
- Haz clic en la casilla para “Habilitado”.
- Cambia el resto de la configuración según tus necesidades.
- Inserta el Selector de Entrada de Búsqueda en Vivo y el Selector de Formulario de Búsqueda en Vivo.
- Haz clic en Guardar Configuraciones.
Como alternativa, puedes usar la función de inyección.
Página de Búsqueda #
Crear Diseño #
Puedes usar el Editor de Diseño para configurarlo visualmente, o usar diseños de código.
Editor de Diseño #
- Ve a Search > Designs y haz clic en Nuevo Diseño.
- Elige Otros diseños > Página de Búsqueda.
- De la lista de plantillas de diseño, elige con cuál quieres comenzar.
- Dale un nombre y haz clic en Crear diseño.
- Haz los cambios que desees en el diseño.
Diseño de Código #
- Ve a Search > Designs y haz clic en Nuevo Diseño.
- Elige Otros diseños > En blanco > Con código.
- Dale un nombre y haz clic en Guardar.
- Crea un diseño de código desde cero utilizando código Liquid.
Si deseas un diseño de inicio, consulta la plantilla de Página de Búsqueda más abajo.
Crear Contenido #
Esto contiene todas las configuraciones utilizadas para mostrar la Página de Búsqueda y hacerla embebible en tu página de búsqueda existente.
- Ve a Search > Content.
- Haz clic en Nuevo Contenido.
- Nómbralo “Página de Búsqueda”.
- En Tipo de contenido, selecciona Página de búsqueda del desplegable.
- En Diseño selecciona el diseño que creaste del desplegable.
- Haz clic en Guardar en la parte superior de la pantalla.
Agregar al Sitio Web #
Para agregar la Página de Búsqueda en tu sitio web, sigue estos pasos:
- Accede a tu backend de WooCommerce.
- Ve a Páginas.
- En la parte superior de la página, haz clic en Agregar Nuevo.
- Dale un nombre a la página de resultados de búsqueda, como “Resultados de Búsqueda”.
- En el campo de texto, escribe
[clerk-search], y presiona Publicar. - Luego, haz clic en Clerk en el menú de la barra lateral izquierda.
- Desplázate a la sección de Configuración de la Página de Búsqueda.
- Haz clic en la casilla para Habilitado.
- En el cuadro de Página de Búsqueda, selecciona el nombre de la página recién creada del punto 4.
- Cambia el resto de la configuración según tus necesidades y haz clic en Guardar Configuraciones.
Facetas #
Con la búsqueda facetada, puedes crear filtros en tu Página de Búsqueda de Clerk que faciliten a tus clientes navegar a través de los resultados de búsqueda.
Sigue estos pasos para agregar filtros en tu Página de Búsqueda de Clerk:
- Abre tu backend de WooCommerce.
- En el menú de la barra lateral izquierda, haz clic en Clerk.
- Desplázate hacia abajo hasta la sección de Navegación Facetada.
- Marca la casilla para Habilitado.
- En el cuadro de Agregar Atributos Personalizados, ingresa el atributo que deseas usar como filtro y haz clic en Agregar.
- Establece un título de visualización, elige una posición y marca la casilla Mostrar.
- Haz clic en Guardar Configuraciones. Tu Página de Búsqueda ahora incluirá filtros.
Omnisearch #
Crear Diseño #
Omnisearch solo funciona con diseños de código, ya que tiene un diseño más complejo que se puede modificar de cualquier manera que desees.
- Ve a Search > Designs y haz clic en Nuevo Diseño.
- Elige Omni-search.
- De la lista de plantillas de diseño, elige con cuál quieres comenzar.
- Dale un nombre y haz clic en Guardar.
- Haz los ajustes que desees en el diseño. La guía de Omnisearch tiene más información sobre cómo hacerlo.
Crear Contenido #
Esto contiene todas las configuraciones utilizadas para mostrar el Omnisearch y hacerlo embebible en tu sitio web.
- Ve a Search > Content.
- Haz clic en Nuevo Contenido.
- Nómbralo “Omni-Search”.
- Agrega una etiqueta de seguimiento - esto también debería ser solo “Omni-Search”.
- En Tipo de contenido, selecciona Omni-search del desplegable.
- En Diseño selecciona el diseño que creaste del desplegable.
- Haz clic en Guardar en la parte superior de la pantalla.
Agregar al Sitio Web #
- Desde la configuración de Contenido, abre la pestaña Insertar en el sitio web.
- Aquí tienes dos opciones:
- Usar inyección te permite insertar el código utilizando un selector CSS.
- Usar código embebido te permite insertar el código en tu sitio web manualmente.
- Elige la opción que te resulte más fácil de usar.
- Si usas la opción de código embebido, reemplaza
INSERT_CSS_SELECTOR[...]con una clase o ID único para tu campo de entrada de búsqueda. Omnisearch se mostrará cuando se haga clic en el campo de entrada que coincide con el selector.
Aquí tienes un ejemplo completo de código de embebido de Omni-search con #search como selector CSS:
<span class="clerk"
data-template="@omni-search"
data-api="search/omni"
data-trigger-element="#search"
></span>
Plantillas de Inicio #
Si deseas usar diseños de código, estas plantillas pueden ayudarte a comenzar. Contienen los elementos básicos de la interfaz de usuario que componen la Búsqueda Instantánea y la Página de Búsqueda, que luego puedes modificar según tus necesidades.
Código de Búsqueda Instantánea #
Esto contiene las partes de HTML y CSS para mostrar un desplegable de Búsqueda Instantánea. Agrega esto a un diseño de código en my.clerk.io.
HTML #
<div class="clerk-instant-search">
{% if hits.length == 0 %}
<div class="clerk-instant-search-no-results">
No coincidió: <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: 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;
}
/* Productos */
.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;
}
/* Sugerencias */
.clerk-icon {
color: lightgray;
margin-right: .5em;
}
.clerk-instant-search-suggestions {
margin-bottom: 1em;
}
.clerk-instant-search-suggestion {
padding: .1em;
}
/* Categorías */
.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;
}
/* Páginas */
.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 Página de Búsqueda #
Esto contiene las partes de HTML y CSS para mostrar una Página de Búsqueda. Agrega esto a un diseño de 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">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&product_id={{ product.id }}" data-event-type="product-click">
<div class="clerk-grid-button">Agregar 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: 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.