Utilizzare i file di sostituzione CSS

Nota

Il gruppo retail interest di Dynamics 365 Commerce è passato da Yammer a Viva Engage. Se non si ha accesso alla nuova community viva engage, compilare questo modulo (https://aka.ms/JoinD365commerceVivaEngageCommunity) per essere aggiunto e rimanere impegnati nelle discussioni più recenti.

Questo articolo descrive come usare i file css (Cascading Style Sheets) di override in Microsoft Dynamics 365 Commerce.

Gli stili permanenti del sito dovrebbero generalmente essere gestiti attraverso un tema del sito. I temi forniscono i CSS e le impostazioni di stile fondamentali per i moduli su qualsiasi pagina del tuo sito. È possibile creare temi usando Dynamics 365 Commerce Online Software Development Kit (SDK) e distribuirli nei siti Web tramite Microsoft Dynamics Lifecycle Services (LCS). Le funzionalità di debug dei temi e le configurazioni dell'interfaccia del modulo nell'SDK aiutano gli sviluppatori del sito a creare pacchetti di progettazione del sito personalizzabili e coerenti. Quando si distribuiscono questi pacchetti di progettazione in un sito, gli autori del sito possono concentrarsi sulla creazione, la modifica e la pubblicazione di contenuto anziché lo sviluppo di siti.

Dato il normale ciclo di vita di un tema, la dipendenza dagli sviluppatori per apportare modifiche di stile attraverso la pipeline di distribuzione SDK e LCS può essere proibitiva in alcuni scenari. I prototipi o gli aggiornamenti rapidi del sito possono sembrare complicati se l'SDK non è configurato o se non si ha il tempo di attendere una distribuzione LCS.

In questi scenari, i file di sostituzione CSS possono essere di aiuto. Negli strumenti di creazione di Commerce, gli utenti autenticati possono caricare un file CSS, visualizzalo in anteprima e quindi attivalo per sovrascrivere il tema di un sito. Non è necessario il sovraccarico della distribuzione di SDK o LCS. Le sostituzioni specificate in un file di override CSS possono essere piccole come una modifica a un singolo stile di testo o ampie come un rinnovamento completo del marchio.

Prima di utilizzare i file di sostituzione CSS, tenere presenti le seguenti limitazioni:

• Su un sito può essere attivo un solo file di sostituzione CSS alla volta. Pertanto, tutte le sostituzioni attive devono essere in un singolo file di sostituzione.
• Sebbene sia possibile visualizzare l'anteprima delle sostituzioni negli strumenti di creazione di Commerce, non esistono funzioni di debug dedicate per identificare eventuali bug introdotti dalle sostituzioni. In altre parole, quando si utilizzano i file di sostituzione CSS, non si dispone dello stesso set di strumenti fornito dall'SDK per la convalida del modulo e della creazione.

Tuttavia, i file di sostituzione CSS forniscono un modo rapido per eseguire il prototipo di un progetto o implementare un aggiornamento rapido prima che venga sviluppato e distribuito un aggiornamento completo del tema.

Creare un file di sostituzione CSS

Per creare un file di override CSS, usare qualsiasi ambiente di sviluppo integrato (IDE), editor di testo o editor di codice sorgente. Un approccio tipico consiste nell'utilizzare i debugger Web standard nel browser per identificare selettori di stile, proprietà e valori nel sito esistente. La maggior parte dei browser consente di modificare i valori e visualizzarli in anteprima nel debugger. Dopo aver identificato le modifiche da apportare, salvarle nel proprio file CSS.

Caricare un file di sostituzione CSS

Per caricare un file CSS nel sito in Commerce, seguire questa procedura:

1. Negli strumenti di creazione, accedere al sito.

2. Nel riquadro di navigazione a sinistra, selezionare Progetto.

   Nota

   A seconda della versione degli strumenti di creazione di Commerce in uso, potrebbe essere necessario espandere Impostazioni nel riquadro di spostamento prima di poter selezionare Progetta.

3. Nella parte superiore del riquadro di progettazione principale, selezionare la scheda Sostituzione CSS, se non è già selezionata.

4. In Sostituzioni CSS disponibili, selezionare Carica file CSS. Viene visualizzata una finestra Esplora file.

5. In Esplora file, cercare e selezionare un file CSS, quindi selezionare Apri. Il file CSS caricato ora appare sotto Sostituzioni CSS disponibili.

Anteprima di un file di sostituzione CSS

Per visualizzare in anteprima un file di override CSS prima di attivarlo nel sito live, seguire questa procedura:

1. Nel riquadro di navigazione a sinistra, selezionare Progetto. Nella scheda Override CSS , in Sostituzioni CSS disponibili, trovare il file CSS da visualizzare in anteprima.
2. Accanto al nome file CSS, selezionare Anteprima del sito.
3. Nella finestra di dialogo Seleziona un URL selezionare l'URL del sito a cui si desidera applicare la sostituzione, quindi selezionare OK.
4. Se esistono più varianti per l'URL selezionato, selezionare la variante desiderata nella finestra di dialogo Anteprima delle variazioni visualizzata.

Viene visualizzata una nuova scheda o finestra del browser, in cui è possibile convalidare gli override dello stile rispetto al sito. È quindi possibile condividere l'URL con altri utenti Commerce autenticati per la revisione e il feedback.

Attivare un file di sostituzione CSS sul sito live

Dopo l'anteprima e l'approvazione del file di override CSS, attivarlo nel sito live.

Nota

È possibile avere un solo file di override CSS attivo nel sito alla volta. Se si attiva un nuovo file di override, si disattiva il file di override precedente. Assicurarsi che tutte le sostituzioni necessarie siano presenti in un singolo file di override CSS.

Per attivare un file di override CSS, seguire questa procedura:

1. Nel riquadro di navigazione a sinistra, selezionare Progetto. Nella scheda Override CSS , in Sostituzioni CSS disponibili, trovare il file CSS che si desidera attivare.
2. Sotto il nome file CSS, selezionare Attiva. Il file di sostituzione diventa immediatamente attivo sul sito live.

Disattivare un file di sostituzione CSS sul sito live

Per disattivare un file di override CSS nel sito, seguire questa procedura:

1. Nel riquadro di navigazione a sinistra, selezionare Progetto. Nella scheda Override CSS , in Sostituzioni CSS disponibili, trovare il file CSS da disattivare.
2. Sotto il nome file CSS, selezionare Disattiva. Il file di sostituzione diventa immediatamente inattivo sul sito live.

Suggerimento

Per accedere a opzioni aggiuntive per i file di sostituzione CSS, selezionare i puntini di sospensione ( ...) accanto al nome del file CSS. Le opzioni Scarica, Rinomina e Sostituisci sono utili per le modifiche rapide a un file di sostituzione CSS esistente.

Risorse aggiuntive

Aggiungere un logo

selezionare un tema per il sito

Utilizzare set di impostazioni di stile

Aggiungere una favicon

Aggiungere informazioni sul copyright

Aggiungere lingue al sito

Aggiungere codice script nelle pagine del sito per supportare la telemetria