Mises à jour de la mise en page

Avant de commencer à utiliser les mises à jour de mise en page personnalisées, il est important de comprendre comment les pages de votre magasin sont construites et la différence entre les termes. layout et mise à jour des mises en page. La mise en page fait référence à la composition visuelle et structurelle de la page. La mise à jour de la mise en page fait référence à un ensemble spécifique d’instructions XML qui peuvent remplacer ou personnaliser la manière dont la page est créée.

La disposition XML de votre Commerce store est une structure hiérarchique de conteneurs et de blocs. Certains éléments apparaissent sur chaque page, d’autres uniquement sur des pages spécifiques. Pour en savoir plus sur la mise en page, les conteneurs et les blocs, voir Mise en page - Aperçu dans le Guide du développeur de Frontend.

La variable Widget est un moyen simple d’ajouter une bloc de contenu à la mise en page par défaut d’une page. Pour les mises à jour plus avancées, vous devez enregistrer le code de mise à jour de mise en page XML sur le serveur, puis référencer le fichier comme mise à jour de mise en page personnalisée depuis l’administrateur. Pour une présentation du processus, voir Utilisation des mises à jour de mise en page.

Dans le diagramme suivant, les noms qui font référence aux conteneurs sont en noir et les types de blocs, ou chemins de classe de bloc, en bleu.

Diagramme de disposition en bloc standard

Type de bloc
Description
page/html
Le nom de ce bloc est root et c'est l'un des rares blocs racine de la mise en page. Vous pouvez également créer votre propre bloc et le nommer. root, qui est le nom standard des blocs de ce type. Il ne peut y avoir qu’un seul bloc de ce type par page.
page/html_head
Le nom du bloc est head et c'est un enfant du bloc racine. Il ne peut y avoir qu’un seul bloc de ce type par page et il ne doit pas être supprimé.
page/html_notices
Le nom du bloc est global_notices et c'est un enfant du bloc racine. Si ce bloc est supprimé de la mise en page, les informations globales n'apparaissent pas sur la page. Il ne peut y avoir qu’un seul bloc de ce type par page.
page/html_header
Le nom du bloc est header et c'est un enfant du bloc racine. Ce bloc correspond à l'en-tête visuel en haut de la page et contient plusieurs blocs standard. Il ne peut y avoir qu’un seul bloc de ce type par page et il ne doit pas être supprimé.
page/html_wrapper
Bien qu’il soit inclus dans la mise en page par défaut, ce bloc est obsolète et n’est inclus que pour garantir une compatibilité ascendante. N’utilisez pas de blocs de ce type.
page/html_breadcrumbs
Le nom de ce bloc est breadcrumbs et c'est un enfant du bloc d'en-tête. Ce bloc affiche le chemin de navigation de la page active. Il ne peut y avoir qu’un seul bloc de ce type par page.
page/html_footer
Le nom du bloc est footer et c'est un enfant du bloc racine. Le bloc de pied de page correspond au pied de page visuel en bas de la page et contient plusieurs blocs standard. Il ne peut y avoir qu’un seul bloc de ce type par page et il ne doit pas être supprimé.
page/template_links
La mise en page standard comporte deux blocs de ce type. La variable top.links block est un enfant du bloc d’en-tête et correspond au menu de navigation supérieur. La variable footer_links block est un enfant du bloc de pied de page et correspond au menu de navigation du bas.

Remarque : ​Il est possible de manipuler les liens du modèle, comme dans les exemples.
page/switch
Il existe deux blocs de ce type dans une disposition standard. La variable store_language block est un enfant du bloc d’en-tête et correspond au sélecteur de langues supérieur. La variable store_switcher block est un enfant du bloc de pied de page et correspond au sélecteur de magasin inférieur.
core/messages
Il existe deux blocs de ce type dans une disposition standard. La variable global_messages block affiche les messages globaux. La variable messages block est utilisé pour afficher tous les autres messages. Si vous supprimez ces blocs, le client ne voit aucun message.
core/text_list
Ce type de bloc est largement répandu dans tout le Commerce comme espace réservé pour le rendu des blocs enfants.
core/profiler
Il n'y a qu'une seule instance de ce type de bloc par page. Il est utilisé pour le Commerce profiler et ne doit pas être utilisé à d’autres fins.

Placer un bloc à l’aide des mises en page

Mises à jour de la mise en page permet de personnaliser la mise en page d’une page. Les mises à jour de mise en page offrent plus de flexibilité qu’une widget, mais requiert un accès au serveur et une connaissance de base du XML.

Les étapes suivantes montrent comment utiliser une mise à jour de mise en page pour placer un bloc sur une page. Pour obtenir des exemples spécifiques et de l’aide sur la syntaxe, voir Tâches courantes de personnalisation de la mise en page dans le Guide du développeur de Frontend.

Etape 1 : création du bloc

  1. Créez le block que vous voulez placer.

  2. Prenez note de la block_id, car elle est utilisée dans les instructions de mise à jour de mise en page.

Etape 2 : Composer la mise en page au format XML

  1. Composer les instructions de mise en page au format XML en Référencer un bloc CMS.

  2. Enregistrez le instructions de mise en page sur le serveur dans le dossier layout où les fichiers XML sont enregistrés pour le thème.

    Par exemple :

    <theme_dir>/<Namespace>_<Module>/layout

    La poignée de mise en page est le nom de fichier qui commence par cms_page_view_selectable_, suivie de la clé URL de la page CMS, de l’option de mise à jour de la mise en page, et de la xml suffixe du fichier. Dans l’exemple suivant, customer-service est la clé d’URL de la page, et ChatTool est l’option que vous choisissez pour appliquer la mise à jour de la mise en page à la page.

    cms_page_view_selectable_<customer-service>_<ChatTool>.xml

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Élément Description
    Identifiant de page CMS Clé URL de la page avec toute barre oblique (/) remplacé par un trait de soulignement (_).
    Nom de mise à jour de la mise en page L’option qui s’affiche pour Mise à jour de la mise en page personnalisée.

Étape 3 : référencer la mise en page à partir de la page

  1. Sur le Administration barre latérale, accédez à Content > Elements>Pages.

  2. Recherchez la page où vous souhaitez placer le bloc et ouvrez-le en mode d'édition.

  3. Faire défiler vers le bas et développer Sélecteur d’extension la valeur Design .

  4. Pour afficher toutes les mises à jour de mise en page disponibles associées à la page, cliquez sur le bouton Custom Layout Update .

    Liste de mise à jour de mise en page personnalisée {width="400" modal="regular"}

  5. Sélectionnez la mise à jour de mise en page à appliquer à la page.

Étape 4 : enregistrer et actualiser le cache

  1. Lorsque vous avez terminé, cliquez sur Save & Close.

  2. Dans le message situé en haut de l’espace de travail, cliquez sur Cache Management et actualisez tous les éléments de cache non valides.

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de