Olá pessoal neste artigo vou mostrar como podemos colocar dois números de whatsapp em só um botão flutuante na loja, só lembrando que a loja tem este recurso na base, mas para um botão só, veja aqui neste link.

Antes de começar, só para ficar claro este “botão flutuante” é um recurso disponibilizado pela API do whatsapp, em resumo, vamos usar a parte que permite criar um link e deste link abrir o whatsapp web ou o aplicativo (se tiver no celular). Improtante este é um recurso de terceiros, isso deixa o código fora da sua loja, então se o link um dia parar de funcionar, teremos que procurar outra solução. A Brasil na Web não se responsabiliza por códigos de terceiros ok?!

Bom agora que sabemos com funciona o “botão”, vou ensinar como fazer este visual:

Aqui temos uma ação para fechar a caixa, uma imagem da logo do whatsapp e dois telefones cada um com um link para abrir o whatsapp, para isso vamos precisar de 3 passos avançados, então leia com calma, copie e cole os códigos em cada local indicado abaixo, vamos lá.

1) CRIE UMA ÁREA PERSONALIZADA

Vamos criar uma área personalizada para colocar o código visual e é aqui que vamos trocar ou adicionar mais telefones e links, vá no menu de Customização > Áreas Personalizadas, vamos adicionar uma nova área, coloque um nome fácil de se lembrar, e na edição de texto clique no botão Código Fonte e cole o código abaixo:

<div id="abre_janela_wp"><span class="fa fa-chevron-left"><i>abre</i></span></div>
<div id="fecha_janela_wp"><span class="fa fa-chevron-right"><i>fecha</i></span></div>
<div id="janela_wp">
	<p><img src="/image/data/fale-whatsappweb.png"></p>
	<p>
		<a href="https://web.whatsapp.com/send?l=pt&phone=5514996837689&text=Ol%C3%A1%2C%20gostaria%20de%20informa%C3%A7%C3%B5es..." target="_blank">
			<span class="ddd">(14)</span>
			<span class="numero">9 9683-7689</span>
		</a>
	</p>
	<p>
		<a href="https://web.whatsapp.com/send?l=pt&phone=5514991280480&text=Ol%C3%A1%2C%20gostaria%20de%20informa%C3%A7%C3%B5es..." target="_blank">
			<span class="ddd">(14)</span>
			<span class="numero">9 9128-0480</span>
		</a>
	</p>
</div>

Volte e clique no botão de Código Fonte e ai poderá editar os dados aqui, mude a imagem, neste link você pode baixar a imagem do exemplo acima, basta clicar duas vezes na imagem “quebrada” e substituir por esta imagem que estou disponibilizando. Para os números e links basta tocar o texto e mudar a URL.

Pra gerar o link da API, use nossa ferramenta de gerar link de whatsapp, basta coloca o(s) seu(s) telefones de wahtsapp e gerar a URL, depois só colocar ela como link do telefone, veja neste tutorial como colocar link em texto e imagens, caso tenha dúvida.

Agora que editamos os textos, links e imagens vamos rolar um pouco a tela e vamos fazer as configurações deste módulo. Vamos ocultar o título, vamos colocar no layout “Todas as Páginas”, na posição “Rodapé Inferior”.

2) ADICIONE O CSS AVANÇADO

Agora vamos no menu de Customização > Personalização depois na aba de Avançado e vamos colar o trecho abaixo de CSS, mas MUITA ATENÇÃO se houver outro código ali, cole na última linha para não perder qualquer outro código que esteja ali e cole exatamente como está abaixo:

.whatsapp-duplo{margin: 0}	
	#abre_janela_wp,
	#fecha_janela_wp,
	#janela_wp{
		position: fixed;
		right: 0;
		top: 160px;
		z-index: 500;
		background: #27ae60;
		color: #FFF;

		-webkit-border-top-left-radius: .3rem;
		-webkit-border-bottom-left-radius: .3rem;
		-moz-border-radius-topleft: .3rem;
		-moz-border-radius-bottomleft: .3rem;
		border-top-left-radius: .3rem;
		border-bottom-left-radius: .3rem;
		-webkit-box-shadow: 0 0 0.3rem 0 rgba(50,50,50,0.75);
		-moz-box-shadow: 0 0 .3rem 0 rgba(50,50,50,0.75);
		box-shadow: 0 0 0.3rem 0 rgba(50,50,50,0.75);
		background-color: #27ae60;

		-webkit-transition: all 0.2s ease-in-out;
		   -moz-transition: all 0.2s ease-in-out;
			-ms-transition: all 0.2s ease-in-out;
			 -o-transition: all 0.2s ease-in-out;
				transition: all 0.2s ease-in-out;		
	}

	#abre_janela_wp,
	#fecha_janela_wp{
		z-index: 500;
		top: 120px;
	}
		#abre_janela_wp{right: -50px}

	#abre_janela_wp span, 
	#fecha_janela_wp span{
		display: block;
		font-size: 20px;
		width: 45px;
		height: 45px;
		line-height: 45px;
		text-align: center;
		cursor: pointer;
	}
		#abre_janela_wp span i, 
		#fecha_janela_wp span i{display: none;}	

	#janela_wp{
		z-index: 5800;
		padding: 10px 15px;
		text-align: right;		
	}
		#janela_wp a,
		#janela_wp a:hover{
			font-size: 18px;
			text-decoration: none;
			color: #FFF
		}
		#janela_wp a .ddd{font-size: 14px;}

	#abre_janela_wp.open    {right: 0 !important;}
	#fecha_janela_wp.close  {right: -60px !important;}
	#janela_wp.close        {right: -250px !important;}

3) ADICIONE O JAVASCRIPT AVANÇADO

E por fim vamos colocar o código de Javascript na mesma tela, um pouco mais abaixo, MUITA ATENÇÃO se houver outro código ali, cole na última linha para não perder qualquer outro código que esteja ali e cole exatamente como está abaixo:

$(function(){
	$('#fecha_janela_wp').click(function(e){
		e.preventDefault();
		$('#janela_wp').addClass('close');
		$('#abre_janela_wp').addClass('open');
		$('#fecha_janela_wp').addClass('close');
	});

	$('#abre_janela_wp').click(function(e){
		e.preventDefault();
		$('#janela_wp').removeClass('close');
		$('#abre_janela_wp').removeClass('open');
		$('#fecha_janela_wp').removeClass('close');
	});
});

Bom com isso vamos ter o mesmo visual, não se esqueça de subir a imagem que usei neste exemplo ou trocar por outra que achar melhor, já estamos pensando em fazer um recurso mais elaborado por dentro da loja, fique de olho nas atualizações.

Espero ter ajudado, e até mais!

Olá pessoal hoje vou ensinar para você uma forma de colocar um link para abrir um pop-up, ou seja, abrir uma página ou conteúdo na mesma janela que o link está, é um recurso muito valioso para quem quer colocar uma mensagem ou conteúdo sem que saia da tela, por exemplo um link para abrir manual do produto, cupom de desconto e etc.

Atenção vamos fazer isso com código avançado da loja, tome muito cuidado ao colocar esses dados lá, então vamos lá. Primeiro vamos acessar o painel da loja e vamos no menu de Customização > Personalizar aqui vamos na aba de Avançado e no campo de JavaScript  vamos colar o seguinte código:

$(document).ready(function() {
	if(is_mobile){
		$('.abre-pagina').colorbox({width:'90%', top: '30px'});
	}else{
		$('.abre-pagina').colorbox({width:'50%'});
	}	
});

ATENÇÃO: Se houver outro trecho de código aqui, cole no final dele ok? Sempre na última linha “de um enter” e cole o código acima.

Neste trecho de código temos um “validador” de mobile, assim poderá fazer com que o esta caixa abra em tamanhos diferentes para telas menores, se desejar usar só uma instrução, com porcentagem você pode usar o seguinte código mais “enxuto”:

$('.abre-pagina').colorbox({width:'90%'});

Neste código acima ele vai abrir com largura de 90% do navegador seja ele desktop ou mobile. Agora vamos salvar e vamos criar uma página.
Neste exemplo vou colocar um link para um cupom de desconto que já criei, quer saber como criar cupons de desconto, saiba como aqui..

Com o cupom criado vamos no menu de Customização > Páginas institucionais para criar o conteúdo do pop-up, insira uma nova página e capriche no conteúdo.

Agora vamos copiar a URL desta página, esta informação fica na aba de Dados, copie e guarde ela para colocarmos no link.

Agora eu vou colocar o pop-up, em uma barra abaixo do meu banner principal, para chamar a atenção e as pessoas possam usar este meu cupom, no menu de Customização > Áreas personalizada eu criei uns mini-banner de destaque da minha loja, e um deles é o cupom.

Aqui estou usando uma imagem, para que funcione corretamente você precisa colocar uma classe no link da imagem, então clique no ícone da opção de link na barra de ferramentas:

Ao abrir a caixa de edição de link, vamos na aba de Avançado e no campo Classe de CSS vamos colocar “abre-pagina”, isso vai ativar o POP-UP

Agora na aba de Informações  vamos colocar a URL da página que criamos com um parâmetro a mais, no meu exemplo ficou

https://www.SEUDOMINIO.com.br/pop-up-cupom-primeira-compra?information_popup=1&title=no

– Coloque sempre a URL completa da página, sem ela não vai abrir corretamente.
– Ai na URL temos dois parâmetros um que habilita o pop-up (information_popup) e outro que remove o título da página (title)

Agora vamos salvar e tesar na nossa loja.

Bacana não, use este recuro tanto em imagens ou links, em qualquer parte da loja que tenha o editor ou possa colocar um link com essa classe. Você pode até abrir outros sites dentro usando a função de iFrame, para isso você vai precisar mexer no código avançado, neste link tem a documentação do plugin completa, mas tome cuidado é preciso um pouco de conhecimento em Linguagem de Javascript, se tiver alguma dúvida não deixar e entrar em contato com nossa central de suporte.

Até mais!

Olá pessoal neste artigo vamos mostrar como adicionar uma nova moeda na loja, esta função permite que você possa vender seus produtos para outras moedas, por exemplo em Dollar, é bem simples,mas precisa de ter um pouco de atenção, vamos lá!

1) Habilitando Moedas
A primeira coisa a fazer é habilitar as moedas eu vamos trabalhar na loja, neste exemplo vou trabalhar com Real e Dollar, então vamos no menu de Configurações > Configurações Regionais > Moedas nesta tela deixamos algumas já cadastradas.

Como no exemplo vou usar a moeda Real e Dollar, vamos entrar nelas e habilitar.

Note que para uma nova moeda, temos que passar alguns valores simples, como nome da moeda, simbolo, casas decimais e valor.

Agora antes de continuar vamos entender como funciona este valor, pois ele é o fator que vai converter os valores na loja, para que o valor sempre siga o mais atual possível a loja faz integração com a API da currencyconverterapi.com um site que fornece API de consulta financeira que retorna o valor da moeda e calcula com base no valor padrão da sua loja.

Note que ao abrir a listagem, ele mostra a última data de consulta, ele faz pelo menos uma vez ao dia essa consulta, ao habilitar a moeda ele já faz uma nova consulta, então sempre temos os dados mais atuais de cada moeda.

O calculo é baseado na moeda padrão que definir como o valor 1.0000, no meu exemplo é o Real, então R$ 1,00 é igual a 1.0000, com isso as demais moedas são convertidas, por exemplo o Dollar, $ 0.02682 centavos é igual a  R$ 1,00. Você pode inverter colocar o Dollar como padrão, assim na moeda Real você vai colocar o equivalente, no nosso caso 3.8000

2) Limpando o Cache
Agora que configuramos  as moedas, um passo muito importante para habilitar, vamos limpar o cache da loja, isso vai remover os valores que já foram consulados na API e “re-iniciar as moedas”, para isso vá no meno de Configurações > Esvaziar Cache (aconselho a dar uma lida neste artigo) aqui basta clicar em Limpar Arquivos de Cache.

Agora pronto já temos as duas moedas habilitadas na loja, vamos ver como ficou na loja

Se clicarmos na moeda Dollar, note que o preço do produto vai mudar em toda a loja.

Bacana não?! Agora que sua loja tem uam moeda estrangeira que tal colocar um idioma em inglês também?! Veja como neste artigo.

Espero ter ajudado e até mais!

Neste artigo vou mostrar como podemos adicionar o idioma inglês na sua loja, a Brasil na web trabalha com código aberto da OpenCart, logo não podemos perder funções bacanas como trocar o idioma, neste exemplo vou aplicar o idioma inglês na loja, veja como é fácil.

Primeiro acesse o menu de Configurações > Configurações Regionais > Idiomas ao abri esta tela temos o idioma Português como padrão, atenção ao inserir um novo idioma ele vai aparecer automaticamente na loja, então vamos fazer certinho. Ao inserir vamos precisar colocar os seguintes dados, coloque exatamente como abaixo:

Veja como vai ficar:

Pronto idioma adicionado, agora podemos entrar no cadastro de produto, por exemplo, e adicionar o texto em inglês do título, descrição, meta descrição, etc.. no idioma escolhido, assim podemos otimizar e ser mais preciso na tradução dele para o idioma.

Este recurso também para outros módulos dentro da loja, como área personalizada, quase todo módulo agora terá uma aba com os dois idiomas da loja, permitindo que gere conteúdo com mais exatidão para o idioma.

Outra dica bacana é que podemos deixar o site com um idioma padrão, ou seja, se o cliente acessar ele pode carregar, por exemplo o inglês, e o mesmo podemos fazer para o painel administrativo da loja, para configurar o idioma padrão, basta ir no menu de Configurações > Opções da Loja e depois na aba de Localização aqui podemos definir o idioma padrão da loja e do painel administrativo.

Agora sim vamos ver na loja como ficou:

Bacana não, agora algumas considerações importantes.

1) Módulos e Recursos Personalizados
Alguns módulos e recursos que fizemos exclusivos para nossa base, podem não ter a tradução correta ou até não ter a tradução, isso não vai gerar um erro na tela, mas vai ficar sem tradução e/ou um texto genérico, neste caso entre em contato com nossa equipe de manutenção (manutencao@brasilnaweb.com.br) informando a tela (como chegou nela) e qual o termo correto para o inglês desta palavra (ou termo), assim iremos avaliar este ajuste.

2) Outros idiomas
Por padrão temos na base o idioma inglês, se desejar outro como espanhol, chines, russo, etc.. será necessário consultar como nossa equipe. Iremos procurar na comunidade, e bem provável que tenha a tradução, mas é apenas para o básico da loja, funções padrões da OpenCart como pedidos, cadastro básico, produtos, etc… Módulos extras, melhorias e personalizações entram no mesmo quisto citado acima, precisaremos que envie a tradução e iremos analisar.

Fácil não, bom agora que tal mostrar pro seu cliente os preços dos produtos em Dollar?! Confira neste artigo como habilitar outras moeda na sua loja.

Bom, espero ter ajudado, e até mais!