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 Ative as URLs amigáveis e o mod_rewrite (somente se for suportado pelo servidor)
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
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... 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 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 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.
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-comprarassina.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="ribafs@gmail.com"> <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 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.
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+