連載第2回!CS-Cart3アドオン作成講座 -初級編-「アドオンの設定ページの作成」

アドオン作成講座 -初級編- vol2

連載第2回目となりました。
CS-Cartのアドオン作成のお作法です。

今回はアドオンの基本設定のページの作成方法について学んでいきましょう。

  

この記事は1年以上前に書かれたものです。
情報が古い可能性があります。

検証バージョン

CS-Cart Free Edition v3.0.2-jp-1 を使用して検証しています。

INDEX

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
【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

  定義名称 説明
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行テキストの作成

  定義名称 説明
1 id アイテムの識別子
2 type アイテムの種類。input を指定
3 name デフォルト言語でのフィールド名
4 tooltip デフォルト言語でのツールチップ
5 name 翻訳言語でのフィールド名
6 tooltip 翻訳言語でのツールチップ

1行テキストの作成後の基本設定
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">リスト項目1</item>
                                </translations>
                            </item>
                            <item id="select_box_2">
                                <name>Select box item 2</name>
                                <translations>
                                    <item lang="JA">リスト項目2</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">リスト項目1</item>
                                </translations>
                            </item>
                            <item id="select_box_2">
                                <name>Select box item 2</name>
                                <translations>
                                    <item lang="JA">リスト項目2</item>
                                </translations>
                            </item>
                            <item id="select_box_3">
                                <name>Select box item 3</name>
                                <translations>
                                    <item lang="JA">リスト項目3</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">リスト項目1</item>
                                </translations>
                            </item>
                            <item id="select_box_2">
                                <name>Select box item 2</name>
                                <translations>
                                    <item lang="JA">リスト項目2</item>
                                </translations>
                            </item>
                            <item id="select_box_3">
                                <name>Select box item 3</name>
                                <translations>
                                    <item lang="JA">リスト項目3</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>などが存在します。

まとめ

いかがでしたでしょうか。今回は基本設定ページの作成方法を学んで行きました。
なんと言っても驚きなのが、ここまで一切プログラムを書いていません。
次回はこの基本設定ページで入力したい値をテンプレート側で表示する方法について書いていきたいと思います。

連載記事目次

  

共有やブックマークなど