Webstore Lojas Virtuais Criação de TemasWebstore lojas virtuais
Ainda não tem uma loja? Crie agora

Manual para personalização de temas

Introdução

Para personalizar ou criar temas para a loja virtual será necessário ter conhecimento avançado em HTML, CSS e Javascript.

O manual a baixo explica passo a passo como intalar o framework de personalização da Webstore que simulará em sua máquina uma loja virtual identica a loja virtual que deseja personalizar, possibilitando assim que o desenvolvedor tenha uma experiência mais rápida e simples durante o processo.

Instalação do framework

Será necessário ter o Node.js(https://nodejs.org/en/download/) e NPM(https://www.npmjs.com/get-npm) instalados na máquina.

Baixe o framework pelo link https://github.com/webstore-lojas-virtuais/ws-framework-temas

Como instalar
- Descompacte a pasta do framework em C:\WsNode ou alguma outra pasta que desejar


- Navega até a pasta do framework pelo cmd (prompt)


- Execute o comando "npm install" e aguarde a instalação


- Execute o comando "npm install request --save" e aguarde a instalação
- Dentro da pasta do framework, abra o arquivo LOJA.txt e cole a chave que lhe foi fornecido pela equipe da Westore. Caso ainda não tenha a chave, solicite pelo e-mail developer@webstore.net.br.


- Após isso pelo prompt, estando dentro da pasta execute o comando "node download.js", com isso o sistema irá baixar para a máquina o tema atual da loja.


- Após isso pelo prompt, estando dentro da pasta execute o comando "node app.js", isso irá iniciar o servidor em sua máquina.


- Após isso acesse a loja pelo seu navegador via http://localhost:3000
* Mantenha o prompt aberto enquanto estiver editando o tema.

Chave da loja

A chave da loja é uma chave de acesso fornecida pela equipe da Webstore ao lojista ou desenvolvedor para poder personalizar a loja remotamente.

Caso não possua sua chave, solicite para nossa equipe através do e-mail developers@webstore.net.br

Após receber a chave, ele deve ser inserido dentro do arquivo LOJA.txt que fica na raiz da pasta do framework. Após atualiza-lo você deve executar novamente o comando node app.js na pasta.


Personalizando o tema

Para personalizar o layout você deve editar os arquivos exitentes dentro da pasta webstore/layout


Explicação dos arquivos:


Arquivo Descrição
index.html Estrutura HTML da página inicial da loja. Dentro dessa estrutura são importados outros HTMLs mencionados mais abaixo.
topo.html HTML do header da loja, é importado dentro da estrutura index e outras pela tag <!--###TOPO###-->
rodape.html HTML do footer da loja, é importado dentro da estrutura index e outras pela tag <!--###RODAPE###-->
barra.html HTML inserida abaixo do header, geralmente utilizada para inserção de banners de topo, é importado dentro da estrutura index e outras pela tag <!--###BARRA###-->
esquerda.html HTML da barra esquerda da loja, é importado dentro da estrutura index e outras pela tag <!--###BARRA_ESQUERDA###-->
direita.html HTML da barra direita da loja, é importado dentro da estrutura index e outras pela tag <!--###BARRA_DIREITA###-->
complemento.html HTML inserido no final de todos os códigos da loja, geralmente utilizado para inserção de códigos JS, substituido na index e outras estruturas pela tag <!--###COMPLEMENTO###-->

A maior parte das personalizações acabam sendo feitas apenas através de HTML e CSS, porém caso você precise de informações mais específicas, é possível obte-las através de tags ou variáveis js.
Mais abaixo explicaremos essas questões.


Tags HTML de informações da loja

Para puxar informações da loja para dentro do HTML, como telefones, cnpj, e-mail, etc... você pode utilizar o método abaixo para localizar tags que desejar usar.

Utilizando a ferramenta DevTools do seu navegador, na aba Console, execute o comando console.log(WsObjetos); o sistema retornará diversos códigos que você poderá utilizar na loja:

<span rel='ws_InfosLojas_dadoscontato_cnpj'></span>
<span rel='ws_InfosLojas_dadoscontato_pagina_contato'></span>
<span rel='ws_InfosLojas_dadoscontato_fone_1'></span>
<span rel='ws_InfosLojas_dadoscontato_fone_2'></span>
<span rel='ws_InfosLojas_dadoscontato_fone_3'></span>

Existem diversos outros códigos para serem utilizados.


Variáveis JS de informações da loja

É possível puxar informações para dentro da loja através de variáveis javascript, você pode utilizar o método abaixo para localizar variáveis que desejar usar.


Utilizando a ferramenta DevTools do seu navegador, na aba Console, execute o comando console.log(WsGlobalVarsList); o sistema retornará diversos códigos que você poderá utilizar na loja:

Ao executar console.log(WsGlobalVarsList); retornou o seguinte na primeira linha:
InfosLojas_dadoscontato_razao [string]
Seria uma variável WsGlobalVars["InfosLojas_dadoscontato_razao"] do tipo string
Porém como é uma variável carregada assíncrona é necessário alimentar uma variável com uma função que iniciará todo JS feito no tema.

EX:
<script>
var WsJsStart = "funcaoIniciaJs()";
function funcaoIniciaJs(){
var teste = WsGlobalVars["nome_variavel"];
alert(teste);
}
</script>

Arquivo Config.Json

O arquivo config.json deve ser utilizado apenas para edições mais avançadas de temas.
Nesse arquivo é possível definir as cores padrões utilizadas no tema, e também diversos outras informações que são configuradas geralmente na tela do painel da loja em LAYOUT > PERSONALIZAR.

Porém em casos de personalização de um tema para uma única loja é mais aconselhado alimentar as cores diretamente no CSS sem utilizar preferências. Deixando-as dessa forma alteráveis apenas pelo CSS.


O padrão utilizado no arquivo é esse abaixo.

{
   "PREF_1":"ffffff",
   "PREF_2":"005a61",
   "PREF_3":"FFFFFF",
   "PREF_4":"666666",
...
Existem 50 preferências que podem ser setadas.
...
   "MENU_LATERAL":true,
   "MENU_LATERAL_HOME":false,
   "PRODS_PAG":12,
   "PRODS_LINHA":0,
   "BUSCA_TEXTO":"O que está procurando?",
   "CARRINHO_TEXTO":"Meu carrinho",
   "FPGTO":"|1||2||3||4||5||6||9|",
   "modulos":[
   {
      "nome":"wsjs",
      "versao":"1.0",
      "etapa":"*"
   },
...
Esses módulos são responsáveis pela estrutura da loja.
...
}

Para definir as cores padrões do tema, primeiro acesse o painel da loja virtual, vá no menu LAYOUT > PERSONALIZAR > CORES, passando o mouse sobre uma das cores será exibido qual a preferência responsável por ela.



Para utilizar as cores configuradas nas preferências dentro do CSS, faça da seguinte forma:

header{
   background-color: <!--###PREF_1###-->;
   color: <!--###PREF_4###-->;
}

Deploy da personalização

Após finalizar a personalização em sua máquina, claro você vai querer subir ela em sua loja, para isso siga os passos abaixo.


Acesse o painel da loja e navegue até o menu LAYOUT > TEMAS clicam em personalizar um dos temas com título "Personalizado", caso não exista nenhum solicite para nossa equipe pelo e-mail developers@webstore.net.br



Após isso clique na opção AVANÇADO.


Clique na opção Upload/Download


Após isso clique no botão Enviar arquivos, selecione todos arquivos existentes na pasta Webstore/Layout que você personalizou no framework, e clique em enviar.
Aguarde o processe de envio, e após isso salve o tema na tela.


Observações importantes

- Edite apenas os arquivos existentes na pasta webstore/layout

- Para utilizar imagens no layout, envia-as no painel da loja em LAYOUT > PERSONALIZAR > AVANÇADO > IMAGENS e utilize a tag antes do nome do arquivo no código do tema. EX:
footer {
   background-image: url("<!--###IMAGENS_CLIENTE###-->bg-footer.jpg");
}

Suporte

Em caso de dúvidas na personalização do tema, nossa equipe está a disposição de segunda à sexta das 9h às 18h através do e-mail developers@webstore.net.br.

Não tiramos dúvidas de HTML, CSS e Javascript. Nosso suporte é apenas para dúvidas de como utilizar o framework.