alvaroalfaro6 Posted January 12, 2019 Share Posted January 12, 2019 (edited) Hola a todos, soy nuevo en el foro, he estado intentando bastantes cosas pero estoy bastante perdido, si alguno me pudiese guiar un poco le estaría agradecido. Lo que quiero hacer es meter en la página del producto (no en todos los productos, sólo en los que yo quiera), un mapa interactivo en el cual el usuario al pinchar en una ubicación, automáticamente se escriban las coordenadas del punto en la casilla de personalización del producto ( campo obligatorio para la compra). He hecho este código con mis conocimientos básicos de programación web (está en html+js+css): https://codepen.io/alvaro-alfaro/full/pqwJvj He estado mirando, y prestashop ya dispone de la funcionalidad de campo de customization del producto, por lo que habría que hacer es que se escribiesen las coordenadas en ese objeto. Los problemas que tengo son dos, el primero es meter el mapa para que se visualice en la página de producto. La idea que tengo es modificando el archivo product.tpl y generando un if que solo se active si el nombre del producto es el producto en el que yo quiero que aparezca el mapa. Tengo entendido que este código esta en php y para hacer esto debería meter un "echo" para que pudiese leer el archivo html. No sé si es la forma más adecuada de hacer esto. Además no he sido capaz de localizar el archivo donde está la parte de <head> de la página del product para definir los estilos css. El segundo problema es que si consigo meter mi mapa con mi código js, tendré el valor que quiero escribir en una variable de js, llegado a ese punto como se podría hacer para que ese string se escribiese en la casilla de customization del producto? Creo que la forma más adecuada de hacer esto es con un módulo en vez de tocando los archivos, pero de todas formas no sabría como escribir la información de la variable en la casilla de customization... Espero haberme explicado, sé que no es un tema sencillo, por eso si alguien me puede recomendar como hacerlo o pasarme algún tutorial de algo parecido sería fenomenal. Muchas gracias! Edited January 12, 2019 by alvaroalfaro6 (see edit history) Link to comment Share on other sites More sharing options...
gusman126 Posted January 13, 2019 Share Posted January 13, 2019 (edited) Como dices, lo mejor seria usar un modulo, de esa manera controlarias mejor donde colocarlo (hook) Luego si añades un fichero .js al modulo, usando la libreria Jquery puedes detectar cuando se hace click en un elemento y escribirlo en otro en tiempo real e interactivo. pd: al mismo tiempo bloqueas el campo personalizable para que no puedan escribir o modificar Edited January 13, 2019 by gusman126 (see edit history) 1 Link to comment Share on other sites More sharing options...
alvaroalfaro6 Posted January 14, 2019 Author Share Posted January 14, 2019 On 1/13/2019 at 9:44 PM, gusman126 said: Como dices, lo mejor seria usar un modulo, de esa manera controlarias mejor donde colocarlo (hook) Luego si añades un fichero .js al modulo, usando la libreria Jquery puedes detectar cuando se hace click en un elemento y escribirlo en otro en tiempo real e interactivo. pd: al mismo tiempo bloqueas el campo personalizable para que no puedan escribir o modificar Gracias por la respuesta, cuento lo poco que he avanzado. A través de modulo gratuito de "storeggmap", he cambiado el codigo js para que me guarde en una variable las coordenadas al hacer clic. Ahora no se como escribir esas coordenadas en el tag de customization, dejo parte del código js y también una imagen del estado actual. Otra que no se como hacer es que me salga solo para los productos que yo quiero (actualmente me sale en todos). Como se puede ver, tengo las coordenadas en en la variable clickedLocation, y me gustaría escribirlo (supongo que antes tengo que transformar a un str el valor) en la caja señalada en la imagen. Gracias por la ayuda. google.maps.event.addListener(map, 'click', function(event) { //Get the location that the user clicked. var clickedLocation = event.latLng; //If the marker hasn't been added. if(marker === false){ //Create the marker. marker = new google.maps.Marker({ position: clickedLocation, map: map, draggable: true //make it draggable }); //Listen for drag events! google.maps.event.addListener(marker, 'dragend', function(event){ markerLocation(); }); } else{ //Marker has already been added, so just change its location. marker.setPosition(clickedLocation); } markerLocation(); }); Link to comment Share on other sites More sharing options...
gusman126 Posted January 15, 2019 Share Posted January 15, 2019 Debes añadir esto al codigo, donde no lo se seguro, cuando lea las coordenadas, puede que te de un error si no tienes cargado el jquery $('.product-customization-item').val(clickedLocation); o $('.product-customization-item').text(clickedLocation); 1 Link to comment Share on other sites More sharing options...
alvaroalfaro6 Posted January 16, 2019 Author Share Posted January 16, 2019 15 hours ago, gusman126 said: Debes añadir esto al codigo, donde no lo se seguro, cuando lea las coordenadas, puede que te de un error si no tienes cargado el jquery $('.product-customization-item').val(clickedLocation); o $('.product-customization-item').text(clickedLocation); He añadido el código justo debajo de la creación de la variable, pero no me funciona. Puede ser porque no temgo el jquery, ¿podrías indicarme como meterlo? He leido que se hace en la parte de head a través de: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>, pero la verdad que no consigo ver como Prestashop a partir del php crea la cabecera en html que luego lee el navegador... Gracias de nuevo por la ayuda. Link to comment Share on other sites More sharing options...
alvaroalfaro6 Posted January 16, 2019 Author Share Posted January 16, 2019 1 hour ago, alvaroalfaro6 said: He añadido el código justo debajo de la creación de la variable, pero no me funciona. Puede ser porque no temgo el jquery, ¿podrías indicarme como meterlo? He leido que se hace en la parte de head a través de: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>, pero la verdad que no consigo ver como Prestashop a partir del php crea la cabecera en html que luego lee el navegador... Gracias de nuevo por la ayuda. Actualizo el estado, he metido el jquery en la primera linea de mi código js: src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js",y ya me coge las coordenadas y me las mete en la caja, lo único que en vez de $('.product-customization-item').val(clickedLocation);; he usado $('.product-message').val(clickedLocation), de la otra forma no me funcionaba. De todas formas sin tu ayuda, @gusman126, no hubiese sabido. Lo último que me gustaría hacer, si alguien tiene alguna de idea de como hacerlo lo agradezco, es que el mapa se muestre sólo para los productos que yo quiera. Al final es un módulo que querría elegir en que producto mostrarlo. Link to comment Share on other sites More sharing options...
gusman126 Posted January 16, 2019 Share Posted January 16, 2019 Tendras que añadir un "if" si el id es = al que quieres mostrar que se muestre. o la categoria del producto Si son muchos id , lo mejor es hacer un modulo , añadir una tabla con el listado de productos que SI quieres que se muestren , y luego el modulo que lea el id del producto que se esta mostrando, compruebe si esta en la base de datos y que muestre los datos por medio de un tpl. 1 Link to comment Share on other sites More sharing options...
alvaroalfaro6 Posted January 18, 2019 Author Share Posted January 18, 2019 On 1/16/2019 at 10:31 AM, gusman126 said: Tendras que añadir un "if" si el id es = al que quieres mostrar que se muestre. o la categoria del producto Si son muchos id , lo mejor es hacer un modulo , añadir una tabla con el listado de productos que SI quieres que se muestren , y luego el modulo que lea el id del producto que se esta mostrando, compruebe si esta en la base de datos y que muestre los datos por medio de un tpl. Perfecto, ya con esto he conseguido dejarlo casi perfecto, el único pero es que en los productos en los que el módulo no está activo, se queda el "agujero" sin rellenar en la página. Algo asícomo si el código html crease el hueco para alojar el mapa, pero como no se ejecuta éste, esa parte de la página se queda sin reorganizar... Link to comment Share on other sites More sharing options...
gusman126 Posted January 18, 2019 Share Posted January 18, 2019 (edited) Si el if para comprobar el producto esta antes del "div" que has añadido, no deberia mostrar nada,pero por si acaso . Prueba a añadir dentro del if {addJsDef mapa=true} un else con mapa = false y dentro del script, que compruebe si mapa = true if(mapa = true) Edited January 18, 2019 by gusman126 (see edit history) 1 Link to comment Share on other sites More sharing options...
alvaroalfaro6 Posted January 20, 2019 Author Share Posted January 20, 2019 On 1/18/2019 at 9:52 AM, gusman126 said: Si el if para comprobar el producto esta antes del "div" que has añadido, no deberia mostrar nada,pero por si acaso . Prueba a añadir dentro del if {addJsDef mapa=true} un else con mapa = false y dentro del script, que compruebe si mapa = true if(mapa = true) Muchas gracias, @gusman126 por toda la ayuda, ya está todo solucionado a falta de ajustar algunas cosas del javascrypt, pero ya no doy más la lata. Sólo por si alguien tiene este último problema, la cosa es que el php llamaba al tpl, en el cual estaban indicadas las dimensiones para que el mapa se viese correctamente, lo que he hecho es crearme una copia de este tpl con otro nombre, reduciendo el tamaño del recuadro, de tal forma que en el php dependiendo del id del producto, llama a un archivo u otro. Doy el tema por zanjado, de nuevo muchísimas gracias por tus consejos! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now