SOLUCIONADO Ocultar un módulo en móviles y tablets

[sil88]

Buenas noches, esto me está dando dolor de cabeza, me ayudáis?

 

He editado la barra de búsqueda hasta que la he dejado a mi gusto, pero no se visualiza igual de bien desde el móvil. Como tengo otra barra que sí funciona bien en móviles, quiero desactivar la primera para éstos.

 

Y aquí viene el problema: desactivando el módulo correspondiente (ptsblocksearch) en móviles y tablets desde la lista de módulos ésta no se desactiva, solo consigo que se vea totalmente descuadrada. He probado también a desenganchar todos los hooks de uno en uno por si era algún fallo con ellos, pero nada. Muy raro, sí.

 

Así que quiero desactivar el módulo (solo en móviles y tablets) directamente tocando código, si alguno de vosotros me sabe decir cómo puedo hacerlo.

 

Bueno, espero haberme explicado bien, aunque a estas horas no sé si lo consigo.

 

Muchas gracias. Saludos!

Edited August 30, 2017 by sil88 (see edit history)

[moraira]

hola sill88, si estas un poco verde en programación hace falta que nos digas más información, seria bueno saber que versión de prestashop usas, y si no sabes identificar los elementos de tu web (me refiero por ejemplo a la clase del campo de búsqueda que quieres ocultar) deberíamos poder ver tu tienda.

 

ahora al tema, si no te funciona la opción desativar lo puedes hacer tu "a pelo" mediante css, es mucho más fácil de lo que parece, basta que en el globall.css de tu tema le pongas al final algo como esto:

@media (min-width: 1200px) {
  .CampoBusquedaPequeño {display:none}
  .CampoBusquedaGrande {display:initial}
  .CampoBusquedaGrande a {font-size:14px;} 
 }
 
@media (min-width: 992px) and (max-width: 1199px) {
  .CampoBusquedaPequeño {display:none}
  .CampoBusquedaGrande {display:initial}
  .CampoBusquedaGrande a {font-size:12px;} 
 }

 @media (min-width: 768px) and (max-width: 991px) {
  .CampoBusquedaPequeño {display:none}
  .CampoBusquedaGrande {display:initial}
  .CampoBusquedaGrande a {font-size:10px;} 
 }
 
 @media (min-width: 480px) and (max-width: 767px) {
  .CampoBusquedaPequeño {display:initial}
  .CampoBusquedaPequeño {width:100px;} 
  .CampoBusquedaGrande {display:none}
 }
 
  @media (max-width: 479px) {
  .CampoBusquedaPequeño {display:initial}
  .CampoBusquedaPequeño {width:80px;} 
  .CampoBusquedaGrande {display:none}
 }

te pongo un ejemplo grande, aunque el tuyo hay que personalizarlo, es para explicar como va

 

En realidad lo que estamos haciendo es  darle parámetros a nuestra tienda en función del ancho de la pantalla, lo que se llamaría un "diseño responsive". Te pongo las que yo más utilizo, aunque no es una ciencia exacta se aproxima a la realidad.

 

con este ejemplo trabajaríamos con 5 resoluciones, que creo son las habituales:

@media (min-width: 1200px) 			  = monitor
@media (min-width: 992px) and (max-width: 1199px) = tablet en apaisado
@media (min-width: 768px) and (max-width: 991px)  = tablet en vertical
@media (min-width: 480px) and (max-width: 767px)  = telefono movil en apaisado
@media (max-width: 479px) 			  = telefono movil en vertical

no es necesario usarlas todas, pero con esto podrias por ejemplo arreglar ese control que se te descoloca en el móvil, en el ejemplo que te pongo se oculta o visualiza un campo de búsqueda en función de la pantalla (.CampoBusquedaPequeño y .CampoBusquedaGrande) pero además en campo pequeño se haría mas ancho al poner el móvil en horizontal, o cambiria el tamaño de la letra del campo grande al verlo en un Tablet en cualquiera de sus dos modalidades o en un monitor.

 

Por hacerlo más sencillo, y viendo las 5 resoluciones anteriores, si pusiéramos esto

 @media (max-width: 767px) {
  .CampoBusqueda {display:none}
 }

le estaríamos diciendo que oculte el elemento .CampoBusqueda siempre que la resolución máxima sea 767px, es decir hasta un móvil en apaisado, si pusiésemos min-width: 768px seria a partir de esa resolución.

 

Digo que no es una ciencia exacta porque nos podemos encontrar con un móvil con otra resolución, pero esto en realdad da un poco igual, porque lo que hace que se vea bien o no, no es que sea un móvil o un monitor, es la resolución de dicho dispositivo.

Edited August 29, 2017 by moraira (see edit history)

[sil88]

Muchísimas gracias por la explicación Moraira!! He probado a hacer lo que me dices pero no veo efecto. Algo me manejo en css pero estoy muy verde en muchas cosas aun. La versión de prestashop que uso es la 1.6.1.1 y mi tienda es www.sauvagejewellery.com por si quieres echar un vistazo tú mismo. Si entras desde el móvil verás que hay un bloque de búsqueda muy feo debajo del logo que es el que quiero quitar.

 

Te agradezco infinitamente tu ayuda .

Saludos!!

[moraira]

Sin problema Sil88, tod@s hemos empezado alguna vez 

 

viendo el código fuente de tu web el campo de búsqueda superior es

    <div id="pts_search_block_top">
        <div class="pts-search">
            <form method="get" action="https://www.sauvagejewellery.com/es/search" id="searchbox">
                <input type="hidden" name="controller" value="search" />
                <div class="input-group">
                    <input type="hidden" name="orderby" value="position" />
                    <input type="hidden" name="orderway" value="desc" />
                    <input class="search_query form-control" type="text" placeholder="Busca aquí: anillos, pendientes..." id="pts_search_query_top" name="search_query" value="" />
                    <div class="input-group-btn">
                        
                    </div>
                    <button type="submit" name="submit_search" class="button-search">
                        <span class="icon icon-search"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>

 a las clases se las llama con un punto antes "." y a los ID con una "#" antes, pero si ocultamos el campo de búsqueda nos va ha quedar un espacio en blanco, así que mejor subimos un nivel y ocultamos el contenedor DIV que tiene todo lo de la búsqueda dentro.

 

Viendo este código, nos encontramos con un contenedor DIV llamado "#pts_search_block_top" dentro esta la clase ".pts-search" que a su vez tiene dentro: un formulario compuesto por un campo de entrada, un texto y un botón con una imagen de lupa (icon-search)

 

como te digo en lugar de ocultar .pts-search vamos a ocultar el contenedor #pts_search_block_top,

 

Edita el fichero global.css que tienes en https://www.sauvagejewellery.com/themes/pf_basic/css/global.css

 

y al final pones esto:

@media (max-width: 767px) {
  #pts_search_block_top {display:none}
 }

Lo mas correcto, para que quede más ordenado, seria que buscases dentro del global.css donde se trata el #pts_search_block_top (linea 13357) y lo pusieses ahí pero eso es cuando hacemos muchos cambios, con lo que no pasa nada si lo pones al final.

Edited August 30, 2017 by moraira (see edit history)

[ventura]

Si la plantilla que se utiliza esta basada en Bootstrap, se pueden utilizar sus clases especificas para mostrar/ocultar elementos

 

[sil88]

Muchísimas gracias por responder y gracias Moraira por tu ayuda! Ya está hecho y solucionado! :) Un millón de gracias!!!