Página 1 de 1

[Resolvido] Como adiciono essa barra de pesquisa?

Enviado: 20 Dez 2018, 15:25
por Dani888
Olá
Eu encontrei este modelo de barra de pesquisa
Alguém sabe como fazer para o 3.0.2.0 opencart
Para o tema
http://www.spearthemes.com/oc-light/
Talvez alguém saiba qual código deve ser adicionado
Como adiciono essa barra de pesquisa

Link da barra de pesquisa do site
https://www.opencartbrasil.com.br/
Perto de ícone de coração
Obrigado

Re: Como adiciono essa barra de pesquisa?

Enviado: 22 Dez 2018, 07:38
por veteranodf
Se esta comentando de auto completar o que digita você encontra alguma extensões nesse link https://www.opencart.com/index.php?rout ... e%20search agora se for de expandir ao posicionar em cima é uma função jquery nesse caso deve entrar em contato com seu desenvolvedor para customizar;

Re: Como adiciono essa barra de pesquisa?

Enviado: 22 Dez 2018, 13:08
por Dani888
Olá
O desenvolvedor não me ajuda
O tema é gratuito.
Encontramos módulos de pesquisa ao vivo
Talvez no fórum alguém me dê a ideia de como adicionar o código
Obrigado

Re: Como adiciono essa barra de pesquisa?

Enviado: 22 Dez 2018, 19:23
por veteranodf
A maioria das extensões são no padrão ocmod.zip e a instalação da mesma é automática através da administração do opencart, veja no manual abaixo como instalar uma extensão;

https://www.opencartbrasil.com.br/insta ... s-opencart

Re: Como adiciono essa barra de pesquisa?

Enviado: 24 Dez 2018, 10:06
por Dani888
Olá
Eu aprendi a preencher um módulo.
Esta é uma alteração para exibir a barra de pesquisa
Eu posso adicionar código aos arquivos de tema.
O problema é que eu não tenho o código para adicionar
Obrigado

Re: Como adiciono essa barra de pesquisa?

Enviado: 24 Dez 2018, 11:17
por veteranodf
Vou te passar passo a passo;

1- Faça download de uma extensão pode ser essa gratuita https://www.opencart.com/index.php?rout ... e%20search se não tive cadastro no opencart.com faça o mesmo para ter acesso ao download;

2- Com o arquivo no seu PC no formato xxxx.ocmod.zip acesse o menu Extensões > Instalador e faça upload da extensão;

3 - Acesse o menu Extensões > Modificações e clique no botão "Atualizar" localizado no campo superior direito "Cor azul"

4 - Acesse o menu Painel de controle e clique no botão abaixo do botão sair no canto superior direito no modal que abrir clique nos botões atualizar em "Tema e SASS"

5- Acesse o menu Extensões > Extensões > Modulos localize "Ajax live search" instale e configure o mesmo;

Fazendo todos esses passos e se não de certo o problema é que a tag search do xml não foi encontrada no tema, sendo assim deve fazer a devida adaptação ou vc pode pegar como referencia o arquivo que o código tentou modificar e inserir as linhas no próprio arquivo que a extensão tentou alterar;

Em ultimo caso contate seu desenvolvedor para fazer as devidas adaptações ou compre um extensão comercial que o desenvolvedor presta suporta para instalação e ficar compatível com seu tema;

Re: Como adiciono essa barra de pesquisa?

Enviado: 24 Dez 2018, 13:40
por Dani888
Olá
Eu não quero esse módulo
https://www.opencart.com/index.php?rout ... load_id=43
Módulo muito bom
Eu instalei

Eu quero modificar caixas de pesquisa como no exemplo
Eu quero adicionar ao tema
http://www.spearthemes.com/oc-light/
Esta mudança
https://codepen.io/nikhil/pen/qcyGF
http://prntscr.com/lz28uq
Ou algum código como este aqui
http://prntscr.com/lz2aai
Obrigado

Re: Como adiciono essa barra de pesquisa?

Enviado: 24 Dez 2018, 16:06
por veteranodf
Acrescente o código abaixo no arquivo catalog\view\theme\TEMA-UTILIZADO\template\common\header.twig antes de </head>, após isso faça o passo 3 e 4 que informei na mensagem anterior, código criado por mim e testado, funciona 100%;

Código: Selecionar todos
<style>
#search input[name="search"] {display:none; float: right; width: 1px}
#search.input-group button{float: right}
</style>
<script>
$(document).ready( function() {
	$('#search span button, #search.input-group button').mouseenter(function() {
	   $('#search input[name="search"]').show().animate({width: '100%', right: '0'}, 500);
	});
	
    $('#search').mouseleave(function() {
        $('#search input[name="search"]').animate({width: '1px', right: '-20px'}, 500);
    });
});
</script>

Re: Como adiciono essa barra de pesquisa?

Enviado: 27 Dez 2018, 08:56
por Dani888
Olá
Agora eu fiz a mudança que eu tinha ido embora.
Isso funciona muito bem.
Estou feliz que você me ajudou, eu não descobri como fazer isso.
Muito obrigado