Busca avançada

NopCommerce: como personalizar seu e-commerce parte 1

terça-feira, 17 de novembro de 2020 por Eduardo Aguiar
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.

 

 

Compartilhar