Rendering di modelli adattivi

Il rendering del modello adattivo fornisce un modo per gestire una pagina con varianti. Originariamente utile per fornire diversi output di HTML per dispositivi mobili (ad esempio, telefono cellulare con funzioni o smartphone), questa funzione è utile quando le esperienze devono essere distribuite a vari dispositivi che necessitano di markup o output di HTML diversi.

Panoramica

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

È inoltre possibile impostare modelli per supportare il rendering adattivo. Quando i gruppi di dispositivi sono configurati correttamente, alla pagina verrà eseguito il rendering con un selettore diverso nell’URL quando si seleziona un dispositivo in modalità emulatore. L’utilizzo di un selettore consente di richiamare direttamente un rendering della pagina tramite l’URL.

Ricorda quando configuri gruppi di dispositivi:

  • Ogni dispositivo deve trovarsi in almeno un gruppo di dispositivi.
  • Un dispositivo può trovarsi in più gruppi di dispositivi.
  • Poiché i dispositivi possono trovarsi in più gruppi di dispositivi, i selettori possono essere combinati.
  • La combinazione di selettori viene valutata dall’alto verso il basso in quanto persistono nell’archivio.
NOTA

Gruppo di dispositivi Dispositivi reattivi non avrà mai un selettore perché i dispositivi riconosciuti come dispositivi che supportano la progettazione reattiva non necessitano di un layout adattivo

Configurazione

I selettori di rendering adattivi possono essere configurati per gruppi di dispositivi esistenti o per gruppi creati da te.

Per questo esempio, configureremo il gruppo di dispositivi esistente Telefoni intelligenti per disporre di un selettore di rendering adattivo come parte del Pagina Esperienza all’interno di We.Retail.

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

    Imposta l’opzione Disattiva emulatore e salva.

    chlimage_1-157

  2. Il selettore sarà disponibile per il Blackberry e iPhone 4 forniva il gruppo di dispositivi Telefono avanzato viene aggiunto al modello e alle strutture di pagina nei passaggi seguenti.

    chlimage_1-158

  3. Utilizzando CRX DE Lite, consenti al gruppo di dispositivi di essere utilizzato sul modello aggiungendolo alla proprietà della stringa con più valori cq:deviceGroups nella struttura del modello.

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

    Ad esempio, per 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, consenti al gruppo di dispositivi di essere utilizzato sul tuo sito aggiungendolo alla proprietà della stringa con più valori cq:deviceGroups nella struttura del sito.

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

    Ad esempio, se desideri consentire la Telefono avanzato gruppo di dispositivi:

    /content/we-retail/jcr:content

    chlimage_1-160

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

Nel nostro esempio, quando modifichi una pagina basata sui Pagina Esperienza e scegliendo iPhone 4 nell’emulatore, la pagina viene sottoposta a rendering includendo il selettore come arctic-surfing-in-lofoten.smart.html anziché arctic-surfing-in-lofoten.html

La pagina può anche essere chiamata direttamente utilizzando questo selettore.

chlimage_1-161

In questa pagina