30/04/2017

PRESTASHOP 1.6 - Configurando método de pagamento PagSeguro


Vamos começar a configurar os métodos de pagamento em nossa loja Prestashop. Um modo de pagamento muito utilizado é o PagueSeguro. Pois o cliente tem opção de selecionar pagamento por cartão de crédito e até por boleto bancário. Para saber mais sobre o PagueSeguro clique aqui.

Não falarei sobre o PagueSeguro pois o mesmo pode mudar suas regras a qualquer momento e o artigo ficaria desatualizado.

Para poder configurar o módulo Pagseguro na sua loja faz-se necessário que sua conta seja no mínimo uma conta VENDEDOR.

Sendo assim a primeira coisa que deve-se fazer é logar no seu painel no PagueSeguro para gerarmos um Token.

Após logado no PagueSeguro vá para MINHA CONTA  >> PREFERÊNCIAS >> INTEGRAÇÕES

Na área Utilização de Api´s clique em Gerar Token




Guarde este número

Agora logue no painel administrativo de sua loja e vá para MÓDULOS>>MÓDULOS



Role a página até o campo de busca e digite "pagseguro"

modulo-prestashop-pagueseguro

Clique em Instalar para instalar o módulo.


Após instalado você será redirecionado a primeira aba da configuração.

Preencha :



E-MAIL: o e-mail que você usa para logar no Pague Seguro
TOKEN: Insira aqui o token gerado pelo pagueseguro
CHARSET: Codificação usada pelo seu sistema, nesta caso UTF-8
CHECKOUT:  Para uma janela que sobreponha a loja escolha LIGHBOX,. Para a versão do Prestashop 1.6 pode acontecer que configurando como PADRÃO cause erros no pagamento. Então deixei como LIGHTBOX.

Clique em Salvar




Caso você esteja usando certificado SSL em sua loja é necessário que clique em EXTRAS e altere de http para https



Clique em Salvar

Agora vá na sua hospedagem e pelo gerenciador de arquivos edite o arquivo "caminho da sua loja" /modules/pagseguro/features/payment/pagseguropaymentorderprestashop.php

Na linha 88 substitua

'action_url' =>  _PS_BASE_URL_ . __PS_BASE_URI__ .$this->returnUrlPaymentForVersionModule(),
 
por 

 'action_url' => preg_replace("/^http:/i", "https:", _PS_BASE_URL_) . __PS_BASE_URI__ .$this->returnUrlPaymentForVersionModule(),

 e salve as mudanças.



Pronto, do jeito que está já estará funcionando o processo de pagamento pelo Pague Seguro.


Mantive um produto que é o Plugin Tradutor por bandeiras com um valor bem irrisório só para poder mostrar o procedimento de pagamento aqui no blog.

Como nossa loja exemplo é de produtos virtuais, não será obrigatório a parte de entrega.


Se quiser colaborar com o blog testando você mesmo efetuando a compra do módulo fiquem a vontade. Ainda levam o "Plugin Tradutor por bandeiras". hehehe

Eu mesmo vou efetuar uma compra com cartão  para poder mostrar todos os processos.

Após adicionar o produto no carrinho e finalizar o pedido é mostrado um resumo da minha compra.



Então o comprador clica em Finalizar Pedido.

O comprador pode criar uma conta, usar a Finalização Instantânea ou se já tiver conta apenas logar na conta. Já tenho conta então farei login na minha conta.

Posso então adicionar um novo endereço para entrega (o que no caso de um produto virtual não é necessário) ou então prosseguir para o endereço de cadastro clicando em Finalizar Pedido



Como é um produto virtual, não serão mostrados opções de transportadoras, apenas disponibilizando para que eu concorde com os Temos de serviço. Então marco concordando com os termos e clico em Finalizar pedido.

Mostrará o resumo com o valor dos produtos, impostos e frete grátis. Frete grátis por ser um produto o qual não necessita de uma transportadora.

Logo abaixo do resumo é mostrado a opção de pagamento. Clico nela.



É mostrado novamente para que eu confirme minha compra. Clico então em Confirmo minha compra.



Após é aperto a aplicação do PagueSeguro para que eu efetue o pagamento



Após informar meu e-mail e Avançar, é levado para preenchimento do CPF e telefone .


Preencho e clico em Escolher o meio de pagamento

Agora ele me oferece opção de pagar com cartão de crédito ou boleto. Vou pagar com cartão.


Continuo informando dados do dono do cartão :CPF, CELUALR, DATA NASCIMENTO COMO SEGURANÇA.


Confirmo o pagamento.

Ele irá processar o pagamento


O pagamento sendo aprovado será mostrado o resultado informando que a transação foi aprovada com o código da transação.

A loja receberá todos os avisos no e-mail configurado, tanto do pedido quanto do pagamento e o comprador receberá tanto todos os avisos de compra, aprovação de pagamento quanto também o e-mail disponibilizando o link para baixar o arquivo. Uma vez que ele comprou um produto virtual.

Veja abaixo print do e-mail contento o link do arquivo conforme o produto virtual adquirido

No caso do exemplo eu configurei  neste produto que o mesmo só poderia ser baixado uma vez e inseri um prazo para download.

Veja o funcionamento on line colaborando com o blog clicando aqui


Se gostou do post.. comente.. Valeu galera.




PRESTASHOP 1.6 - Configurando e-mail de alerta de pedidos




Para que você não tenha que ficar entrando no painel de sua loja todos os dias para verificar os pedidos feitos, é interessante que seja comunicado por e-mail.

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.

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





 Role a página até o final e localize a área "TESTE SUA CONFIGURAÇÃO DE E-MAIL"

Informe qual a conta de e-mail vai querer receber as notificações e clique em Enviar um e-mail de teste


Caso seu teste não foi bem sucedido, você pode prsseguir com este tutorial. Ou você ajustar as configurações optando por php mail e até mesmo utilizar configurações smtp. Na área E-MAIL logo acima da área informada acima você faz os ajustes.

Sendo que o teste ocorreu tudo ok cesse o menu MÓDULOS>>MÓDULOS






No campo de busca procure por Mail alerts OU Alertas de correio


Será listado abaixo, agora clique em Instalar

Após instalar as configurações já serão abertas para que seja configurado de acordo com suas necessidades. Caso não esteja bastar clicar em Configurar

Na tela de configuração, no último campo informe quais os e-mail gostaria que recebesse as mensagens de alertas da sua loja



Depois basta clicar em salvar.











 

26/02/2017

PRESTASHOP 1.6 - Como remover a assinatura Prestashop nos e-mails enviados pela loja












 Em outra postagem mostramos como remover o nome Prestashop no rodapé da loja Prestashop. Hoje iremos mostrar como remover a assinatura Prestashop no rodapé dos e-mails automáticos enviados pela nossa loja.




Então logue na área administrativa de sua loja e vá para LOCALIZAÇÃO>> TRADUÇÕES



 Na áre MODIFICAR TRADUÇÕES , em tipo de tradução selecione "Traduções de templates de e-mail"

Já que estamos alterando o tema padrão ,  em Selecione seu tema mantenha o padrão.

Em Selecione seu idioma , selecione o idioma a qual deseja faze as modificações. No meu caso Português BR.

Depois clique em "Modificar"



Na área e-mail do Prestashop clique em E-mails do Prestashop



Agora vem a parte chata. A cada título, tem que entrar e fazer as alterações devidas.

Vamos começar como exemplo em account , que é o e-mail de agradecimento após um novo cliente criar uma conta na sua loja:


Então neste caso clico em account e abrirá o template de como é visto no e-mail. 


Vamos então apagar a parte no rodapé "baseado em Prestashop"

Clique em então em Editar versão HTML




Marque a área que quer apagar e aperte a tecla Delete do seu teclado para concluir a ação.


 Agora clieque em Salvar e permanecer, pois você terá que fazer o mesmo em todos os outros modelos.



Para o modelo acima, prontinho.Agora é ter paciência e fazer em todos os outros.



24/02/2017

Bandeiras para tradução de idioma automático no website Webacappella



TEMA: Idioma
ARTIGO: Revisado e Melhorado
VERSÃO: WARC  |  WA 4
 Olá Galera do bem!!

Penso assim, quando a idéia é boa por que não aproveitar?

Pois o artigo de hoje os créditos principais vão para Rafael Clares criador do código original, eu só fiz uma aplicaçãozinha.

Pois hoje vamos ver como por umas bandeirinhas  para mudar o idioma do site. Muito bom para sites de hotéis, empresas de turismo, eventos internacionais e etc e até mesmos músicos.

Então o site vai ganhar umas bandeirinhas de países, e ao clicar nas bandeirinhas o site vai traduzir para o idioma correspondente.

Obviamente conteúdos de vídeos, figuras, ou Textos que na verdade são figuras e ou os quais foram marcados no WebAcappella para Transformar o Texto em Imagens  não serão traduzidos.

Outro detalhe importante que se deve observar é a área do texto ocupada para que não se transforme em frame e nem ficam encavalados sobre outros componentes do site. Pois em algumas linguagens a tradução ocupa muito mais espaço do que o texto na língua Brasileira.(isto no caso esteja usando algum sistema administrativo de conteúdo que utilize frames)

Mas tem uma boa notícia, se você usa sistemas de administração de conteúdo , visualmente o conteúdo mostrado no site é traduzido.

Primeiramente baixe o arquivo compactado clicando aqui e descompacte.


Poste a pasta tradutor com seus respectivos arquivos para sua hospedagem:


Código para inserir no HEAD do site

<meta http-equiv="Content-Type" content="text/html;" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="tradutor/js/tradutor.js"></script>
<style>
#google_translate_element, .goog-te-banner-frame, .goog-te-balloon-frame, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip:hover { display:none !important; }
html, body { top: 0 !important; }
font { background: transparent !important; color: inherit !important; font: inherit !important; }
font:hover, .goog-text-highlight:hover, .goog-text-highlight { -webkit-box-shadow: inherit !important; -moz-box-shadow: inherit !important; box-shadow: inherit !important; box-sizing: inherit !important; -webkit-box-sizing: inherit !important; -moz-box-sizing: inherit !important; }
.topo-box-bandeira{display:inline-block}
</style>

 Para utilizar as bandeiras na horizontal utilize este código:


 <body>
<div id="google_translate_element"></div>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<center><div class="topo-box-idioma">
<div class="topo-box-bandeira">
<a href="javascript:void(0)" class="pt" onclick="ChangeLang('pt')" title="Traduzir para portugu&ecirc;s"><img src="tradutor/images/portugues.gif" border="0" alt="Portugues" /></a>
</div>
<div class="topo-box-bandeira">
<a href="javascript:void(0)" class="en" onclick="ChangeLang('en')" title="Translate to English"><img src="tradutor/images/english.gif" border="0" alt="English" /></a>
</div>
<div class="topo-box-bandeira">
<a href="javascript:void(0)" class="es" onclick="ChangeLang('es')" title="Traducir al espa&ntilde;ol"><img src="tradutor/images/espanol.gif" border="0" alt="Spanish" /></a>
</div>
<div class="topo-box-bandeira">
<a href="javascript:void(0)" class="it" onclick="ChangeLang('it')" title="Traduci in italiano"><img src="tradutor/images/italiano.png" border="0" alt="Italian" /></a>
</div>
<div class="topo-box-bandeira">
<a href="javascript:void(0)" class="de" onclick="ChangeLang('de')" title="&Uuml;bersetzen in Deutsch"><img src="tradutor/images/alemao.png" border="0" alt="Deutsch" /></a>
</div>
<div class="topo-box-bandeira">
<a href="javascript:void(0)" class="fr" onclick="ChangeLang('fr')" title="Traduire en fran&ccedil;ais"><img src="tradutor/images/frances.png" border="0" alt="French" /></a>
</div>
</div>
</body>
</html>


 Para utilizar as bandeiras na vertical utilize este código:


<body>
<div id="google_translate_element"></div>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<br />
<div class="navbar">
<center><div class="navbar-inner">
<ul class="nav">
<li><a href="javascript:void(0)" class="pt" onclick="ChangeLang('pt')" title="Traduzir para portugu&ecirc;s"><img src="tradutor/images/portugues.gif" border="0" alt="Portugues" /></a></li>
<li><a href="javascript:void(0)" class="en" onclick="ChangeLang('en')" title="Translate to English"><img src="tradutor/images/english.gif" border="0" alt="English" /></a></li>
<li><a href="javascript:void(0)" class="es" onclick="ChangeLang('es')" title="Traducir al espa&ntilde;ol"><img src="tradutor/images/espanol.gif" border="0" alt="Spanish" /></a></li>
<li><a href="javascript:void(0)" class="it" onclick="ChangeLang('it')" title="Traduci in italiano"><img src="tradutor/images/italiano.png" border="0" alt="Italian" /></a></li>
<li><a href="javascript:void(0)" class="de" onclick="ChangeLang('de')" title="&Uuml;bersetzen in Deutsch"><img src="tradutor/images/alemao.png" border="0" alt="Deutsch" /></a></li>
<li><a href="javascript:void(0)" class="fr" onclick="ChangeLang('fr')" title="Traduire en fran&ccedil;ais"><img src="tradutor/images/frances.png" border="0" alt="French" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>


 IMPLANTANDO NO WEBACAPPELLA 4

Primeiramente deve ser inserido o código no head do site

Para isso selecione a opção no menu principal SITE>> PROPRIEDADES DO SITE

Na tela que se abrir clique no ícone da catraca



Insira o código do head logo no início do campo Código Html 



 Ná página que for inserir as bandeiras adicione um elemento HTML


 Cole o código no último campo


Posicione e ajuste as dimensões na página conforme desejar.


 IMPLANTANDO NO WEBACAPPELLA RC (v5 - responsive)

Primeiramente deve ser inserido o código no head do site

Logo na página inicial após abrir o projeto clicque em Website sttings

 
 Rele a página até HTML custom code e clique em Edit Html Code


 Cole logo no inicio o código do head fornecido no inicio deste artigo



Selecione o box onde deseja inserir as bandeiras.

Insira no box um componente HTML 


Cole o código desejado no campo de código conforme imagem abaixo:





PERSONZALIZANDO

Esta é a parte no código referente a cada bandeira



class="pt" onclick="ChangeLang('pt')" title="Traduzir para portugu&ecirc;s"><img src="tradutor/images/portugues.gif" border="0" alt="Portugues"

Então se quiser trocar o idioma escolhido faça as devidas substituições nas partes em negrito

Caso deseje trocar as bandeiras, substitua as imagens dentro da pasta  /tradutor/images na hospedagem
Neste site você encontra bandeiras de todos os países em circulo. http://aimore.net/bandeiras.htm



Prontinho.. Agora seu site tem bandeirinhas de idioma  pra ficar traduzindo os textos. 

Lembrando que a tradução segue o mesmo padrão do google Tradutor. 


Uma boa semana a todos e grande abraço



http://www.webacappellashow.com.br/templates/wasrockinroll/




18/02/2017

PRESTASHOP 1.6 - Módulo para limpar dados exemplos da loja prestashop








Como pode ser ver nossa loja exemplo já está quase pronta para colocoar em funcionamento. Portanto quando se instala o Prestashop, vem acompanhado dados exemplos, como categorias, produtos pedidos e etc.

Existe um módulo que pode facilitar a exclusão destes dados e estaremos disponibilizando ele em nossa loja teste.

Para executá-lo primeiramente baixe ele em nossa loja gratuitamente clicando aqui.

Após baixado vá para MÓDULOS>>MÓDULOS



Na barra superior clique em Adicionar novo módulo



Role a página e  clique em Escolha um arquivo , localize o arquivo no seu computador e carregue-o


E clique em Enviar este módulo

Aguarde até aparecer a mensagem  O módulo foi baixado com sucesso.




Role a página até o campo de busca, a direita caso não aparecer o módulo Prestaqshop Cleaner, digite no campo de busca para que o mesmo seja exibido.



Clique em Instalar

Após instalado ele já abre as opções para execução.

* ATENÇÃO: O PROCESSO É IRREVERSÍVEL, NÃO DÁ PRA VOLTAR ATRÁS.

Selecione então a opção conforme deseja executar e da prosseguimento . No caso da nossa loja exemplo que já cadastramos categorias e produtos vamos executar somente a opção de PEDIDOS E CLIENTES em que será removido somente  clientes, carrinhos, ordens, conexões, convidados, mensagens, estatísticas ...

Marco como SIM  e executo o botão correspondente a função. 

Prontinho.















Related Posts Plugin for WordPress, Blogger...