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
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.tpl
cuando se le presiona a la busqueda esta se despliega asi, y quiero tener algo como esto en mi tienda
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"></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í:
- Vamos a añadirle un id a la etiqueta i, por ejemplo, lupa, quedando así: <i class="material-icons search" id="lupa"></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.