Realizado

Customizações no Wordpress com Woocommerce e Education (tema voltado para venda de cursos online)

Publicado em 16 de Novembro de 2020 dias na TI e Programação

Sobre este projeto

Aberto

Inicialmente criamos um projeto aqui no Workana para a criação de um site em WordPress para vendas de cursos online. Projeto ainda disponível, porém com o status de “Analisando proposta” (https://www.workana.com/job/criar-um-site-em-wordpress-para-venda-de-cursos-online-woocommerce-para-controlar-as-vendas-e-um-tema-do-wp-proprio-para-cursos-?ref=projects_1).

Resolvemos fazer a parte inicial do projeto “dentro de casa”, até para absorvermos o conhecimento, então fizemos:
- Instalamos o WordPress;
- Compramos, instalamos e configuramos o tema Education (que já tem o WooCommerce);
- Aplicamos o layout (utilizando o Elementor);
- Customizamos a parte mais “básica” do site.

Agora precisamos aplicar a parte customizada. Vou detalhar todos os itens, porém um alinhamento super importante que vou precisar que, caso um dos itens abaixo não seja possível implementar da maneira que está sendo solicitado, por favor me avise antes de aceitar/iniciar o projeto. Para não acontecer de chegar na entrega e não termos os itens da maneira solicitada.
Se tiver que realinhar algum item com o cliente, precisarei fazer agora e não na entrega.

informações iniciais
- ambiente de homologação | disponibilizamos o projeto em um ambiente de homologação, a url é https://planobweb-dev.com.br/
- Wireframe | Criamos uma sequência de telas estáticas que estamos chamando de Wireframe, são telas tiradas do ambiente de homologação (que customizamos algumas coisas na imagem), apenas para mostrar para o cliente e facilitar o entendimento de como ficará. Nos itens abaixo, em alguns tópicos mencionarei algumas telas para facilitar o entendimento de vocês;
- Prazo | Temos urgência no recebimento das propostas, pois temos pressa.

escopo do projeto
1 - compra do clube meditação
no site o internauta poderá comprar um ou mais cursos pontualmente de maneira “natural” (acessando um determinado curso e clicando no botão “compre este curso”). Uma outra compra que precisamos implementar no site é a compra da “Assinatura do Clube meditação”. Na página do Clube meditação (https://planobweb-dev.com.br/clube-meditacao/)  nos box de “Plano AMETISTA” e “Plano LAZULI” (os valores são fakes, o clube meditação terá apenas um valor.
Usaremos o 2º box apenas para demonstrar a opção de parcelamento), ao clicar em “Assine agora”, deverá ser encaminhado para a compra padrão (carrinho), porém na relação do carrinho precisa constar a compra do “produto” Clube meditação.

2 - Meio de pagamento (PayPall)
Configuramos o PagSeguro como meio de pagamento, além do PagSeguro também terá que ter a opção de pagamento pelo PayPall

3 - Clube meditação 7 dias gratuitos
Ao realizar a compra do Clube meditação o internauta terá 7 dias grátis, em outras palavras ele terá 7 dias (após a contratação) para cancelar o plano sem ser cobrado. É Como acontece nesses modelos de compras convencionais (exemplo TeleCine, GloboPlay e etc), no cadastro inicial ele preencherá todas as informações normalmente (inclusive dados do cartão de crédito), porém caso ele efetue o cancelamento antes do 7º dia, ele deixa de ter acesso no site e não será cobrado por isto.

4 - Acesso do Clube meditação
Algumas páginas que hoje estão “abertas” serão restritas para apenas o internauta que comprar o Clube Meditação. Precisamos “fechar” as páginas que estão em laranja na imagem anexo (areas-do-site.png). Se possível, deixar de uma maneira “prática” fechar outras áreas do site, pois no futuro serão criadas novas áreas para o Clube meditação.


5 - Relação das meditações – Fechada
No site ao clicar em uma determinada categoria de meditação é exibida a relação das Meditações disponíveis na categoria selecionada (por exemplo a categoria “Meditações para iniciantes” que a url é https://planobweb-dev.com.br/meditacoes/meditacoes-para-iniciantes/). Caso o internauta não assine o Clube meditação, esta página deverá:
A - Exibir um molde no thumbnail das meditações deixando ela escura e com o ícone de cadeado;
B - Não existir link para a meditação;
C - Exibir o botão “ASSINE O clube meditação” (que ao clicar será enviado para o carrinho com o “produto” clube meditação).
Como na tela do wireframe https://www.planobweb.com.br/clientes/puraenergiapositiva/wireframe/05-04-meditacao-categoria.html

6 - Meditação – Fechada
Assim como foi mencionado no item acima, caso o internauta não faça parte do Clube meditação não poderá visualizar a meditação na íntegra.
Caso ele não faça parte da Clube meditação e tente acessar a url de alguma meditação direto pelo navegador (exemplo: https://planobweb-dev.com.br/portfolio/meditacao-para-iniciantes-03/), não deverá conseguir.

7 - Relação do Resumo Best Sellers – Fechado
No site ao clicar em “Resumo Best Sellers” será apresentado a relação dos Best Sellers cadastrados, caso o internauta não assinar o Clube meditação, esta página deverá:
A - Exibir um molde no thumbnail dos Best Sellers deixando ela escura e com o ícone de cadeado;
B - Não existir link para o Best Sellers;
C - Exibir o botão “ASSINE O clube meditação” (que ao clicar será enviado para o carrinho com o “produto” clube meditação).
Como na tela do wireframe https://www.planobweb.com.br/clientes/puraenergiapositiva/wireframe/05-11-resumos.html

8 - Resumo Best Sellers – Fechado
Assim como foi mencionado no item acima, caso o internauta não faça parte do Clube meditação não poderá visualizar o Resumo Best Sellers na íntegra. Caso ele não faça parte da Clube meditação e tente acessar a url de algum Resumo Best Sellers direto pelo navegador (exemplo: https://planobweb-dev.com.br/portfolio/o-milagre-da-atencao-plena-thich-nhat-hanh/), não deverá conseguir.


9 - Cursos dentro do Clube meditação
O internauta poderá comprar um ou mais cursos pontuais, porém se ele preferir comprar o Clube meditação, ele terá acesso à todos os cursos (e todas as aulas) sem a necessidade da compra individual.

10 - Favoritar meditação
Ao clicar em alguma das categorias de meditação disponível na página https://planobweb-dev.com.br/meditacoes/, teremos acesso à diversas meditação. Dentro da página da meditação em si (exemplo: meditação “Desbloqueio e Alinhamento do Chakra” https://planobweb-dev.com.br/portfolio/desbloqueio-e-alinhamento-do-chakra/) precisamos aplicar um link/botão que ao clicar guarde nos “Favoritos” a respectiva meditação. Posteriormente (ao clicar em “Meus dados”) o internauta poderá visualizar todas as meditações que ele guardou como “Favorito” e clicar para acessa-la;

11 - URL segmentada
Não conseguimos aplicar as urls segmentadas da maneira correta, fomos até certo ponto, mas principalmente dentro do Clube meditação precisamos deixar da maneira abaixo.
Abaixo são mencionado apenas exemplos para facilitar o entendimento, porém o regra se aplicará para todas a estrutura, incluindo novos conteúdos):
----- A -----
Meditações – Relação das categorias das meditações
Hoje está OK = https://planobweb-dev.com.br/meditacoes/
----- B -----
Meditações – Relação das meditações da categoria selecionada (exemplo Meditações para iniciantes)
Hoje está OK = https://planobweb-dev.com.br/meditacoes/meditacoes-para-iniciantes/
----- C -----
Meditação – Página da meditação selecionada (exemplo Desbloqueio e Alinhamento do Chakra)
Hoje está ERRADA = https://planobweb-dev.com.br/portfolio/desbloqueio-e-alinhamento-do-chakra/
Precisaria ficar:
i. Ideal = https://planobweb-dev.com.br/meditacoes/meditacoes-para-iniciantes/desbloqueio-e-alinhamento-do-chakra/
ii. Alternativa = https://planobweb-dev.com.br/meditacoes/desbloqueio-e-alinhamento-do-chakra/
----- D -----
Resumo Best Sellers - Relação dos Best Sellers
Hoje está OK = https://planobweb-dev.com.br/resumo-best-sellers/
----- E -----
Resumo selecionado (exemplo O Milagre da Atenção Plena Thich Nhat Hanh)
Hoje está ERRADA = https://planobweb-dev.com.br/portfolio/o-milagre-da-atencao-plena-thich-nhat-hanh/
Precisaria ficar = https://planobweb-dev.com.br/resumo-best-sellers/o-milagre-da-atencao-plena-thich-nhat-hanh/
----- F -----
Blog – Página do blog selecionado (exemplo Poder da gratidão: 3 passos para começar a alcançar seus sonhos)
Hoje está ERRADA = https://planobweb-dev.com.br/poder-da-gratidao-3-passos-para-comecar-a-alcancar-seus-sonhos/
Precisaria ficar = https://planobweb-dev.com.br/blog/poder-da-gratidao-3-passos-para-comecar-a-alcancar-seus-sonhos/

12 - Relação de Cursos - https://planobweb-dev.com.br/cursos/
Caso o internauta faça parte do Clube meditação não deverá exibir o valor dos cursos (pois o mesmo terá acesso full sem precisar comprar);

13 – Curso
Na tela de um determinado curso (por exemplo A Fórmula do Abundância - https://planobweb-dev.com.br/cursos/a-formula-do-abundancia/), precisamos:
----- A -----
Valor e botão “compre este curso”
caso o internauta faça parte do clube meditação não deverá exibir essas informações;
----- b -----
aba “ementa”
i.
Trocar o texto de “Ementar” por “Aulas”;
ii. Retirar o ícone (folha) e o texto “Leitura 1.1”, “Leitura 1.2” e etc;
iii. Quando a aula for aberta, deixar sem ícone (retirar o ícone do olho que existe hoje);
iv.
Quando a aula for fechada, aparecer o ícone do cadeado na cor do cliente
Assim como no wireframe https://www.planobweb.com.br/clientes/puraenergiapositiva/wireframe/05-08-curso-aba2.html

14 - Tela das aulas – Com permissão (ou aula aberta)
Quando o internauta clica em uma aula na aba “Aulas” do item acima, ele é redirecionado para a tela de todas as aulas. Nesta tela precisamos:
A – Retirara o breadcrum (courses -> cursos);
b – retirar o ícone (folha) e o texto “1.1”, “1.2” e etc;
C – Quando a aula for aberta, deixar sem ícone (retirar o ícone do olho que existe hoje);
D - Quando a aula for fechada, aparecer o ícone do cadeado na cor do cliente
Assim como no wireframe https://www.planobweb.com.br/clientes/puraenergiapositiva/wireframe/05-09-curso-sala.html

15 - Telas das aulas – Sem permissão
Quando o internauta não comprou o curso ou o Clube meditação, ele conseguirá acessar um determinado curso e assistir as aulas abertas (exemplo do curso A Fórmula do Abundância - https://planobweb-dev.com.br/cursos/a-formula-do-abundancia/aula/como-meditarcopiarcopiarcopiar/). Nesta tela caso ele clique em alguma aula fechada, é exibida a mensagem “This content is protected, please login and enroll course to view this content!” acima do formulário de comentário.
Precisamos substituir esta frase pelo shotcode abaixo (criamos um modelo simples para inserir o conteúdo posteriormente):
[elementor-template id="11610"]

16 - Botão de comprar
Todo botão/link de comprar do site (seja um determinado curso, ou o Clube meditação) não deverá ser aberto o popup de login e senha (como está hoje), mas ser encaminhado para o carrinho, adicionando o curso e/ou o clube meditação.

17 - No topo do site trocar o link “Login” para “Entrar”;

18 - No topo do site está faltando o link “Carrinho”;

19 - No topo do site (quando logado) trocar o link “Logout” para “Sair”;

20 - No topo do site (quando logado) trocar o link “Profile” para “Meus dados”;

21 - Na página do Profile (https://planobweb-dev.com.br/profile/)
A – Trocar a url https://planobweb-dev.com.br/meus-dados/
B – Todas as abas estão apresentando erro (Pedidos, Configurações e etc);
C – Na aba “Lista de desejos”
i. - Trocar o texto por “Favoritos”
ii. Ao clicar deverá carregar as meditações favoritadas com link para as mesmas

22 - No popup do login (ao clicar em “Login” no topo do site):
A - Precisamos acrescentar um botão “ASSINE O clube meditação” como na tela do wireframe https://www.planobweb.com.br/clientes/puraenergiapositiva/wireframe/02-entrar.h
tml;
B - Trocar o título por “Faça login com sua conta”;

Contexto Geral do Projeto

Informações iniciais - ambiente de homologação | disponibilizamos o projeto em um ambiente de homologação, a url é https://planobweb-dev.com.br/ - Wireframe | Criamos uma sequência de telas estáticas que estamos chamando de Wireframe, são telas tiradas do ambiente de homologação (que customizamos algumas coisas na imagem), apenas para mostrar para o cliente e facilitar o entendimento de como ficará. Nos itens abaixo, em alguns tópicos mencionarei algumas telas para facilitar o entendimento de vocês; - Prazo | Temos urgência no recebimento das propostas, pois temos pressa.

Categoria TI e Programação
Subcategoria Wordpress
Qual é o alcance do projeto? Desenvolvimento personalizado
Isso é um projeto ou uma posição de trabalho? Um projeto
Tenho, atualmente Eu tenho especificações
Disponibilidade requerida Conforme necessário
Integrações de API Outros (Outras APIs)

Prazo de Entrega: 08 de Dezembro de 2020

Habilidades necessárias

Outro projetos publicados por B. C.