LA RISPOSTA DI PAGINA

Aree di contenuto e componenti

Le aree di contenuto trasportano la parte redazionale della pagina. Ogni area contiene componenti che condividono una struttura comune e si distinguono per il tipo: e la parte del contratto che il software di rendering traduce direttamente in marcatura.

Le aree di contenuto

La proprieta regions.contentAreas e un elenco di aree. Ogni area ha tre proprieta: type, index e components.

Valore di type	Significato
`Composition`	Area di composizione libera, tipica delle pagine costruite a blocchi.
`Content`	Area redazionale principale, tipica di articoli, schede e pagine della guida.
`Shared`	Area con componenti condivisi fra piu pagine.
`Popup`	Contenuto destinato al popup del layout.

La proprieta index distingue piu aree dello stesso tipo previste dal layout e parte da 1. Il software di rendering associa ciascuna area alla propria posizione nel modello di presentazione e ne rende i componenti nell'ordine ricevuto.

La struttura comune di un componente

Ogni componente editoriale ha un involucro identico, indipendente dal tipo, e un carico specifico contenuto in data.

Proprieta	Descrizione
`id`	Identificativo stabile del componente. E anche il valore da usare per richiedere gli elementi di una galleria a caricamento differito.
`type`	Tipo del componente. Indica quale proprieta di data e valorizzata.
`presetCode`	Codice della variante di presentazione scelta nel pannello, ad esempio cover-single o stat-cards. Il significato grafico spetta al software di rendering.
`isHighlighted`	Segnala che il componente va reso in evidenza rispetto agli altri.
`visibility`	Regole di visibilita per desktop, tablet e mobile.
`link`	Destinazione applicata all'intero componente, quando previsto.
`background`	Sfondo del componente: immagine o contenuto multimediale.
`integration`	HTML gestito dallo sviluppatore e associato al componente nel pannello. Espone la sola proprieta html.
`data`	Carico specifico del tipo. Una sola proprieta e valorizzata.

Il contenuto di integration.html e codice scritto dallo sviluppatore nel pannello e viene restituito senza trasformazioni. Va trattato come parte del progetto di rendering, non come contenuto redazionale.

Corrispondenza fra tipo e carico

La tabella indica, per ogni valore di type, la proprieta di data da leggere.

type	Proprieta di data	Contenuto
`Paragraph`	`paragraph`	Testo formattato con intestazione, media e pulsanti.
`Section`	`section`	Contenitore a colonne con altri componenti.
`Heading`	`heading`	Intestazione autonoma con sopracciglio, titolo e sottotitolo.
`Image`	`image`	Immagine editoriale con didascalia.
`Multimedia`	`multimedia`	Filmato, audio o animazione.
`Gallery`	`gallery`	Raccolta di immagini e filmati.
`Showcase`	`showcase`	Vetrina di contenuti selezionati dal pannello.
`PresetSingle`	`presetSingle`	Blocco singolo governato da una variante di presentazione.
`PresetCollection`	`presetCollection`	Raccolta di blocchi omogenei governata da una variante.
`Accordion`	`accordion`	Elenco di voci espandibili.
`ViewCode`	`viewCode`	Raccolta di esempi di codice.
`LinkBox`	`linkBox`	Riquadro con titolo, testo, immagine e destinazione.
`Map`	`map`	Mappa con l'indirizzo selezionato.
`Form`	`form`	Modulo di contatto o di richiesta preventivo.
`NewsletterForm`	`newsletterForm`	Modulo di iscrizione alla newsletter.
`ButtonGroup`	`buttonGroup`	Gruppo ordinato di chiamate all'azione.

I valori AccordionItem, ViewCodeItem, PresetCollectionItem, FormItem e FormTitle identificano elementi interni ai rispettivi contenitori e non compaiono come componenti autonomi di un'area. Il valore Unknown indica un componente non riconosciuto e va ignorato.

Paragrafo, intestazione e sezione

Il paragrafo e il blocco editoriale di base. Espone html e raw per il testo, heading per l'intestazione, media per un contenuto multimediale con posizione e buttonGroup per le chiamate all'azione.

La posizione del media e dichiarata dalla proprieta position del media stesso e assume i valori None, Top, ColumnLeft, ColumnRight, UnderTitle, FloatLeft, FloatRight o Bottom.

L'intestazione autonoma contiene la sola proprieta heading e serve a introdurre un gruppo di componenti che non condividono un contenitore.

La sezione e il contenitore strutturale della pagina. Espone heading, verticalAlign con valori Top, Middle o Bottom, reverseColumnsOnMobile, isFullWidth e l'elenco columns.

Ogni colonna ha index a partire da 1, le tre larghezze desktopWidth, tabletWidth e mobileWidth, e il proprio elenco components. Le larghezze assumono il valore Default, da Width1 a Width12 su una griglia a dodici colonne, oppure Hidden per nascondere la colonna a quel formato.

I componenti dentro le colonne di una sezione hanno la stessa struttura dei componenti di primo livello, sezioni comprese. Il software di rendering percorre l'albero in modo ricorsivo.

Immagini, filmati e gallerie

I componenti di tipo immagine e multimediale espongono un contenuto multimediale con due proprieta aggiuntive: caption, la didascalia, e labelRaw, la versione formattata dell'etichetta.

La galleria espone heading, buttonGroup, lazyLoad e items. Ogni elemento ha id, type con valori Image o Multimedia, fullUrl con la versione a piena risoluzione, item con il contenuto multimediale nella variante da elenco e tags con le etichette di classificazione.

La distinzione fra item.url e fullUrl e progettata per le gallerie con ingrandimento: la prima e l'anteprima da mostrare nella griglia, la seconda l'immagine da aprire.

Quando lazyLoad e true, l'elenco items arriva vuoto e gli elementi vanno richiesti con l'endpoint dedicato passando l'identificativo del componente. Le etichette in tags permettono di costruire i filtri della galleria lato client.

Blocchi con variante di presentazione

I componenti di tipo preset separano il dato dalla sua presentazione. Il dato ha una forma fissa; la variante grafica e dichiarata da presetCode nell'involucro del componente.

Il blocco singolo espone id, html e raw, heading, media, buttonGroup, link, background, isHighlighted e visibility. La raccolta espone heading, buttonGroup e l'elenco items, i cui elementi hanno la stessa forma del blocco singolo.

Alcune proprieta compaiono sia nell'involucro del componente sia nel blocco preset, ad esempio background, isHighlighted e visibility. Nel blocco riguardano il singolo elemento della raccolta; nell'involucro riguardano il componente nel suo insieme.

Nei preset il contenuto multimediale non e necessariamente un'immagine: puo essere un numero o un'etichetta, con type pari a Number, LabelText o LabelNumber. E la forma con cui si rappresentano i riquadri di dati numerici.

Accordion, codice, riquadro e mappa

L'accordion espone headingLevel, il livello di titolo da usare per le voci, e l'elenco items. Ogni voce ha id, title e titleRaw, un eventuale titleMedia accanto al titolo, il corpo in html e raw, e un eventuale media con posizione.

Il componente di codice espone il solo elenco items. Ogni elemento ha id, title, codeLanguage e codeValue. Il linguaggio assume i valori Json, Bash, Http, JavaScript, CSharp, Python, Php, Xml, Sql o PlainText e stabilisce soltanto la formattazione visiva.

Il valore di codeValue e testo da rendere, mai da eseguire. Va inserito nel documento con la codifica dei caratteri riservati, come qualunque testo proveniente dalla redazione.

Il riquadro con destinazione espone heading, buttonCaption, link e image. La mappa espone la sola proprieta address, con l'indirizzo selezionato nella rubrica del sito e le sue coordinate. Il servizio cartografico da usare e indicato fra i servizi di terze parti del sito.

Moduli e vetrine

Il modulo espone heading, type con valori ContactForm o QuoteForm, il pulsante di invio e l'elenco fields. Ogni campo dichiara id, type, label, placeholder, helpHtml, checkboxLabelHtml, isRequired, l'elenco options e le tre larghezze desktopWidth, tabletWidth e mobileWidth con valori Full, Half o Third.

Il tipo del campo determina il controllo da rendere e la validazione da applicare: Heading, FirstName, LastName, Company, Email, Phone, BirthDate, Message, Text, Select, MultiSelect, CheckboxPrivacy, CheckboxTerms, CheckboxNewsletterSubscribe, CheckboxMarketingSubscribe, DynamicField, DateCalendar, PeriodCalendar e CompositionRooms.

Il modulo di newsletter e piu semplice: espone emailPlaceholder, privacyHtml con il testo del consenso e submitButton. In entrambi i casi il componente descrive soltanto la forma del modulo: l'invio avviene sugli endpoint dedicati, documentati nella sezione dedicata alle richieste.

La vetrina espone heading, buttonGroup, type, limit, skip, lazyLoad e items. Il tipo dichiara la sorgente dei contenuti, ad esempio Product, PostLastInserted o EventCategory, mentre limit e skip descrivono la finestra di elementi richiesta. Ogni elemento e una scheda uniforme con titolo, sottotitolo, descrizione, indirizzo, galleria, etichetta e il contenuto originale nella proprieta corrispondente al proprio tipo.

Area con sezione a due colonne

{
  "contentAreas": [
    {
      "type": "Composition",
      "index": 1,
      "components": [
        {
          "id": "bdddce1d-2fc0-4e09-b8c8-0200d971a822",
          "type": "PresetSingle",
          "presetCode": "cover-single",
          "isHighlighted": false,
          "visibility": { "hiddenOnDesktop": false, "hiddenOnTablet": false, "hiddenOnMobile": false },
          "background": {
            "type": "Multimedia",
            "multimedia": {
              "type": "VideoMp4",
              "url": "https://static.gajacms.com/smea/videos/smea_bg.mp4",
              "posterUrl": "https://static.gajacms.com/smea/images/posters/smea_bg.webp",
              "alt": "Smea filmato di sfondo",
              "width": 1280,
              "height": 720
            }
          },
          "data": {
            "presetSingle": {
              "id": "bdddce1d-2fc0-4e09-b8c8-0200d971a822",
              "html": "",
              "heading": {
                "eyebrow": { "html": "CHI SIAMO" },
                "title": {
                  "html": "NEL 1997 NASCE LA SMEA",
                  "anchorId": "a-nel-1997-nasce-la-smea",
                  "level": "H1"
                }
              }
            }
          }
        },
        {
          "id": "7c2f0d19-0000-0000-0000-000000000000",
          "type": "Section",
          "data": {
            "section": {
              "heading": {
                "title": {
                  "html": "ATTIVITA' <u>PRODUTTIVA</u>",
                  "anchorId": "a-attivita-produttiva",
                  "level": "H2"
                }
              },
              "verticalAlign": "Top",
              "reverseColumnsOnMobile": false,
              "isFullWidth": false,
              "columns": [
                {
                  "index": 1,
                  "desktopWidth": "Default",
                  "tabletWidth": "Default",
                  "mobileWidth": "Default",
                  "components": [
                    {
                      "id": "a3767ec4-c7c8-4982-bf2f-e0bfe2c466cf",
                      "type": "Paragraph",
                      "data": {
                        "paragraph": {
                          "html": "<p>La SMEA srl svolge la propria attivita nel settore metalmeccanico.</p>",
                          "raw": [
                            {
                              "type": "paragraph",
                              "content": [
                                { "type": "text", "text": "La SMEA srl svolge la propria attivita nel settore metalmeccanico." }
                              ]
                            }
                          ]
                        }
                      }
                    }
                  ]
                }
              ]
            }
          }
        }
      ]
    }
  ]
}