> For the complete documentation index, see [llms.txt](https://docs.cs-cart.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cs-cart.jp/theme-development/templates.md). # テンプレート ## Smarty3 CS-Cartは`Smarty 3`テンプレートエンジンを使用しています。\ Smartyは、表示部分とアプリケーションコードを分けることが可能です。 Smartyについてさらに詳しい情報は[こちら](http://www.smarty.net/docs/ja/)で確認することが出来ます。このチャプターでは開発者にとって、非常に興味深いものになるでしょう。\ テンプレートが使用することができる構造を詳しく説明します。 ## テンプレート構造テンプレートは\_design/themes/テーマ名/templates\_ディレクトリにあります。\ テンプレートは以下の構造になっています： * `addons` ディレクトリ - アドオン用テンプレートを格納しています。 * `blocks` ディレクトリ - ブロック設定のレイアウトで使用されるテンプレートを格納。これらはブロックを定義することができるテンプレートとラッパーです。 * `buttons` ディレクトリ - ボタン用のテンプレートを格納。ボタンの役割によって用意されています。 * `common` ディレクトリ - 複数の箇所で使用する共通の機能を持ったテンプレートを格納。例えば、パンくず、カレンダー、ページネーション用のテンプレートです。 * `pickers` ディレクトリ - 商品ページやとカテゴリーページで使用するダイアログのテンプレートを格納。 * `views` ディレクトリ -各コントローラー用のテンプレートを格納 * `404.tpl` ファイル - 404ページ用のテンプレートファイル。 * `demo_theme_selector.tpl` ファイル - `ビジュアルエディタ`用のテンプレートファイル。 * `index.tpl` ファイル - メインのテンプレートファイル。このファイルは以下の内容が含まれています。 * *DOCTYPE* - 必須要素。 ``を使用することをお勧めします。 * Title - ページタイトル * \_meta.tpl\_ファイルの読み込み * \_common/styles.tpl\_ファイルの読み込み * *common/scripts.tpl* ファイルの読み込み * ビジュアルエディタ、デモパネル、翻訳、テンプレートモードの各ファイルの読み込み * `meta.tpl` ファイル - サイトのメタ情報が書かれたファイル：description, keywords, viewport等 \`\* 以下はCS-Cart Version 4.2.4の`responsive`テーマの各ファイルです。 ```html {* To modify and rearrange content blocks in your storefront pages or change the page structure, use the layout editor under Design->Layouts in your admin panel. There, you can: * modify the page layout * make it fluid or static * set the number of columns * add, remove, and move blocks * change block templates and types and more. You only need to edit a .tpl file to create a new template or modify an existing one; often, this is not the case. Basic layouting concepts: This theme uses the Twitter Bootstrap 2.3 CSS framework. A layout consists of four containers (CSS class .container): TOP PANEL, HEADER, CONTENT, and FOOTER. Containers are partitioned with fixed-width grids (CSS classes .span1, .span2, etc.). Content blocks live inside grids. You can drag'n'drop blocks from grid to grid in the layout editor. A block represents a certain content type (e.g. products) and uses a certain template to display it (e.g. list with thumbnails). *} {capture name="title"} {hook name="index:title"} {if $page_title} {$page_title} {else} {foreach from=$breadcrumbs item=i name="bkt"} {if !$smarty.foreach.bkt.first}{$i.title|strip_tags}{if !$smarty.foreach.bkt.last} :: {/if}{/if} {/foreach} {if !$skip_page_title && $location_data.title}{if $breadcrumbs|count > 1} - {/if}{$location_data.title}{/if} {/if} {/hook} {/capture} {$smarty.capture.title|strip|trim nofilter} {include file="meta.tpl"} {include file="common/styles.tpl" include_dropdown=true} {include file="common/scripts.tpl"} {if $runtime.customization_mode.design} {include file="common/toolbar.tpl" title=__("on_site_template_editing") href="customization.disable_mode?type=design"} {/if} {if $runtime.customization_mode.live_editor} {include file="common/toolbar.tpl" title=__("on_site_live_editing") href="customization.disable_mode?type=live_editor"} {/if} {if "THEMES_PANEL"|defined} {include file="demo_theme_selector.tpl"} {/if}

{include file="common/loading_box.tpl"} {include file="common/notification.tpl"}

{hook name="index:content"} {render_location} {/hook}

{if $runtime.customization_mode.design} {include file="common/template_editor.tpl"} {/if} {if $runtime.customization_mode.theme_editor} {include file="common/theme_editor.tpl"} {/if} {hook name="index:footer"}{/hook}

``` ```html {hook name="index:meta"} {if $display_base_href} {/if} {hook name="index:meta_description"} {/hook} {/hook} {$location_data.custom_html nofilter} ``` ```php {__("page_not_found")} {literal}{/literal}

{$exception_status} {__("exception_error")}

{__("exception_title")}

{if $smarty.const.HTTPS === true} {assign var="return_url" value=$config.https_location|fn_url} {else} {assign var="return_url" value=$config.http_location|fn_url} {/if} {if $exception_status == "403"} {__("access_denied_text")} {elseif $exception_status == "404"} {__("page_not_found_text")} {/if}

{__("exception_error_code")} {if $exception_status == "403"} {__("access_denied")} {elseif $exception_status == "404"} {__("page_not_found")} {/if}

``` ## アドオン用のテンプレートアドオン用のテンプレートは`templates/addons`ディレクトリにあります。 ## アドオンのテンプレートの構造 * `blocks`ディレクトリ -アドオンブロックンテンプレート。レイアウトエディターでブロックとして選択可能となります。 `blocks/product_tabs`以下のファイルは商品タブで選択可能になります。 * `hooks` ディレクトリ - テンプレートフック用のテンプレート * `views` テンプレート - 独自に追加されたテンプレートアドオンディレクトリではこれらの他にもアドオンを正常に作動させるために必要な他のディレクトリやファイルを自由に配置できます。`ソーシャルボタン`アドオンの`providers` ディレクトリなどを参照して下さい。 ## Blocks テンプレートブロック用のテンプレートは\_templates/block\_ ディレクトリにあります。\ ブロックの役割によって異なったテンプレートが適応されます。テンプレートアプリケーションは\_app/schemas/block\_manager/blocks.php\_ ファイルに定義されています。例えば、カテゴリーブロックでは ```php 'templates' => 'blocks/categories' ``` `blocks/categories`ディレクトリから全てのテンプレートに適応が可能ということ意味します。ファイル名は言語変数によって以下のように定義されます： * ファイル内のコードに次のパートをもつ場合：`{block-description:name_of_template}`、`name_of_template`が使用されます。 * ファイルにこのような記述がない場合は、テンプレートファイル名に基づいて言語変数が設定されます。 ## Views テンプレート CS-Cartでは、Model-View-Controller (MVC)のアーキテクチャーパターンが使用されています。 `views` ディレクトリはサイトのテンプレート群を含みます。`views`ディレクトリ以下のディレクトリ名称はコントローラー名などによって定義されます。ディレクトリにあるファイルはコントローラーで定義されたモードで使用されます。また、コントローラが定義するディレクトリ以下には`components`ディレクトリがあります。そこに保存されているテンプレートは、追加機能を実行します。以下のページで使用されるテンプレートは、どのように定義するのか見てみましょう： > index.php?dispatch=categories.view\&category\_id=166 * `categories` - データを受信するために参照されるコントローラー。カテゴリーのデータが必要なので、viewsディレクトリに\_categories\_ディレクトリが必要となります。 * `view` - categoriesコントローラーに書かれたモード名。モード名と同じファイルを作成します。（view\.tpl） * `category_id` - 表示したいカテゴリーのIDとなります。（コントローラーに渡す引数）