Documentação técnica BeWatch (legado) WordPress/WooCommerce theme Janeiro de 2018 à Maio de 2020

<h2 align:"center">Informações técnicas e manual do desenvolvedor BeWatch.

Atenção:

Essa documentação irá abordar apenas os itens que foram feitos originalmente para o tema, baseados no desenvolvimento feito por Diogenes Junior. Alguns itens dentro do tema foram feitos por outros programadores, e não temos informações suficiêntes sobre o porque de algumas escolhas deles, ou suas funcionalidades, bugs e outras características.

Atenção:

Essa documentação retrata a versão antiga do site, ou seja, não serve para o site atual em novembro de 2021

Acesso aos arquivos:

Todos os arquivos de código fonte são privados e devem ser solicitados diretamente à equipe BeWatch no e-mail robertachechetto@gmail.com.

Histórico

Em 2018 eu desenvolvi esse tema usando o padrão e boas práticas para construção de temas WordPress/WooCommerce. Já em 2019, outros programadores atuaram desenvolvendo outras funcionalidade e outras correções, mas acabaram inserindo códigos e plugins de maneira incorreta ou fora dos padrões. Isso provocou alguns problemas técnicos e código sujo. Ao fazer qualquer alteração, deve-se atentar a esses problemas e na medida do possível corrigi-los. Em 2020 reassumi por alguns meses o desenvolvimento, e alguns pontos já foram melhorados, mas outros precisam de atenção, em especial cabeçalho e rodapé, e alguns templates estáticos que ainda apresentam bastante problemas. Esses problemas e falta de padrões, por hora não afetam as funcionalidades e segurança da aplicação, mas é necessário a correção para evitar problemas futuros e para buscarmos uma excelência no produto em questão: a Loja Virtual BeWatch. O tema depende de alguns plugins para funcionar, mas existem outros ativados que cumprem propósito de marketing, SEO, Frete e outras funcionalidades administrativas. Os essências para a parte técnica são:

Advanced Custom Fields

Advanced Custom Fields: Categories

Advanced Custom Fields: Repeater Field

Brazilian Market on Loja Be!

Claudio Sanches - Correios for Loja Be!

Claudio Sanches - PagSeguro for Loja Be!

Editor clássico

WooCommerce

Melhor Envio v2

Nextend Social Login

WP Mail SMTP

Todos os demais plugins instalados são opcionais

Descrição dos diretórios e arquivos importantes:

assets: pasta criada por outro programador, contêm arquivos de plugins como slides e outros scripts, não é claro quais exatamente são ou não usados.

core: pasta com os arquivos originais do Bootstrap3 que é usado no tema, apenas para referência, não é usado no código fonte do tema

css: pasta com todos os arquivos principais de estilo CSS

• animate.css: animações CSS
• bootstrap-dropdownhover.css: menu dropdown (o menu foi removido por outro programador)
• bootstrap-glyphicons.css: ícones do bootstrap (provavelmente alterado para FontAwesome)
• bootstrap-theme.css: arquivo padrão estilos Bootstrap
• bootstrap-theme.min.css: arquivo padrão estilos Bootstrap
• bootstrap.css: arquivo padrão estilos Bootstrap
• bootstrap.min.css: arquivo padrão estilos Bootstrap
• font.css: fontes customizadas do site
• large.css: CSS para telas grandes (não utilizado)
• lightslider.css: adicionado por outro programador, não sei o que faz ou se é usado
• phone.css: CSS para telas pequenas (não utilizado)
• style.css: arquivo principal de estilos CSS do site
• sweetalert2.min.css: plugin de confirmações e retornos de erros para o usuário
• tablet.css: CSS para telas médias (não utilizado)

imagens: pasta criada por outro programador, contêm imagens SVG

images: pasta padrão para arquivos de imagens do tema

js: pasta padrão para os scripts JS do site

• bootstrap-dropdownhover.js: arquivo padrão Bootstrap
• bootstrap-notify.js: notificações para o usuário
• bootstrap.js: arquivo padrão Bootstrap
• bootstrap.min.js: arquivo padrão Bootstrap
• carrinho.js: arquivo para lógicas de processamento do carrinho
• cidades-estados-v0.2.js: arquivo para carregamento automático de cidades e estados para formulários
• dist: diretório com arquivos dos plugins para máscara de formulários
• html2canvas.js: arquivo com scripts para prints de uma determinada DIV, usada para prints de personalização de produtos
• jquery-2.1.4.js: jquery usado no tema
• scripts-beblack.js: scripts para manipulação das lógicas para o tipo de produto BEBLACK
• scripts-digital.js: scripts para manipulação das lógicas para o tipo de produto DIGITAL
• scripts-gift-cards-offline.js: scripts para manipulação das lógicas para o tipo de produto GIFT CARDS OFFLINE
• scripts-gift-cards-online.js: scripts para manipulação das lógicas para o tipo de produto GIFT CARDS ONLINE
• scripts-pulseiras.js: scripts para manipulação das lógicas para o tipo de produto PULSEIRAS
• scripts-rings.js: scripts para manipulação das lógicas para o tipo de produto ANÉIS
• scripts-silicone.js: scripts para manipulação das lógicas para o tipo de produto SILICONE
• scripts.js: scripts para manipulação das lógicas para o tipo de produto METAL E OUTROS SCRIPTS GERAIS
• style.js: criado por outro programador, não sei o propósito
• sweetalert2.min.js: alertas e avisos para o usuário
• wow.min.js: animações do site

modelo-produtos: modelos de tipo de produtos

• antigo modelo digital.php: Backup de um modelo antigo
• backup pulseira couro.php: Backup de um modelo antigo
• beblack.php: modelo de produto categoria BEBLACK
• benight.php: modelo de produto categoria BENIGHT
• digital.php: modelo de produto categoria DIGITAL
• gift-cards-offline.php: modelo de produto GIFT CARDS OFFLINE
• gift-cards-online.php: modelo de produto GIFT CARDS ONLINE
• metal.php: modelo de produto categoria METAL
• produtos-simples.php: modelo de produto QUALQUER OUTRO PRODUTO SIMPLES
• pulseiras.php: modelo de produto PULSEIRAS
• rings.php: modelo de produto RINGS
• silicone.php: modelo de produto SILICONE

otimizacao2020: Novos arquivos JS criados em 2020 para deixar a administração das pulseiras dos relógios e marcadores de hora dos relógios, de forma dinâmica:

• benight.php: scripts JS pulseiras/marcadores dinâmicos para categoria BENIGHT
• loop.php: scripts JS pulseiras/marcadores dinâmicos para categoria DIGITAL/LOOP
• metal.php: scripts JS pulseiras/marcadores dinâmicos para categoria METAL/STEEL
• silicone.php: scripts JS pulseiras/marcadores dinâmicos para categoria SILICONE/SPLASH

phpmailer: arquivos gerais de envio de e-mails (SMTP)

woocommerce: arquivos gerais padrão WooCommerce

404.php: arquivo padrão para páginas não encontradas

PURPLE.png: criado por outro programador, não sei por que fora da pasta padrão

apagar-wishlist.php: apagar produto da lista de desejos

banner_mobile_black.php: criado por outro programador, não sei o propósito

be.svg: logo da BE em SVG (deveria estar na pasta padrão de imagens)

be2.svg: logo da BE em SVG (deveria estar na pasta padrão de imagens)

be3.svg: logo da BE em SVG (deveria estar na pasta padrão de imagens)

carrinho-2019.php: criado por outro programador, não sei o propósito, apresenta problemas

cartao-presente.php: criado por outro programador, para cartão presente, apresenta problemas

categoria_be_splash_nova.php: criado por outro programador, para categorias avulsas, apresenta problemas

categoria_be_steel_nova.php: criado por outro programador, para categorias avulsas, apresenta problemas

categoria_loop_nova.php: criado por outro programador, para categorias avulsas, apresenta problemas

cola-produto.htp: criado por outro programador, aparentemente uma copia de template

debug.log: arquivo de log de erros do servidor

enviar-revenda-2020.php: disparo de e-mail com dados do formulário de revenda (versão 2020)

enviar-revenda.php: disparo de e-mail com dados do formulário de revenda (versão 2019)

enviarmsg.php: disparo de e-mail do formulário de contato

error_log: arquivo de log de erros do WordPress

footer-comum.php: criado por outro programador, provavelmente parte do rodapé, apresenta problemas

footer-novo.php: criado por outro programador, provavelmente parte do rodapé, apresenta problemas

footer.php: arquivo padrão do rodapé do site

functions.php: arquivo de funções padrão do tema

header.php: arquivo do cabeçalho do tema

home3.php: versão da homepage criada por outro programador (DESATIVADO)

home4.php: versão da homepage criada por outro programador (DESATIVADO)

homepage-nova-novembro.php: versão da homepage criada por outro programador (DESATIVADO)

homepage.php: versão original da homepage 2018 (DESATIVADO)

homepage2019.php: versão 2019 da homepage (DESATIVADO)

homepage2020.php: versão 2020 da homepage

index.php: arquivo inicial do tema

login-false.php: criado por outro programador, não sei o que faz

metal.php: criado por outro programador, não sei o que faz, nem o propósito de estar fora da pasta padrão

minha-conta.php: template padrão da página Minha Conta

mobile.php: template parte das sessões exclusicas Mobile (apresenta problema, outro programador instalou plugin de terceiros para mobile)

modelo-carrinho.php: template padrão para o carrinho

modelo-categoria-1.php: template para exibição de categorias

modelo-categoria-2.php: template para exbição de categorias

modelo-categoria-3.php: template para exibição de categorias

modelo-revendedor.php: template página de revendedores

onde-encontrar.php: template página onde encontrar

page-modelo-2.php: template para páginas

page.php: template padrão para páginas

perfil-artista.php: template para a página de perfil do artista

perguntas-frequentes.php: template para a página de FAQ

pixel-facebook.php: template part para códigos PIXEL FACEBOOK

preload.php: template part para GIF de carregamento

proc-cep.php: template part para carregar dados do simulador de FRETE (aparentemente desativado por outro programador)

processa.php: criado por outro programador, não sei o que faz

processamento-ajax.php: processamento AJAX do carrinho

rastreio.php: template part para busca/consulta de código de rastreio

revenda-formulario.php: template para envio de mensagens dados formulário de revenda

revenda2020.php: template para página de SEJA UM REVENDEDOR

salvar-wishlist.php: salvar arquivo na lista de desejos

screenshot.jpg: capa do tema

script-db.php: scripts para corrigir problema de estoque em produtos novos da loja

search.php: template para exibir resultado de pesquisa

single.php: arquivo padrão para exibição de SINGLE POST TYPE

slider_produto_desktop.php: criado por outro programador não sei o que faz

slider_produto_new_arrivals.php: criado por outro programador não sei o que faz

slider_produto_quem_viu.php: criado por outro programador não sei o que faz

slideshow-2.php: template parte para slides rotativos do site

slideshow.php: template parte para slides rotativos do site

style.css: nome e informações do tema

suporte.php: template da página de suporte

teste-facebook.php: criada por outro programador não sei o que faz

validar-usuario-facebook.php: criada por outro programador não sei o que faz

woo-artistas.php: página para listagem dos artistas

woo-carrinho-antiga.php: template antigo da página de carrinho

woo-carrinho.php: template da página de carrinho

woo-categoria-filha.php: template para exibir categorias filhas de uma categoria

woo-categoria-pai.php: template para exibir apenas categorias pais

woo-categorias.php: template padrão de categorias WooCommerce

woo-contatos.php: template part para edição de dados de contato MINHA CONTA

woo-enderecos.php: template par para edição de dados de endereços MINHA CONTA

woo-lista-de-desejos.php: template para exibir produtos da lista de desejos MINHA CONTA

woo-login-cadastro.php: template do formulário de login ou cadastro MINHA CONTA

woo-pagina-abstrata.php: template página padrão WooCommerce

woo-pagina.php: template página pdrão WooCommerce

woo-pedidos.php: template página WooCommerce MEUS PEDIDOS - MINHA CONTA

woo-single-produto.php: template WooCommerce para exibir um produto

woocommerce.php: template padrão de integração WooCommerce

## Lógica básica de exibição dos produtos BeWatch A exibição básica de um relógio BeWatch:  As layers que compôem o produto são divididas da sequinte maneira:  Onde dependendo da escolha do usuário nas pulseiras, marcadores, ícones ou escrita, vamos alterar o SRC das tags IMGS correspondêntes a cada layer. No caso da escrita, a lógica é semelhante, mas o texto personalizado do usuário, é inserido em uma div simples:   ## Lógica de inclusão de produto no carrinho Cada produto adicionado ao carrinho, terá diferentes opções personalizadas pelo usuário. Para isso, adicionamos CUSTOM METAS a cada produto, dentro de cada pedido WooCommerce. Além disso, tiramos um "print" da DIV das layers de personalização, para que o pessoal da administração da BeWatch, veja da mesma forma que o usuário, como ficou o resultado final da personalização. Esse print é feito através da biblioteca html2canvas.js que tira um print de da DIV, transformando esse print em binário, e ai salvamos esse binário em uma imagem dentro do servidor. O fluxo de inclusão do produto no carrinho, segue o seguinte diagrama: 

Para adicionar o CUSTOM META ao produto do carrinho WooCoommerce, temos um filtro que é acionado quando enviamos a chave via POST, como pode ser visto abaixo, usando como exemplo PULSEIRA

https://gist.github.com/diogenesjup/2609465edcac14319153f2d55e1b6da2

Para o print da imagem a lógica é parecida, mas precisamos salvar o código binário da imagem (BASE64) em uma imagem real dentro do servidor, isso é feito através do código:

https://gist.github.com/diogenesjup/74594a25bd9b97ed6a1dfd85a1348fae

As CUSTOM METAS ficam salvas no wp-admin, em cada detalhe do pedido:

 ## Conclusão e observações finais - Qualquer dúvida técnica pode ser enviada exclusivamente nesse diretório https://github.com/diogenesjup/Documentacao-tecnica-BeWatch/issues . Dúvidas enviadas através de outros canais não serão respondidas.
- Atualizar o WordPress ou o WooCommerce para a versão mais recente é totalmente seguro e recomendado.A única ressalva aqui é referente os plugins que não estão listados nesse documento, por que não sei como será o comportamento dele. - O bug do estoque para novos produtos (relatados na descrição do arquivo script-db.php) se da por causa que ao adicionar um novo produto, por alguma razão, ele já começa com o status do estoque OUT OF STOCK, mesmo se duplicando de um produto com estoque. Para corrigir isso, o script em questão da um UPDATE em todo o banco, deixando todos eles em estoque (a administração da BeWatch não utiliza estoque único por produto):

meta_key = '_stock'
meta_value = '100'

meta_key = '_stock_status'
meta_value = 'instock'


- Ao fazer atualizações no código fonte, cuidado com o cache, o plugin escolhido e utilizado pela admnistração BeWatch costuma demorar para propagar alterações nos arquivos PHP, CSS e JS.