05/01/2017

Prestashop 1.6 - Personalizando sua logo na loja e os favicons


Continuando a personalização do tema padrão da instalação do Prestashop vamos hoje inserir a logomarca da sua loja. Tanto serve para a logo que vai aparecer na loja quanto nos e-mails enviados pela loja.

Então primeiro crie as imagens sendo:


  • Logotipo para a loja no Desktop:
Sugiro criar uma imagem nas dimensões 400 x 170px de fundo transparente (PNG)

Veja na figura abaixo que eu deixei um espaço de sobra na área transparente:

 
  •  Logotipo para e-mails e faturas:
Caso não personalizar nenhum logotipo para e-mail ou fatura ele usará o mesmo acima:

Eu particularmente prefiro personalizar. E estarei usando a mesma tanto para os e-mails (confirmação de cadastro, informação sobre pedido, newsletter e etc) quanto para as faturas geradas pelo sistema.


Sugiro criar uma imagem nas dimensões 350 x 80px de fundo transparente (PNG)

Veja na figura abaixo que eu deixei um espaço de sobra na área transparente:

_logo-email-prestashop



  •  Favicon:
Crie uma imagem nas dimensões 32 x 32 px e as salve como formato .ico;



  •  Ícone do painel:
Crie uma imagem nas dimensões 60 x 60 px e as salve como formato .png;


  •  Logotipo para celular
Sugiro criar  uma imagem nas dimensões 320 x 80 px e as salve como formato .png;


Veja na figura abaixo que eu deixei um espaço de sobra na área transparente:



Agora otimize as imagens para que fiquem mais leve, para isso eu gosto muito de utilizar o recurso do site https://tinypng.com/

Feito isso, com as imagens prontas, é hora de configura-las em nossa loja. 

Após logar no painel administrativo da loja, vá para PREFERÊNCIAS>>TEMAS




Agora basta selecionarmos cada aba correspondente ao que queremos configurar:


personalizando-loja-prestashop

Um detalhe que é bom citar é que para a Aba Celular serão disponibilizadas algumas opções:

Eu gostaria de desativar isso: Caso desative ele ira assumir o logotipo da loja do desktop
Eu gostaria de habilitá-lo apenas em dispositivos móveis.: Somente obedecerá a logo para celular quando estiver em dispositivo móveis.
Eu quero habilitá-lo apenas em touchpads: Só aparecerá a logo criada para celular quando estiver em touchpads
Quero ativá-lo para smartphones e tablets: Só aparecerá em smartphones e tablets

Para ver os resultados on line clique aqui.






Prestashop 1.6 - Personalizando a barra superior


Bem diferente do tema Prestashop Integrado com Webacappella; neste tema também temos que nos preocupar com o layout de nossa loja. Pois com a integração o layout fazemos diretamente no projeto WA 4.

Vamos então trabalhar no tema gratuito fornecido pelo Pelo Prestashop e personalizar o máximo que pudermos. Logicamente pouco a pouco devido as inúmeras possibilidades de o Prestashop nos fornece.

Hoje então iniciaremos do topo. Vamos alterar a barra superior ou até mesmo excluí-la .




Para podermos excluir ou mudar esta barra iremos trabalhar com um módulo do Prestashop que normalmente vem instalado e ativado na instalação padrão: O módulo é Bloco de Banner.

Então crie uma imagem a qual deseja que substituir a do tema padrão. O Prestashop recomenda uma imagem nas dimensões 1170 x 65 px.

Para a loja que criaremos para acompanhar este tema do blog (Prestashop 1.6) criei a seguinte imagem:


 
Caso deseje somente desativar a barra, obviamente não precisa criar uma imagem. 

Então faça login na sua área administrativa do Prestashop e va na opção MÓDULOS>>MÓDULOS. 
Desça com a barra de rolagem ate aparecer a Lista de Módulos:

No campo de busca digite Bloco de Banner 

Repare na imagem abaixo que do lado direito já aparece o Bloco de Banner.


Repare então que ao clicar na seta ao lado do botão Configurar são disponibilizados algumas opções:

configurar-barra-superior-prestashop

Para fazer a alteração para sua imagem e configurações clico sobre Configurar.

Então faça upload de sua imagem, defina o link que ao clicar para onde será redirecionado (se desejar) e uma descrição do banner.

No caso de nosso exemplo ficará assim:


E você pode ver o resultado neste link: http://webacappellashow.com.br/loja

Você também pode clicando na seta no botão configurar:

Desabilitar: Útil se você utiliza a barra de forma promocional. Então você pode manter uma promoção linkando a barra ao que está em promoção e quando não quiser mais dá ênfase simplesmente desabilita.

Mostrar em Celulares: Caso deseja que a barra seja vista por navegação por celular.

Desativar em tablets: Automaticamente ela é ativada para tablets, aqui você pode desativar.

Desativar em computadores: Caso não queira que a barra seja vista no computador e ou similares

Reiniciar: Caso haja alguma falha você pode reiniciar o módulo

Desinstalar: Você desinstala completamente o módulo do Prestashop. Porém os arquivos continuam com a possibilidade de ser instalado novamente. Se realmente não vai usar nunca, é interessante desinstalar pois estes sistemas de conteúdo quanto menos módulos instalados mais rápido o site fica. Mas pra isso também é interessante apagar.

Apagar: Apagando você apaga completamente os arquivos do módulo do Prestashop



Por hoje é só. Um bom resto de semana pra todos.


 



12/10/2016

Google Analytics no site Webappella




TEMA: SEO
ARTIGO: Novo
VERSÃO: WA4 | WARC

Google Analytics é uma, Interface de Programação de Aplicativos. Ou seja, uma ferramenta ita e disponibilizada gratuitamente pelo Google para ser usada pelos desenvolvedores de sites e profissionais de Search Engine Optimization (SEO). Com o Analytics você consegue acompanhar detalhes sobre a visitação e estatísticas do seu site.

Outro fator importante do Google Analytics é o primeiro passo para que o Google saiba que seu site exista. Vamos pela lógica. Você acha mesmo que se não tiver nenhum outro lugar, seja blog, redes sociais, sites de diretórios e etc ; ou seja ..qualquer outro lugar apontando para seu site, ele será encontrado pelo mecanismos de busca? Sinceramente tenho minhas dúvidas.

Lógico que  tem outros recursos e técnicas para que ele seja melhor posicionado, como o sitemap por exemplo. Mas só de se cadastrar o seu site no Google Analytics, o Google já sabe que ele existe.

Neste artigo não vamos explicar como utilizar o Google Analytics, até mesmo que seria um artigo mais extenso. Mas pode aguardar que farei um artigo sobre isso mais pra frente.  Mas hoje vamos configurar no WebAcappella seu id do Google Analytics. 

O primeiro passo é criar sua conta no Google, neste link: https://accounts.google.com/AddSession

Não posso garantir que este link seja válido para o resto da vida., pois tudo pode mudar.

Após criar a conta você já estará logando no Google Analytics. Caso já tiver uma conta Google vá direto para este link: https://www.google.com.br/analytics/ e faça login.



Caso seja a primeira vez que utilize



Clique em Increva-se e preencha os campos referente ao Website que deseje cadastrar.

Depois clique em Obter ID de acompanhamento.





Aceite os termos.

Você já será redirecionado para a página contendo sua ID  e o código de acompanhamento. 

Eu costumo a criar uma pasta no pc de cada cliente e dentro da mesma um arquivo denominado credenciais.txt onde coloco todas as credenciais e particularidade como esta.

Então dentro deste arquivo eu colei as anotações semelhantes a abaixo


--------- GOOGLE ANALYTCS

ID: UA-85619172-1

CÓDIGO:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-85619172-1', 'auto');
  ga('send', 'pageview');


</script>

Caso já tenha algum site cadastrado na conta do Google Analytcs


Caso você ja tenha outro site configurado no Google Analytcs provavelmente vai aparecer uma tela semelhante a esta.



Neste caso para incluir um novo site clique em ADMINISTRADOR >> SELECIONE NA COLUNA DE CONTA A OPÇÃO Criar Nova Conta




Preencha os campos referente ao Website que deseje cadastrar.

Depois clique em Obter ID de acompanhamento.





Aceite os termos.

Você já será redirecionado para a página contendo sua ID  e o código de acompanhamento. 

Eu costumo a criar uma pasta no pc de cada cliente e dentro da mesma um arquivo denominado credenciais.txt onde coloco todas as credenciais e particularidade como esta.

Então dentro deste arquivo eu colei as anotações semelhantes a abaixo


--------- GOOGLE ANALYTCS

ID: UA-85619172-1

CÓDIGO:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-85619172-1', 'auto');
  ga('send', 'pageview');


</script> 



O Webacappella tem uma vantagem. Ele já inclui o script do Google Analytcs em todas as páginas do projeto automaticamente. Tanto no WA4 quanto no WARC. 


Este procedimento ajuda a diminuir a taxa de rejeição do site perante ao Google. Então basta configurarmos a ID no site que todas as páginas do projeto já serão configuradas com o script automaticamente no site.


APLICANDO NO WA 4 

Clique em na opção do Menu em SITE>>PROPRIEDADES DO SITE



Na tela que se abrirá, na opção SEO, digite a ID no campo referente Estatísticas do site 



Clique em OK  e agora só publicar o site.



APLICANDO NO WA RC  (WA 5)

Na tela principal do projeto clique em WEbsite Setiings



Role a página até encontrar o campo do Website statistics (Google analytics) e preencha o campo com a ID



Clique em Save and close   e agora só publicar o site.




Prontinho, configurado. Agora só esperar o robô do Google visitar seu site para começar a apurar os dados estatísticos. 

Mais pra frente falaremos mais sobre técnicas de SEO , inclusive sobre o mapa do site.

Grande abraco.


07/09/2016

Configurando e-mail de alerta de pedidos.




TEMA: Prestashop integrado com Webacappella
ARTIGO: Novo
VERSÃO: PRESTASHOP  1.5.x |  WEBACAPPELLA  4


Em muitas das ocasiões existem proprietários de lojas virtuais que possuem diversas outras ocupações, e nem sempre tem tempo de visitar o painel todo para acompanhar os pedidos.

Uma saída para isso seria configurar uma conta de e-mail que receberia um aviso toda vez que houvesse uma nova compra na loja. Pois poderia chegar o e-mail até mesmo por um celular.

O Prestashop possui esta possibilidade através de um módulo nativo.


Mas antes de configurarmos nosso e-mail para recebimento de avisos vamos testar se a loja está enviando e-mails normalmente.

Clique na opção do menu PARÂMETROS AVANÇADOS>>E-MAIL

Na área de Teste preencha com o e-mail desejado e clique em Enviar um e-mail de teste




Caso seu teste não foi bem sucedido, você pode usar o quadro acima para efetuar as configurações. Pode-se se optar por php mail e até mesmo utilizar configurações smtp.





Para isso acesse o menu MÓDULOS>>MÓDULOS

No campo de busca procure por alertas de correio

email avisando compra na loja prestashop


Será listado abaixo, agora clique em Instalar


instalar alerta de correios prestashop


Feito a instalação clique em Configurar

configurando aviso por email compra na loja prestashop

Agora você configure de acordo com suas preferências. Você pode por exemplo configurar para receber um e-mail assim que um determinado produto estiver abaixo de um estoque mínimo, ou até mesmo enviar automaticamente para o cliente quando um produto que estava fora de estoque ficou disponível.

No campo endereços de e-mail você insere os e-mails que deseja receber os avisos.




Depois basta clicar em salvar.


01/09/2016

VOCÊ NÃO PODE ALTERAR O STATUS DA LINGUAGEM PADRÃO | -> SOLUÇÃO



TEMA: Prestashop integrado com Webacappella
ARTIGO: Novo
VERSÃO: PRESTASHOP  1.5.x |  WEBACAPPELLA  4

Muitas pessoas quando montam uma loja virtual, não tem intenção de vender para outro país. Para estes casos não é interessante manter vários idiomas disponíveis. Pois causa um retrabalho nos cadastramentos. Você tem que digitar os dados cadastrais para todas as línguas.

Porém mesmo que você deixe desabilitado os idiomas não desejados no painel, nos cadastramentos tem que cadastrar o nome principal no idioma padrão, clicar na bandeira do idioma desejado e cadastrar os dados na língua desejada.

Então o ideal é apagar os idiomas que você não deseja, mantendo apenas cadastrado o idioma desejado.

Portanto ao apagar o idioma inglês aparece um erro dizendo " VOCÊ NÃO PODE ALTERAR O STATUS DA LINGUAGEM PADRÃO" (mesmo que o idioma padrão foi alterado no prestashop integrado quase sempre isso acontece).


Vamos então passar um truque para a solução deste caso.

No Painel do prestashop em LOCALIZAÇÃO>> IDIOMAS delete todos os idiomas em que você não queira utilizar

Deixei então só o Português Br, o que me interessa e o Inglês o qual não consigo apagar e nem desabilitar

Entrei na opção de edição do Idioma Brasil e Printei as informações ali cadastradas para ter uma garantia





O primeiro passo é fazer um backup de segurança tanto da pasta do Prestashop quanto do banco de dados.

Agora acesse seu gerenciador de arquivos pelo cpanel e vá até a pasta de instalação do seu prestashop e procure a pasta translations.

O que vamos fazer é trocar o idioma inglês pelo idioma que desejamos como padrão (gambiarra, mais funciona)


No caso deste artigo eu desejo que o atual inglês padrão seja substituído pelo Brasil.

Copie o conteúdo da pasta br para en

Agora delete também  o idioma portuges, deixando apenas o Inglês.

Vai ficar apenas o inglês:  Edite-o

Altere todos os campos com as informações que você salvou do idioma português e salve.

Envie um arquivo de imagem da bandeira do Brasil.




bandeira-brasil.gif

Salve

Pronto lá está meu painel com apenas um idioma e o que eu desejo.



Para garantir, vá na opção LOCALIZAÇÃO >> TRADUÇÕES e confirme no bloco Troca de Tradução o idioma Portugês BR (Portuguese) clicando em Adicionar ou atualizar idioma


Depois em Minhas Preferências no topo a esquerda e confirme o idioma e salve.



Agora para não afetar o site , é necessário ir em LOCALIZAÇÃO>>TRADUÇÕES

na área copiar você configura conforme imagem abaixo e clique em Copiar.




Prontinho. Agora você não precisa ficar tendo retrabalho nos cadastramentos.














21/08/2016

Seu site está no DMOZ?



TEMA: SEO
ARTIGO: Novo
VERSÃO: WA 4 |  WA 5

.

O Dmoz é um site de diretório Web. Funciona como um catálogo de sites na sua respectiva categoria. Mantido por uma comunidade global de voluntários e alimentados diariamente por webmaster e profissionais de Otimização de sites.

Os robôs dos mecanismos de pesquisa para que comece encontrar seu site ele precisa que seja informado  ou ele ao passar em algum site ou blog, encontrar um link apontando para seu site.  Então estes mecanismos de busca apoiam no Dmoz fazendo uma varredura em tempos em tempos.

Este artigo é mais direcionado para ampliar conhecimentos. Eu mesmo não acho tão relevante o cadastro no Dmoz. Uma vez que incluindo o site no Google Analytics já avisei ao Google; que domina 85% deste nicho já começará indexar o site.

Não tão importante como nos tempos passados um dos ítens em um checklist SEO  é cadastrar o site no Dmoz.

Algumas normas específicas devem ser cumpridas quando for cadastrar seu site no Dmoz. Caso contrário seu site será rejeitado. Mas não se desanime, melhore-o e envia-o novamente após algum tempo.



  • Não submeta sites espelho. Sites espelho são aqueles com conteúdo idêntico, mas URLs diferentes.
  • Não submeta URLs cujo conteúdo seja o mesmo ou similar a outros sites que podem ser listados no diretório. Sites com sobreposições e conteúdo repetitivo não são úteis para os usuários do diretório. Submissões múltiplas do mesmo site ou relacionados podem resultar na exclusão e / ou remoção destes e de todos os sites afiliados.
  • Não disfarce sua submissão para submeter a mesma URL mais de uma vez.
    Exemplo: http://www.dmoz.org e http://www.dmoz.org/index.html
  • Não submeta nenhum site com uma URL que redireciona para outro endereço.
  • O Open Directory tem uma política contra a inclusão de sites de conteúdo ilegal. Exemplos de material ilegal inclui pornografia infantil, calúnia, material que infrinja quaisquer direitos de propriedade intelectual e material que defenda, instigue ou estimule atividades ilegais (como fraude ou violência).
  • Não submeta sites “em construção”. Espere até que o site está completo antes de enviá-lo. Sites que estão incompletas, com sinais “em construção” ou conter links ou não são bons candidatos para o diretório.
  • Submeta sites pornográficos à categoria apropriada em Adult.
  • Submeter sites não inglês à categoria apropriada em World.
  • Não submeta sites que consistem amplamente de links afiliados.
Para se cadastrar no Dmoz vá para http://www.dmoz.org/

No campo de pesquisa digite a categoria do seu site, ou seja, qual a área do negócio.

No exemplo vamos cadastrar o site do WEBAACAPPELLASHOW.

Então vou por na pesquisa a seguinte frase "dicas para criação de sites" porém traduzida pelo translator para o inglês.



Pode acontecer que as categorias listadas não tenham nada haver com a categoria do seu site, refaça a frase e tente novamente. No caso do exemplo a última listada me atende.

Portanto vou clicar onde mostrei na seta na figura abaixo

Pois América do Norte / Estados Unidos / Califórnia não me atende

Clicando conforme dito acima são mostradas subcategorias.


Clicando na mesma e dando continuidade me disponibilizou outra subcategoria,

.

Nesta tela eu clique no ícone conforme mostra a figura acima para sugerir o site que desejo cadastrar.

Preenchi os dados do formulário

E agora é esperar pra ver se vai ser aceito.



Tradução pelo Google Tradutor o texto da mensagem de confirmação

Uma vez que seu site foi aceito no DMOZ, pode levar de 2 semanas a vários meses para o seu site para ser listado nos sites dos parceiros que usam dados de DMOZ, tais como AOL Search, AltaVista, HotBot, Google, Lycos, Netscape Search, etc . Nós fazemos as actualizações dos dados disponíveis semanalmente, mas cada parceiro tem sua própria programação de atualização.
Considere tornar-se um editor e manutenção de uma categoria. DMOZ tem um conjunto abrangente de ferramentas para adicionar, excluir e atualizar links em segundos. Por apenas alguns minutos do seu tempo você pode ajudar a tornar a Web um lugar melhor, e ser reconhecido como um especialista sobre o tema escolhido.

17/08/2016

Inserindo um botão compartilhar no Facebook utilizando os botões do Webacappella (Método 2)



TEMA: Redes Sociais
ARTIGO: Revisado e Melhorado
VERSÃO: WA RC  |  WA 4


Em outra postagem eu explique como inserir no seu site Webacappella um botão Compartilhar no Facebook utilizando o método Facebook Developers.

Link da postagem:
http://webacappellashow.blogspot.in/2016/08/inserindo-um-botao-compartilhar-no.html

Portanto para ao clicar no botão tenha o efeito desejado é necessário seguir os procedimentos explicados em outra postagem:
Link:
http://webacappellashow.blogspot.in/2015/07/facebook-open-graph-imagem-compartilhar.html



Vamos então para outro método que é utilizando os botões do Webacappella:



MÉTODO 2 - UTILIZANDO BOTÃO DO WEBACAPPELLA


Existem casos que desejamos fugir da imagem padrão que o Facebook nos fornece para o botão Compartilhar como mostrado no Método 1. Então existe uma forma de você utilizar os próprios botões do Webacappella. 

Para isso faça todos os procedimentos do MÉTODO 1 insira o botão e publique o site. Após o site publicado clique no botão como fosse compartilhar no Facebook:

Ao abrir a tela de publicação copie todo o conteúdo da barra de endereço.



NO WA 4

No Webacappella na página que deseja o botão compartilhar insira um botão com a opção INSERIR >> BOTÃO. 

Personalize o botão da sua maneira, e na hora de definir um link para o botão defina para "Link para um endereço na internet" , "Nova Janela", e no campo abaixo cole o que você copiou da barra de endereços conforme mostrado na imagem acima.




Para ver o resultado on line clique aqui


NO WA RC

No  Webacappella RC,  na página que deseja o botão compartilhar insira um box onde vai receber o código, clique no ícone Button no menu 

Personalize o botão da sua maneira, e na hora de definir um URL e assinale a caixa de verificação "Open in a windows"  No campo da url cole o que copiou na barra de endereços conforme a imagem mostrada.


Uma pena que até a data de hoje, no WA RC não temos muitas opções de personalização do Botão. Como inserir um ícone por exemplo.

Para ver o resultado on line clique aqui (o botão está no rodapé do site)





Este método dispensa a inclusão do código no head de cada pagina como mostrado no MÉTODO 1


Agora você tem um botão mais personalizado para compartilhar o site no Facebook.

Related Posts Plugin for WordPress, Blogger...