Guia do Front-End

Através deste guia você conseguirá as informações necessárias sobre os primeiros passos para a criação e customaização de lojas virtuais na Plataforma BW Commerce.

Para facilitar, este guia está dividido em algumas seções. São elas:

Introdução à plataforma

  • Plataforma de e-commerce para B2C e B2B
  • Grande nível de customização e parametrização
  • Melhoria continuada
  • API para integração com ERPs
  • Monitoramento constante (24/7)
  • Utilizamos CDN da Azion
  • Infraestrutura na AWS

O que é possível customizar?

  • Cabeçalho, rodapé e página inicial (HTML)
  • Incluir fontes por import ou arquivo
  • Incluir código JS customizado
  • Incluir páginas personalizadas com código HTML
  • Todo o texto e mensagens atráves da sobreescrita CSS
  • Pesquisa, detalhes do produto, login, carrinho, checkout e páginas do cadastro do cliente só é possível customizar o CSS
  • Mais de 50 parâmetros de configuração

Tecnologias utilizadas no front-end

  • AngularJS
  • Bootstrap 3
  • Font-awesome 4.7
  • OwlCarousel
  • Gulp (dev)
  • NodeJS (dev)
  • git (dev)
  • Apache e PHP 7 (dev)

Ambiente de desenvolvimento

Compatível com Windows ou Linux

Editores recomendados:

Configurando o Ambiente de desenvolvimento

Configuração do php.ini:

				allow_url_include = 
On
;

Clonar o repositório do GitLab:

				git clone https://gitlab.com/bwcenter/lojas-…
			

Configurar o Apache para executar na pasta clonada.

Executar terminal na pasta clonada (no windows clique com o botão direito sobre a pasta e escolha a opção Git Bash Here).

				npm -g install gulp
			
				npm install
			

Criação da conta no GitLab

Utilizamos o GitLab como repositório de arquivos.

Nós criamos um repositório para cada parceiro.

Nos forneça seu usuário para que possamos liberar o acesso de desenvolvedor no repositório.

Desenvolvendo sua primeira loja virtual

Executar o terminal na pasta do repositório (no windows clique com o botão direito sobre a pasta e escolha a opção Git Bash Here).

				npm run incluir
			

Será solicitado no prompt o nome do projeto (nome da pasta que será criada no repositório), nome do cliente, o Token de Upload (obtido dentro do painel administrativo) e o nome do tema para iniciar (Opcional, porém recomendado para já iniciar com uma estrutura básica).

Confira aqui a lista de temas disponíveis (https://www.bwcommerce.com.br/temas/)

Após o término da execução terá sido criada uma pasta dentro do repositório com o nome informado e contendo os arquivos do tema escolhido.

Estrutura de pastas e arquivos

/css – Pasta contendo arquivo site.css contendo as customizações.

/html – Pasta contendo os arquivos html que compõe a estrutura do layout.

/ignore – Pasta onde é possível colocar arquivos que não devem ser publicados, ex: banners desenvolvidos, desenhos do layout, etc

/img – Pasta contendo as imagens que compõem o layout

/fonts – Pasta contendo as fontes importadas pelo site.css

OBS: @imports de fontes externas devem ser incluídas num arquivo chamado import.css e colocado na pasta /fonts

Não devem ser criadas subpastas dentro das pastas.

Publicando a loja virtual no ambiente de produção

Na pasta do repositório execute um novo bash (no windows clique com o botão direito sobre a pasta e escolha a opção Git Bash Here).

Dentro no terminal digite:

				npm run atualizar <nome_da_pasta>
			

O script irá atualizar o tema e enviar todos os arquivos necessários.

OBS: Se a loja já possuir um tema instalado ou desenvolvido por outra empresa será criado um novo tema e para publicá-lo será necessário ir ao painel administrativo e marcar como publicado.

Configurando o domínio

Encaminhar para nossa equipe o domínio e alterar o ID Técnico para BIL339 (domínios .BR) ou domínios internacionais encaminhar acesso a conta onde foi registrado.

Faremos o direcionamento do domínio para CloudFlare preservando as configurações atuais.

Caso o parceiro tenha criado a conta na CloudFlare poderá realizar a configuração do domínio.

A configuração detalhada será enviada posteriormente.

Boas práticas

Manter indentação dos arquivos HTML, CSS e JS.

Salvar sempre com codificação UTF-8.

Manter sempre o repositório do GitLab atualizado com o ambiente local.

Buscar sempre utilizar imagens compactadas e otimizadas.

Evitar arquivos com mais de 100Kb.

Evitar uso de múltiplas fontes.

Pensar sempre no usuário mobile (internet lenta).