NopCommerce: como personalizar seu e-commerce parte 1
Você viu no meu artigo anterior como instalar o NopCommerce e alguns de seus fundamentos.
Mas você deve estar se perguntando: como personalizar? E se eu precisar alterar algo?
Então, “seus problemas acabaram!”, pois vou explicar aqui nesta série de artigos como você personaliza seu e-commerce no NopCommerce.
Eu tenho explicado os fundamentos do NopCommerce com algumas vídeo aulas disponíveis no meu canal How 2 Develop.
Caso você ainda não conheça o NopCommerce, recomendo ver as minhas aulas na minha playlist do youtube Aulas NopCommerce.
Vamos para a prática, aprender como personalizar o e-commerce utilizando o NopCommerce?
Mão na Massa - Modificando o Layout
Assim que baixei o NopCommerce, tentei modificar o layout, com pouco conhecimento da ferramenta e seu funcionamento.
Certamente, nem preciso dizer que isso foi um desastre.
Então fui para o caminho correto: ler a documentação. Por isso o que vamos mostrar aqui se baseia na documentação do NopCommerce (https://docs.nopcommerce.com/en/developer/index.html).
Clone o projeto do NopCommerce e abra no Visual Studio. Na Solution Explorer procure o Projeto Nop.Web, conforme a figura 1.
(figura 1)
Nós temos a pasta Views, que é a padrão dos projetos MVC. Conseguiu achar? Se sim, não mexa aí PELO AMOR DE DEUS!
Você até pode alterar estes layouts, porém não é o recomendável. Por quê?
Caso surja uma nova versão do NopCommerce, seu trabalho de personalizar o layout não estará completamente perdido. Vou explicar por que mais abaixo.
Repare na figura 1 que temos uma pasta na Solution Explorer chamada Themes, e a sub pasta DefaultClean.
É na pasta Themes onde personalizamos nosso layout.
Passo 1: Selecione a pasta DefaultClean (figura 2)
(figura 2)
Passo 2: Copie a pasta DefaultClean (figura 3)
(figura 3)
Passo 3: Cole a pasta DefaultClean dentro da pasta Themes. (figura 4)
(figura 4)
Passo 4: Renomeie a pasta que você colou para MeuPrimeiroTema (figura 5)
(figura 5)
Passo 5: Dentro da pasta MeuPrimeiroTema tem um arquivo chamado theme.json. Abra este arquivo e altere as propriedades do json de acordo com o seu tema. (figuras 6 e 7)
(figura 6)
(figura 7)
Após estes passos, seu tema estará disponível na área administrativa do site. Entre com o login de administrador.
Vá no menu Settings->General settings.
(figura 8)
No agrupamento Common seu tema estará ali disponível (figura 8), você pode conferir ali. Mas o tema ficou exatamente o mesmo. Como alterar?
Vamos começar com o simples:
Vá na pasta MeuPrimeiroTema/Content/Css edite o arquivo style.css
Procure o seletor .top-menu > li (linha 5597*): Modifique a propriedade background-color para beige.
Procure o seletor .top-menu .sublist li a (linha 5618*): Adicione a propriedade background-color para beige
Observação: pode ser que a linha não seja a mesma, por conta da versão ou alguma atualização.
Execute o projeto. Agora pode parecer que não alterou, mas repare no css que mexemos no visual mobile, portanto no seu navegador visualize como mobile.
Agora vamos alterar o Desktop:
Procure o seletor .header-menu (linha 6726*): Adicione a propriedade background-color para beige
Procure o seletor .header-menu .sublist (linha 6768*): Altere a propriedade background-color para lightgray
Observação: pode ser que a linha não seja a mesma, por conta da versão ou alguma atualização.
Depois disso, execute o projeto. Viu que as cores do menu foram modicadas?
Veja o resultado na figura (9 para mobile e 10 para desktop). OK! Não está bonito, por isso nunca me aventurei em ir para área de design. Mas já conseguimos dar uma nova cara para o nosso e-commerce.
(figura 9 - Mobile)
(figura 10 - Desktop)
Modificando o Logotipo e ícone
Esta é a parte mais fácil. Na área administrativa Settings->General settings no agrupamento Common clique em Upload a File o que vai abrir uma caixa de diálogo para selecionar uma imagem. Selecione sua logo. Veja a figura 11.
(figura 11)
Para alterar o ícone um pouco mais abaixo nesta mesma página, vá no agrupamento Favicon and app icons e clique no botão Upload single icon or icons archive conforme a imagem 12.
Assim, você terá alterado a favicon da sua aplicação. Em seguida clique em Save. Veja a figura 12.
(figura 12)
Concluindo
Notou que com esses poucos passos conseguimos dar uma boa personalizada no nosso layout? Isso é apenas o começo.
O NopCommerce foi projetado para personalizar a aparência por meio de temas (Themes) e funcionalidades por meio de Plugins.
Por esse motivo, não é recomendável mexer nos arquivos do projeto, como na pasta View para mudar a aparência, ou nas regras de negócio e na infraestrutura contido nos projetos Nop.Core, Nop.Data, Nop.Services, Nop.Web e Nop.Web.Framework.
Se você tenta mexer nestes projetos, você perde toda atualização feita pela comunidade do projeto.
Por isso, o recomendável é mexer nos temas e criar plugins. Nos próximos artigos veremos como personalizar e deixar o NopCommerce com a nossa cara e nossas regras.