CS-Cart開発者ドキュメント

CS-Cart Developer Hub

CS-Cart開発者ドキュメントへようこそ

ネットショップ構築プラットフォーム「CS-Cart」の開発者向けドキュメントです。コアの仕組みやアドオンの作成方法、デザインテンプレートの作成方法、APIの利用法を解説しています。

Get Started    APIリファレンス

テーマ開発の概要

独自テーマの開発について

用語集

  • CSS - Cascading Style Sheets

  • スタイル(プリセットとも呼ぶ)はカラースキームなど異なるCSSスタイルをひとまとめにしたものです。これらの値はビジュアルエディタで変更できます。

  • ビジュアルエディター (テーマエディターとも呼ぶ) ・・・特定のデザインの外観を変更するために役立つツールです。

  • テンプレート・・・Smartyテンプレートエンジンで動作するテンプレートファイル(.tpl)

  • メディア ・・・画像、アイコン、フォント等

  • レイアウト・・・ストアフロントのブロックのコンテンツやレイアウトスキーム

  • レイアウト・ロケーション・・・特定のページの外観を定義

  • コンテナ・・・グリッドを追加するためのレイアウトエリア。 次の4つのコンテナタイプがあります:トップパネル、ヘッダー、コンテンツ、フッター

  • グリッド・・・グリッドの要素

テーマの構造

テーマにはショップフロントの外観を定義する一連のファイルが含まれています。

テーマはテンプレート、CSSスタイル、メディアコンテンツ、レイアウトスキーム及びショップフロントのブロックコンテンツなどで構成されています。

さらに、テーマには スタイル(プリセット)を含むことができます。

CS-Cartのテーマは、design/themes/ ディレクトリに保存されています。
CS-Cartバージョン4.2以降ではレスポンシブ(Responsive)テーマがデフォルトです。

テーマの構造は6つのディレクトリと2つのファイルで構成されます。

  • Layout ディレクトリ・・・レイアウトを構築する.xmlファイル が含まれています。このファイルでさらにレイアウトの詳細を定義することができます。

  • Styles ディレクトリ・・・.lessファイル用の変数とビジュアルエディタ要素の構造を含むファイルが含まれています。

  • Templates ディレクトリ・・・テンプレート (.tpl ファイル)が含まれています。

  • CSS ディレクトリ・・・.less.css ファイルが含まれています。

  • Media ディレクトリ・・・フォント、アイコン、画像が含まれています。

  • customer_screenshot.png 画像・・・テーマのプレビュー用画像。この画像は管理パネルのデザイン > テーマ セクションに表示されます。

  • manifest.json ファイル・・・テーマの情報を含みます。

manifest.json

このファイルはメインテーマの情報と以下の要素を含みます:

  • title・・・管理パネルのデザイン > テーマ セクションで表示されるテーマ名

  • description・・・テーマの概要

  • theme・・・サイトのロゴへのパス。media/imagesディレクトリにロゴを保存することをおすすめします。

  • developer・・・テーマの作成者(会社名)。個々の開発者がいる場合は、彼らの名前を書きます。これらの情報は管理パネルのデザイン > テーマ セクションに表示されます。

  • favicon・・・テーマのファビコンへのパス。media/images/iconsディレクトリにfaviconを保存することをおすすめします。

  • parent_theme・・・親テーマの名前。レスポンシブテーマをベースに開発したいのであれば、responsiveと書いてください。親テーマは、標準で用意されている2つのテーマを親とする必要があります。BasicResponsiveのいずれかを指定する必要があります。

あなたがレスポンシブなテーマを開発している場合は、parent_themeresponsive に設定します。固定幅のテーマを開発している場合、parent_themebasic へ設定します

新しいテーマを作成する際に、全てのテーマファイルを新たに作る必要はありません。テーマのインストール時に必要なファイルはデフォルトのテーマ(BasicResponsive)からコピーされます。
parent_theme パラメーターは、manifest.jsonファイルで定義します。

{
    "title": "レスポンシブテーマ",
    "description": "レスポンシブテーマは様々な解像度のディスプレイに対応したテーマです。タブレット端末やスマートフォンでもCS-Cartを快適にご利用いただけます。",
    "logo": "media/images/cart.png",
    "developer": "Simtech",
    "favicon": "media/images/icons/favicon.ico",
    "parent_theme": "responsive"
}

📘

情報

manifest.jsonファイルに「parent_theme」パラメータが存在しない場合、親テーマは$config['base_theme'] 設定によって定義されます。

Updated 10 months ago

テーマ開発の概要


独自テーマの開発について

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.