Rendering modello adattivo

Il rendering del modello adattivo consente di gestire una pagina con varianti. Originariamente utile per fornire vari output HTML per dispositivi mobili (ad esempio, telefoni cellulari con funzionalità e smartphone), questa funzione è utile quando le esperienze devono essere distribuite a vari dispositivi che necessitano di markup o output HTML diversi.

Panoramica

I modelli sono generalmente basati su una griglia reattiva e le pagine create in base a questi modelli sono completamente reattive, adattandosi automaticamente alla finestra del dispositivo client. Tramite la barra degli strumenti Emulatore nell’editor di pagina, gli autori possono eseguire il targeting dei layout per dispositivi specifici.

È inoltre possibile impostare modelli per il supporto del rendering adattivo. Quando i gruppi di dispositivi sono configurati correttamente, viene eseguito il rendering della pagina con un altro selettore nell’URL quando si seleziona un dispositivo in modalità emulatore. Utilizzando un selettore, è possibile richiamare direttamente il rendering di una pagina mediante l’URL.

Ricorda quando imposti i gruppi di dispositivi:

  • Ogni dispositivo deve essere in almeno un gruppo di dispositivi.
  • Un dispositivo può appartenere a più gruppi di dispositivi.
  • Poiché i dispositivi possono essere raggruppati in più gruppi di dispositivi, i selettori possono essere combinati.
  • La combinazione di selettori viene valutata dall'alto verso il basso mentre sono persistenti nella directory archivio.
NOTA

Il gruppo di dispositivi Dispositivi reattivi non avrà mai un selettore, perché i dispositivi riconosciuti come il supporto della progettazione reattiva non necessitano di un layout adattivo

Configurazione

I selettori di rendering adattivi possono essere configurati per i gruppi di dispositivi esistenti o per i gruppi creati dall'utente.

Per questo esempio, stiamo per configurare il gruppo di dispositivi Smart Phones in modo che sia disponibile un selettore di rendering adattivo nell'ambito del modello Experience Page in We.Retail.

  1. Modificate il gruppo di dispositivi che richiede un selettore adattivo in http://localhost:4502/miscadmin#/etc/mobile/groups

    Impostare l'opzione Disattiva emulatore e salvare.

    chlimage_1-157

  2. Il selettore sarà disponibile per i Blackberry e iPhone 4 purché il gruppo di dispositivi Smart Phone sia aggiunto al modello e alle strutture di pagina nei seguenti passaggi.

    chlimage_1-158

  3. Utilizzando CRX DE Lite, consentite che il gruppo di dispositivi sia utilizzato nel modello aggiungendolo alla proprietà stringa multi-valore cq:deviceGroups nella struttura del modello.

    /conf/<your-site>/settings/wcm/templates/<your-template>/structure/jcr:content

    Ad esempio, se si desidera aggiungere il gruppo di dispositivi Smart Phone:

    /conf/we-retail/settings/wcm/templates/experience-page/structure/jcr:content

    chlimage_1-159

  4. Utilizzando CRX DE Lite, consentite che il gruppo di dispositivi sia utilizzato sul sito aggiungendolo alla proprietà stringa multi-valore cq:deviceGroups nella struttura del sito.

    /content/<your-site>/jcr:content

    Ad esempio, se si desidera consentire il gruppo di dispositivi Smart Phone:

    /content/we-retail/jcr:content

    chlimage_1-160

Ora, quando si utilizza l' emulatore nell'editor di pagina (ad esempio quando si modifica il layout) e si sceglie un dispositivo del gruppo di dispositivi configurato, la pagina verrà rappresentata con un selettore come parte dell'URL.

Nel nostro esempio, quando si modifica una pagina basata sul modello Experience Page e si sceglie iPhone 4 nell'emulatore, viene eseguito il rendering della pagina includendo il selettore arctic-surfing-in-lofoten.smart.html invece di arctic-surfing-in-lofoten.html

La pagina può essere chiamata direttamente tramite questo selettore.

chlimage_1-161

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free