{"_id":"5544d76bd8833c0d00582812","__v":1,"user":"552342f6e20da719000e7925","version":{"_id":"5544d76ad8833c0d00582801","__v":1,"project":"55227389b4a0de0d00de7e28","forked_from":"55227389b4a0de0d00de7e2b","createdAt":"2015-05-02T13:55:54.059Z","releaseDate":"2015-05-02T13:55:54.059Z","categories":["5544d76ad8833c0d00582802","5544d76ad8833c0d00582803","5544d76ad8833c0d00582804","5544d76ad8833c0d00582805","5544d76ad8833c0d00582806"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"4.0.0","version":"4.0"},"project":"55227389b4a0de0d00de7e28","category":{"_id":"5544d76ad8833c0d00582806","__v":1,"pages":["5544d76bd8833c0d00582809","5544d76bd8833c0d0058280a","5544d76bd8833c0d0058280b","5544d76bd8833c0d0058280c","5544d76bd8833c0d0058280d","5544d76bd8833c0d0058280e","5544d76bd8833c0d0058280f","5544d76bd8833c0d00582810","5544d76bd8833c0d00582811","5544d76bd8833c0d00582812","5544d76bd8833c0d00582813","5544d76bd8833c0d00582814"],"project":"55227389b4a0de0d00de7e28","version":"5544d76ad8833c0d00582801","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-13T06:13:25.383Z","from_sync":false,"order":9999,"slug":"_-3","title":"テーマ開発"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-04-14T02:25:07.909Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":11,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Smarty3\"\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/m3WpNESvq8wHhyCflNkA_smarty.png\",\n        \"smarty.png\",\n        \"746\",\n        \"235\",\n        \"#745c0c\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nCS-Cartは**Smarty 3**テンプレートエンジンを使用しています。\nSmartyは、表示部分とアプリケーションコードを分けることが可能です。\n\nSmartyについてさらに詳しい情報は[こちら](http://www.smarty.net/docs/ja/)で確認することが出来ます。\n\nこのチャプターでは開発者にとって、非常に興味深いものになるでしょう。\nテンプレートが使用することができる構造を詳しく説明します。\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"テンプレート構造\"\n}\n[/block]\nテンプレートは*design/themes/テーマ名/templates*ディレクトリにあります。  \nテンプレートは以下の構造になっています:\n\n- **addons** ディレクトリ - アドオン用テンプレートを格納しています。\n\n- **blocks** ディレクトリ - ブロック設定のレイアウトで使用されるテンプレートを格納。これらはブロックを定義することができるテンプレート とラッパー です。\n\n- **buttons** ディレクトリ - ボタン用のテンプレートを格納。ボタンの役割によって用意されています。\n\n- **common** ディレクトリ - 複数の箇所で使用する共通の機能を持ったテンプレートを格納。例えば、パンくず、カレンダー、ページネーション用のテンプレートです。\n\n- **pickers** ディレクトリ - 商品ページやとカテゴリーページで使用するダイアログのテンプレートを格納。\n\n- **views** ディレクトリ -各コントローラー用のテンプレートを格納\n\n- **404.tpl** ファイル - 404ページ用のテンプレートファイル。\n\n- **demo_theme_selector.tpl** ファイル - **ビジュアルエディタ**用のテンプレートファイル。\n\n- **index.tpl** ファイル -  メインのテンプレートファイル。このファイルは以下の内容が含まれています。\n - *DOCTYPE* - 必須要素。 `<!DOCTYPE html>`を使用することをお勧めします。\n  - Title - ページタイトル\n  - *meta.tpl*ファイルの読み込み\n  - *common/styles.tpl*ファイルの読み込み\n  - *common/scripts.tpl* ファイルの読み込み\n  - ビジュアルエディタ、デモパネル、翻訳、テンプレートモードの各ファイルの読み込み\n\n- **meta.tpl** ファイル - サイトのメタ情報が書かれたファイル:description, keywords, viewport等\n\n-------\n\n以下はCS-Cart Version 4.2.4の**responsive**テーマの各ファイルです。\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{*  To modify and rearrange content blocks in your storefront pages\\n    or change the page structure, use the layout editor under Design->Layouts\\n    in your admin panel.\\n\\n    There, you can:\\n\\n    * modify the page layout\\n    * make it fluid or static\\n    * set the number of columns\\n    * add, remove, and move blocks\\n    * change block templates and types and more.\\n\\n    You only need to edit a .tpl file to create a new template\\n    or modify an existing one; often, this is not the case.\\n\\n    Basic layouting concepts:\\n\\n    This theme uses the Twitter Bootstrap 2.3 CSS framework.\\n\\n    A layout consists of four containers (CSS class .container):\\n    TOP PANEL, HEADER, CONTENT, and FOOTER.\\n\\n    Containers are partitioned with fixed-width grids (CSS classes .span1, .span2, etc.).\\n\\n    Content blocks live inside grids. You can drag'n'drop blocks\\n    from grid to grid in the layout editor.\\n\\n    A block represents a certain content type (e.g. products)\\n    and uses a certain template to display it (e.g. list with thumbnails).\\n*}\\n<!DOCTYPE html>\\n<html lang=\\\"{$smarty.const.CART_LANGUAGE}\\\">\\n<head>\\n{capture name=\\\"title\\\"}\\n{hook name=\\\"index:title\\\"}\\n{if $page_title}\\n    {$page_title}\\n{else}\\n    {foreach from=$breadcrumbs item=i name=\\\"bkt\\\"}\\n        {if !$smarty.foreach.bkt.first}{$i.title|strip_tags}{if !$smarty.foreach.bkt.last} :: {/if}{/if}\\n    {/foreach}\\n    {if !$skip_page_title && $location_data.title}{if $breadcrumbs|count > 1} - {/if}{$location_data.title}{/if}\\n{/if}\\n{/hook}\\n{/capture}\\n<title>{$smarty.capture.title|strip|trim nofilter}</title>\\n{include file=\\\"meta.tpl\\\"}\\n<link href=\\\"{$logos.favicon.image.image_path}\\\" rel=\\\"shortcut icon\\\" />\\n{include file=\\\"common/styles.tpl\\\" include_dropdown=true}\\n{include file=\\\"common/scripts.tpl\\\"}\\n</head>\\n\\n<body>\\n{if $runtime.customization_mode.design}\\n    {include file=\\\"common/toolbar.tpl\\\" title=__(\\\"on_site_template_editing\\\") href=\\\"customization.disable_mode?type=design\\\"}\\n{/if}\\n{if $runtime.customization_mode.live_editor}\\n    {include file=\\\"common/toolbar.tpl\\\" title=__(\\\"on_site_live_editing\\\") href=\\\"customization.disable_mode?type=live_editor\\\"}\\n{/if}\\n{if \\\"THEMES_PANEL\\\"|defined}\\n    {include file=\\\"demo_theme_selector.tpl\\\"}\\n{/if}\\n\\n<div class=\\\"ty-tygh {if $runtime.customization_mode.theme_editor}te-mode{/if} {if $runtime.customization_mode.live_editor || $runtime.customization_mode.design}ty-top-panel-padding{/if}\\\" id=\\\"tygh_container\\\">\\n\\n{include file=\\\"common/loading_box.tpl\\\"}\\n{include file=\\\"common/notification.tpl\\\"}\\n\\n<div class=\\\"ty-helper-container\\\" id=\\\"tygh_main_container\\\">\\n    {hook name=\\\"index:content\\\"}\\n        {render_location}\\n    {/hook}\\n<!--tygh_main_container--></div>\\n\\n\\n{if $runtime.customization_mode.design}\\n    {include file=\\\"common/template_editor.tpl\\\"}\\n{/if}\\n{if $runtime.customization_mode.theme_editor}\\n    {include file=\\\"common/theme_editor.tpl\\\"}\\n{/if}\\n{hook name=\\\"index:footer\\\"}{/hook}\\n<!--tygh_container--></div>\\n</body>\\n\\n</html>\",\n      \"language\": \"php\",\n      \"name\": \"index.tpl\"\n    },\n    {\n      \"code\": \"{hook name=\\\"index:meta\\\"}\\n{if $display_base_href}\\n<base href=\\\"{$config.current_location}/\\\" />\\n{/if}\\n<meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html; charset={$smarty.const.CHARSET}\\\" data-ca-mode=\\\"{$store_trigger}\\\" />\\n<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\\\" />\\n{hook name=\\\"index:meta_description\\\"}\\n<meta name=\\\"description\\\" content=\\\"{$meta_description|html_entity_decode:$smarty.const.ENT_COMPAT:\\\"UTF-8\\\"|default:$location_data.meta_description}\\\" />\\n{/hook}\\n<meta name=\\\"keywords\\\" content=\\\"{$meta_keywords|default:$location_data.meta_keywords}\\\" />\\n{/hook}\\n{$location_data.custom_html nofilter}\",\n      \"language\": \"html\",\n      \"name\": \"meta.tpl\"\n    },\n    {\n      \"code\": \"<!DOCTYPE html PUBLIC \\\"-//W3C//DTD XHTML 1.0 Transitional//EN\\\" \\\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\\">\\n<html xmlns=\\\"http://www.w3.org/1999/xhtml\\\">\\n<head>\\n    <title>{__(\\\"page_not_found\\\")}</title>\\n    {literal}<style type=\\\"text/css\\\">\\n    .ty-exception {\\n        font: normal 13px Arial, Tahoma, Helvetica, sans-serif;\\n        position: absolute;\\n        top: 10%;\\n        left: 50%;\\n        margin: 0 0 0 -480px;\\n        width: 960px;\\n    }\\n    .ty-exception p {\\n        margin: 0;\\n        padding: 0px 0px 30px 0px;\\n        color: #808080;\\n        font-size: 110%;\\n    }\\n    .ty-exception-code {\\n        float: left;\\n        display: inline-block;\\n        margin-right: 30px;\\n        padding: 50px 30px 40px;\\n        -webkit-border-radius: 9px;\\n        -moz-border-radius: 9px;\\n        border-radius: 9px;\\n        background-color: #f9f9f9;\\n        background-image:-moz-radial-gradient(50% 50%,circle closest-side,rgb(255,255,255) 0%,rgb(246,246,246) 100%); \\n        background-image:-webkit-gradient(radial,50% 50%,0,50% 50%,94,color-stop(0, rgb(255,255,255)),color-stop(1, rgb(246,246,246)));\\n        background-image:-webkit-radial-gradient(50% 50%,circle closest-side, rgb(255,255,255) 0%,rgb(246,246,246) 100%);\\n        background-image:-ms-radial-gradient(50% 50%,circle closest-side, rgb(255,255,255) 0%,rgb(246,246,246) 100%);\\n        background-image:radial-gradient(50% 50%,circle closest-side, rgb(255,255,255) 0%,rgb(246,246,246) 100%);\\n        -webkit-box-shadow:inset 0px 1px 10px 0px rgba(0,0,0,0.05);\\n        -moz-box-shadow:inset 0px 1px 10px 0px rgba(0,0,0,0.05);\\n        box-shadow:inset 0px 1px 10px 0px rgba(0,0,0,0.05);\\n        color: #bfbfbf;\\n        font: normal bold 86px Arial, sans-serif;\\n        line-height: 70px;\\n        -ms-filter:\\\"progid:DXImageTransform.Microsoft.Alpha(Style=2)\\\";\\n        filter:progid:DXImageTransform.Microsoft.Alpha(Style=2);\\n    }\\n    .ty-exception-code em {\\n        display: block;\\n        text-align: center;\\n        font: normal normal 26px Arial, sans-serif;\\n    }\\n    .ty-exception h1 {\\n        margin: 0;\\n        padding: 0px 0px 25px 0px;\\n        font: normal bold 25px Arial, sans-serif;\\n    }\\n  </style>{/literal}\\n</head>\\n<body>\\n    <div class=\\\"ty-exception\\\">\\n        <span class=\\\"ty-exception-code\\\"> {$exception_status} <em>{__(\\\"exception_error\\\")}</em> </span>\\n    <h1>{__(\\\"exception_title\\\")}</h1>\\n    <p>\\n        {if $smarty.const.HTTPS === true}\\n            {assign var=\\\"return_url\\\" value=$config.https_location|fn_url}\\n        {else}\\n            {assign var=\\\"return_url\\\" value=$config.http_location|fn_url}\\n        {/if}\\n        \\n        {if $exception_status == \\\"403\\\"}\\n            {__(\\\"access_denied_text\\\")}\\n        {elseif $exception_status == \\\"404\\\"}\\n            {__(\\\"page_not_found_text\\\")}\\n        {/if}\\n    </p>\\n    <p>{__(\\\"exception_error_code\\\")}\\n        {if $exception_status == \\\"403\\\"}\\n            {__(\\\"access_denied\\\")}\\n        {elseif $exception_status == \\\"404\\\"}\\n            {__(\\\"page_not_found\\\")}\\n        {/if}\\n    </p>\\n    </div>\\n</body>\\n</html>\",\n      \"language\": \"php\",\n      \"name\": \"404.tpl\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"アドオン用のテンプレート\"\n}\n[/block]\nアドオン用のテンプレートは*templates/addons* ディレクトリにあります。\n\n## アドオンのテンプレートの構造\n\n- **blocks**ディレクトリ -アドオンブロックンテンプレート。[レイアウトエディター](doc:layout) でブロックとして選択可能となります\n*blocks/product_tabs*以下のファイルは商品タブで選択可能になります。\n\n- **hooks** ディレクトリ -  [テンプレートフック](doc:tpl-hooks) 用のテンプレート\n\n- **views** テンプレート - 独自に追加されたテンプレート\n\nアドオンディレクトリではこれらの他にもアドオンを正常に作動させるために必要な他のディレクトリやファイルを自由に配置できます。**ソーシャルボタン**アドオンの**providers** ディレクトリなどを参照して下さい。\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Blocks テンプレート\"\n}\n[/block]\nブロック用のテンプレートは*templates/block* ディレクトリにあります。  \nブロックの役割によって異なったテンプレートが適応されます。\n\nテンプレートアプリケーションは*app/schemas/block_manager/blocks.php* ファイルに定義されています。\n\n例えば、カテゴリーブロックでは\n\n> *‘templates’ => ‘blocks/categories’*\n\n*blocks/categories *ディレクトリから全てのテンプレートに適応が可能ということ意味します。\n\nファイル名は言語変数によって以下のように定義されます:\n\n- ファイル内のコードに次のパートをもつ場合:*{**block-description:name_of_template **}*、**name_of_template**が使用されます。\n\n- ファイルにこのような記述がない場合は、テンプレートファイル名に基づいて言語変数が設定されます。\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Views テンプレート\"\n}\n[/block]\nCS-Cartでは、[Model-View-Controller (MVC)](http://ja.wikipedia.org/wiki/Model_View_Controller)のアーキテクチャーパターンが使用されています。\n\n**views** ディレクトリはサイトのテンプレート群を含みます。\n*views*ディレクトリ以下のディレクトリ名称はコントローラー名などによって定義されます。\n\nディレクトリにあるファイルはコントローラーで定義されたモードで使用されます。\n\nまた、コントローラが定義するディレクトリ以下には*components*ディレクトリがあります。そこに保存されているテンプレートは、追加機能を実行します。\n\n\n以下のページで使用されるテンプレートは、どのように定義するのか見てみましょう:\n\n*/index.php?dispatch=categories.view&category_id=166*\n\n- **categories** - データを受信するために参照されるコントローラー。カテゴリーのデータが必要なので、viewsディレクトリに*categories*ディレクトリが必要となります。\n\n- **view** - categoriesコントローラーに書かれたモード名。モード名と同じファイルを作成します。(view.tpl)\n- **category_id** - 表示したいカテゴリーのIDとなります。(コントローラーに渡す引数)","excerpt":"","slug":"templates","type":"basic","title":"テンプレート"}

テンプレート


[block:api-header] { "type": "basic", "title": "Smarty3" } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/m3WpNESvq8wHhyCflNkA_smarty.png", "smarty.png", "746", "235", "#745c0c", "" ] } ] } [/block] CS-Cartは**Smarty 3**テンプレートエンジンを使用しています。 Smartyは、表示部分とアプリケーションコードを分けることが可能です。 Smartyについてさらに詳しい情報は[こちら](http://www.smarty.net/docs/ja/)で確認することが出来ます。 このチャプターでは開発者にとって、非常に興味深いものになるでしょう。 テンプレートが使用することができる構造を詳しく説明します。 [block:api-header] { "type": "basic", "title": "テンプレート構造" } [/block] テンプレートは*design/themes/テーマ名/templates*ディレクトリにあります。 テンプレートは以下の構造になっています: - **addons** ディレクトリ - アドオン用テンプレートを格納しています。 - **blocks** ディレクトリ - ブロック設定のレイアウトで使用されるテンプレートを格納。これらはブロックを定義することができるテンプレート とラッパー です。 - **buttons** ディレクトリ - ボタン用のテンプレートを格納。ボタンの役割によって用意されています。 - **common** ディレクトリ - 複数の箇所で使用する共通の機能を持ったテンプレートを格納。例えば、パンくず、カレンダー、ページネーション用のテンプレートです。 - **pickers** ディレクトリ - 商品ページやとカテゴリーページで使用するダイアログのテンプレートを格納。 - **views** ディレクトリ -各コントローラー用のテンプレートを格納 - **404.tpl** ファイル - 404ページ用のテンプレートファイル。 - **demo_theme_selector.tpl** ファイル - **ビジュアルエディタ**用のテンプレートファイル。 - **index.tpl** ファイル - メインのテンプレートファイル。このファイルは以下の内容が含まれています。 - *DOCTYPE* - 必須要素。 `<!DOCTYPE html>`を使用することをお勧めします。 - Title - ページタイトル - *meta.tpl*ファイルの読み込み - *common/styles.tpl*ファイルの読み込み - *common/scripts.tpl* ファイルの読み込み - ビジュアルエディタ、デモパネル、翻訳、テンプレートモードの各ファイルの読み込み - **meta.tpl** ファイル - サイトのメタ情報が書かれたファイル:description, keywords, viewport等 ------- 以下はCS-Cart Version 4.2.4の**responsive**テーマの各ファイルです。 [block:code] { "codes": [ { "code": "{* To modify and rearrange content blocks in your storefront pages\n or change the page structure, use the layout editor under Design->Layouts\n in your admin panel.\n\n There, you can:\n\n * modify the page layout\n * make it fluid or static\n * set the number of columns\n * add, remove, and move blocks\n * change block templates and types and more.\n\n You only need to edit a .tpl file to create a new template\n or modify an existing one; often, this is not the case.\n\n Basic layouting concepts:\n\n This theme uses the Twitter Bootstrap 2.3 CSS framework.\n\n A layout consists of four containers (CSS class .container):\n TOP PANEL, HEADER, CONTENT, and FOOTER.\n\n Containers are partitioned with fixed-width grids (CSS classes .span1, .span2, etc.).\n\n Content blocks live inside grids. You can drag'n'drop blocks\n from grid to grid in the layout editor.\n\n A block represents a certain content type (e.g. products)\n and uses a certain template to display it (e.g. list with thumbnails).\n*}\n<!DOCTYPE html>\n<html lang=\"{$smarty.const.CART_LANGUAGE}\">\n<head>\n{capture name=\"title\"}\n{hook name=\"index:title\"}\n{if $page_title}\n {$page_title}\n{else}\n {foreach from=$breadcrumbs item=i name=\"bkt\"}\n {if !$smarty.foreach.bkt.first}{$i.title|strip_tags}{if !$smarty.foreach.bkt.last} :: {/if}{/if}\n {/foreach}\n {if !$skip_page_title && $location_data.title}{if $breadcrumbs|count > 1} - {/if}{$location_data.title}{/if}\n{/if}\n{/hook}\n{/capture}\n<title>{$smarty.capture.title|strip|trim nofilter}</title>\n{include file=\"meta.tpl\"}\n<link href=\"{$logos.favicon.image.image_path}\" rel=\"shortcut icon\" />\n{include file=\"common/styles.tpl\" include_dropdown=true}\n{include file=\"common/scripts.tpl\"}\n</head>\n\n<body>\n{if $runtime.customization_mode.design}\n {include file=\"common/toolbar.tpl\" title=__(\"on_site_template_editing\") href=\"customization.disable_mode?type=design\"}\n{/if}\n{if $runtime.customization_mode.live_editor}\n {include file=\"common/toolbar.tpl\" title=__(\"on_site_live_editing\") href=\"customization.disable_mode?type=live_editor\"}\n{/if}\n{if \"THEMES_PANEL\"|defined}\n {include file=\"demo_theme_selector.tpl\"}\n{/if}\n\n<div class=\"ty-tygh {if $runtime.customization_mode.theme_editor}te-mode{/if} {if $runtime.customization_mode.live_editor || $runtime.customization_mode.design}ty-top-panel-padding{/if}\" id=\"tygh_container\">\n\n{include file=\"common/loading_box.tpl\"}\n{include file=\"common/notification.tpl\"}\n\n<div class=\"ty-helper-container\" id=\"tygh_main_container\">\n {hook name=\"index:content\"}\n {render_location}\n {/hook}\n<!--tygh_main_container--></div>\n\n\n{if $runtime.customization_mode.design}\n {include file=\"common/template_editor.tpl\"}\n{/if}\n{if $runtime.customization_mode.theme_editor}\n {include file=\"common/theme_editor.tpl\"}\n{/if}\n{hook name=\"index:footer\"}{/hook}\n<!--tygh_container--></div>\n</body>\n\n</html>", "language": "php", "name": "index.tpl" }, { "code": "{hook name=\"index:meta\"}\n{if $display_base_href}\n<base href=\"{$config.current_location}/\" />\n{/if}\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset={$smarty.const.CHARSET}\" data-ca-mode=\"{$store_trigger}\" />\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\" />\n{hook name=\"index:meta_description\"}\n<meta name=\"description\" content=\"{$meta_description|html_entity_decode:$smarty.const.ENT_COMPAT:\"UTF-8\"|default:$location_data.meta_description}\" />\n{/hook}\n<meta name=\"keywords\" content=\"{$meta_keywords|default:$location_data.meta_keywords}\" />\n{/hook}\n{$location_data.custom_html nofilter}", "language": "html", "name": "meta.tpl" }, { "code": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\n<head>\n <title>{__(\"page_not_found\")}</title>\n {literal}<style type=\"text/css\">\n .ty-exception {\n font: normal 13px Arial, Tahoma, Helvetica, sans-serif;\n position: absolute;\n top: 10%;\n left: 50%;\n margin: 0 0 0 -480px;\n width: 960px;\n }\n .ty-exception p {\n margin: 0;\n padding: 0px 0px 30px 0px;\n color: #808080;\n font-size: 110%;\n }\n .ty-exception-code {\n float: left;\n display: inline-block;\n margin-right: 30px;\n padding: 50px 30px 40px;\n -webkit-border-radius: 9px;\n -moz-border-radius: 9px;\n border-radius: 9px;\n background-color: #f9f9f9;\n background-image:-moz-radial-gradient(50% 50%,circle closest-side,rgb(255,255,255) 0%,rgb(246,246,246) 100%); \n background-image:-webkit-gradient(radial,50% 50%,0,50% 50%,94,color-stop(0, rgb(255,255,255)),color-stop(1, rgb(246,246,246)));\n background-image:-webkit-radial-gradient(50% 50%,circle closest-side, rgb(255,255,255) 0%,rgb(246,246,246) 100%);\n background-image:-ms-radial-gradient(50% 50%,circle closest-side, rgb(255,255,255) 0%,rgb(246,246,246) 100%);\n background-image:radial-gradient(50% 50%,circle closest-side, rgb(255,255,255) 0%,rgb(246,246,246) 100%);\n -webkit-box-shadow:inset 0px 1px 10px 0px rgba(0,0,0,0.05);\n -moz-box-shadow:inset 0px 1px 10px 0px rgba(0,0,0,0.05);\n box-shadow:inset 0px 1px 10px 0px rgba(0,0,0,0.05);\n color: #bfbfbf;\n font: normal bold 86px Arial, sans-serif;\n line-height: 70px;\n -ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Style=2)\";\n filter:progid:DXImageTransform.Microsoft.Alpha(Style=2);\n }\n .ty-exception-code em {\n display: block;\n text-align: center;\n font: normal normal 26px Arial, sans-serif;\n }\n .ty-exception h1 {\n margin: 0;\n padding: 0px 0px 25px 0px;\n font: normal bold 25px Arial, sans-serif;\n }\n </style>{/literal}\n</head>\n<body>\n <div class=\"ty-exception\">\n <span class=\"ty-exception-code\"> {$exception_status} <em>{__(\"exception_error\")}</em> </span>\n <h1>{__(\"exception_title\")}</h1>\n <p>\n {if $smarty.const.HTTPS === true}\n {assign var=\"return_url\" value=$config.https_location|fn_url}\n {else}\n {assign var=\"return_url\" value=$config.http_location|fn_url}\n {/if}\n \n {if $exception_status == \"403\"}\n {__(\"access_denied_text\")}\n {elseif $exception_status == \"404\"}\n {__(\"page_not_found_text\")}\n {/if}\n </p>\n <p>{__(\"exception_error_code\")}\n {if $exception_status == \"403\"}\n {__(\"access_denied\")}\n {elseif $exception_status == \"404\"}\n {__(\"page_not_found\")}\n {/if}\n </p>\n </div>\n</body>\n</html>", "language": "php", "name": "404.tpl" } ] } [/block] [block:api-header] { "type": "basic", "title": "アドオン用のテンプレート" } [/block] アドオン用のテンプレートは*templates/addons* ディレクトリにあります。 ## アドオンのテンプレートの構造 - **blocks**ディレクトリ -アドオンブロックンテンプレート。[レイアウトエディター](doc:layout) でブロックとして選択可能となります *blocks/product_tabs*以下のファイルは商品タブで選択可能になります。 - **hooks** ディレクトリ - [テンプレートフック](doc:tpl-hooks) 用のテンプレート - **views** テンプレート - 独自に追加されたテンプレート アドオンディレクトリではこれらの他にもアドオンを正常に作動させるために必要な他のディレクトリやファイルを自由に配置できます。**ソーシャルボタン**アドオンの**providers** ディレクトリなどを参照して下さい。 [block:api-header] { "type": "basic", "title": "Blocks テンプレート" } [/block] ブロック用のテンプレートは*templates/block* ディレクトリにあります。 ブロックの役割によって異なったテンプレートが適応されます。 テンプレートアプリケーションは*app/schemas/block_manager/blocks.php* ファイルに定義されています。 例えば、カテゴリーブロックでは > *‘templates’ => ‘blocks/categories’* *blocks/categories *ディレクトリから全てのテンプレートに適応が可能ということ意味します。 ファイル名は言語変数によって以下のように定義されます: - ファイル内のコードに次のパートをもつ場合:*{**block-description:name_of_template **}*、**name_of_template**が使用されます。 - ファイルにこのような記述がない場合は、テンプレートファイル名に基づいて言語変数が設定されます。 [block:api-header] { "type": "basic", "title": "Views テンプレート" } [/block] CS-Cartでは、[Model-View-Controller (MVC)](http://ja.wikipedia.org/wiki/Model_View_Controller)のアーキテクチャーパターンが使用されています。 **views** ディレクトリはサイトのテンプレート群を含みます。 *views*ディレクトリ以下のディレクトリ名称はコントローラー名などによって定義されます。 ディレクトリにあるファイルはコントローラーで定義されたモードで使用されます。 また、コントローラが定義するディレクトリ以下には*components*ディレクトリがあります。そこに保存されているテンプレートは、追加機能を実行します。 以下のページで使用されるテンプレートは、どのように定義するのか見てみましょう: */index.php?dispatch=categories.view&category_id=166* - **categories** - データを受信するために参照されるコントローラー。カテゴリーのデータが必要なので、viewsディレクトリに*categories*ディレクトリが必要となります。 - **view** - categoriesコントローラーに書かれたモード名。モード名と同じファイルを作成します。(view.tpl) - **category_id** - 表示したいカテゴリーのIDとなります。(コントローラーに渡す引数)