Facilitando la bsqueda por precio dentro de nuestra app de reservas

Para el usuario objetivo de Ayenda, el precio de una habitacin juega un papel importante en la toma de decisiones dentro de su recorrido de compra, por tal motivo decidimos aadir un selector de rango de precios dentro de nuestro listado de hoteles, con el fin de mejorar la experiencia en la bsqueda y filtrado, y as proveer mejores resultados.

En este post vamos a compartir cmo fue el proceso de creacin de esta caracterstica que facilita al usuario filtrar por precios, permitiendo elegir entre un valor mnimo y mximo.

DE LOS INSIGHTS AL DISEO

Ayenda aade constantemente nuevos hoteles dentro de la cadena. A da de hoy contamos con ms de 500 hoteles a disposicin de los usuarios en 3 diferentes pases y dentro de su propuesta de valor, est ofrecer la mejor experiencia a la hora de reservar a travs de nuestra app. A medida que crece el nmero de hoteles, es importante mejorar la experiencia de bsqueda y compra de los usuarios para ofrecerles resultados relevantes.

Actualmente la app de reservas brinda opciones de ordenamiento y filtrado sobre el listado de hoteles, el selector de rango de precios hara parte del grupo de filtrado. Despus de explorar varios diseos y validarlos con usuarios, se defini qu la mejor experiencia era usar un slider mltiple, es decir, con dos marcadores que permitan al usuario establecer un precio mnimo y mximo para filtrar los hoteles. Adicionalmente, se aadi un texto que permite visualizar el rango seleccionado por el usuario. El diseo final se ve como se muestra a continuacin:

DEL DISEO A LA SOLUCIN

Para materializar estas ideas en un selector de rango de precios en React Native tenamos dos opciones; hacer un componente con mltiples sliders por nuestra cuenta o usar un componente de un tercero que se ajustara a estos requerimientos.

Despus de revisar varios componentes, encontramos uno que cumple con la condicin de soportar los dos marcadores que indican el valor mnimo y mximo del rango dentro de un slider, adems de tener un buen performance tanto para Android como para iOS y ese fue @ptomasroos/react-native-multi-slider.

Para su instalacin ejecutamosnpm install --save @ptomasroos/react-native-multi-slider o yarn install @ptomasroos/react-native-multi-slider dependiendo de tus preferencias.

Una vez instalada esta dependencia, creamos un nuevo archivo llamado PriceSelector.js que contendr la lgica y los elementos visuales del componente.

import MultiSlider from '@ptomasroos/react-native-multi-slider';function PriceSelector({ max, min, onChange, selectedRangePrice }) {  // Nuestro cdigo ir aqu}export default PriceSelector;

Este componente necesitar las siguientes props:

max: Valor mximo que el usuario podr seleccionar.
min: Valor mnimo que el usuario podr seleccionar.
onChange: Funcin callback que funciona como listener cuando el usuario ha terminado de mover el slider.
selectedRangePrice: Dado el contexto de nuestra app de reservas, el rango de precios puede estar preestablecido antes de renderizar el componente por primera vez o puede ser modificado de forma externa, por lo que se debe reflejar este cambio tomando como referencia los valores de esta prop.

Ahora veamos cuales props necesita el componente react-native-multi-slider qu acabamos de instalar.

<MultiSlider  values={[minValue, maxValue]}  min={min}  max={max}  onValuesChange={}  onValuesChangeFinish={}/>

values: Valores fijados para establecer el rango.
min: Valor mnimo que puede ser seleccionado.
max: Valor mximo que puede ser seleccionado.
onValuesChange: Callback ejecutado mientras el valor cambia.
onValuesChangeFinish: Callback ejecutado cuando el valor deja de cambiar.

Iremos agregando lo necesario en PriceSelector para que pueda funcionar en conjunto con el componente react-native-multi-slider. Lo primero que aadiremos ser un estado para controlar el cambio de valores dentro del componente.

function PriceSelector({ max, min, onChange, selectedRangePrice }) {  const [priceRange, setPriceRange] = useState({    minValue: min,    maxValue: max  });  // ...}

La primera vez que PriceSelector sea renderizado tendr definido el rango establecido por las propiedades min y max. Es decir, si el min es igual a $20.000 COP y el max es igual a $50.000 COP, deberamos visualizar el rango de la siguiente manera:

A continuacin aadiremos la funcin que nos permitir cambiar el estado que acabamos de agregar:

function handleChangePrice(values) {  setPriceRange({    minValue: values[0],    maxValue: values[1]  });}

Esta ser ejecutada cada vez que los valores en el estado sean modificados.

Ahora agregaremos la funcin que se ejecutar cuando el usuario deje de mover el marcador sobre el slider y ejecutar el onChange que recibimos desde las props.

function handleValuesChangeFinish() {  onChange(priceRange);}

Esto lo hacemos para que el componente padre pueda saber cuando el usuario ha cambiado el rango de precios en nuestro selector.

Al unir todo, el componente debera verse as:

function PriceFilter({ max, min, onChange, selectedRangePrice }) {  const [priceRange, setPriceRange] = useState({    minValue: min,    maxValue: max  });  function handleChangePrice(values) {    setPriceRange({      minValue: values[0],      maxValue: values[1]    });  }  function handleValuesChangeFinish() {    onChange(priceRange);  }  return <MultiSlider           values={[minValue, maxValue]}           min={min}           max={max}           onValuesChange={handleChangePrice}           onValuesChangeFinish={handleValuesChangeFinish}         />;}

Por ltimo agregaremos un useEffect que se encargar de detectar y actualizar el componente PriceSelector cuando las props selectedRangePrice, min o max hayan cambiado.

useEffect(() => {  setPriceRange({    minValue: selectedRangePrice?.minValue || min,    maxValue: selectedRangePrice?.maxValue || max  });  if (!selectedRangePrice) {    onChange({ minValue: min, maxValue: max });  }}, [selectedRangePrice, onChange, min, max]);

Por qu queremos detectar si estas props han cambiado? En el caso de las props min y max, dentro del contexto de nuestra app de reservas, estos valores pueden cambiar cuando el usuario cambia su rango de bsqueda en cuanto a ubicacin, como por ejemplo cuando busca hoteles en otra ciudad.

La prop selectedRangePrice puede cambiar por ejemplo cuando el usuario limpia los filtros o cambia la ubicacin en la qu est buscando, y en ese caso es necesario reflejar visualmente los cambios pertinentes, as como para el componente padre.

Aadiremos una validacin para cuando las props min y max an no estn definidas, de manera que el componente react-native-multi-slider trabaje correctamente, ya que necesita establecer estos valores por defecto. Adems agregaremos el rango seleccionado y un texto para que nuestro componente quede ms amigable.

return (  <>    <Subtitle size={1}>      <Subtitle size={1} style={styles.greenText}>        {' '}        Rango{' '}      </Subtitle>{' '}      de precios:    </Subtitle>    <Subtitle size={2} style={styles.prices}>      <Currency value={priceRange.minValue} /> -{' '}      <Currency value={priceRange.maxValue} />    </Subtitle>    {min && max && (      <MultiSlider        values={[minValue, maxValue]}        min={min}        max={max}        onValuesChange={}        onValuesChangeFinish={}      />    )}  </>

MEJORANDO NUESTRO COMPONENTE

La versin actual de la app ha liberado este nuevo filtro que acabamos de construir en estas lneas. Ahora debemos revisar nuestras mtricas y observar que se logre el impacto esperado. Probablemente pienses que tengamos varias oportunidades de mejora de cara a la experiencia de usuario con este filtro, djanos tus impresiones en los comentarios.

SOBRE AYENDA:

Somos una startup basada 100% en tecnologa, amamos crear con calidad y eficiencia, con el objetivo de ser la cadena de hoteles ms grande de LATAM.

Si quieres ser parte del equipo nete aqu.