Rendu de modèle adaptatif

Dernière mise à jour : 2023-10-25

Le rendu de modèle adaptatif permet de gérer une page avec des variantes. Utile à l’origine pour fournir diverses sorties de HTML pour les appareils mobiles (par exemple, le téléphone portable par rapport au smartphone), cette fonctionnalité est utile lorsque des expériences doivent être diffusées sur différents appareils qui ont besoin de balises différentes ou d’une sortie de HTML différente.

Vue d’ensemble

Les modèles sont construits autour d’une grille réactive et les pages créées à partir de ces modèles sont entièrement réactives, s’ajustant automatiquement à la fenêtre d’affichage de l’appareil client. À l’aide de la barre d’outils de l’émulateur dans l’éditeur de pages, les auteurs peuvent cibler des dispositions sur des appareils spécifiques.

Il est également possible de configurer des modèles pour prendre en charge le rendu adaptatif. Lorsque les groupes d’appareils sont correctement configurés, la page est générée avec un sélecteur différent dans l’URL lors de la sélection d’un appareil en mode émulateur. A l’aide d’un sélecteur, un rendu de page spécifique peut être appelé directement via l’URL.

N’oubliez pas de configurer vos groupes d’appareils :

  • Chaque appareil doit appartenir à au moins un groupe d’appareils.
  • Un appareil peut se trouver dans plusieurs groupes d’appareils.
  • Les appareils pouvant appartenir à plusieurs groupes d’appareils, les sélecteurs peuvent être combinés.
  • La combinaison de sélecteurs est évaluée de haut en bas, car ils sont conservés dans le référentiel.
REMARQUE

Le groupe d’appareils **Les appareils réactifs n’ont jamais de sélecteur, car les appareils reconnus comme prenant en charge la conception réactive sont supposés n’avoir pas besoin d’une mise en page adaptative.

Configuration

Les sélecteurs de rendu adaptatif peuvent être configurés pour les groupes d’appareils existants ou pour des groupes que vous avez vous-même créés.

Dans cet exemple, vous allez configurer le groupe d’appareils existant. Smart Phones pour avoir un sélecteur de rendu adaptatif dans le Page d’expérience dans We.Retail.

  1. Modifiez le groupe d’appareils qui nécessite un sélecteur adaptatif dans http://localhost:4502/miscadmin#/etc/mobile/groups.

    Définissez l’option Désactiver l’émulateur et enregistrez.

    chlimage_1-157

  2. Le sélecteur est disponible pour la BlackBerry® et IPHONE 4 fourni au groupe d’appareils ; Smart Phone est ajouté aux structures de modèle et de page dans les étapes suivantes.

    chlimage_1-158

  3. Avec CRXDE Lite, autorisez l’utilisation du groupe d’appareils sur votre modèle en l’ajoutant à la propriété de chaîne à plusieurs valeurs. cq:deviceGroups sur la structure de votre modèle.

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

    Par exemple, si vous souhaitez ajouter le groupe d’appareils Smart Phone :

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

    chlimage_1-159

  4. Avec CRXDE Lite, autorisez l’utilisation du groupe d’appareils sur votre site en l’ajoutant à la propriété de chaîne à plusieurs valeurs. cq:deviceGroups sur la structure de votre site.

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

    Par exemple, si vous souhaitez autoriser la variable Smart Phone groupe d’appareils :

    /content/we-retail/jcr:content

    chlimage_1-160

Maintenant, lors de l’utilisation de la variable émulateur dans l’éditeur de page (par exemple, lorsque modification de la mise en page) et que vous choisissez un appareil du groupe d’appareils configuré, la page est rendue avec un sélecteur dans l’URL.

Dans cet exemple, lors de la modification d’une page en fonction de la variable Page d’expérience et en choisissant iPhone 4 dans l’émulateur, la page est rendue, y compris le sélecteur comme arctic-surfing-in-lofoten.smart.html au lieu de arctic-surfing-in-lofoten.html

La page peut également être appelée directement à l’aide de ce sélecteur.

chlimage_1-161

Sur cette page