Utilizzo di Frammenti esperienza using-experience-fragments

Questa pagina tratta i seguenti argomenti:

  • Panoramica
  • Utilizzo di Frammenti esperienza in AEM Screens
  • Propagazione delle modifiche alla pagina

Panoramica overview

Un Frammento esperienza è un gruppo di uno o più componenti, inclusi il contenuto e il layout, a cui è possibile fare riferimento all’interno delle pagine. I frammenti di esperienza possono contenere qualsiasi componente. Ad esempio, può contenere uno o più componenti che possono contenere qualsiasi elemento all’interno di un sistema paragrafo a cui si fa riferimento nell’esperienza completa o richiesto da un terzo endpoint.

Utilizzo di Frammenti esperienza in AEM Screens using-experience-fragments-in-aem-screens

NOTE
L’esempio che segue utilizza We.Retail come progetto dimostrativo da cui viene applicato il frammento di esperienza da una Sites a un progetto AEM Screens.

Ad esempio, il seguente flusso di lavoro illustra l’utilizzo di Frammenti di esperienza di We.Retail in Sites. Puoi scegliere una pagina web e utilizzare tale contenuto nel tuo canale AEM Screens in uno dei tuoi progetti.

Prerequisiti pre-requisites

Creazione di un progetto demo con un canale

Creazione di un progetto

  1. Per creare un progetto, fai clic su Crea progetto Screens.
  2. Inserisci il titolo come DemoProject.
  3. Fai clic su Salva.

A DemoProject viene aggiunto al tuo AEM Screens.

Creazione di un canale

  1. Accedi a DemoProject creato e fai clic su Canali cartella.

  2. Clic Crea dalla barra delle azioni, in modo da poter aprire la procedura guidata.

  3. Scegli la Canale sequenza dalla procedura guidata e fai clic su Successivo.

  4. Inserisci il Titolo as TestChannel e fai clic su Crea.

A TestChannel è stato aggiunto al tuo DemoProject.
screen_shot_2019-07-29at105101am

Creazione di un frammento esperienza creating-an-experience-fragment

Segui i passaggi seguenti per applicare il contenuto da We.Retail al tuo TestChannel in DemoProject.

  1. Passare a una pagina Sites in We.Retail

    1. Passa a Sites e fai clic su We.Retail > Stati Uniti > Inglese > Attrezzatura e fai clic su questa pagina per utilizzarla come frammento di esperienza per il canale Screens.

    2. Clic Modifica dalla barra delle azioni, in modo da poter aprire la pagina da utilizzare come frammento di esperienza per il canale Screens.

  2. Riutilizzo del contenuto

    1. Fai clic sul frammento da includere nel canale.
    2. Fai clic sull’ultima icona a destra per aprire Converti in frammento esperienza .

    screen_shot_2019-07-29at105314am

  3. Creazione di un frammento esperienza

    1. Scegli la Azione as Creare un nuovo frammento esperienza.

    2. Fai clic su Percorso principale.

    3. Fai clic su Modello. Scegli la Frammento esperienza - Variante schermi modello qui (valore nel campo /libs/settings/screens/experience-fragments/templates/experience-fragment-template-screens).

    4. Inserisci il Titolo frammento as ScreensFragment.

    5. Per completare la creazione di un nuovo frammento di esperienza, fai clic sul segno di spunta.

    screen_shot_2019-07-29at105918am

    Per selezionare un'opzione più semplice, fare clic sul segno di spunta a destra del campo per aprire la finestra di dialogo di selezione.

  4. Creazione di Live Copy di un frammento esperienza

    1. Passa alla home page dell’AEM.
    2. Clic Frammenti esperienza ed evidenzia ScreensFragment e fai clic su Variante come Live Copy, come illustrato nella figura seguente:

    screen_shot_2019-07-29at110443am

    c. Fai clic sul pulsante ScreensFragment dal Crea Live Copy e fai clic su Successivo.

    d. Inserire Titolo e Nome as Schermi.

    e. Fai clic su Crea in modo da poter creare la Live Copy.

    f. Fai clic su Fine in modo da poter tornare al ScreensFragment pagina.

    screen_shot_2019-07-29at110616am

    note note
    NOTE
    Dopo aver creato un frammento AEM Screens, puoi modificarne le proprietà. Fai clic sul frammento e fai clic su Proprietà dalla barra delle azioni.

    Modifica delle proprietà di un frammento Screens

    1. Accedi a ScreensFragment (creato nei passaggi precedenti) e fare clic su Proprietà dalla barra delle azioni.

    2. Fai clic su Configurazione offline come illustrato nella figura riportata di seguito.

    È possibile aggiungere Librerie lato client (Java™ e CSS) File statici nel frammento di esperienza.

    L’esempio seguente mostra l’aggiunta di librerie lato client e dei font come parte di file statici nel frammento di esperienza. frammento

  5. Utilizzo di Frammento esperienza come componente nel canale Screens

    1. Passa al canale Screens in cui desideri utilizzare il Schermi frammento.

    2. Fai clic su TestChannel e fai clic su Modifica dalla barra delle azioni.

    3. Fai clic sull’icona dei componenti nella scheda laterale.

    4. Trascina la Frammento esperienza al tuo canale.

    screen_shot_2019-07-29at123115pm

    e. Fai clic sul pulsante Frammento esperienza e fai clic sull’icona in alto a sinistra (chiave inglese) per aprire Frammento esperienza .

    f. Fai clic sul pulsante Schermi Live Copy del frammento creato in Passaggio 3 in Percorso.

    screen_shot_2019-07-26at82650pm

    f. Fai clic sul pulsante Schermi Live Copy del frammento creato in Passaggio 3 nel Frammento esperienza.

    screen_shot_2019-07-26at82509pm

    h. Inserire i millisecondi in Durata.

    i. Fai clic sul pulsante Configurazione offline dal Frammenti esperienza in modo da poter definire le librerie lato client e i file statici.

    note note
    NOTE
    Per aggiungere librerie lato client, o i file statici in aggiunta a quanto configurato nel passaggio (4), puoi aggiungere da Configurazione offline scheda in Frammento esperienza .

    screen_shot_2019-07-26at82844pm

    j. Fare clic sul segno di spunta per completare il processo.

Convalida del risultato validating-the-result

Dopo aver completato i passaggi precedenti, puoi convalidare il frammento di esperienza in ChannelOne da:

  1. Navigazione a TestChannel.
  2. Selezione del Anteprima dalla barra delle azioni.

Visualizza il contenuto da Sites pagina (Live Copy del frammento di esperienza) nel canale, come illustrato nella figura seguente:
screen_shot_2018-06-08at120739pm

Propagazione delle modifiche alla pagina propagating-changes-from-the-master-page

Live Copy si riferisce alla copia (dell’origine), gestita dalle azioni di sincronizzazione definite dalle configurazioni di rollout.

Perché il frammento di esperienza creato è una Live Copy dalla sezione Sites e modifichi quel particolare frammento dalla pagina principale, visualizzi le modifiche nel tuo canale. In alternativa, puoi visualizzare la destinazione in cui hai utilizzato il frammento di esperienza.

NOTE
Per ulteriori informazioni su Live Copy, consulta Riutilizzo del contenuto: Gestore multisito e Live Copy.

Segui i passaggi seguenti per propagare le modifiche dal canale principale al canale di destinazione:

  1. Fai clic sul frammento di esperienza dalla sezione Sites (principale) e fai clic sull’icona della matita per modificare gli elementi nel frammento di esperienza.

    screen_shot_2018-06-08at122655pm

  2. Fai clic sul frammento di esperienza e fai clic sull’icona a forma di chiave inglese per aprire la finestra di dialogo e modificare le immagini.

    screen_shot_2018-06-08at25031pm

  3. Il Griglia prodotti viene visualizzata.

    screen_shot_2018-06-08at25306pm

  4. È possibile modificare qualsiasi immagine. Ad esempio, qui la prima immagine viene sostituita in questo frammento.

    screen_shot_2018-06-08at25608pm

  5. Fai clic sul frammento di esperienza e sull’icona Rollout per propagare le modifiche al frammento utilizzato nel canale.

    screen_shot_2018-06-08at31352pm

  6. Fai clic su Rollout.

    Noterai che le modifiche vengono implementate.

    screen_shot_2018-06-08at32148pm

Convalida delle modifiche validating-the-changes

Per confermare le modifiche apportate al canale, segui la procedura riportata di seguito:

  1. Accedi a Schermi > Canali > TestChannel.

  2. Clic Anteprima dalla barra delle azioni.

L’immagine seguente illustra le modifiche apportate al TestChannel:
screen_shot_2018-06-08at33351pm

recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053