この記事は2年以上前に書かれたものです。
情報が古い可能性があります。
情報が古い可能性があります。
検証バージョン
INDEX
- 1. 基本は前回同様「addon.xml」
- 2. セクションの作成
- 3. セクションを複数作成する
- 4. アイテムの作成
- 5. アイテムの作成「ヘッダ」
- 6. アイテムの作成「1行テキスト」
- 7. アイテムの作成「複数行テキスト」
- 8. アイテムの作成「パスワード」
- 9. アイテムの作成「チェックボックス」
- 10. アイテムの作成「ラジオボタン」
- 11. アイテムの作成「ファイル選択」
- 12. アイテムの作成「リスト」
- 13. アイテムの作成「国名リスト」
- 14. アイテムの作成「都道府県リスト」
- 15. アイテムの作成「複数選択可能リスト」
- 16. アイテムの作成「横並びのチェックボックス」
- 17. 「addon.xml」の配布
- 18. まとめ
1. 基本は前回同様「addon.xml」
前回の記事で作成した addon.xml です。
前回ダウンロード出来るように配布した addon.xml には分かりやすいようにと、コメントを記述しています。
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<!-- アドオンの識別子。アドオンのフォルダ名と同じにしてください。 /addons/webcake -->
<id>webcake</id>
<!-- アドオンのバージョン -->
<version>1.0</version>
<!-- アドオンのデフォルト言語。このオプションが指定されていない場合は英語（EN）として認識されます -->
<default_language>EN</default_language>
<!-- デフォルト言語でのアドオン名 -->
<name>WebCake Addon</name>
<!-- デフォルト言語での説明文 -->
<description>WebCake Original Addon！</description>
<!-- アドオンの優先順位 数値が大きなアドオンほど後で実行されます -->
<priority>100</priority>
<!-- アドオンをインストールした直後のステータス（有効/無効）デフォルトでは無効となります。（active/disabled） -->
<status>active</status>
<!-- デフォルト言語以外の言語変数の翻訳に関する設定 -->
<translations>
<!--
@for - 翻訳が提供されるプロパティー。 値: name/description/tooltip. オプション：デフォルトの値は"name"です。
@lang - 翻訳する言語コード。ショップで使用されていない言語に関しては、インストールされません。
-->
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
</addon>
【CS-Cartのインストールディレクトリ】/addons/アドオンの識別子/addon.xml という構成でファイルを配置します。
これでアドオンのインストールが可能になるところまでが、前回の内容でした。
しかしアドオンをインストールしても 基本設定 の部分がクリックできず、なにも出来ませんでした。
この 基本設定 ページを作成していくのが今回の内容です。
2. セクションの作成
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<!-- この中にセクションに関する情報を記述していきます。 -->
</sections>
</settings>
</addon>
基本設定ページを表示する為には <settings layout="popup"> 〜 </settings> の中の <sections> 〜 </sections> の中にセクションの定義を行う必要があります。
では、セクションの定義の方法を見ていきましょう。
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<section id="section1">
<name>Generic settings1</name>
<translations>
<item lang="JA" for="name">共通設定1</item>
</translations>
</section>
</sections>
</settings>
</addon>
<sections> 〜 </sections> の中に <section>タグを書きます。
<section> 〜 </section> の中で、デフォルト言語でのセクション名と翻訳言語でのセクション名を定義します。
| 定義名称 | 説明 | |
|---|---|---|
| 1 | id | セクションの識別子 |
| 2 | name | デフォルト言語でのセクション名 |
| 3 | item | 翻訳言語でのセクション名 |
addon.xml を更新したら 【CS-Cartのインストールディレクトリ】/addons/アドオンの識別子/addon.xml に再度設置して、管理画面からアドオンを一度アンインストールしてからインストールし直します。
基本設定 をクリック出来るようになるので、クリックすると設定ページがポップアップで表示されます。
3. セクションを複数作成する
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<section id="section1">
<name>Generic settings1</name>
<translations>
<item lang="JA" for="name">共通設定1</item>
</translations>
</section>
<section id="section2">
<name>Generic settings2</name>
<translations>
<item lang="JA" for="name">共通設定2</item>
</translations>
</section>
</sections>
</settings>
</addon>
セクションを複数作成するとタブで表示されます。
4. アイテムの作成
基本設定ページの項目となるアイテムを作成するには、<section> 〜 </section> の中の <items> 〜 </items> の中に<item>タグを書く必要があります。
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<section id="section1">
<name>Generic settings1</name>
<translations>
<item lang="JA" for="name">共通設定1</item>
</translations>
<items>
<!-- この中にアイテムに関する情報を記述していきます。 -->
</items>
</section>
</sections>
</settings>
</addon>
アイテムにはいくつか種類があるのですが、例としてヘッダの作成方法を見てましょう。
5. アイテムの作成「ヘッダ」
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<section id="section1">
<name>Generic settings1</name>
<translations>
<item lang="JA" for="name">共通設定1</item>
</translations>
<items>
<item id="header">
<type>header</type>
<name>Header</name>
<translations>
<item lang="JA" for="name">タイトル</item>
</translations>
</item>
</items>
</section>
</sections>
</settings>
</addon>
| 定義名称 | 説明 | |
|---|---|---|
| 1 | id | ヘッダの識別子 |
| 2 | type | アイテムの種類。ヘッダを作成する場合 header を指定 |
| 3 | name | デフォルト言語でのヘッダ名 |
| 4 | item | 翻訳言語でのヘッダ名 |
ヘッダを作成するとセクションの中にタイトルを表示することができます。
6. アイテムの作成「1行テキスト」
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<section id="section1">
<name>Generic settings1</name>
<translations>
<item lang="JA" for="name">共通設定1</item>
</translations>
<items>
<item id="input">
<type>input</type>
<name>InputField</name>
<tooltip>Hint</tooltip>
<translations>
<item lang="JA" for="name">入力フィールド</item>
<item lang="JA" for="tooltip">ヒント</item>
</translations>
</item>
</items>
</section>
</sections>
</settings>
</addon>
| 定義名称 | 説明 | |
|---|---|---|
| 1 | id | アイテムの識別子 |
| 2 | type | アイテムの種類。input を指定 |
| 3 | name | デフォルト言語でのフィールド名 |
| 4 | tooltip | デフォルト言語でのツールチップ |
| 5 | name | 翻訳言語でのフィールド名 |
| 6 | tooltip | 翻訳言語でのツールチップ |
1行入力のテキストフィールドを作成しました。ツールチップの設定を行っておけば ? の上にマウスカーソルを持っていった時に、ツールチップが表示されるようになります。
7. アイテムの作成「複数行テキスト」
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<section id="section1">
<name>Generic settings1</name>
<translations>
<item lang="JA" for="name">共通設定1</item>
</translations>
<items>
<item id="textarea">
<type>textarea</type>
<name>TextareaField</name>
<tooltip>Hint</tooltip>
<translations>
<item lang="JA" for="name">入力フィールド</item>
<item lang="JA" for="tooltip">ヒント</item>
</translations>
</item>
</items>
</section>
</sections>
</settings>
</addon>
複数行の入力が可能になります。
8. アイテムの作成「パスワード」
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<section id="section1">
<name>Generic settings1</name>
<translations>
<item lang="JA" for="name">共通設定1</item>
</translations>
<items>
<item id="password">
<type>password</type>
<name>PasswordField</name>
<tooltip>Hint</tooltip>
<translations>
<item lang="JA" for="name">入力フィールド</item>
<item lang="JA" for="tooltip">ヒント</item>
</translations>
</item>
</items>
</section>
</sections>
</settings>
</addon>
入力した値を隠すことが出来ます。
9. アイテムの作成「チェックボックス」
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<section id="section1">
<name>Generic settings1</name>
<translations>
<item lang="JA" for="name">共通設定1</item>
</translations>
<items>
<item id="checkbox">
<type>checkbox</type>
<name>CheckboxField</name>
<tooltip>Hint</tooltip>
<translations>
<item lang="JA" for="name">フラグ</item>
<item lang="JA" for="tooltip">ヒント</item>
</translations>
</item>
</items>
</section>
</sections>
</settings>
</addon>
チェックボックスを作成します。
10. アイテムの作成「ラジオボタン」
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<section id="section1">
<name>Generic settings1</name>
<translations>
<item lang="JA" for="name">共通設定1</item>
</translations>
<items>
<item id="radiogroup">
<type>radiogroup</type>
<name>Radio group box</name>
<tooltip>Tooltip</tooltip>
<default_value>radio_2</default_value>
<translations>
<item lang="JA" for="name">性別</item>
</translations>
<variants>
<item id="radio_1">
<name>Radio button 1</name>
<!-- 値の翻訳 アドオン名の翻訳と似ていますが、"for"は使用しません。 -->
<translations>
<item lang="JA">男性</item>
</translations>
</item>
<item id="radio_2">
<name>Radio button 2</name>
<translations>
<item lang="JA">女性</item>
</translations>
</item>
</variants>
</item>
</items>
</section>
</sections>
</settings>
</addon>
ラジオボタンを作成します。
<variants> 〜 </variants> の中に値リストとなる <item> タグを定義する必要があります。
またこの <item> の値リストの翻訳は言語は指定しますが、"for" を使用しないことに注意してください。
11. アイテムの作成「ファイル選択」
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<section id="section1">
<name>Generic settings1</name>
<translations>
<item lang="JA" for="name">共通設定1</item>
</translations>
<items>
<item id="file">
<type>file</type>
<name>File select</name>
<translations>
<item lang="JA">ファイルを選択</item>
</translations>
</item>
</items>
</section>
</sections>
</settings>
</addon>
ファイルのパスを保存するフィールドを作成します。参照… をクリックするとファイル選択ダイアログが表示されます。
12. アイテムの作成「リスト」
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<section id="section1">
<name>Generic settings1</name>
<translations>
<item lang="JA" for="name">共通設定1</item>
</translations>
<items>
<item id="selectbox">
<type>selectbox</type>
<name>Selectbox</name>
<variants>
<item id="select_box_1">
<name>Select box item 1</name>
<translations>
<item lang="JA">リスト項目１</item>
</translations>
</item>
<item id="select_box_2">
<name>Select box item 2</name>
<translations>
<item lang="JA">リスト項目２</item>
</translations>
</item>
</variants>
<translations>
<item lang="JA">単純なリスト</item>
</translations>
</item>
</items>
</section>
</sections>
</settings>
</addon>
リストを作成します。
<variants> 〜 </variants> の中に値リストとなる <item> タグを定義する必要があります。
またこの <item> の値リストの翻訳は言語は指定しますが、"for" を使用しないことに注意してください。
13. アイテムの作成「国名リスト」
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<section id="section1">
<name>Generic settings1</name>
<translations>
<item lang="JA" for="name">共通設定1</item>
</translations>
<items>
<item id="countries_list">
<type>countries list</type>
<name>Countries list</name>
<translations>
<item lang="JA">国名リスト</item>
</translations>
</item>
</items>
</section>
</sections>
</settings>
</addon>
国名リストを作成します。
14. アイテムの作成「都道府県リスト」
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<section id="section1">
<name>Generic settings1</name>
<translations>
<item lang="JA" for="name">共通設定1</item>
</translations>
<items>
<item id="states_list">
<type>states list</type>
<name>States list</name>
<translations>
<item lang="JA">都道府県州リスト</item>
</translations>
</item>
</items>
</section>
</sections>
</settings>
</addon>
都道府県リストを作成します。
※上手く動かなかったので原因調査中です。
15. アイテムの作成「複数選択可能リスト」
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<section id="section1">
<name>Generic settings1</name>
<translations>
<item lang="JA" for="name">共通設定1</item>
</translations>
<items>
<item id="multiple_select">
<type>multiple select</type>
<name>Multiple select</name>
<translations>
<item lang="JA">複数選択可能なリスト</item>
</translations>
<variants>
<item id="select_box_1">
<name>Select box item 1</name>
<translations>
<item lang="JA">リスト項目１</item>
</translations>
</item>
<item id="select_box_2">
<name>Select box item 2</name>
<translations>
<item lang="JA">リスト項目２</item>
</translations>
</item>
<item id="select_box_3">
<name>Select box item 3</name>
<translations>
<item lang="JA">リスト項目３</item>
</translations>
</item>
</variants>
</item>
</items>
</section>
</sections>
</settings>
</addon>
複数選択可能なリストを作成します。
<variants> 〜 </variants> の中に値リストとなる <item> タグを定義する必要があります。
またこの <item> の値リストの翻訳は言語は指定しますが、"for" を使用しないことに注意してください。
16. アイテムの作成「横並びのチェックボックス」
addon.xml
<?xml version="1.0"?>
<addon scheme="2.0">
<id>webcake</id>
<version>1.0</version>
<default_language>EN</default_language>
<name>WebCake Addon</name>
<description>It is an add-on of original WebCake! </description>
<priority>100</priority>
<status>active</status>
<translations>
<item for="name" lang="JA">WebCakeアドオン</item>
<item for="description" lang="JA">WebCakeのオリジナルアドオンです！</item>
</translations>
<settings layout="popup">
<sections>
<section id="section1">
<name>Generic settings1</name>
<translations>
<item lang="JA" for="name">共通設定1</item>
</translations>
<items>
<item id="multiple_checkboxes">
<type>multiple checkboxes</type>
<name>Multiple select check boxes</name>
<translations>
<item lang="JA">フラグリスト</item>
</translations>
<variants>
<item id="select_box_1">
<name>Select box item 1</name>
<translations>
<item lang="JA">リスト項目１</item>
</translations>
</item>
<item id="select_box_2">
<name>Select box item 2</name>
<translations>
<item lang="JA">リスト項目２</item>
</translations>
</item>
<item id="select_box_3">
<name>Select box item 3</name>
<translations>
<item lang="JA">リスト項目３</item>
</translations>
</item>
</variants>
<default_value>select_box_2</default_value>
</item>
</items>
</section>
</sections>
</settings>
</addon>
横並びのチェックボックスを作成します。
<variants> 〜 </variants> の中に値リストとなる <item> タグを定義する必要があります。
またこの <item> の値リストの翻訳は言語は指定しますが、"for" を使用しないことに注意してください。
17. 「addon.xml」の配布
また、CS-Cart公式サイトのCS-Cartマーケットでaddon.xmlのサンプルが配布されております。
是非こちらも参考にしてみてください。
アドオン (v3系向け) :: addon.xmlサンプル – CS-Cartマーケット
今回紹介してませんが、他にもfunctionの結果を使用するフィールド <type>info</type>、独自のテンプレートの値を使用するフィールド <type>template</type>、 画面には表示されないフィールド <type>hidden</type>などが存在します。
まとめ
いかがでしたでしょうか。今回は基本設定ページの作成方法を学んで行きました。
なんと言っても驚きなのが、ここまで一切プログラムを書いていません。
次回はこの基本設定ページで入力したい値をテンプレート側で表示する方法について書いていきたいと思います。
