Apenas dois aspectos foram modificados do formulário originalmente criado para o WorkControl.

O primeiro é que ele foi feito em AJAX para melhorar a usabilidade. O segundo aspecto é que é possível enviar para múltiplos destinatários, bastando acessar o arquivo _app\Config\Client.inc.php ou o campo relacionado no painel de configuração e informar os destinatários na constante SITE_ADDR_EMAIL separados por ponto e vírgula (;) conforme a seguir:

 define('SITE_ADDR_EMAIL', 'contato@worcontrol.com.br; email2@seudominio.com.br; email3@seudominio.com.br'); //E-mail de contato                                            
                                

O filtro de busca básico está presente somente na página home do tema, nele o usuário poderá buscar por marca ou modelo do veículo.

Na aba seguinte, é possível realizar a busca por meio do código de referência do automóvel.

O tema possui um sistema de comparação de automóveis, onde permite que o usuário escolha até 4 (quatro) automóveis para ser comparados.

Para selecionar os automóveis a serem comparados, basta clicar no ícone de “coração”, no canto superior direto dos automóveis, com isso, o automóvel escolhido será adicionado em tempo real a lista de automóveis para comparação.

Esse sistema de comparação também é armazenado por sessão. Sendo possível limpar essa seleção, removendo os automóveis individualmente ou na página de comparação, na opção de “Limpar Seleção” no final da página.

Caso o usuário venha a tentar selecionar mais de quatro automóveis para comparação, será apresentada uma modal de alerta com a opção de ir para a página de comparação ou de fechar e continuar com a navegação.

Comparação de automóveis

A página de comparação irá exibir quase todas as características do automóvel, com exceção do campo de “Descrição”, pois nesse campo pode conter descrições demasiadamente extensas, com o risco de prejudicar a experiencia do usuário.

A página single de automóveis possui alguns aspectos estratégicos para facilitar a conversão para gerar um contato entre os clientes e vendedores. Os recursos são:

A seguir, iremos apresentar alguns desses recursos:

Formulário de Contato

O formulário de contato permite enviar um e-mail diretamente para o vendedor responsável pelo automóvel e também para o e-mail cadastrado na constante SITE_ADDR_EMAIL, assim, nenhum contato será perdido.

O vendedor e o administrador do site irão receber o e-mail com os contatos fornecidos pelos usuários e o link para o automóvel em questão.

Um aspecto importante desse projeto é que todos os formulários de contato, permitem que seja enviado e-mail para múltiplos destinatários. Para isso, atribua múltiplos e-mails na constante SITE_ADDR_EMAIL, separado por ponto e vírgula (;).

Contato com o Vendedor

Essa seção basicamente é a box de vendedor no qual foi atribuída como responsável pelo automóvel, dentro do painel do WorkControl.

Assim, os usuários poderão contatar diretamente o vendedor, pelos meios de contato cadastrados no painel do WorkControl.

Seção “Indicados para você”

É comum em sites como esse, que na página single de automóveis, haja uma seção com automóveis relacionados ao automóvel principal exibido na página. Aqui nesse tema também adotamos esse recurso, mas para aumentar a taxa de conversão, resolvemos melhorar a forma como o tema escolhe os automóveis a serem apresentados.

Assim, como os demais recursos do tema, esse também responde com a interação do usuário de uma maneira diferenciada, apresentando os automóveis de forma randômica.

Em um primeiro momento, se usuário acessa o site e clica em um automóvel para ver maiores detalhes do mesmo, sem interagir com qualquer dos filtros de busca do site, essa seção irá se comportar de maneira padrão, como na maioria dos sites, buscando mostrar automóveis que são similares ao automóvel principal da página, considerando os seguintes campos:

Entretanto, caso haja interação com qualquer filtro de busca do site, a seleção de automóveis a serem exibidos passa a ser dinâmica, considerando a opção do filtro informada pelo usuário. Quando mais especifica for a interação do usuário em suas buscas, mas especifico será a seleção de automóveis apresentadas nessa seção.

Por exemplo, se o usuário escolhe apenas a opção de tipo de veículos "Carros", nessa seção, irá exibir alguns dos automóveis disponíveis desse tipo de veículo, e, não irá considerar qualquer outra opção do automóvel. Entretanto, se o usuário escolher a opção de tipo de veículo igual "Carro", marca "BMW", modelo "330I" e com bancos em couro, então, essa seção irá considerar todas as opções fornecidas pelo usuário para apresentar outros automóveis que atendam a esses requisitos especificamente.

Se não houver automóveis compatíveis com a interação com o usuário, a seção tentará exibir automóveis com o filtro padrão. Se, ainda assim, não houver resultados a serem exibidos, então a seção inteira não será exibida.

Essa seção trabalha com um carrossel que exibe todos os vendedores validos do site.

Somente serão exibidos os usuários cadastrados no site com acesso superior ou igual ao declarado na constante LEVEL_WC_AUTOMOTIVE e que possuam automóveis cadastrados em seu nome, independente do status de disponibilidade do automóvel.

Passo 1: Instalação do WorkControl

Para o processo de instalação do tema MaxMotors, estamos considerando a instalação padrão do WorkControl sem que haja qualquer tipo de configuração após a instalação em seu servidor local. Como esse é um produto voltado apenas para programadores licenciados do WorkControl, não mostraremos aqui como instalar o CMS, passando diretamente para o passo a passo de implementação do tema.

Logo depois que concluir a instalação padrão, é imprescindível que faça o primeiro acesso ao Painel Admin do WorkControl, antes de passar para o passo 2.

Passo 2: Adicionando arquivos do tema

No pacote de arquivos do seu tema na área de membros em nossa WebStore, existe uma pasta chamada “01_MaxMotors_pack”, nela contém o tema, a App e todos os widgets que foram criados ou customizados para esse projeto. Basta copiar todo o conteúdo, com exceção do arquivo "maxmotors.sql" e colar na pasta raiz do seu projeto.

Observação: Como foi criado uma nova App para cadastro de veículos, alguns arquivos como Sitemap.class.php, Seo.class.php, rss.php e outros, serão substituídos nesse momento, então, basta autorizar a substituição dos mesmos.

Passo 3: Configurações do Projeto

No arquivo _app/Config/Config.inc.php

Informe o nome do tema na constante THEME com o valor maxmotors:

   define('THEME', 'maxmotors'); //template do site                                
                                

Mudar a constante ADMIN_MODE para o novo Dashboard Automotivo:

   define('ADMIN_MODE', 5); //1 = website / 2 = e-commerce / 3 = Imobi / 4 = EAD / 5 = Automotive                              
                                    

Desative as seguintes constantes (valor = 0): APP_EAD, APP_PRODUCTS, APP_ORDERS, APP_IMOBI e APP_SLIDE:

    define('APP_EAD', 0); //Plataforma EAD
                                

    define('APP_PRODUCTS', 0); //Produtos
    define('APP_ORDERS', 0); //Pedidos
    define('APP_IMOBI', 0); //Imóveis
    define('APP_SLIDE', 0); //Imóveis
                                

Mude a constante IMAGE_W para 1280 e a constante IMAGE_H para 628. (OPCIONAL)

    define('IMAGE_W', 1280); //Tamanho da imagem (WIDTH)
    define('IMAGE_H', 628); //Tamanho da imagem (HEIGHT)                                 
                                

Passo 4: Atualização do Banco de dados

Será necessário criar duas novas tabelas e 3 páginas para o correto funcionamento do tema e dos cadastros.

Para isso, importe em seu banco de dados o arquivo maxmotors.sql que está dentro da pasta 01_MaxMotors_pack

Passo 5: Incluir arquivo de implementação

No arquivo _app/Config.inc.php

Na linha 115 adicione a requisição para o arquivo de configuração da nova App Automotiva:

require 'Config/Automotive.inc.php';                                
                                

Em seguida, resete as configurações em Admin->Configurações->Configurações Gerais->Resetar Configurações

Passo 6: Desativando recursos nativos

Nativamente, o WorkControl carrega alguns bots de CSS e JavaScript, além da biblioteca de ícones que não iremos utilizar em nosso tema e que poderão afetar negativamente alguns recursos do nosso projeto. Então precisaremos desabilita-los.

No arquivo index.php principal da instalação do WorkControl (na raiz), faça as modificações a seguir:

Comente ou exclua as linhas abaixo:

O seu projeto, já está pronto e funcional!

Sabemos que você irá precisar de um projeto pronto e populado para ser apresentado para o seu prospect ou cliente. Então criamos uma base de dados de exemplo, com usuários, slides, automóveis e posts que você poderá utilizar para popular o seu projeto e assim poder apresentar rapidamente todos os recursos que preparamos para você.

Então para utilizar nossa base de dados, caso ainda não tenha feito, acesse sua área de membros em nossa WebStore e baixe a “02_MaxMotors_demo.” e siga os passos abaixo:

Esse projeto é contemplado pelas seguintes funcionalidades:

Para tornar a experiencia do usuário agradável e prática, focamos na usabilidade, utilizamos recursos pouco comuns para nós desenvolvedores acostumado a trabalhar com o WorkControl, porém, priorizamos por tornar toda a estrutura muito simplificada e seguindo os padrões aprendidos com o WorkControl, permitindo assim, que seja fácil a customizações e complementos de recursos futuros.

Para isso utilizamos os seguintes recursos:

O pacote de arquivos necessário para o Painel do Vendedor está estruturado da seguinte forma:

Seu Projeto
├── _cdn
│    └─── bootstrap/
│    └─── datatables/
│    └─── dropzone/
│    └─── fontawesome-free/
│    └─── steps/
│    └─── jquery.validate.min.js
│    └─── sweetalert.min.js
├── painel
│   └─── _ajax/
│   └─── _css/
│   └─── _img
│   └─── _js/
│   │      └───tinymce/
│   └─── _sis/
│   │       └─── auto/
│   │       └─── users/
│   │       └─── home.php
│   │       └─── notification.php
│   └─── _tpl/
│   └─── dashboard.php
│   └─── index.php
│   └─── newpass.php
│   └─── recover.php

Todo o processo de implementação é extremamente simples, mas para ter certeza de que tudo ocorrerá bem, preparamos esse passo a passo, para lhe orientar nesse processo.

Nos arquivos que você recebeu, copie todo o conteúdo da pasta “Painel”, ou seja, copie as pastas “_cdn” e “painel” e então, cole na pasta raiz do seu projeto automotivo.

A pasta _cdn contém todos os recursos necessários para o devido funcionamento do Painel do Vendedor, como plugins e o framework Bootstrap e entre outros. Como o Painel do Vendedor é um recurso independente do tema, é provavelmente que durante a implementação tais recursos possam estar presentes na pasta _cdn, caso seja esse seu caso, basta substituir ou ignorar tais arquivos, sem que haja risco para o seu projeto automotivo.

Nível de Acesso (Opcional)

É possível conceder acesso ao painel do vendedor, sem permitir que o usuário acesse o painel Admin nativo do WorkControl. Siga os passos a seguir, somente se você deseja que o vendedor tenha acesso apenas ao Painel do Vendedor e não tenha acesso ao painel Admin nativo do WorkControl.

Passo 1: Nível de Acesso

No arquivo _app/config/Automotive.inc.php na linha 19, mude a constante LEVEL_WC_AUTOMOTIVE para 5.

    define('LEVEL_WC_AUTOMOTIVE', 5);
                                

Passo 2: Função getWcLevel

Para habilitar esse nível de acesso no WorkControl é necessário editar a função "getWcLevel".

Essa função está em _app/Config.inc.php na linha 159. Adicione o nível 5 com o valor ‘Vendedor (restrict user)’, conforme abaixo:

function getWcLevel($Level = null)
{
    $UserLevel = [
        1 => 'Cliente (user)',
        2 => 'Assinante (user)',
        5 => 'Vendedor (restrict user)', // Restrito ao Painel do Vendedor
        6 => 'Colaborador (adm)',
        7 => 'Suporte Geral (adm)',
        8 => 'Gerente Geral (adm)',
        9 => 'Administrador (adm)',
        10 => 'Super Admin (adm)'
    ];

    if (!empty($Level)):
        return $UserLevel[$Level];
    else:
        return $UserLevel;
    endif;
}
                                

Passo 3: Gestão do Vendedor

A gestão de atribuição de acesso ocorre exclusivamente através do painel admin do WorkControl. Se você seguiu corretamente os passos 1 e 2, então basta mudar o nível de acesso do usuário restringindo seu acesso, somente ao Painel do Vendedor.