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, Virtuemart ou outra. Instalei o Joomla somente para a loja com o framework Gantry para oferecer conforto aos visitantes com celulares e tablets. Este projeto não conta com o carrinho, apenas o botão de compra direta. A meu ver para usar o carrinho deveria optar entre PagSeguro ou PayPal e não os dois, como adotei.

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

Ative as URLs amigáveis e o mod_rewrite (somente se for suportado pelo servidor)

 

Configurar artigos

Aqui está o segredo maior da pequena 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

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.

Preço R$ 23,00

 

Abaixo insira um Leia Mais...

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

Após inserir a imagem tecle enter para gerar uma linha em branco após a imagem.

 

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

 

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.

 

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>

<table style="width: 50%;" border="0">

<tbody>

<tr>

<td>

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

<!-- NÃO EDITE OS COMANDOS DAS LINHAS ABAIXO -->

<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>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">

<input type="hidden" name="cmd" value="_xclick">

<input type="hidden" name="business" value="Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo.">

<input type="hidden" name="lc" value="BR">

<input type="hidden" name="item_name" value="Moda Feminina 01">

<input type="hidden" name="item_number" value="modaf01">

<input type="hidden" name="amount" value="23.00">

<input type="hidden" name="currency_code" value="BRL">

<input type="hidden" name="button_subtype" value="services">

<input type="hidden" name="no_note" value="0">

<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

Desabilite o plugin Conteúdo – Ocultar E-mail para não atrapalhar nas compras.

 

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.

 

Copiei o artigo para mais 3 e fiquei com 4 artigos idênticos 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.

 

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

- Plugin para botões do Facebook, Twitter, Google+

 

Créditos

Este tutorial teve como inspiração 3 vídeos que encontrei no Youtube, cujo título era:

“Criando uma loja no joomla 1.7 com pagseguro aula 01”, ...02 e ...03.

Mas o autor removeu os vídeos e não mais consegui encontrar. Ainda assim preservei os links dos vídeos.

 

Adicionar comentário


Código de segurança
Atualizar

www.000webhost.com