Estructura superpuesta #
Cuando se inicia omnisearch, se crea un elemento con la clase clerk-omnisearch-overlay y se inyecta en la parte inferior del cuerpo. Aquí es donde vamos a inyectar el diseño, ya que tenemos el elemento de entrada como parte del diseño que necesitamos para tener un structual demandas para asegurarse de que no volver a renderizar el elemento de entrada en cada carga.
La estructura debe tener el siguiente aspecto debajo de la superposición:
<div>
<input type="text" id="clerk-omnisearch-input"/>
<div id="clerk-omnisearch-content">
Contenido
</div>
</div>
Campo de entrada #
Para encontrar el campo de entrada necesita tener el siguiente identificador clerk-omnisearch-input. Una vez que el elemento disparador ha sido disparado, movemos el foco del cursor a este elemento, y añadimos cualquier consulta que tengamos en él, de forma que podamos mantener la experiencia del usuario algo fluida.
Content Wrapper #
La envoltura de contenido es donde la mayoría de las cosas están sucediendo, la envoltura alrededor de ella necesita tener el identificador clerk-omnisearch-content. Aquí deberían estar las facetas, los deslizadores y todo lo que no sea el campo de entrada.
Clases y sus funcionalidades #
Resumen #
Se puede añadir funcionalidad al diseño añadiendo clases específicas a los elementos.
| Nombre de la Clase | Funcionalidad | |
|---|---|---|
Botón Cerrar clerk-omnisearch-close Añade un receptor de clic a cualquier botón de cierre presente. | ||
| Desplegable de ordenación: Busca desplegables de ordenación y les añade escuchadores. | ||
| Si hay una faceta de búsqueda presente, crea una escucha y oculta las facetas que no coinciden con la consulta. | ||
| Los elementos con esta clase deseleccionan todas las facetas y borran la consulta cuando se activan. | ||
| Los elementos con esta clase deben deseleccionar todas las facetas cuando se activan. | ||
| Los elementos con esta clase deben anular la selección de todos los elementos del grupo cuando se activan. | ||
| Los elementos con esta clase deben deseleccionar un único elemento con el par de atributos grupo/valor dado. | ||
| Los elementos con esta clase serán tratados como una faceta seleccionable. |
Details #
Botón Cerrar #
Al adjuntar la clase clerk-omnisearch-close a un elemento dentro del diseño, ese elemento ocultará la superposición.
Ordenar #
Para obtener un elemento de ordenación en el diseño, añada la clase clerk-omnisearch-sort al elemento de selección, por ejemplo, un desplegable. Para que funcione, el elemento tiene que ser del tipo value:[desc|asc], es decir, el valor que queremos ordenar, con dos puntos y luego desc o asc.
Opcionalmente puedes añadir un atributo data-sort-type si quieres que ordene categorías o páginas.
Faceta de búsqueda #
La clase clerk-facet-search, cuando está presente en una página web, comprueba la existencia de elementos de búsqueda de facetas. Los elementos de búsqueda de facetas permiten a los usuarios realizar búsquedas en las facetas. Para que funcione, el elemento debe tener un valor de cadena.
Despejar todo #
Los elementos con la clase clerk-omnisearch-full-reset, al pulsarlos, borrarán todas las facetas seleccionadas y reiniciarán la consulta.
Borrar facetas #
Los elementos con la clase clerk-omnisearch-facet-full-reset, cuando se activan, deseleccionan todas las facetas activas. Esto se vería típicamente en un botón de estilo ‘Clear all’ dentro de un grupo de facetas, permitiendo a los usuarios restablecer sus filtros seleccionados en una acción fácil.
Deseleccionar grupo #
Para deseleccionar un grupo entero de facetas, se puede dar a un elemento la clase clerk-omnisearch-facet-group-reset. Una vez que el elemento se activa (por ejemplo, al hacer clic), todos los elementos dentro de su grupo se deseleccionan, restableciendo ese grupo de facetas. Para que funcione, el elemento debe tener el grupo que queremos borrar como atributo con el nombre data-facet-group.
Facet Clear #
Esta clase está diseñada para escenarios donde es necesario deseleccionar una única faceta. Un elemento con la clase clerk-omnisearch-facet-reset puede asociarse a una faceta específica de un grupo dándole un data-facet-group y un data-facet-value. Al activarse, sólo deseleccionará su faceta asociada basándose en el par de atributos grupo/valor dado, dejando las demás facetas seleccionadas sin cambios.
Facet Click #
Todas las facetas deben tener una clase clerk-facet con los atributos data-facet-group y data-facet-value, para que sepamos qué está pulsando el cliente.