Mostrar una scrollbar en valores del filtro (Faceted search) con CSS en PrestaShop

En el siguiente artículo aprenderás a mostrar una scrollbar específicamente en los valores de los filtros del módulo Faceted search nativo de PrestaShop 1.7 y el theme Classic.

Dependiendo del proyecto en el que estamos trabajando y/o si tenemos muchos atributos o características, pero al mismo tiempo queremos mejorar la vista y navegación para ayudar a nuestros clientes a elegir entre nuestros gran número de filtros de una manera mucho más fácil, lo podemos conseguir de dos maneras:

1.- Desde el back-office eligiendo la opción Lista desplegable en el filtro: solo debes ir a la Configuración del módulo Faceted search (búsquedas por facetas), hacer click en Modificar en el filtro de la plantilla y luego en Estilo del Filtro elegir Lista desplegable.

2.- Lo que nos lleva a este artículo, vamos a mantener el estilo de nuestro filtro configurado, pero también vamos mostrar una scrollbar en los valores del filtro con CSS.

Mostrar una scrollbar en los valores del filtro con CSS.

Agregando el siguiente código en nuestro fichero /themes/classic/assets/css/custom.css


/* Scrollbar in filters values */

#search_filters .facet ul {
	overflow-y: auto;
	max-height: 150px;
	margin: 5px 0 0 30px;
}

#search_filters .facet ul::-webkit-scrollbar {
	-webkit-appearance: none;
}

#search_filters .facet ul::-webkit-scrollbar:vertical {
	width: 11px;
}

#search_filters .facet ul::-webkit-scrollbar:horizontal {
	height: 11px;
}

#search_filters .facet ul::-webkit-scrollbar-thumb {
	border-radius: 8px;
	border: 2px solid white;
	background-color: rgba(0, 0, 0, .5);
}

/* Optional style for each block */

#search_filters .facet,
#search_filters_brands .facet,
#search_filters_suppliers .facet {
	border-bottom: 1px solid #ddd;
	padding-bottom: .625rem;
}

Estaremos cambiando el bloque de filtros de esto:

A esta nueva vista:

Ajustando solo max-height podemos definir el ancho de los bloques, por ejemplo si los ajustamos a 100px, se mostraría de la siguiente forma:

#search_filters .facet ul {
	overflow-y: auto;
	max-height: 100px;
	margin: 5px 0 0 30px;
}

Resultado ajustando el **max-height** a **100px** del selector **search_filters .facet ul**

Colocando el código indicado previamente en nuestro fichero custom.css también estaremos modificando la vista para la versión mobile:

En caso de que los deslizadores de los filtros como Peso o Precio se muestran manera incorrecta como la siguiente imagen:

Entonces solo debes sumar el siguiente código (mostrado en rojo) a tu fichero custom.css, es decir, todo el código ahora quedaría de la siguiente forma:


/* Scrollbar in filters values */

#search_filters .facet ul {
	overflow-y: auto;
	max-height: 150px;
	margin: 5px 0 0 30px;
}

#search_filters .facet ul::-webkit-scrollbar {
	-webkit-appearance: none;
}

#search_filters .facet ul::-webkit-scrollbar:vertical {
	width: 11px;
}

#search_filters .facet ul::-webkit-scrollbar:horizontal {
	height: 11px;
}

#search_filters .facet ul::-webkit-scrollbar-thumb {
	border-radius: 8px;
	border: 2px solid white;
	background-color: rgba(0, 0, 0, .5);
}

#search_filters .ui-slider-horizontal {
	width: 96%;
	margin-bottom: 1rem;
}

/* Optional style for each block */

#search_filters .facet,
#search_filters_brands .facet,
#search_filters_suppliers .facet {
	border-bottom: 1px solid #ddd;
	padding-bottom: .625rem;
}

Resultado ajustando el ancho del selector **#search_filters .ui-slider-horizontal (width: 96%)**

De esa forma ya lo hemos conseguido y terminamos con nuestro artículo, ahora los valores de los filtros de nuestra tienda online se van a mostrar con una scrollbar que ayudará a nuestro clientes a elegir los valores de los distintos filtros, recuerda que solo es necesario y recomendado en caso de tener un gran número de valores en cada filtro.

Espero que esta información te sea útil y si tienes alguna duda me puedes contactar a través del formulario de contacto.