Rendering di modelli adattivi adaptive-template-rendering
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 overview
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.
Configurazione configuration
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.
-
Modifica il gruppo di dispositivi che richiede un selettore adattivo in
http://localhost:4502/miscadmin#/etc/mobile/groupsImposta l’opzione Disattiva emulatore e salva.
-
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.
-
Utilizzando CRX DE Lite, consenti al gruppo di dispositivi di essere utilizzato sul modello aggiungendolo alla proprietà della stringa con più valori
cq:deviceGroupsnella struttura del modello./conf/<your-site>/settings/wcm/templates/<your-template>/structure/jcr:contentAd esempio, per aggiungere il gruppo di dispositivi Smart Phone:
/conf/we-retail/settings/wcm/templates/experience-page/structure/jcr:content
-
Utilizzando CRX DE Lite, consenti al gruppo di dispositivi di essere utilizzato sul tuo sito aggiungendolo alla proprietà della stringa con più valori
cq:deviceGroupsnella struttura del sito./content/<your-site>/jcr:contentAd esempio, se desideri consentire la Telefono avanzato gruppo di dispositivi:
/content/we-retail/jcr:content
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.
