Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design
Webdesign

Cómo crear una moderna tabla de precios con una cabecera fija

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

Las tablas de precios fijas (o pegajosas) son perfectas para mostrar productos y servicios con largas listas de características que requieran ser comparadas. En este tutorial vamos a crear una tabla de precios con una cabecera fija; durante el proceso aprenderemos cómo fijar y «despegar» elementos después de cierta cantidad de desplazamiento.

Existe una gran cantidad de plugins de JavaScript que ofrecen este tipo de funcionalidad como ScrollMagic.js. A decir verdad, ya he publicado un tutorial que muestra cómo se puede implementar un efecto similar con este plugin.

Hoy, no obstante, vamos a desafiarnos y escribiremos nuestro propio código.

La tabla de precios que estaremos creando

Para este ejercicio práctico, diseñaremos una página de precios que incluirá diferentes planes de suscripción en las columnas de una tabla de precios  A medida que nos desplacemos hacia abajo, la cabecera se volverá fija para permanecer a la vista, luego, en un punto posterior, será liberada. La tabla de precios en combinación con la cabecera fija es una tendencia popular de UI que quizá hayas visto en sitios web como monday.com.

Recuerda que la funcionalidad fija de nuestra demostración se activa en ventanas gráficas de más de 779 px. ¡Quizá tengas que ver la demostración a pantalla completa para apreciarla plenamente!

¿Cuándo deberías usar una tabla de precios?

Las tablas de precios son muy útiles cuando un conjunto de productos, servicios o variantes ofrecen demasiadas opciones al consumidor. Si al consumidor le resulta difícil decidir qué opción escoger, lo más probable es que no elija nada. Sobrecarga de información = falta de conversión.

¡Perder el tiempo tomando decisiones, anula cualquier ventaja de contar con una preferencia desde el principio!

«La investigación [...] muestra que un exceso de opciones con frecuencia nos lleva a estar menos, no más, satisfechos una vez que hemos decidido.»

Alina Tugend, NYT

La función de una tabla de precios es ayudar a los usuarios a interpretar, de forma visual, las opciones que tienen a su disposición, en ocasiones, quizá incluso animarlos a centrarse en la opción más atractiva.

Lee más en el artículo de Val Geisler: Cómo diseñar una página de precios que convierta, en el blog de InVision.

Plugins de tablas de precios para WordPress

Antes de iniciar con el tutorial, quizá desees ver la variedad de plugins de tablas de precios para WordPress disponibles en Envato Market.

ARPrice - WordPress Pricing Table Plugin
Uno de los muchos ejemplos: ARPrice - Plugin de tabla de precios para WordPress

Dicho esto, ahora ayudemos a nuestros usuarios a elegir, ¡creando una tabla superclara!

1. Inicia con el marcado de la página

Empezaremos con tres secciones:

La primera y la tercera sección no desempeñarán una función importante; contendrán contenido y estilos ficticios para asegurar que la página sea lo suficientemente larga para activar el efecto de desplazamiento deseado.

Dentro de la segunda sección, colocaremos la tabla. La envolveremos en un contenedor, lo que hará que se comporte de forma responsiva en pantallas pequeñas:

La tabla en sí misma contendrá cuatro columnas y describirá los diferentes precios de un producto o servicio. En nuestro caso, tendremos tres planes de suscripción: inicial, básico y profesional.

Cabeceras de la tabla

La cabecera fija de la tabla identificará claramente esos planes. Cada plan también incluirá un botón de llamada a la acción.

The table headers

Aquí está el marcado para las cabeceras de la tabla:

Filas de la tabla

Cada fila de la tabla describirá la disponibilidad de una característica en todos los planes. Si un plan incluye esta característica, aparecerá un icono con una marca de verificación SVG. En caso contrario, aparecerá un icono con una cruz gris.

The table rows

Aquí está el marcado de una característica que está disponible en todos los planes:

Y aquí está el marcado de una característica que está disponible solo en el plan «Profesional»:

2. Define algunos estilos básicos

Con el marcado listo, procederemos con el CSS. Nuestro primer paso es configurar algunas variables CSS y estilos de reinicio comunes.

Para cada plan, definiremos su correspondiente variable. Eso nos dará la capacidad de cambiar fácilmente su apariencia, si fuera necesario.

Aquí están los estilos de reinicio:

Nota: para simplificar, no voy a explicar detalladamente todas las reglas de CSS del tutorial. Aquí hay casi 290 líneas de CSS. Solamente discutiré las más importantes. Asegúrate de revisarlas todas haciendo clic en la pestaña CSS del proyecto de demostración.

3. Estiliza la tabla de precios

La tabla de precios tendrá un ancho máximo y estará centrada de forma horizontal dentro de la página:

Las filas se comportarán como contenedores flexibles:

Todas las celdas tendrán el mismo ancho:

Para separar los planes y ofrecer una visión clara de qué célula pertenece a cada plan, añadiremos un borde gris claro a los elementos objetivo:

Hacer que la tabla de precios sea responsiva

Como vamos a ver en la próxima sección, el efecto de fijación se activará en ventanas de más de 779 px (puedes cambiar este valor para adaptarlo). En ventanas más pequeñas, mostraremos una tabla típica que se puede desplazar de forma horizontal.

The table with scrollbar on small screens

Bootstrap también utiliza una funcionalidad similar para las tablas responsivas. Existen otros enfoques (¿mejores?) para manejar las tablas responsivas, pero este método ciertamente hace el trabajo aquí.

4. Fijar/despegar el encabezado de la tabla

Con el HTML y el CSS en su sitio, ahora nos concentraremos en el efecto de desplazamiento utilizando algo de JavaScript. Esto nos permitirá hacer que nuestra cabecera sea fija (o pegajosa).

Variables

Para nuestro primer paso tomaremos una copia de los elementos deseados. Almacenaremos en variables las dos clases que utilizaremos más tarde:

El siguiente paso es realizar algunos cálculos. De manera específica, deseamos calcular lo siguiente:

  • El ancho de la tabla.
  • La posición superior de la tabla en relación con la ventana gráfica.
  • La altura de thead. Este es el elemento que será fijado/despegado.

Aquí está el código JavaScript requerido para hacer eso:

Observa que almacenamos los valores antes mencionados en let variables. Hicimos esto a propósito. Cuando la página se redimensione, deberíamos volver a calcular los elementos descritos anteriormente y, por tanto, reasignar esos nuevos valores a estas variables.

Durante el desplazamiento

Cada vez que nos desplacemos hacia arriba o hacia abajo, se ejecutará la función scrollHandler:

Dentro de esa función, realizaremos las siguientes acciones, que se ejecutarán solo si el ancho de la ventana es de al menos 780 px:

  1. Obtener la cantidad de píxeles que un usuario se ha desplazado desde la parte superior de la ventana.
  2. Obtener la posición superior de la última sección en relación con la ventana.
  3. Comprobar si un usuario se ha desplazado más o igual a la posición superior inicial de la tabla.
  4. Si eso ocurre, ajustamos el ancho de thead igual al ancho inicial de la tabla.
  5. A continuación, comprobamos si el valor resultante del paso 2 es mayor que la altura de thead.
  6. Si eso sucede, fijamos el elemento thead añadiendo la clase sticky-table a body y eliminando la clase sticky-table2 del mismo elemento. En ese punto, thead se vuelve un elemento con posición fija. Luego lo colocamos en la parte superior de la ventana gráfica. También le damos a body un relleno (padding) superior igual a la altura de thead.
  7. Si eso no ocurre, dejamos de fijar thead añadiendo la clase sticky-table2 a body y eliminando la clase sticky-table del mismo elemento. En ese punto, thead se libera y se convierte en un elemento con posición absoluta. Luego lo colocamos en la parte inferior de la tabla.
  8. En caso de que un usuario se haya desplazado menos que la posición superior inicial de la tabla (que thead no se haya fijado aún), eliminamos las clases sticky-table y stick-table2 de body. Asimismo, ajustamos su relleno (padding) superior a 0. En ese punto, thead no tiene ninguna posición (elemento estático), por lo que restablecemos su posición top predeterminada. Por último, ajustamos su ancho al 100% (podemos omitirlo).

El código que implementa todo este comportamiento es el siguiente:

Y los estilos relacionados para cada clase:

5. Cambiando el tamaño de la página

¡Casi hemos terminado el trabajo, amigos! Hasta el momento, el efecto de la cabecera fija (o pegajosa) funcionará bien cuando la página se cargue. Pero, ¿qué ocurre cuando la página se redimensiona? Bien, sería realmente bueno si pudiéramos hacer que esta demostración funcione también cuando cambie su tamaño, ¿verdad? ¡Hagámoslo!

Así que cada vez que cambiemos el tamaño de la página, se ejecutará la función resizeHandler.

Dentro de esa función, primero verificaremos el ancho de la ventana, luego actualizaremos los valores de las variables let  mencionadas anteriormente o restableceremos los estilos en línea thead y body. Observa que recuperamos la posición superior de la tabla tomando la altura de la primera sección. Tal vez te preguntes, ¿por qué no usamos la propiedad offsetTop de la tabla? Durante mis pruebas, observé que no siempre da resultados precisos en el cambio de tamaño. Además, el método getBoundingClientRect () no funcionará porque también proporciona valores incorrectos (incluso negativos).

El código JavaScript requerido:

Conclusión

¡Eso es todo, amigos! En este tutorial hemos logrado crear un útil efecto de desplazamiento, sin utilizar ninguna biblioteca externa. No solo aprendimos a crear elementos fijos (pegajosos), sino también a despegarlos (liberarlos) después de una cierta cantidad de desplazamiento.

Combinando todo esto, hemos obtenido una tabla de precios con una cabecera fija realmente útil.

Espero que este ejercicio te haya ayudado a aprender algo nuevo y te haya inspirado para utilizarlo en un próximo proyecto.

Antes de finalizar, me gustaría destacar dos cosas:

  • Usé el elemento table para crear este efecto. Quizá no siempre es el método ideal, teniendo en cuenta que, actualmente, existen soluciones de diseño más flexibles y potentes como CSS Grid. No obstante, una tabla es muchas veces el mejor elemento para mostrar datos, así que la utilicé en esta ocasión.
  • Siempre es un gran reto presentar datos tabulares en dispositivos móviles. En esta ocasión usé un recurso de desplazamiento simple. Otro enfoque podría ser descartar el método de la tabla por completo (mantenerlo solo en >779 px), por una solución de carrusel con tres diapositivas donde cada diapositiva represente un plan de precios. Quizá tú tengas una mejor idea que pudiéramos discutir en los comentarios.

Como siempre, ¡muchas gracias por leernos!

Más tutoriales para efectos «pegajosos»

Tenemos algunos tutoriales que exploran diferentes enfoques para pegar (fijar) elementos mientras se desplaza una página web:

Aprende más sobre las tablas de precios

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.