Jump to content

problema con el modulo de busqueda de prestashop SOLUCIONADO1.7.6.8

eilyvictoria123
 Share

Recommended Posts

eilyvictoria123 Newbie

eilyvictoria123

Posted
Posted (edited)

me explico esta es mi tienda y la estoy haciendo de la manera mas autodidacta posible, se ve de esta manera image.png.92234dbc6cc36ebcf17d840fa4970eaf.png

pero quiero que la busqueda se vea como las plantillas que encontramos  en esta de aqui abajo no se ve el input directo, no se si es algo que deba cambiar con el css, o ya es codigo en la en search.tplimage.png.7fe05c752b7fdc6571acdd8258aecc0e.png

cuando se le presiona a la busqueda esta se despliega asi, y quiero tener algo como esto en mi tienda image.png.ce75092e984d013a7e3eb8d5654ff409.png

pero que aparezca debajo de la navegacion, quien pude ayudarme?

Edited by eilyvictoria123 (see edit history)
Link to comment
Share on other sites
kouty_80 Newbie

kouty_80

Posted
Posted (edited)
On 11/29/2020 at 6:59 PM, eilyvictoria123 said:

me explico esta es mi tienda y la estoy haciendo de la manera mas autodidacta posible, se ve de esta manera image.png.92234dbc6cc36ebcf17d840fa4970eaf.png

pero quiero que la busqueda se vea como las plantillas que encontramos  en esta de aqui abajo no se ve el input directo, no se si es algo que deba cambiar con el css, o ya es codigo en la en search.tplimage.png.7fe05c752b7fdc6571acdd8258aecc0e.png

cuando se le presiona a la busqueda esta se despliega asi, y quiero tener algo como esto en mi tienda image.png.ce75092e984d013a7e3eb8d5654ff409.png

pero que aparezca debajo de la navegacion, quien pude ayudarme?

Hace falta un poco de CSS y también un poco de Javascript para capturar el evento click en la lupa.

Suponiendo que estás usando la plantilla Classic:

- Ve a la carpeta themes/classic/modules/ps_searchbar y abre el archivo ps_searchbar.tpl

- Busca esta línea <i class="material-icons search">&#xE8B6;</i>  que es el icono de la lupa, selecciónalo y córtalo

- Pégalo fuera del div con id search_widget, que quede tal que así:

image.thumb.png.dd07040ca442470e9ddf72e93ea72576.png

- Vamos a añadirle un id a la etiqueta i, por ejemplo, lupa, quedando así:  <i class="material-icons search" id="lupa">&#xE8B6;</i>

- Vamos a darle algún estilo. Ve a themes/classic/assets/css/custom.css y añade este estilo para la lupa, para flotarlo a la derecha y hacer que aparezca el simbolito de la mano cuando te pones encima de ella:

#lupa{

    float:right;

    cursor:pointer;

}

- En el mismo custom.css, vamos a darle ahora estilos a la caja que contiene el input de búsqueda, para ocultarlo y que quede debajo de la lupa, pon estos estilos:

#search_widget{

position:absolute;

top:25px;

right:17px;

z-index:99;

display:none;

}

- Seguramente a ti no te quede igual que a mí, por lo que habría que jugar con las posiciones para que te quede a tu gusto

- Ahora vamos con el Javascript, para capturar el evento click en la lupa y hacer que aparezca y desaparezca el div de búsqueda cuando clicas en ella. Ve a themes/classic/assets/js/ y abre el archivo custom.js

- En ese archivo, pega este código:

//Registramos el evento click en la lupa

document.getElementById("lupa").addEventListener("click", function(){

   //Guardamos en una variable el elemento con id search_widget, que corresponde al contenedor de la caja de búsqueda, para trabajar con ella más adelante de forma más cómoda
    var cajaBusqueda=document.getElementById("search_widget");
   

    //Si al hacer click en la lupa la caja de búsqueda está oculta, la mostramos
    if(cajaBusqueda.style.display=="none"){
        cajaBusqueda.style.display="block";

    //Si al hacer click en la lupa la caja de búsqueda está visible, la ocultamos
    }else{
        cajaBusqueda.style.display="none";
    }
});

Con eso ya lo tendrías, obviamente seguro que no te va a quedar del todo bien colocado, y tendrás que ver también de cambiar algunos estilos en dispositivos móviles con las media queries de CSS para que te quede bien, pero es un comienzo. Prueba a ver y vamos viendo cómo te queda en tu web. Si me pasas el link de tu web puedo ver mejor los estilos que harían falta en tu caso.

 

 

Edited by kouty_80 (see edit history)
Link to comment
Share on other sites
kouty_80 Newbie

kouty_80

Posted
Posted
8 minutes ago, eilyvictoria123 said:

Listo ya lo volvi a colocar!

Perfecto. Te pongo el mismo tutorial de antes pero cambiando algunas cosas:

- Ve a la carpeta themes/classic/modules/ps_searchbar y abre el archivo ps_searchbar.tpl

- Busca esta línea <i class="material-icons search">&#xE8B6;</i>  que es el icono de la lupa, selecciónalo y cópialo

- Pégalo fuera del div con id search_widget, que quede tal que así, dejaremos una lupa dentro de la caja, y fuera de ella otra lupa, la que está fuera es la que le pondremos el id=lupa:

image.thumb.png.fadc4c8ad967300d3b8fbf38a3121001.png

- Vamos a añadirle un id a la etiqueta i, por ejemplo, lupa, quedando así:  <i class="material-icons search" id="lupa">&#xE8B6;</i>

- Vamos a darle algún estilo. Ve a themes/classic/assets/css/custom.css y añade este estilo para la lupa, para flotarlo a la derecha y hacer que aparezca el simbolito de la mano cuando te pones encima de ella:

#lupa{

    float:right;

    cursor:pointer;

}

- En el mismo custom.css, vamos a darle ahora estilos a la caja que contiene el input de búsqueda, para ocultarlo y que quede debajo de la lupa, pon estos estilos:

#search_widget{

position:absolute;

top:25px;

right:17px;

z-index:99;

display:none;

}

- Con eso la caja de búsqueda te va a quedar oculta, así que es normal que no la veas. Sólo deberías ver una lupa. Te pongo una captura de cómo lo veo yo en tu web con los estilos que le he puesto (en la captura le he quitado el display:none para que veas dónde va a quedar colocado cuando esté visible, justo debajo de la lupa, luego le podremos cambiar la ubicación si lo quieres en otro sitio)

image.thumb.png.cccfb831d5c9cea451a31a456b9abf74.png

- Ahora vamos con el Javascript, para capturar el evento click en la lupa y hacer que aparezca y desaparezca el div de búsqueda cuando clicas en ella. Ve a themes/classic/assets/js/ y abre el archivo custom.js

- En ese archivo, pega este código:

//Registramos el evento click en la lupa

document.getElementById("lupa").addEventListener("click", function(){

   //Guardamos en una variable el elemento con id search_widget, que corresponde al contenedor de la caja de búsqueda, para trabajar con ella más adelante de forma más cómoda
    var cajaBusqueda=document.getElementById("search_widget");
   

    //Si al hacer click en la lupa la caja de búsqueda está oculta, la mostramos
    if(cajaBusqueda.style.display=="none"){
        cajaBusqueda.style.display="block";

    //Si al hacer click en la lupa la caja de búsqueda está visible, la ocultamos
    }else{
        cajaBusqueda.style.display="none";
    }
});

- Otra cosa, en ese archivo custom.js veo que tienes un error de sintaxis, arréglalo también, faltan dos puntos después de lgn. Te pongo captura:

image.png.10bd19f70d773f5389f61df3a093c7f8.png

 

Haz esos cambios y pon captura de cada cosa para comprobar que lo tienes todo bien puesto y si sigue sin aparecerte lo revisamos.

Link to comment
Share on other sites
kouty_80 Newbie

kouty_80

Posted
Posted (edited)
28 minutes ago, eilyvictoria123 said:

ya lo coloque y se ve igual, creo que el problema que no se vea es de el css

Se me olvidó decirte que borraras la caché una vez guardado los cambios. Prueba a borrar la caché desde Parámetros avanzados->Rendimiento y recarga la página de nuevo. O sea, pon lo que hicimos antes en la carpeta modules del tema classic (en themes/classic/modules/ps_searchbar) y borra caché.

Edited by kouty_80 (see edit history)
Link to comment
Share on other sites
kouty_80 Newbie

kouty_80

Posted
Posted (edited)
1 hour ago, eilyvictoria123 said:

image.png.9af0a05e15e377729f8146dce5d5e177.png:(((

Arregla también el error que te dije, en ese custom.js tienes un error de sintaxis de otro código que ya tenías puesto de antes, faltan dos puntos después de lng, te paso captura. Has puesto los dos puntos pero después del valor numérico, tienes que ponerlo justo después lng, como te pongo pongo en la captura y borra los dos puntos que pusiste después del valor numérico. Además veo que tienes puesto console.log("lupa") en vez de document.getElementById("lupa). Te paso captura:

image.thumb.png.bdc632250c44c7d103731d0bbc45f306.png

Edited by kouty_80 (see edit history)
Link to comment
Share on other sites
kouty_80 Newbie

kouty_80

Posted
Posted
50 minutes ago, eilyvictoria123 said:

Gracias por todo amigo

No hay de qué, veo que ya lo tienes. Si te vale así, sólo añade una cosita más para que te quede bien también en dispositivos móviles. Añade este estilo en tu custom.css:

@media screen and (max-width:767px){

    #search_widget{

        position:static;

    }

}

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...