1

En primer lugar gracias por leerme.

Gracias por tu aclaración, como podrás comprobar, estoy empezando en esto de Javascript.

Te explico:

Web de un hotel, tengo un carrusel de ofertas en el que van pasando ofertas, por lo que hay varios DIVS dentro del carrusel:

<div class="smrt-carousel-item 16 slick-slide slick-active" data-slick-index="1" aria-hidden="false" style="width: 1137px;">
        <div class="smrt-url"><a href="/en/reservations/?price_group=16&amp;kd=y" class="btn btn-primary"> Book now</a></div>
</div>

<div class="smrt-carousel-item 32 slick-slide slick-active" data-slick-index="1" aria-hidden="false" style="width: 1137px;">
        <div class="smrt-url"><a href="/en/reservations/?price_group=32&amp;kd=y" class="btn btn-primary"> Book now</a></div>
</div>

<div class="smrt-carousel-item 48 slick-slide slick-active" data-slick-index="1" aria-hidden="false" style="width: 1137px;">
        <div class="smrt-url"><a href="/en/reservations/?price_group=48&amp;kd=y" class="btn btn-primary"> Book now</a></div>
</div>

Como verás, cada div (.smrt-carousel-item) muestra un número diferente (16, 32, 48), que se muestra como parámetro price_group= en la url.

Me gustaría poder hacer lo siguiente:

Si el numero es 16, añadir a la url (justo al final) el parámetro con esta fecha &date_in=03-12-21

Y si es 32 añadir otra fecha: &date_in=03-11-21

Todo esto cuando la página se ha cargado.

No sé si me he expresado con claridad.

Muy agradecido de antemano.

3
  • 1
    window.location es para cambiar la URL de la ventana actual. Aquí se trata de un elemento del DOM, tendrías que alcanzar ese elemento y cambiar su atributo href. Para alcanzarlo, puedes asignarle un id o usar otro método, según el contexto en el que se encuentre. La pregunta es, ¿puedes modificarlo, asignádole un id? Conviene siempre poner el código en el contexto en el que se encuentra para ver qué opción podría ser mejor.
    – A. Cedano
    el 16 feb. 2021 a las 10:19
  • Otro aspecto que no aparece en tu pregunta es a partir de qué hay que actualizar el valor del href¿cuando se carga la página, cuando se hace click en algún elemento, cuando se escribe en alguna parte, etc?
    – A. Cedano
    el 16 feb. 2021 a las 10:21
  • El área de abajo es sólo para respuestas. Para cualquier aclaración sobre la pregunta puedes pulsar en editar y ampliar aclaraciones, código o lo que sea necesario. Me pregunto por qué no lo haces al construir los elementos, sería más simple así, que intentando modificar algo que ya conoces de antemano. Por ejemplo, ¿dónde se determina el precio? Allí podrías agregar, junto con el precio, el otro parámetro que necesitas.
    – A. Cedano
    el 16 feb. 2021 a las 11:02

1 respuesta 1

0

Como ya dije en comentarios, esto convendría mejor hacerlo en el contexto donde creas el DOM. Allí se conocen ya los precios de antemano, porque de hecho vienen en el parámetro price_group del tu elemento href. Allí podrías implementar la lógica que explico más abajo y traer los elementos ya armados del todo.

Si no es posible y hay que hacerlo sí o sí una vez la página esté cargada, entonces te muestro una forma de hacerlo.

El código está comentado en cada lugar, para que entiendas lo que se ha hecho.

/*
  Usaremos un objeto para asociar los valores
  que deberá tomar el parámetro según el precio
  esto permitirá actualizar el código,
  para que asuma cualquier otro precio
  únicamente agregándolo al objeto
*/
var mDates = {
  16: "03-12-21",
  32: "03-11-21"
};

/*
  Aquí seleccionamos los elementos a
  que hay dentro de los div
  que tienen la clase smrt-url
*/
var smrt = document.querySelectorAll('div.smrt-url a');
smrt.forEach((a) => {
  /*
    Obtenemos el query string del elemento
    search busca sólo los datos que hay después de ?
    OJO: esta función no está en algunos navegadores antiguos
  */
  let params = new URLSearchParams(a.search);
  /*
    Obtenemos el valor de price_group
    para verificarlo en el objeto mDates
  */
  var price = params.get('price_group');
  /*
    Si está en el objeto modificaremos el href
  */
  if (mDates.hasOwnProperty(price)) {
    a.href += `&date_in=${mDates[price]}`;
  }
  /*
    Sólo para verificar
  */
  console.log(a.search);
});
<div class="smrt-carousel-item 16 slick-slide slick-active" data-slick-index="1" aria-hidden="false" style="width: 1137px;">
  <div class="smrt-url"><a href="/en/reservations/?price_group=16&amp;kd=y" class="btn btn-primary"> Book now</a></div>
</div>

<div class="smrt-carousel-item 32 slick-slide slick-active" data-slick-index="1" aria-hidden="false" style="width: 1137px;">
  <div class="smrt-url"><a href="/en/reservations/?price_group=32&amp;kd=y" class="btn btn-primary"> Book now</a></div>
</div>

<div class="smrt-carousel-item 48 slick-slide slick-active" data-slick-index="1" aria-hidden="false" style="width: 1137px;">
  <div class="smrt-url"><a href="/en/reservations/?price_group=48&amp;kd=y" class="btn btn-primary"> Book now</a></div>
</div>

Notas finales

Al probar el código, los query string quedarán así:

?price_group=16&kd=y&date_in=03-12-21
?price_group=32&kd=y&date_in=03-11-21
?price_group=48&kd=y

Si se necesita también un valor para 48, sólo tienes que agregarlo al principio en el objeto mDate, en forma de par llave:valor. Por ejemplo, si pones algo así: 48: "02-15-21", los elementos que tengan el precio 48 agregarán &date_in=02-15-21. Y si hace falta agregar más precios, pues lo mismo... Es un código portable y fácil de mantener.

querySelectoAll() y URLSearchParams() son funciones relativamente nuevas de Javascript, puede que no funcionen en navegadores antiguos. Si estás programando para navegadores antiguos, deberás buscar otras alternativas. Aquí puedes ver el nivel de compatibilidad para cada una:

  1. querySelectorAll()
  2. URLSearchParams()
3
  • Perdona, es la primera vez que utilizo esta herramienta, poco a poco me iré haciendo con ella. Infinitas gracias, voy a echar un vistazo a todo lo que me dices y te comento!
    – Rob
    el 16 feb. 2021 a las 12:45
  • A. Cedano, no te puedo decir mas que ESPECTACULAR. Funciona a la perfección, estoy muy agradecido porque lo he entendido perfectamente. Un saludo enorme!
    – Rob
    el 16 feb. 2021 a las 13:17
  • @Rob me alegro de que te haya servido. Saludos.
    – A. Cedano
    el 16 feb. 2021 a las 16:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.