• Skip to primary navigation
  • Skip to main content

Manuel Ramos

Especialista en PrestaShop

  • Soporte PrestaShop
  • Acerca de mí
  • Blog
  • Contacto

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

Publicado: marzo 17, 2021

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:

Columna de filtros (antes del cambio)

A esta nueva vista:

Columna de filtros (después del cambio)

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:

Vista de los filtros en versión mobile

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

Deslizadores de Peso y Precio

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.

© 2021 Manuel Ramos | Aviso legal

  • Podcast
  • LinkedIn
  • Dribbble