StoreCart v3 - Template Blogger

Nesta versão várias modificações foram feitas. Além do Cálculo de Frete que é certamente a mais importante , o template também aceita :
       -  opções para os produtos como cores e tamanhos;
       -  os valores monetários seguindo a notação da  nomenclatura brasileira com ponto e vírgula para divisão dos milhares e centavos respectivamente.

Video Promocional :

Visualizações do template.

Homepage

         Homepage com  área do carrinho expandida

Exemplo de página para um produto :

         Exemplo de compra de um produto com opções

   

Área do carrinho

    Página do PagSeguro

    As opções são separadas por uma barra " / " .

Frete

O cálculo do frete é feito pelo PagSeguro e é  mostrado  automaticamente após a inserção do CEP do comprador,o qual pode optar pelos métodos de envio PAC ou Sedex ( envio mais rápido ) como se pode observar na imagem anterior.


Para uma visualização real  do template em funcionamento clique neste link

- obs: a integração com o PagSeguro não é realizada nesta exemplo para evitar que pessoas incautas ou de má fé comprassem produtos fictícios ,o que poderia causar problemas em minhas contas pessoais do PagSeguro.As pessoas que adquirirem o template devem inserir o e-mail de sua conta pessoal do PagSeguro  no template


 Considerações preliminares

Este template permite uma forma  bastante simples de criação de uma  loja virtual , mas não deve ser considerado como uma solução permanente pois o template não conta com:
- envio automático de e-mails ( tais como : agradecimentos e confirmação  de compra ) ;
- disponibilidade  de download automático para pagamentos confirmados de produtos digitais ;
- controle de estoque;
- layout responsivo ou flexível,que se ajusta a resolução de tela do comprador. 
Sendo assim , não recomendável para venda de grande quantidade de produtos ou caso se atinja um grande volume de vendas.
Seria uma primeira experiência para pessoas que não tem recursos financeiros para contratar alguma firma para criar uma loja virtual com todos os recursos  ou pagar hospedagem em servidores , ou mesmo por falta de conhecimento técnico .


Como adquirir o template StoreCartv3 .

O template agora é gratuito, é só fazer o download neste link

Clicando no link acima  irá abrir uma nova aba em seu navegador .Clique na seta marcada ,como na imagem abaixo ,e faça  o download.

O template pode ser adquirido na loja  pixelson.com.br.Após o pagamento deve-se aguardar até a compensação do mesmo pelo PagSeguro para a liberação do download do template.
  O prazo para compensação depende da forma de pagamento : boleto bancário,cartão de crédito,débito on-line.
Veja os prazos neste link do PagSeguro

Modificações no template por necessidades ou escolhas pessoais ( alterações  em : cores de partes do Layout ,modificações em fontes,e semelhantes... ) tem de serem feitas por conta das  pessoas que adquirirem o template.Para tais alterações não darei suporte, mas , me disponibilizo para ser contratado ( mediante pagamento de taxa de serviço ) para faze-las.

As doações  estão temporariamente desabilitadas

Instruções para utilização do template StoreCart v3

Pré-requisitos  ( ambos gratuitos ) :

• Conta  Blogger
• Conta PagSeguro configurada como vendedor e verificada 

          - para venda de produtos físicos com cálculo de frete por peso é necessário configurar
            o item frete em sua conta.

O valor de peso dos produtos tem de ser especificados em gramas e o PagSeguro calcula o frete com base em valores declarados ( acréscimo de 10% no valor do frete ) , que é uma garantia de ressarcimento do valor declarado do objeto em caso de extravio, roubo ou dano.

Imagens de produtos

As imagens tem tamanho de 290 x 300 ( pixels ).Juntamente com o template encontram-se 2 arquivos modelos para os editores de imagens Adobe Photoshop e GIMP ( gratuito ).
Para inserir suas próprias imagens de produtos faça o upload delas e depois   coloque o link nos modelos utilizando algum editor de texto ( sem formatação ) como o bloco de notas ( windows).




Procure por class="item_thumb" nos modelos de postagem e coloque o link de sua imagem em src="link_de_sua_imagem"

<img border="0" class="item_thumb" src="link_de_sua_imagem" />

 Note que para esta tag img é declarada uma class="item_thumb" ,sem esta class  não aparecerá posteriormente, na área do carrinho, o thumbnail do produto.


Se você tiver o Adobe Photoshop e queira otimizar suas imagens realçando cores.luz ou contraste,veja este tutorial . Exemplo:

 Modelos de postagem

Existem vários modelos que dependem das características do produto , se tem opções( cores , tamanhos , etc.) ou não , se são produtos digitais (imagens,templates,programas) .

• Exemplo de produto com opções

<table border="1" class="produto" style="width: 620px;">
<tbody>
<tr>
<th width="360"><img border="0" class="item_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTvMy1Fy4Zb0roDT4BPRIpbooAdZeiY9aKs-kJNzGPG8vw2O8uuOWRcnok-3VcCGPNG_U3AZnHudAoI3RVG_FvU6INOwICdALCrm7eJnNgZVkf3ZdkFlCGIPVnYv3g-ygj4ZM52k2oc20/s1600/9.jpg" />
</th>
<td width="440"><span class="adjust_button">
<button class="item_add">
<i class="fa fa-shopping-cart" style="margin: 0 5px 0 0;"></i> Comprar</button>
</span>
</td>
</tr>
<tr><th><b>Nome do Item </b></th><td class="item_name">Colors</td></tr>
<tr><th><b>Preço</b></th>  <td class="item_price">R$9,90</td></tr>
<tr>
<th width="120">Quantidade</th>
<td><input class="item_Quantity" style="width: 40px;" type="text" value="1" /></td>
</tr>
<tr>
   <th width="120">Cor</th>
   <td><select class="item_option1">
   <option value="Branca"> Branca </option>
   <option value="Preta"> Preta </option>
   <option value="Vermelha"> Vermelha </option>
 </select>
  </td>
</tr>
<tr>
   <th width="120">Tamanho</th>
   <td><select class="item_option2">
   <option value="P"> P </option>
   <option value="M"> M </option>
   <option value="G"> G </option>
   <option value="GG"> GG </option>
  </select>
  </td>
</tr>
<tr><th><b>Peso (g)</b></th><td class="item_weight">100</td></tr>
<tr><th><b>Descrição</b></th>  <td class="item_Description">Camiseta em algodão 100%</td> </tr>
<tr><th><b>Quantidade em Estoque</b></th><td>50</td></tr>
<tr><th><b>Informações adicionais</b></th><td>Informações Adicionais</td></tr>
</tbody></table>

    Obs:  - Pode-se definir até 2 opções por produto.

              - O peso tem de ser especificado em gramas dentro da class "item_weight"

                  <td class="item_weight">100</td>
       
                 No exemplo acima o peso do produto por unidade é de 100 gramas.

• Exemplo de produto sem opções

<table border="1" class="produto" style="width: 690px;"><tbody>
<tr>
  <th width="360">
<img border="0" class="item_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix530BsSJ6i22slRxmwBzuQe2HvP_gMMbmgbjb_Xwjtb9-eheSF8k2X1QERPNS3Xtnv2gzJDndDlLkN_MW0m-_sjjRhNImoXnVIvxKqbCZkfo28tslrVzGP9hs2Vx86ktIimaWaThHWyg/s1600/computer.jpg"/>
</th>
  <td width="440">
<span class="comprar"><button class="item_add"><i class="fa fa-shopping-cart" style="margin:0 5px  0 0;"></i> Comprar</button></span>
</td>
</tr>
<tr><th><b>Nome do Item </b></th>  <td class="item_name">Laptop Dell</td></tr>
<tr><th><b>Preço</b></th>  <td class="item_price">R$ 1500,00</td></tr>
<tr><th><b>Peso (g)</b></th>  <td class="item_weight">2000</td></tr>
<tr><th><b>Descrição</b></th>  <td class="item_Description">Notebook</td> </tr>
<tr>  <th><b>Quantidade em Estoque</b></th>  <td>Quantidade em Estoque!</td></tr>
<tr>  <th><b>Informações adicionais</b></th>  <td>Informações Adicionais</td></tr>
</tbody></table>

• Exemplo de produto digitais ( sem peso )

<table border="1" class="produto" style="width: 690px;">
<tbody>
<tr>  <th width="360"><div class="separator" style="clear: both; text-align: center;">
<img border="0" class="item_thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix530BsSJ6i22slRxmwBzuQe2HvP_gMMbmgbjb_Xwjtb9-eheSF8k2X1QERPNS3Xtnv2gzJDndDlLkN_MW0m-_sjjRhNImoXnVIvxKqbCZkfo28tslrVzGP9hs2Vx86ktIimaWaThHWyg/s1600/computer.jpg" /></div>
</th>  <td width="440"><span class="comprar"><button class="item_add"><i class="fa fa-shopping-cart" style="margin: 0 5px 0 0;"></i> Comprar</button></span></td></tr>
<tr>  <th><b>Nome do Item </b></th>  <td class="item_name">Laptop Dell</td></tr>
<tr>  <th><b>Preço</b></th>  <td class="item_price">R$ 1500,00</td> </tr>
<tr><th><b>Descrição</b></th>  <td class="item_Description">Notebook</td> </tr>
<tr>  <th><b>Informações adicionais</b></th>  <td>Informações Adicionais</td></tr>
</tbody></table>

Remover ou inserir itens nos modelos de postagem

Cada item ( Nome do item,Preço,quantidade,etc.) ou linha é  "enclausurado" pelas tags <tr> e </tr>.
Supondo que queremos remover o item "Descrição" como identificado na imagem acima.Para  isto é só procurar no modelo de postagem a palavra "Descrição" e identificar as tags mais próximas "tr".Neste caso o código html a ser removido seria :

<tr><th><b>Descrição</b></th><td class="item_Description">Camiseta em algodão 100%</td> </tr>

Seguindo este raciocínio , pode-se adicionar uma nova linha ,caso necessário,seguindo o seguinte código modelo :

<tr><th><b>Novo Item</b></th><td >Descrição Novo Item</td> </tr>

Note que o trecho  class="item_Description" foi retirado do código modelo acima para evitar possíveis conflitos com nomes de class utilizados pelo script que controla o carrinho de compras .

Configuração das postagens

Vá em Layout >  Blog Posts  >Editar .

 Coloque  9 em "Número de postagens na página principal" e desmarque opções como data,local,etc.., seguindo o exemplo como na imagem abaixo :

 Após desmarcar as opções de postagens como na imagem acima,clique em SALVAR.

 Intruções para inserção da conta PagSeguro no template.

Vá em Modelo > Editar HTML >Prosseguir e procure por  email: "seuemail@seuemail.com"  . Clicando dentro da janela e utilizando  as teclas Ctrl+F  e digitando  no campo de pesquisa  a expressão se consegue mais facilmente encontar o texto.

 simpleCart({
  checkout: {
    type: "PagSeguro",
    email: "seuemail@seuemail.com"
   }
 }); 

Onde está  "seuemail@seuemail.com" , coloque o e-mail de sua conta PagSeguro e clique em Salvar modelo.Com isto feito ,o template já está pronto para utilização.

Alteração de fontes 

 

Para fazer estas alterações é aconselhável ter um mínimo de conhecimento em CSS,pois podem ocorrer distorções no layout.

Se quiser entender um pouco mais sobre CSS ,caso  não tenha conhecimento,veja este tutorial básico.

Área do menu e carrinho.

Procure dentro do código do template o seguinte trecho :

body, .body-fauxcolumn-outer{
 .
 .
 font:x-small Georgia Serif;
.
.
.
}

dentro do seletor ''body, .body-fauxcolumn-outer" se encontra ,entre várias outras, a propriedade font.Originalmente a fonte utilizada é a Georgia Serif.

Área dos posts.

Títulos dos posts.

Procure dentro do código do template o seguinte trecho :

.post h3 a {

    font: bold 12px Arial !important;

    margin-top: 10px;

}

Originalmente a fonte utilizada é a Arial.

Preços do produtos.

Código a ser procurado :

.simpleCart_shelfItem {

    border-collapse: collapse;

    font: 14px Arial;

}

Sidebar.

Títulos de widgets.

Código a ser procurado :

#sidebar-wrapper h2 {

    border-bottom: 1px dashed #d9d9d9;

    font: 16px Arial;

    padding-bottom: 10px;

}

 Conteúdo de widgets.

Código a ser procurado :

.widget-content {

    font: 14px Arial;

}

O template StoreCart v3 é licenciado sob Creative Commons
É proibida a comercialização do template e derivativos


StoreCart v3 by PixelsOn is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.
Based on a work at http://projetoecommerce.blogspot.com.br/2014/08/storecart-v3.html.
Permissions beyond the scope of this license may be available at http://projetoecommerce.blogspot.com/.

Adicionar Formulário de Contatos em Página Estática.

No blog da loja modelo pode-se visualizar o resultado final

 1.Vá em Layout > Adicionar um Gadget.Na janela  Adicionar um Gadget selecione "Mais Gadgets" e adicione  o Gadget Formulário de Contatos.

2.Este procedimento é para desabilitar a visualização do formulário na Sidebar.

Procure pelo seguinte comentário dentro do template:

 //* Dark Style ---------     que está um pouco acima do código :

]]></b:skin>


Coloque antes do comentário  " //* Dark Style ---------"     o  seguinte código :

#ContactForm1
{
display: none ! important;
}

 O código do template deverá ficar como na imagem abaixo:

3.Adicionar o formulário a uma página estática.

    Crie uma página estática,selecione HTML em modo de edição e coloque o seguinte código :

<div>Texto Adicional 1</div>
<div>
<form name="contact-form">
Name : <span style="color: red; font-weight: bolder;">*</span><br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
Email : <span style="color: red; font-weight: bolder;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message : <span style="color: red; font-weight: bolder;">*</span><br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<div>
<span style="color: red; font-weight: bolder;"> * Preenchimento Obrigatório</span> </div>
<br />
<div>Texto Adicional 2</div>

Salve a página .

4.Colocar o link da página estática no menu do layout .

 Procure pela palavra contatos dentro do template e coloque o link de sua página dentro dos parenteses em href="link_de_sua_pagina"

A visualização do formulário deverá ficar como na imagem abaixo :

Obs : Se não necessitar de algum dos textos adicionais basta remove-los  do código inserido na página estática .

Outras notificações :

- Alguns usuários relataram o não aparecimento de posts ou produtos em categorias ou mesmo na página principal.Fiz testes no template Storecart v3 e também em templates originais Blogger sem qualquer modificação . A origem do problema  parece ter relação com a quantidade de produtos postados num mesmo dia ,problema este que constatei também em templates originais do Blogger.
Por este motivo ,limite a quantidade de  inserção de novos produtos na mesma data  em cerca de 5 produtos/dia.

 - O layout do template na parte Administrativa não está sendo visualizado totalmente no navegador Google Chrome:

 enquanto nos navegadores Mozilla Firefox e Internet Explorer pode ser visto normalmente:

A origem do problema parece ter relação com uma nova versão do Google Chrome,pois inicialmente o  Layout era visto normalmente .
A correção do problema ainda está em andamento.