Loja Virtual Simples somente com Joomla

(1)

Loja Virtual Simples somente com Joomla

Criando uma pequena loja virtual somente com o Joomla, que permita pagamento direto via depósito ou transferência bancária, mas também que ofereça opções de compra pelo PagSeguro e pelos cartões de crédito Visa e MasterCard com o PayPal.

Os softwares de loja virtual atualmente apresentam dificuldades, especialmente para o gerenciamento da loja. Uma loja com o Joomla tem como grande virtude a facilidade de gerenciamento dos produtos.

Este projeto cria uma loja virtual simples apenas com o Joomla 2.5.19 sem nenhuma extensão de terceiros. Instalei o Joomla somente para a loja com o framework Gantry para oferecer conforto aos visitantes com celulares e tablets.

Cada artigo de produto terá: Imagem miniatura

Nome do Produto Preço

Leia Mais

Imagem alinhada à esquerda. Espaçamento vertical e horizontal de 10 e borda 2. Nome do Produto

Descrição Preço

Opções de compra direta (depósito ou transferência bancária)

e um botões para comprar através do PagSeguro e do Paypal com Visa e CredCard. Após instalar o Joomla, instalei o idioma pt-br no site e no admin.

Recomendações Importantes

- As imagens devem ser de ótima qualidade/resolução

- Cada imagem deve ser redimensionada individualmente e todas as miniaturas devem ter exatamente o mesmo tamanho. Assim como também todas as imagens grandes devem ter exatamente o mesmo tamanho.

URL Amigáveis

(2)

Configurar artigos

Aqui está o segredo maior da loja

Conteúdo - Gerenciador de Artigos - Opções

Vou citar somente as opções que precisam ser mudadas Artigos

Título - Ocultar

Títulos como link - Não Introdução - Ocultar Categoria - Ocultar Link da Categoria - Não Autor - Ocultar

Data de publicação - Ocultar Exibir navegação - Ocultar

Exibir Título no Leia Mais - Ocultar Ícones - Ocultar

Ícones de impressão - Ocultar Ícones de e-mail - Ocultar Acessos - Ocultar

Configurar Menus

Menus - Main Menu – Home ou Iniciar - Opções de Layout Artigos principais - 0

Introdução Artigos - 8

Colunas - 4

Links - 4

Teremos assim 4 colunas, cada linha com 4 artigos e 8 artigos por página.

Estas configurações devem ser aplicadas também para cada menu de categoria em blog. Vá em Menus – Main Menu - Moda Feminina – Opções de Layout do Blog à direita

Regras Úteis

Em cada artigo o Apelido deve ser o código do produto.

Exemplos: modaf01, diver13, modaf15 (estes códigos devem ser inseridos no cadastro dos produtos no Paypal e PagSeguro, lembre disso).

Cada imagem de produto deve vir em dupla:

uma imagem grande cujo nome sendo o código do produto mais extensão e uma miniatura, com nome o código e min ao final mais extensão:

Exemplo:

imagem - modaf01.jpg miniatura - modaf01min.jpg

(3)

Sugestões

- Trocar a imagem dos botões.

- Colocar link também na imagem do produto.

- Abaixo do artigo mostrar uma vídeo-aula de demonstração do produto. Vamos criar duas categorias de produtos:

Moda Feminina Diversas

Configurar Plugin do Editor TinyMCE

Extensões – Gerenciador de Plugins – Editor TinyMCE Funcionalidade – Extendido – Salvar e Fechar

Assim nosso editor apresentará mais recursos, como o botão construtor de tabelas. Enviar as imagens dos produtos para o servidor

Criar uma pasta para as imagens da loja em: loja\images\camisetas

Criando um Artigo Passo-a-passo

Conteúdo – Gerenciador de Artigos – Novo Artigo

Vou usar nomes genéricos para as camisetas, mas é importante usar nomes mais adequados e específicos.

Titulo – Moda Feminina 01 Apelido – modaf01

Inserir a imagem da miniatura camisetas\moda01min.jpg Clicar abaixo em Imagem

Clicar na pasta camisetas e selecionar moda01min.jpg. Repita o nome da camiseta abaixo da miniatura e em negrito: Moda Feminina 01

Logo abaixo entrei com o preço, mas fique bem à vontade. Talvez seja mais indicado entrar o preço apenas no artigo principal da camiseta, abaixo do Leia Mais.

(4)

Abaixo insira um Leia Mais... Ficará assim:

Insira um link para este artigo na miniatura. Quando o cliente clicar no Leia Mais ou na miniatura ele abrirá o artigo final.

Link da miniatura. Salve o artigo. Vá ao site e clique no leia mais do artigo. Pegue o link e copie apenas a parte após loja. Exemplo:

http://tiagoarts.com/loja/moda-feminina/3-modaf02 Neste caso use apenas: moda-feminina/3-modaf02

Este procedimento deixa seu site menos inseguro, pois o link fica apenas interno. Abaixo da linha vermelha pontilhada do Leia Mais insira a foto em tamanho normal moda01.jpg

(5)

Agora clique na imagem e depois clique no botão Image do editor. Image Description – Moda Feminina 01.

Alignment – left.

Vertical Space e Horizontal – 10 Border - 2

Ficará assim:

Abaixo da imagem tecle Enter duas vezes. Suba uma linha e insira uma linha com o editor.

Abaixo da linha insira o botão de Comprar do PagSeguro e o do PayPal. Veja como proceder a seguir.

Cadastrar cada um dos Produtos no PagSeguro e no PayPal PayPal

https://www.paypal.com/br/cgi-bin/webscr?cmd=_singleitem-intro-outside

Clique em Crie seu botão agora mesmo e siga as instruções. Claro que precisa de uma conta no PayPal.

(6)

PagSeguro

Acessar sua conta e cadastre cada um dos produtos e crie um botão para cada um. Copie o código do botão e cole no site da loja.

http://pagseguro.com.br Login Vender Manual de integração Documentação Botões de Pagamento

Categorias - Roupas e Acessórios Identificação da fatura - promo01 Colando os Códigos no Editor

Como é um código HTML, precisamos clicar no botão HTML do editor para inserir. Clique abaixo da linha e clique no botão Código Fonte, com HTML.

Entre este código (claro que deve adaptar para o seu código): <p><strong>Pagamentos Digitais com</strong></p>

<p><em><strong>PagSeguro, PayPal, Visa, Credcard, American Express</strong></em></p>

<form target="pagseguro"

action="https://pagseguro.uol.com.br/checkout/v2/payment.html" method="post">

<input type="hidden" name="code"

value="DD325B4BCECEC8B664191FA41ECD91F1" /> <input type="image"

src="https://p.simg.uol.com.br/out/pagseguro/i/botoes/pagamentos/209x48-comprar-assina.gif" name="submit" alt="Pague com PagSeguro - é rápido, grátis e seguro!" /> </form>

</td> <td>

(7)

<input type="hidden" name="bn"

value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest"> <input type="image"

src="https://www.paypalobjects.com/pt_BR/BR/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - A maneira fácil e segura de enviar pagamentos online!"> <img alt="" border="0" src="https://www.paypalobjects.com/pt_BR/i/scr/pixel.gif" width="1" height="1"> </form> </td> </tr> </tbody> </table> Clique em Update Desabilitar Plugin

(8)

Como Ficou o Site

Salve, acesse o site e veja como ficou. Clique no botão Leia Mais e depois clique no botão Comprar do PagSeguro.

(9)

Copiei o artigo para mais 3 e fiquei com 4 artigos idênticos assim no site:

Referências

Caso queira mais detalhes veja os 3 vídeos de onde adaptei esta ideia.

Sou grato ao pessoal do http://megaaula.com.br que divulgou esta ótima ideia. No site existem cursos online.

Vídeos no Youtube:

http://www.youtube.com/watch?v=0WesQSgdU-k http://www.youtube.com/watch?v=Rkan6mhb-SM http://www.youtube.com/watch?v=Glg-IIyAJSc Mais sugestões

A loja está apenas com seus recursos básicos, agora é interessante adicionar outros recursos, como comentários, plugin para divulgar no Facebook, Twitter, Google+, etc, entre outros.

(10)

Portal

Esta loja também pode ficar fazendo parte de um site tipo portal e sendo apenas uma seção do site, com as seguintes características.

Criar uma bonita logomarca

Se usar o Joomla 2.5 instalar o framework Gantry

Itens de Menu do Portal

- Início - Desenhos - Animações - Loja - Contato - Currículo - Mapa do Site

- Endereço (mapa do google)

Criar artigo com detalhes sobre o pagamento direto, com banco, conta, agência, nome Criar um item de menu na Loja para ele. Adicionar um link em cada artigo.

Instalar os módulos nativos

- Novidades - Populares - Contato - Rodapé Módulos de Terceiros - Slide Show - Menu - Mapa do Site

- Mapa do Google com o endereço - Comentários