Busca avançada

NopCommerce: como personalizar seu e-commerce parte 2

domingo, 29 de novembro de 2020 por Eduardo Aguiar
NopCommerce: como personalizar seu e-commerce parte 2

Na parte 1 dessa explicação sobre como personalizar um e-commerce utilizando o NopCommerce, nós conseguimos personalizar o layout do nosso tema. Mas talvez você tenha ficado com a pulga atrás da orelha quanto a nossa personalização.  

Por quê? Na verdade nós alteramos somente css, não fizemos uma alteração significativa de Layout.  

Será que conseguimos fazer uma alteração significativa de layout? Posso responder com tranquilidade que sim! Mas como fazemos? Para fazer isso precisamos entender como os Layouts do NopCommerce funcionam.


Como o NopCommerce trabalha com Temas?

No AspNetCore MVC, por convenção, os layouts se encontram na pasta Views de nosso projeto. Suas subpastas em geral se referem às controllers.  

Por exemplo a página Home. Ela tem a HomeController, e nela temos uma action como a Index, que retorna uma view.  

Ao retornar esta view o AspNetCore MVC vai até a pasta “~/Views/Home” e procura pelo arquivo “index.cshtml”, que tem a nossa página em Razor. Esse já é um comportamento bem conhecido por nós desenvolvedores.

O NopCommerce faz uso deste padrão.  

Para usar diferente temas ele pode utilizar outros caminhos onde eu explico na minha 5ª Aula sobre o NopCommerce no meu canal How 2 Develop.

O padrão do Razor é este abaixo na figura 1:  

(figura 1)


Porém, no projeto Nop.Web.Framework temos uma pasta chamada Themes, e nela temos duas classes responsáveis por gerenciar os temas no NopCommerce: ThemeContex e ThemeableViewLocationExpander. O que elas fazem?  

Basicamente, elas verificam qual é o tema que o usuário está utilizando. Depois, confirmam se a view requisitada existe dentro da pasta correspondente do meu tema, retornando esta view para ser renderizada. O esquema é exemplificado na figura 2.