Rivedere le pagine del sito web
L'applicazione del sito web di marketing Café Supremo ha tre pagine, HOME, MENU e BLOG.
HOME page
Nella home page vengono visualizzate campagne di marketing quali pubblicità e promozioni.
Gli elementi disponibili sul sito sono pubblicizzati con dettagli e link sulla home page. Nella parte superiore, c'è una promozione con un pulsante in più che, quando si fa clic, apre una pagina che descrive l'elemento. Sotto la promozione, ci sono tre annunci pubblicitari con pulsanti shop now. Alla fine della home page, viene visualizzato l'ultimo blog e si apre la corrispondente pagina dei dettagli del blog quando si fa clic.
Descrizione dell'immagine home_page.png
Passiamo alla home page per capire come i componenti Oracle Content Management dello scambio di componenti vengono utilizzati nell'applicazione Cafe-Supremo in Oracle Visual Builder.
Descrizione dell'immagine home-start_page.png
I componenti Lista contenuti con impostazioni appropriate vengono utilizzati per visualizzare il contenuto nella home page.
Ad esempio, vediamo la configurazione del componente Lista contenuti utilizzato nella parte superiore della pagina.
Descrizione dell'immagine home_page_component.png
Le seguenti impostazioni chiave vengono specificate nel riquadro Proprietà di questo componente per visualizzare la promozione nella parte superiore.
- ID: ID API univoco dell'asset.
- Content Server- Valore predefinito
- Token canale- Valore predefinito
- Tipo di contenuto- Promozione
- Layout- Predefinito in promozione
- Numero massimo di elementi- 1
- Inizia dall'elemento- 1
Il tipo di contenuto Promo viene utilizzato in questo componente. Il numero di elementi da visualizzare è limitato a uno. Il pulsante Altro è configurato per puntare alla pagina dei dettagli corrispondente. Viene impostato un handler di eventi per configurare questo pulsante in modo da aprire la pagina dei dettagli promozionali corrispondente. Nelle proprietà del componente, nella scheda Eventi, le impostazioni dell'evento vengono configurate per definire un evento e una catena di azioni (una sequenza di azioni) che specifica cosa succede quando si verifica l'evento specificato, ovvero cosa accade quando un elemento viene fatto clic sulla pagina (ad esempio il pulsante Altro). I listener di eventi sono definiti per questa pagina nella scheda Listener di eventi per ascoltare gli eventi e avviare le catene di azioni definite nella scheda Azioni.
Descrizione dell'immagine component_event.png
Nella scheda Azioni vengono definite le azioni associate agli eventi definiti nella scheda Eventi per un elemento della lista di contenuti, insieme alle catene di azioni. Le azioni fanno parte di una catena di azioni. Ad esempio, nella scheda Azioni, quando si fa clic sulla prima azione definita per la prima lista di contenuti, è possibile visualizzarne la configurazione. Nella sezione Diagramma, quando si fa clic su Naviga dettagli promo (che è un'azione di navigazione), verrà visualizzato che il campo Destinazione nel riquadro delle proprietà è impostato su Dettagli promo, in modo che venga visualizzata la pagina dei dettagli quando un utente fa clic sul pulsante Altro nella promozione.
Descrizione dell'immagine actions_tab.png
La pagina dei dettagli promozionali contiene un componente segnaposto contenuto configurato per visualizzare dinamicamente gli elementi di contenuto. Pertanto, quando un utente fa clic sul pulsante Altro, il componente Segnaposto contenuto nella pagina dei dettagli promozionali carica automaticamente i dettagli dell'elemento di contenuto associato.
Descrizione dell'immagine promo_details.png
Allo stesso modo, abbiamo una pagina blog-detail che viene utilizzata per visualizzare il corrispondente articolo del blog quando un utente fa clic sul blog visualizzato alla fine della home page.
Questi componenti Oracle Content Management possono essere trascinati dallo scambio di componenti e eliminati nelle pagine dell'applicazione Web, quindi configurati con impostazioni appropriate in base alle proprie esigenze.
Descrizione dell'immagine component_exchange ange.png
Ad esempio, per capire come aggiungere un elemento di contenuto alla home page, vedere la sezione Personalizza di questa cartella di riproduzione delle soluzioni.
Allo stesso modo, altri due componenti di Content List vengono utilizzati per visualizzare gli annunci pubblicitari e il blog sotto la promozione.
In base alle impostazioni, questi componenti recuperano dinamicamente il contenuto dal repository creato in precedenza in Oracle Content Management, quindi visualizzarlo nella home page.
Pagina MENU
Nella pagina MENU sono elencate tutte le voci di menu di un catalogo.
Descrizione dell'immagine menu_page.png
Questa pagina visualizza tre schede, COFFEE, TEA e TREATS. Ciascuna di queste schede mostra diverse varietà di articoli disponibili in tale categoria. Ad esempio, nella scheda COFFEE, varietà come CLASSIC ESPRESSO, SUPREMO CAPPUCCINO, COLD PRESS COFFEE e BLACK SUPREMO visualizzano informazioni su ciascuna varietà. Alcuni degli elementi hanno anche video. Sotto queste schede, le diverse combinazioni Café Supremo mostrano dettagli tra cui immagini che descrivono gli elementi disponibili in ciascuna delle combinazioni.
Nella pagina del menu, alcuni dei componenti chiave utilizzati sono Barra delle schede e Lista dei contenuti. Questi componenti sono stati utilizzati con impostazioni appropriate per visualizzare il contenuto nella pagina del menu. Il componente Elenco contenuti proviene dallo scambio di componenti.
Ad esempio, vediamo la configurazione di uno dei componenti Lista contenuti utilizzati nella parte superiore della pagina.
Descrizione dell'immagine menu_page_component.png
Le seguenti impostazioni chiave vengono specificate nel riquadro Proprietà di questo componente per visualizzare le voci di contenuto (voci di menu).
- ID: ID API univoco dell'asset.
- Content Server- Valore predefinito
- Token canale- Valore predefinito
- Tipo di contenuto- MenuItem
- Layout- MenuItem: impostazione predefinita
- Numero massimo di elementi- 10
- Inizia dall'elemento– 1
- Stringa query aggiuntiva- fields.menuitem_category eq "COFFEE"
Il tipo di contenuto MenuItem viene utilizzato in questo componente. Il numero di elementi da visualizzare è limitato a dieci. Per la prima scheda (scheda COFFEE), il campo Stringa query aggiuntiva è impostato su fields.menuitem_category eq "COFFEE". Allo stesso modo, è impostato per le altre schede troppo. Il campo Stringa query aggiuntiva consente di specificare parametri di query aggiuntivi per perfezionare ulteriormente la lista delle voci di menu visualizzate.
Analogamente, un altro componente Elenco contenuti viene utilizzato con le impostazioni appropriate per visualizzare le voci menu combinate disponibili in Café Supremo.
I componenti dello scambio di componenti consentono a queste pagine di disporre di contenuti ricchi recuperando in modo dinamico il contenuto dal repository in Oracle Content Management e visualizzandoli nell'applicazione in Oracle Visual Builder.
Pagina BLOG
La pagina BLOG viene utilizzata per visualizzare articoli di blog di diverse categorie.
Descrizione dell'immagine blog_page.png
Questa pagina ha quattro schede per le diverse categorie di blog come COME A, DRINKS, PEOPLE, e RECIPES. Ogni scheda visualizza gli elementi del blog disponibili per quella categoria specifica con dettagli quali un'immagine, un titolo del blog e una data di pubblicazione. Quando un utente fa clic su un elemento del blog, la pagina dell'articolo del blog si apre nella stessa finestra.
Componenti quali la barra delle schede e la lista dei contenuti con impostazioni appropriate vengono utilizzati per visualizzare il contenuto nella pagina del blog. Il componente Elenco contenuti proviene dallo scambio di componenti.
Il componente Barra schede è configurato con impostazioni appropriate per visualizzare le quattro categorie come schede nella pagina del blog. Le seguenti impostazioni chiave vengono specificate nel riquadro Proprietà di questo componente per visualizzare le quattro categorie di blog come schede.
- ID: ID API univoco dell'asset.
- Selezione: viene specificata la chiave dell'elemento selezionato.
- Schede: vengono specificate le informazioni sulla scheda per le quattro categorie e la prima scheda viene impostata come scheda predefinita.
- Bordo- Superiore
Le proprietà della variabile necessaria per queste schede vengono impostate nella scheda Variabili.
Vediamo la configurazione del componente Lista contenuti. Le seguenti impostazioni chiave vengono specificate nel riquadro Proprietà di questo componente per visualizzare gli elementi del blog.
- ID: ID API univoco dell'asset.
- Content Server- Valore predefinito
- Token canale- Valore predefinito
- Tipo di contenuto- Blog
- Layout- Blog-Default
- Vista elenco- threeColumns
- Numero massimo di elementi- 10
- Inizia dall'elemento– 1
- Stringa query aggiuntiva- fields.blog_category eq "HOW TO"
Il tipo di contenuto del blog viene utilizzato in questo componente. Il numero di elementi da visualizzare è limitato a dieci. Per la prima scheda (scheda HOW TO), il campo Stringa query aggiuntiva è impostato su fields.menuitem_category eq "HOW TO". Allo stesso modo, è impostato per le altre schede troppo. Viene impostato un handler di eventi per definire le azioni e gli eventi associati agli elementi della lista di contenuti per specificare cosa accade quando un utente fa clic su un elemento del blog. Nelle proprietà del componente, nella scheda Eventi, le impostazioni dell'evento vengono configurate per definire un evento e una catena di azioni che specifica cosa succede quando si verifica l'evento specificato, ovvero cosa accade quando si fa clic su un elemento nella pagina. I listener di eventi sono definiti per questa pagina nella scheda Listener di eventi per ascoltare gli eventi e avviare le catene di azioni definite nella scheda Azioni.
Descrizione dell'immagine blog-start_page.png
Nella scheda Azioni vengono definite le azioni associate agli eventi definiti nella scheda Eventi per un elemento della lista di contenuti, insieme alle catene di azioni. Le azioni fanno parte di una catena di azioni (una sequenza di azioni). Ad esempio, nella scheda Azioni, quando si fa clic sulla prima azione è possibile visualizzarne la configurazione. Nella sezione Diagramma, quando si fa clic su Naviga coda blog (che è un'azione di navigazione), viene visualizzato che il campo Destinazione nel riquadro delle proprietà è impostato su coda blog, in modo che venga visualizzata la pagina corrispondente dell'articolo blog (dettagli blog) quando un utente fa clic su un elemento blog nella pagina blog.
Descrizione dell'immagine target_setting.png
La pagina blog-details contiene un componente Content Placeholder configurato per visualizzare dinamicamente gli elementi di contenuto. Pertanto, quando un utente fa clic su un elemento del blog, il componente Segnaposto contenuto nella pagina Dettagli blog carica automaticamente i dettagli dell'elemento di contenuto associato.
Descrizione dell'immagine blog-details_page.png
Una volta pubblicata l'applicazione Web, quando vengono aggiunti e pubblicati nuovi articoli del blog (elementi di contenuto del blog) (nell'interfaccia Web di Oracle Content Management), questi articoli del blog vengono estratti dinamicamente nella pagina del blog dell'applicazione Web (in Oracle Visual Builder) e resi immediatamente disponibili agli utenti.