Trabalhar com ficheiros de substituição CSS

O Grupo de Interesse de Varejo do Dynamics 365 Commerce mudou do Yammer para o Viva Engage. Se você não tiver acesso à nova comunidade Viva Engage, preencha este formulário (https://aka.ms/JoinD365commerceVivaEngageCommunity) para ser adicionado e mantenha-se envolvido nas últimas discussões.

Este artigo descreve porquê, quando e como usar ficheiros de substituição de Cascading Style Sheets (CSS) no Microsoft Dynamics 365 Commerce.

Os estilos permanentes do site geralmente devem ser processados através do tema de um site. Os temas fornecem CSS de base e as definições de estilo para os módulos em qualquer página do seu site. Os temas são criados usando o Software Development Kit (SDK) online do Dynamics 365 Commerce e são implementados nos seus sites através do Microsoft Dynamics Lifecycle Services (LCS). As capacidades de depuração do tema e as configurações de interface do módulo no SDK ajudam os programadores de sites a criar pacotes de estruturação de sites personalizáveis e coesos. Quando estes pacotes de estruturação são implementados num site, os autores do site podem concentrar-se na criação, edição e publicação de conteúdos em vez de no desenvolvimento do site.

Dado o ciclo de vida habitual de um tema, a dependência nos programadores para fazer alterações de estilo através do SDK e do pipeline de implementação LCS pode ser proibitiva em alguns cenários. Os protótipos ou as correções do site podem parecer complicados se o SDK não estiver configurado ou se não tiver tempo para esperar por uma implementação do LCS.

Nesses cenários, os ficheiros de substituição de CSS podem ajudar. Nas ferramentas de criação do Commerce, os utilizadores autenticados podem carregar um ficheiro CSS, pré-visualizá-lo e, em seguida, ativá-lo para substituir o tema de um site. O overhead da implementação do SDK ou do LCS não é obrigatório. As substituições especificadas num ficheiro de substituição de CSS podem ser tão pequenas como uma alteração para um único estilo de texto ou tão abrangentes quanto uma revisão completa da marca.

Antes de utilizar ficheiros de substituição CSS, esteja ciente das seguintes limitações:

• Apenas um ficheiro de substituição CSS pode estar ativo num site de cada vez. Portanto, todas as substituições ativas têm de estar presentes num único ficheiro de substituição.
• Embora possa pré-visualizar as substituições nas ferramentas de criação do Commerce, não há funcionalidades dedicadas de depuração para ajudar a identificar quaisquer erros que as substituições introduzam. Por outras palavras, quando utiliza ficheiros de substituição CSS, não tem o mesmo conjunto de ferramentas que o SDK fornece para a validação de módulo e criação.

No entanto, os ficheiros de substituição CSS fornecem uma forma rápida de criar um protótipo de uma estrutura ou implementar uma correção antes que uma atualização completa do tema seja desenvolvida e implementada.

Criar um ficheiro de substituição CSS

Para criar um ficheiro de substituição CSS, pode utilizar qualquer ambiente de desenvolvimento integrado (IDE), editor de texto ou editor de código-fonte. Uma abordagem típica é utilizar os depuradores Web padrão no seu browser para identificar seletores de estilo, propriedades e valores no site existente. A maioria dos browsers permite que altere valores e os pré-visualize no depurador. Depois de identificar as alterações que pretende fazer, pode guardá-las no seu próprio ficheiro CSS.

Carregar um ficheiro de substituição CSS

Para carregar um ficheiro CSS para o seu site no Commerce, siga estes passos.

1. Nas ferramentas de criação, vá para o seu site.

2. No painel de navegação à esquerda, selecione Estrutura.

   Nota

   Dependendo da versão das ferramentas de criação do Commerce que estiver a utilizar, poderá ter de expandir Definições no painel de navegação antes de poder selecionar Estrutura.

3. Na parte superior do painel de estruturação principal, selecione a Substituição de CSS, se ainda não estiver selecionada.

4. Sob Substituições de CSS disponíveis, selecione Carregar ficheiro CSS. É apresentada a janela Explorador de Ficheiros.

5. No Explorador de Ficheiros, navegue até e selecione o ficheiro CSS e, em seguida, selecione Abrir. O ficheiro CSS carregado agora aparece em Substituições de CSS disponíveis.

Pré-visualizar um ficheiro de substituição CSS

Para pré-visualizar um ficheiro de substituição CSS antes de o tornar ativo no seu site em direto, siga estes passos.

1. No painel de navegação à esquerda, selecione Estrutura e, em seguida, no separador Substituição de CSS, em Substituições de CSS disponíveis, localize o ficheiro CSS que pretende pré-visualizar.
2. Ao lado do nome de ficheiro CSS, selecione Pré-visualizar site.
3. Na caixa de diálogo Selecionar um URL, selecione o URL do site para o qual pretende pré-visualizar a substituição aplicada e, em seguida, selecione OK.
4. Se existirem várias variantes para o URL selecionado, selecione a variante pretendida na caixa de diálogo Pré-visualizar variações que é apresentada.

Um novo separador ou janela do browser é aberto, onde pode validar as suas substituições de estilo em relação ao seu site. Em seguida, pode partilhar o URL com outros utilizadores autenticados do Commerce para revisão e comentários.

Ativar um ficheiro de substituição CSS no seu site em direto

Depois de pré-visualizar e aprovar o ficheiro de substituição CSS, pode ativá-lo no seu site em direto.

Para ativar um ficheiro de substituição CSS, siga estes passos.

1. No painel de navegação à esquerda, selecione Estrutura e, em seguida, no separador Substituição de CSS, em Substituições de CSS disponíveis, localize o ficheiro CSS que pretende ativar.
2. Por baixo do nome de ficheiro CSS, selecione Ativar. O ficheiro de substituição fica imediatamente ativo no seu site em direto.

Desativar um ficheiro de substituição CSS no seu site em direto

Para desativar um ficheiro de substituição CSS no seu site, siga estes passos.

1. No painel de navegação à esquerda, selecione Estrutura e, em seguida, no separador Substituição de CSS, em Substituições de CSS disponíveis, localize o ficheiro CSS que pretende desativar.
2. Por baixo do nome de ficheiro CSS, selecione Desativar. O ficheiro de substituição fica imediatamente inativo no seu site em direto.

Recursos adicionais

Adicionar um logótipo

Selecionar um tema de site

Trabalhar com predefinições de estilos

Adicionar um favicon

Adicionar um aviso de direitos de autor

Adicionar idiomas ao seu site

Adicionar código de script às páginas do site para suportar telemetria