Buscador en Responsive Mobile (visble siempre?)

[Pack_12]

Muy buenas, manejando en la Home el elementor builder, trato de añadir un buscador en Responsive, dado que las opciones predeterminadas que me ofrece el backoffice no incluyen la barra del buscador en Mobile por defecto, si no que hay que pulsar la lupa para que aparezca.

Me interesan 2 opciones que no se como hacer:

1- Quitar la lupa y añadir una barra de buscador por defecto. He tratado de añadirla mediante el item iqitsearch. Me permite visualizarla pero tengo dos problemas. Primero que la lupa sigue estando arriba y no tendría sentido buscador y lupa, y no se como podría desactivarla. Y segundo que la potencia del buscador añadido por iqitsearch no es la misma que la que me ofrece la lupa que trae por defecto. Es decir, en la lupa se me previsualizan los productos al introducir la 3ª letra, y sin embargo mediante el nuevo buscador no se ofrecen previews. Lógicamente quiero mantener esa característica.

2- Creo que la mejor opción sería que al abrir la Home en Responsive Mobile, se activara por defecto la acción de pulsar la lupa. De manera que el buscador bueno (el que pre visualiza) automáticamente aparecería. 

Otra idea?

¿Alguien podría explicarme como puedo hacerlo? Muchísimas gracias de antemano.

Slds,

Edited September 18, 2020 by Pack_12 (see edit history)

[Pack_12]

Bueno, pues tratando de avanzar en este punto, lo único que conseguí es dejar el espacio en blanco para el buscador en modo Mobile/Tablet. De tal manera que si consiguiera que el buscador aparezca en ese espacio según se abre la Home conseguiría lo que quiero. (Decidí esto porque el buscador que me permite añadir el elementor no es tan potente como el del header. Por ejemplo, no muestra previews cuando has introducido 3 letras).

Ahora mismo tengo esto en la home accediendo con mobile (pj. Iphone 10):

 

Lo que quisiera entonces es que al entrar en la home, por defecto o automaticamente la acción de pulsar la lupa del header se realice siempre. ¿Alguien me puede ayudar a indicarme donde debo cambiar el código para que esa acción se haga automáticamente y así el usuario que entra con mobile simpre vea el buscador ya disponible? Necesito conseguirlo porque visto lo visto la mayoría de mis clientes entra con mobile o tablets, y creo que es fundamental que aparezca el buscdor por defecto.

Lo que busco es esto por defecto:

Agradezco cualquier ayuda de antemano.

Gracias.

Slds,

[Prestafan33]

Puedes conseguirlo con este CSS:

#mobile-header #search-widget-mobile {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: scale(1)!important;
}

Ahora bien, a mí no me parece buena idea dejar ahí fijo en todo momento un campo de entrada de texto que hace que la cabecera (que además se queda fija encima de todo) se "coma" casi 1/3 de la pantalla del dispositivo. Ten en cuenta que en un móvil es espacio está muy limitado, y que hay que procurar aprovecharlo lo mejor posible. Y la solución que ya tiene de base tu tema de poner la lupa junto al menú hamburguesa para mostrar/ocultar el input de entrada de texto, a mí al menos ya me parece adecuada.

Edited November 18, 2019 by Prestafan33 (see edit history)

[Pack_12]

Gracias @Prestafan33!! No sabes lo que necesitaba tu respuesta.

Gracias por el código lo primero. Funciona. Lo que ocurre es que esta solución que aportas bloquea el buscador en todas las páginas del dominio. Y a mi me interesaría que esto solamente ocurriera en la Home. Y con esto respondo a tu opinión, la cual que también te agradezco. Entiendo eso que dices de que se pierde 1/3 de la pantalla mobile (aunque en el caso de los nuevos iphone etc no llega a un 25% de la pantalla) y que la lupa de mi tema justo te permite eso, ahorrar espacio y ocultando y mostrado...etc etc.  pero me he dado cuenta analizando mi competencia que en la Home es fundamental el buscador (en mi tipo de venta online). Es algo que la gente utiliza intuitivamente en cuanto entra a la web buscando el producto que necesita, dándole importancia por encima de todo dado la alta variedad de categorías y número de productos en el catálogo. Es una herrameinta clave para persuadir y facilitar la busqueda del cliente cuanto antes.

Dicho esto. A partir de lo avanzado con este código, me encantaría poder hacer dos cosas al respecto:

1º) Que sólo se mantenga ese buscador y la opción visible en la home, y por tanto, en el resto de páginas que por defecto esté oculto. Eso sí, que pulsando la lupa desde el resto de páginas se le de la opción al cliente de poder buscar también. O sea, no perder la funcionalidad de la lupa salvo para la home que siempre estaría visible.

2º) Sería para nota que además de conseguir que se muestre la lupa por defecto en el espacio del bloque que he habilitado donde quiero que aparezca el buscador, que además de eso el cliente pudiera ocultarla al pulsar la lupa nuevamente, y también haciendo desaparecer el espacio del bloque habilitado para ello, ganandop así ese 20%del espacio si el cliente lo desea. Me explico bien?

En realidad creo que la solución sería simplemente que en la home la acción de pulsar la lupa sea una acción automatizada, y por tanto, que habilita la visibilidad del mismo de manera predeterminada, pero me interesa poder ocultarlo si el cliente lo desea. De esta manera no se puede, pero desconozco si habría alguna manera de conseguir lo que digo.

Gracias de antemano como siempre!!!

[Prestafan33]

Si quieres que sólo aparezca desplegado en el index se puede conseguir así:

#index #mobile-header #search-widget-mobile {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: scale(1)!important;
}

Ahora bien, si lo que quieres es que se pueda luego replegar, la solución sólo con CSS no es posible. Habría que eliminar el CSS anterior, y entonces hay dos posibilidades:

1: Con Javascript:

Bastaría poner esto al final del archivo /theme/nombre-de-tu-tema/assets/js/custom.js

$(document).ready(function() {
  if ($("#index").length > 0) {
    $("#mobile-btn-search .m-nav-btn").click();
  }
});

Esto hace que al finalizar la carga del documento se "haga click" automáticamente sobre el botón de la lupa (sólo en la página del index).

2: Modificando el código del módulo de búsqueda:

El módulo que se encarga de crear ese botón y ese buscador es el ps_searchbar. Por lo tanto, abre el archivo /themes/nombre-de-tu-tema/modules/ps_searchbar/ps_searchbar.tpl, y busca dentro del archivo este código:

<div id="mobile-btn-search" class="col col-auto col-mobile-btn col-mobile-btn-search">
  <a class="m-nav-btn" data-toggle="dropdown" data-display="static" aria-expanded="false">
    <i class="fa fa-search" aria-hidden="true"></i><span>Buscar</span>
  </a>
  <div id="search-widget-mobile" class="dropdown-content dropdown-menu dropdown-mobile search-widget">

... y modifícalo así:

<div id="mobile-btn-search" class="col col-auto col-mobile-btn col-mobile-btn-search {if $page.page_name=='index'}show{/if}">
  <a class="m-nav-btn" data-toggle="dropdown" data-display="static" aria-expanded="{if $page.page_name=='index'}true{else}false{/if}">
    <i class="fa fa-search" aria-hidden="true"></i><span>Buscar</span>
  </a>
  <div id="search-widget-mobile" class="dropdown-content dropdown-menu dropdown-mobile search-widget {if $page.page_name=='index'}show{/if}">

Ojo, porque es posible que el código dentro del TPL no sea exactamente el que yo he puesto arriba, sino que puede tener ifs y otras modificaciones. Lo importante es dejarlo como esté originalmente y añadir únicamente los tres {ifs} que te indico, que añaden las dos clases "show" al primer y último div, y que asigna el valor "true" al "aria-expanded" del elemento <a>  de enmedio.

Ésta última solución es la mejor de todas, aunque también la que lleva un poquito más de trabajo implementar.

Edited November 19, 2019 by Prestafan33 (see edit history)

[Pack_12]

13 hours ago, Prestafan33 said:

Si quieres que sólo aparezca desplegado en el index se puede conseguir así:

#index #mobile-header #search-widget-mobile {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: scale(1)!important;
}

Ahora bien, si lo que quieres es que se pueda luego replegar, la solución sólo con CSS no es posible. Habría que eliminar el CSS anterior, y entonces hay dos posibilidades:

1: Con Javascript:

Bastaría poner esto al final del archivo /theme/nombre-de-tu-tema/assets/js/custom.js

$(document).ready(function() {
  if ($("#index").length > 0) {
    $("#mobile-btn-search .m-nav-btn").click();
  }
});

Esto hace que al finalizar la carga del documento se "haga click" automáticamente sobre el botón de la lupa (sólo en la página del index).

2: Modificando el código del módulo de búsqueda:

El módulo que se encarga de crear ese botón y ese buscador es el ps_searchbar. Por lo tanto, abre el archivo /themes/nombre-de-tu-tema/modules/ps_searchbar/ps_searchbar.tpl, y busca dentro del archivo este código:

<div id="mobile-btn-search" class="col col-auto col-mobile-btn col-mobile-btn-search">
  <a class="m-nav-btn" data-toggle="dropdown" data-display="static" aria-expanded="false">
    <i class="fa fa-search" aria-hidden="true"></i><span>Buscar</span>
  </a>
  <div id="search-widget-mobile" class="dropdown-content dropdown-menu dropdown-mobile search-widget">

... y modifícalo así:

<div id="mobile-btn-search" class="col col-auto col-mobile-btn col-mobile-btn-search {if $page.page_name=='index'}show{/if}">
  <a class="m-nav-btn" data-toggle="dropdown" data-display="static" aria-expanded="{if $page.page_name=='index'}true{else}false{/if}">
    <i class="fa fa-search" aria-hidden="true"></i><span>Buscar</span>
  </a>
  <div id="search-widget-mobile" class="dropdown-content dropdown-menu dropdown-mobile search-widget {if $page.page_name=='index'}show{/if}">

Ojo, porque es posible que el código dentro del TPL no sea exactamente el que yo he puesto arriba, sino que puede tener ifs y otras modificaciones. Lo importante es dejarlo como esté originalmente y añadir únicamente los tres {ifs} que te indico, que añaden las dos clases "show" al primer y último div, y que asigna el valor "true" al "aria-expanded" del elemento <a>  de enmedio.

Ésta última solución es la mejor de todas, aunque también la que lleva un poquito más de trabajo implementar.

Fantástica respuesta @Prestafan33!! mil gracias.

Efectivamente, se consigue lo que quiero, que simplemente aparezca el buscador por defecto y que se mantenga la funcionalidad de quitarlo o ponerlo en la index. Aunque entiendo que me recomendaras la segunda opción, he optado por la opción primera del código de javascript pero utilizando el módulo de custom jss que me facilita la plantilla warehouse. Me parece que teniendolo ahí, tengo muy localizado este cambio para posibles futuras modificaciones. Así lo encuentro más facilmente. (aun no había metido nada de jss)

Dicho esto, la funcionalidad ya estñá, pero me quedaría alguna duda en cuanto a diseño del buscador mobile:

1- ¿Sería posible cambiar el color del borde del buscador mobile cuando aparece? (ya sea en el index que aparece automaticamente, o cuando el usuario en cualquier otra situación pulse la lupa). Aparece negro. Ya que casi toda la temática de la index (y de la web en genera) es de bordes grises, queda demasiado fuerte en negro. ¿Se podría añadir el cambio de color del borde en ese código que hemos añadido jss? y ya que estamos ¿el radius?

2- Por otro lado, cuando aparece el buscador mobile, este se establece en un bloque que por defecto se delimita con borde superior e inferior de 1pt en gris. ¿Se podría suprimir dicho borde? Asi cnseguiría el efecto que quiero, y es que el buscador parezca estar embedido en la cabecera como algo aun más importante (ya estoy hilando demasiado fino?)

3- Y por último y no menos importante. En la index, el buscador mobile está ocupando un espacio que generé mediante elementor que solo esta visible en formato mobile. Tengo el espacio ajustado con margin y padding para que quede guay. Cunado el buscador aparece, ese bloque tiene sentido que esté, para que no tape los carrousels. Sin embargo, cuando el usuario pulsa la lupa y desaparece el buscador, lo ideal sería que es bloque visible en mobile para ese fin desapareciera, de tal forma que los carrousels suben y en general se aprovecha mejor la index. ¿Sería posible meter esa acción de hacer invisible ese bloque parea alternarlo con la acción de la lupa? Es decir (if "lupa abierta" then "bloque visible", if not "bloque invisible").

Gracias y espero que no sean demasiadas cosas. Con estas cositas de diseño cierro el post. 😪

 

[Prestafan33]

1.- El color del borde del input de búsqueda no es negro, es gris (#e3e3e3). Se cambia a negro cuando el foco de la página está DENTRO del input, para resaltar que estás ahí, pero si quieres cambiarlo a gris es sencillo:

#search-widget-mobile .form-search-control:focus {
  border-color: #e3e3e3;
  border-radius: 5px;
}

2.- Más CSS:

#mobile-header #search-widget-mobile {
  border: 0;
}

3.- Lo que dices de añadir o quitar el padding superior se puede hacer, pero habría que incluirlo en el código Javascript que incluye la funcionalidad del click sobre el botón de la lupa. Si has incluido el Javascript que puse en el mensaje anterior, podrías ponerlo ahí, pero sólo actuaría cuando se despliega automáticamente el buscador al entrar en la página, no cuando se "recoge" o el usuario vuelve a pulsarlo. Para que funcione al plegar/desplegar habría que ponerlo en el Javascript de tu tema, como decía antes.

Lo que se podría, básicamente es aumentar el padding superior del bloque de la página, algo así como:

$("#wrapper").css('padding-top', '100px');

Veo que lo que tú has hecho ha sido poner un bloque con el Elementor, también podrías hacer que se mostrara/ocultara ese bloque.

[Pack_12]

3 hours ago, Prestafan33 said:

1.- El color del borde del input de búsqueda no es negro, es gris (#e3e3e3). Se cambia a negro cuando el foco de la página está DENTRO del input, para resaltar que estás ahí, pero si quieres cambiarlo a gris es sencillo:

#search-widget-mobile .form-search-control:focus {
  border-color: #e3e3e3;
  border-radius: 5px;
}

2.- Más CSS:

#mobile-header #search-widget-mobile {
  border: 0;
}

3.- Lo que dices de añadir o quitar el padding superior se puede hacer, pero habría que incluirlo en el código Javascript que incluye la funcionalidad del click sobre el botón de la lupa. Si has incluido el Javascript que puse en el mensaje anterior, podrías ponerlo ahí, pero sólo actuaría cuando se despliega automáticamente el buscador al entrar en la página, no cuando se "recoge" o el usuario vuelve a pulsarlo. Para que funcione al plegar/desplegar habría que ponerlo en el Javascript de tu tema, como decía antes.

Lo que se podría, básicamente es aumentar el padding superior del bloque de la página, algo así como:

$("#wrapper").css('padding-top', '100px');

Veo que lo que tú has hecho ha sido poner un bloque con el Elementor, también podrías hacer que se mostrara/ocultara ese bloque.

Gracias @Prestafan33!

Punto 1 y 2 resuelto. Pero me gustaría saber entonces para el punto 3 cual es la mejor opción. He probado a meter el javascript que me dices pero no funciona. Me sale siempre ese espacio en gris esté como esté la lupa. Además me afecta al responsive normal y tablet.

¿Como podría ocultar ese bloque con javascript al desaparecer el buscador? Mmmm.. esto creo que voy a tener que dejarlo. Y que se quede siempre ese espacio (el bloque), porque entiendo que si asigno la accion de ocultar el bloque cada vez que se de a la lupa, este va a desparecer esté o no esté el buscador, y esa no es la idea.

Se me ha ocurrido otra idea que quedaría bien. ¿Podría mantener la lupa oculta solo en la index en formato mobile? De esta manera podría quedarse siempre visible el bloque (el espacio) con el buscador abierto tal y como está ahora. Si oculto la lupa le quito la posibilidad de ocultar el buscador y ya no necesito que se oculte el bloque en mobile. Eso sí, que la lupa si aparezca en cualquier otra página de la web. Solo afectaría a la index. ¿Se podría?

Graciaas!!

[Pack_12]

5 minutes ago, Pack_12 said:

Gracias @Prestafan33!

Punto 1 y 2 resuelto. Pero me gustaría saber entonces para el punto 3 cual es la mejor opción. He probado a meter el javascript que me dices pero no funciona. Me sale siempre ese espacio en gris esté como esté la lupa. Además me afecta al responsive normal y tablet.

¿Como podría ocultar ese bloque con javascript al desaparecer el buscador? Mmmm.. esto creo que voy a tener que dejarlo. Y que se quede siempre ese espacio (el bloque), porque entiendo que si asigno la accion de ocultar el bloque cada vez que se de a la lupa, este va a desparecer esté o no esté el buscador, y esa no es la idea.

Se me ha ocurrido otra idea que quedaría bien. ¿Podría mantener la lupa oculta solo en la index en formato mobile? De esta manera podría quedarse siempre visible el bloque (el espacio) con el buscador abierto tal y como está ahora. Si oculto la lupa le quito la posibilidad de ocultar el buscador y ya no necesito que se oculte el bloque en mobile. Eso sí, que la lupa si aparezca en cualquier otra página de la web. Solo afectaría a la index. ¿Se podría?

Graciaas!!

Pensándolo mejor Prestafan, en lugar de ocultar el icono de la lupa en la index, me gustaría dejarlo como "dormido" o "inutilizable". es decir, que aunque la pulses no oculta ni hace nada. Eso sería aun mejor porque no se quedaría el hueco en blandco de la lupa. Se puede "inutilizar" el botón solo en la index mobile???

[Pack_12]

Hola @Prestafan33

Aun sigo con este dilema abierto. (HABLAMOS DE FORMATO MOBILE solo). Quizás mis necesidades han cambiado ahora desde el momento en que he contratado doofinder. Mi buscador ahora es algo primordial en responsive mobile. Por ello, me gustaría que en la home, independientemente de pulsar la lupa o no pulsarla, que el buscador esté siempre visible (SOLO en la HOME de formato MOBILE). Es decir, que si se pulsa la lupa lo único que haga es que se active doofinder, Es decir, lo mismo que si el cliente pulsara en en espacio del buscador. En ambas acciones se activar doofinder. Por otro lado, al bajar y desplazarse en la home, quisiera que el buscador siguiera visible con la top bar, aunque ocupe 1/4 de la pantalla (no me importa). Como digo, doofinder ahora es primordial, y con esta acción de mantenerla mostrada priorizo o fuerzo a que el cliente la utilice (+ potencia, + resultados , mejores, + conversiones... etc).

A su vez, me gustaría que si el cliente pulsa cualquier cosa de la home que no redirija (por ejemplo, aceptar el mensaje de las cookies, o pulsar cualquier espacio en blanco de la home), el buscador tampoco desaparezca. Entiendo que esto lo conseguiríamos con lo anteriormente expuesto.

 

La verdad, tenía mucho código insertado para llegar al punto al que habíamos llegado hasta ahora pero mis prioridades han cambiado, pero ahora no se exactamente como proceder para conseguir lo que quiero (tengo lio con todos los css que inserté). Quizás sea más fácil de lo que creo quitando código .css pero tengo dudas de comio hacerlo.

Agradecería mucho tu ayuda, o de cualquier otro que haya seguido el hilo y pueda orientarme.

Mil gracias de antemano.

Salud!

 

 

[Pack_12]

Hola? 

Sigo sin saber como conseguir mantener el buscador siempre visible en la home en formato mobile   @Prestafan33 ? 😏

Edited October 26, 2020 by Pack_12 (see edit history)