ドキュメントCommerceコンテンツとデザイン

レイアウトの更新

Last update: Fri May 17 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：
  • CMS

作成対象：

  • 初心者
  • 中級
  • 管理者
  • ユーザー

カスタムレイアウトの更新に取り組む前に、ストアのページの作成方法と用語の違いを理解しておくことが重要です layout および レイアウトの更新. レイアウトとは、ページの視覚的かつ構造的な構成を指します。 レイアウトの更新とは、ページの作成方法を上書きまたはカスタマイズできる、特定の XML 命令のセットを指します。

の XML レイアウト Commerce ストアは、コンテナとブロックの階層構造です。 すべてのページに表示される要素もあれば、特定のページにのみ表示される要素もあります。 レイアウト、コンテナ、ブロックの詳細については、を参照してください。 レイアウトの概要 が含まれる フロントエンド開発者ガイド.

この ウィジェット ツールを使用すると、既存のを簡単に追加できます コンテンツブロック をページのデフォルトレイアウトに変更します。 より高度な更新を行うには、XML レイアウトの更新コードをサーバーに保存し、そのファイルを管理者からカスタムレイアウトの更新として参照する必要があります。 プロセスの概要については、を参照してください レイアウトの更新を使用.

次の図では、コンテナを参照する名前は黒で、ブロックの種類（ブロック クラス パス）は青です。

標準ブロックレイアウト図

ブロックタイプ
説明
page/html
このブロックの名前はです。 root これは、レイアウト内の数少ないルートブロックの 1 つです。 独自のブロックを作成して名前を付けることもできます root。これは、このタイプのブロックの標準的な名前です。 このタイプのブロックは、ページごとに 1 つだけ存在できます。
page/html_head
ブロック名は head ルートブロックの子です。 このタイプのブロックは、ページごとに 1 つのみ存在できるので、削除しないでください。
page/html_notices
ブロック名は global_notices ルートブロックの子です。 このブロックがレイアウトから削除されると、グローバル通知はページに表示されません。 このタイプのブロックは、ページごとに 1 つだけ存在できます。
page/html_header
ブロック名は header ルートブロックの子です。 このブロックは、ページの上部にあるビジュアルヘッダーに対応し、いくつかの標準ブロックが含まれています。 このタイプのブロックは、ページごとに 1 つのみ存在できるので、削除しないでください。
page/html_wrapper
デフォルトのレイアウトに含まれていますが、このブロックは非推奨であり、後方互換性を確保するためにのみ含まれています。 このタイプのブロックは使用しないでください。
page/html_breadcrumbs
このブロックの名前はです。 breadcrumbs また、ヘッダーブロックの子です。 このブロックには、現在のページのパンくずリストが表示されます。 このタイプのブロックは、ページごとに 1 つだけ存在できます。
page/html_footer
ブロック名は footer ルートブロックの子です。 フッターブロックは、ページの下部にある視覚的なフッターに対応し、いくつかの標準ブロックが含まれています。 このタイプのブロックは、ページごとに 1 つのみ存在できるので、削除しないでください。
page/template_links
標準レイアウトには、このタイプのブロックが 2 つあります。 この top.links ブロックはヘッダーブロックの子で、上部のナビゲーションメニューに対応します。 この footer_links block は footer ブロックの子で、下部のナビゲーションメニューに対応します。

注意： ​例に示すように、テンプレートリンクを操作できます。
page/switch
標準レイアウトには、このタイプのブロックが 2 つあります。 この store_language block はヘッダーブロックの子で、最上位の言語スイッチャーに対応します。 この store_switcher block は footer ブロックの子で、bottom store スイッチャーに対応します。
コア/メッセージ
標準レイアウトには、このタイプのブロックが 2 つあります。 この global_messages ブロックはグローバル メッセージを表示します。 この messages ブロックは、他のすべてのメッセージを表示するために使用されます。 これらのブロックを削除すると、メッセージは表示されません。
core/text_list
この種のブロックは全体で広く使用されています Commerce 子ブロックをレンダリングするためのプレースホルダーとして使用します。
core/profiler
このタイプのブロックのインスタンスは、ページごとに 1 つだけです。 内部に使用されます Commerce プロファイラー。他の目的には使用しないでください。

レイアウトの更新を使用してブロックを配置する

レイアウトの更新 ページのレイアウトをカスタマイズできるようにします。 レイアウトの更新は、 ウィジェットただし、サーバーへのアクセスと XML の基本知識が必要です。

次の手順は、レイアウトの更新を使用してページにブロックを配置する方法を示しています。 具体的な例と構文のヘルプについては、を参照してください。 一般的なレイアウトのカスタマイズタスク が含まれる フロントエンド開発者ガイド.

手順 1：ブロックの作成

  1. を作成 ブロック 配置する。

  2. をメモします block_idレイアウトの更新手順で使用されるからです。

手順 2:XML でレイアウトの更新を作成する

  1. レイアウト手順を XML で作成し、次の操作を行います CMS ブロックの参照.

  2. を保存します レイアウト手順 テーマの XML ファイルが保存されるレイアウトフォルダーのサーバー上。

    例：

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

    レイアウトハンドルは、で始まるファイル名です。 cms_page_view_selectable_、CMS ページの URL キー、レイアウト更新オプション、 xml ファイルサフィックス。 次の例では、 customer-service はページの URL キーで、かつ ChatTool は、レイアウトの更新をページに適用するために選択するオプションです。

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

    table 0-row-2 1-row-2 2-row-2 layout-auto
    要素 説明
    CMS ページ識別子 スラッシュを含むページの URL キー（/）がアンダースコア（_）に設定します。
    レイアウト更新名 に表示されるオプション カスタムレイアウトの更新.

手順 3：ページからレイアウトの更新を参照する

  1. 日 Admin サイドバー、に移動 Content > Elements>Pages.

  2. ブロックを配置するページを見つけて、編集モードで開きます。

  3. 下にスクロールして展開 展開セレクター この Design セクション。

  4. ページに関連付けられている使用可能なすべてのレイアウト更新を表示するには、 Custom Layout Update メニュー。

    カスタムレイアウトの更新リスト {width="400" modal="regular"}

  5. ページに適用するレイアウトの更新を選択します。

手順 4：キャッシュを保存して更新する

  1. 完了したら、 Save & Close.

  2. ワークスペースの上部にあるメッセージで、 Cache Management 無効なキャッシュ項目をすべて更新します。

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