Movable Type専用ショッピングカートプラグインの利用｜Movable Type対応　phpショッピングカート

SKELETON CART（スケルトンカート）なら、Movable Typeとの連携がスムースに始められます！

Movable Typeと連携させる場合、Movable Type Open Source（MTOS）では、記事本文内に「購入するボタン」を書き込み、かつ商品情報登録の度に商品データ（item.dat）を編集する必要がありましたが、それではHTMLに不慣れな方やMTの操作に慣れていない方にとっては商品登録作業が煩雑になってしまいます。
参考：※旧コンテンツ「Movable Typeへの組み込み」

また、Movable Type Proのカスタムフィールドを利用する方法もありますが、SKELETON CARTで使用できる商品オプション項目が自由に使用できない（固定値をテンプレート上に書き込むしかない）等の問題もありました。
参考：※旧コンテンツ「カスタムフィールドの利用」

Movable Type連携プラグイン　SKELETON CART Connector for MT

ここでご紹介するSKELETON CART Connector for MT（無償）を使用すると、ブログ記事作成画面に専用の商品情報フィールド（商品名や価格等）が追加されるので、記事と一緒に情報入力するだけで全てのファイルが自動構築でき、かつオプション項目も各記事ごとに自由に値を入力する事ができます。
SKELETON CARTをMovable Typeのショッピングカートプラグインとして利用できます！

完成イメージ本マニュアルは以下の構成になっています。

1.Movable Type、SKELETON CARTのインストール
2.SKELETON CART Connector for MTのダウンロードとインストール
3.プラグインの設定
4.テンプレートの作成
5.商品データの登録
6.動作確認とCSS等の調整
7.利用できるMTタグ

実際にSKELETON CARTをMT(OS)と連携させている動作サンプルはこちらでご覧いただけます。
MTOS4.261版動作デモ、MTOS5.0版動作デモ

1. 必要なプログラムの入手とインストール

【1】Movable Typeのダウンロードとインストール

Movable Type用プラグイン「SKELETON CART Connector for MT」は、MT(OS)4.27及びMT(OS)5.01で動作確認しています。

Movable Type Pro最新版はこちら　http://www.movabletype.jp/（2010/1/6時点の最新版5.01）
Movable Type OS最新版はこちら http://www.movabletype.jp/opensource/（2010/1/6時点の最新版5.01）
インストール方法の解説はこちら　http://www.movabletype.jp/documentation/#installation

本マニュアルでは、MTOS5を使用して、http://skeleton.juxtaposition.jp/demo/mt5/my_first_blog/がブログルートディレクトリとなるよう設定しています。
（サイトルートはhttp://skeleton.juxtaposition.jp/demo/mt5/となっています）

MT(OS)4でも手順は基本的に同じです。ご利用の環境に合わせて読み替えてください。
インストール後、MTが正常動作することを確認してください。

【2】SKELETON CARTのインストール

MTOSとは別にSKELETON CARTもインストールを行ってください。
プラグインは試用版でも動作確認出来ますのでご利用ください。

SKELETON CART試用版のダウンロード、製品版のご購入はこちら　http://skeleton.juxtaposition.jp/download/
インストール・設定の解説はこちら　http://skeleton.juxtaposition.jp/manual/

本マニュアルでは、http://skeleton.juxtaposition.jp/demo/mt5/cart/がSKELETON CARTの設置ディレクトリとなるようインストールしています。ご利用の環境にあわせて読み替えてください。
インストール後、商品サンプルページを使用して正常動作することを確認してください。

2. SKELETON CART Connector for MTのダウンロードとインストール

「SKELETON CART Connector for MT」を以下よりダウンロードしてください。

ダウンロードはこちら　http://skeleton.juxtaposition.jp/download/
本プラグインはSKELETON CARTご利用者様全てが無償でご利用いただけます。

ダウンロードしたファイルを解凍し、そのフォルダをMTのプラグインフォルダ（例：/mt/plugins/）にアップロードしてください。

アップロード後、MTにサインインする際にデータベースのアップグレードが始まります。
アップグレードが正常に終わるとインストール完了となります。

アップグレードとインストールの完了

3. プラグインの設定

SKELETON CART Connector for MTを使用するブログの管理画面へ移動してください。
（本プラグインはブログごとに「利用する／しない」を選択できます。）

ダッシュボードの移動

ブログの管理画面で左サイドメニューの「ツール」から「プラグイン」を選択してください。
プラグインの一覧でSKELETON CART Connector for MTが「利用可能」になっていることを確認して、プラグインの設定を開いてください。

設定を開くと各種設定が行えます。

　※クリックで拡大表示

【1】プラグインの有効化

このチェックボックスを「ON」にすると、このブログの記事入力フォームにSKELETON CART用の入力フィールドが表示されます。

【2】インストール先

インストール先URL

SKELETON CARTをインストールしたディレクトリをhttp://から入力してください。

【3】商品コード

SKELETON CARTで使用する「商品コード（商品ID）」は一意である必要があります。
そのためユーザーが入力する場合は間違いが起きる可能性があります。（商品IDが重複してしまう）

このチェックボックスを「ON」にすると、MTが記事ごとに自動設定するブログ記事ID（<$MTEntryID$>）を商品IDに流用するので、商品IDが重複することはありません。（「ON」になっている場合、記事入力フォームには以下の商品コード入力欄が表示されません。）

商品コード

【4】商品オプション

商品オプション

SKELETON CARTでは、商品情報として最大10個のオプション項目を使用できます。
本プラグインではそのうち5つを記事入力フォーム上で使用することが出来ます。

使用するオプション項目のチェックボックスを「ON」にすると、記事入力フォームにそのフィールドが表示されます。
また、ラベルを入力すると記事入力フォームでそのラベルが表示され、MTタグ（後述）によりテンプレート上でも出力できるようになります。

商品オプション項目

オプションIDはSKELETON CARTの初期設定ファイル（init.php）で設定しているIDと揃えて入力してください。
例えば、init.phpで以下のような設定がある場合、赤字部分の数字を入力します。

$Cfg['cart_item_opt1_label'] = 'カラー';
$Cfg['cart_item_opt2_label'] = 'サイズ';

なお、プラグインの設定から利用できるオプション項目は5つですが、init.phpで設定出来る残り5つについてもテンプレート上では使用できます。
例えば、戻り先のURLや商品サムネイル画像など、テンプレート側で値を入れられるものにご利用いただけます。

【5】商品グループ

商品グループ

SKELETON CARTで使用する商品グループIDに使用します。
商品データファイル（item.dat）の出力時には1～5の数字が出力されますが、ここでラベルを設定すると記事入力フォームにそのラベルが表示されます。

商品グループ：ラベル

以上でプラグインの設定は完了です。
変更内容を保存してください。

ブログ記事入力画面では、以下のようにフィールドが追加されています。

※クリックで拡大

画像中の「商品在庫」「在庫切れ時のメッセージ」については、後述します。

4. テンプレートの作成

SKELETON CARTとの連携に最低限必要となるテンプレートの新規作成、編集を行います。
左サイドメニューの「デザイン」から「テンプレート」を開くと、テンプレートの作成・編集が行えます。

既にMTでサイトを運営中の方は以下の手順でテンプレートを別途作成するのが良いかと思いますが、MT5で新規ブログを設置する場合はこの手順をまとめた「MT5用テーマファイル（クラシックブログ版）」も配布していますのでご利用ください。

» ダウンロードはこちら

ダウンロードしたファイルを解凍し、MT5のテーマフォルダ（例：mt/themes/）にアップロードしてください。
テーマファイルが正しくアップロードされると、デザインの「テーマ一覧」に、SKELETON CART用テーマが表示されますので、「適用」して再構築してください。

【1】商品データ（item.dat）の作成

インデックステンプレートで「商品データ」を作成します。
「インデックステンプレートの作成」で以下の内容を保存してください。

<MTEntries lastn="999"><MTIfNonEmpty tag="itemid"><mt:ItemID>|<mt:ItemName>|<mt:ItemPrice>|<mt:ItemGroupID></MTIfNonEmpty>
</MTEntries>

商品データテンプレート

上記は「商品ID」が存在する記事について、999件の商品データを以下のように出力する内容です。
表示件数は任意で変更していただいて問題ありません。

T-002|Tシャツ02|2,600|1
T-001|Tシャツ01|2,500|1

出力ファイル名は、SKELETON CARTの初期設定ファイル「init.php」で設定した商品データの格納先及びファイル名と揃うように設定してください。

出力ファイル名

なお、上記サンプルではブログの設置場所とSKELETON CARTの設置場所が同階層にあるために「../cart/data/item.dat」となっています。ご利用の環境に合わせて変更してください。
完了後、以下のように一覧に追加されます。

インデックステンプレートの一覧

【2】購入ボタンモジュールの作成

出力される商品ページで「買い物かごへ」のボタンを表示するモジュールを作成します。
「テンプレートモジュールの作成」で以下の内容を保存してください。

<MTIfNonEmpty tag="itemid">
<p>商品名: <mt:itemname></p>
<form method="post" name="newdat" enctype="multipart/form-data" action="<mt:ScDir>cart.php?qp0=idx&qp1=ad">
価格：<mt:itemprice><br />
数量：<select name="cart_item_amount">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br />
<mt:if tag="itemoptionfield1"><mt:ItemOptionLabel1>：<mt:ItemOptionField1><br /></mt:if>
<mt:if tag="itemoptionfield2"><mt:ItemOptionLabel2>：<mt:ItemOptionField2><br /></mt:if>
<mt:if tag="itemoptionfield3"><mt:ItemOptionLabel3>：<mt:ItemOptionField3><br /></mt:if>
<mt:if tag="itemoptionfield4"><mt:ItemOptionLabel4>：<mt:ItemOptionField4><br /></mt:if>
<mt:if tag="itemoptionfield5"><mt:ItemOptionLabel5>：<mt:ItemOptionField5><br /></mt:if>
<mt:IfNonZero tag="itemstock">購入：<input value="買い物かごへ" type="submit" />
<mt:Else><mt:ItemStockMessage></mt:IfNonZero>
<input name="cart_item_item_id" value="<mt:itemid>" type="hidden" />
</form></MTIfNonEmpty>

モジュールテンプレートの内容

上記は「商品IDの入力がない場合、購入ボタン部分を表示しない」ようになっています。
また、後述する「在庫状況」にあわせて「買い物かごへ入れる」ボタンの表示／非表示を切り替えられるようになっています。

<mt:ItemOptionLabel1>の部分は、記事入力フォームで保存した内容に応じて、セレクトボックスのHTMLを自動的に書出します。

例：オプションID：1、オプションID：2で以下のように保存

商品オプション項目

上記例の場合、商品ページ側には以下のように出力されます。

<select name="cart_item_opt1">
<option value="白">白</option>
<option value="赤">赤</option>
<option value="黒">黒</option>
</select>

<select name="cart_item_opt2">
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="LL">LL</option>
</select>

※赤字の「1」「2」の部分には、プラグインの設定で保存したオプションIDが出力されます。

完了後、以下のようにテンプレートモジュールの一覧に追加されます。

モジュールテンプレートの一覧

【3】ブログ記事テンプレートへのモジュールの追加

購入ボタンを表示したい位置に、<$mt:Include module="購入ボタン"$>を追加してください。

「購入ボタン」モジュールの追加

以上でテンプレートの作成は完了です。

5. 商品データの登録

ブログ記事の新規作成でプラグインで追加した各フィールドに値を入力し保存・再構築してください。
以下のように商品ページが完成します。

商品ページサンプル

カテゴリなどは自由に設定していただいて問題ありません。

■商品在庫について
本プラグインでは「在庫」についての入力フィールドもあります。

在庫フィールド

上記の「購入ボタンモジュール」では、ラジオボタンが「在庫なし」になっている場合、「買い物かごへ入れる」ボタンの代わりに代替メッセージを表示します。
代替メッセージは自由に変更出来るので、どうぞご利用ください。

6. 動作確認とCSS等の調整

ここまでの作業が完了したら、実際にカートへ商品が追加されることを確認してください。
正常に動作することを確認したら、後はCSS等の調整を行って全ての設定が完了となります。

これで商品登録からカート接続までを一連の作業内で行える環境が整います。
SKELETON CARTと本プラグインを利用して、Movable Typeの操作に不慣れな方やHTMLタグにあまり詳しくない方でも、簡単にECサイトを運営することが可能となります。ぜひお試し下さい。

以上の設定を行った動作サンプルは以下でご覧いただけます。
動作デモ　http://skeleton.juxtaposition.jp/demo/mt5/

[ SKELETON CARTのHTMLテンプレート他をMovable Typeから出力する ]

今回、SKELETON CARTのHTMLテンプレート部分はMovable Typeのそれとは別にインストールしています。
もちろんこのままでも問題はありませんが、例えばMovable Typeのインデックステンプレートやウェブページを使用することで、SKELETON CARTのHTMLテンプレートをMovable Typeから出力することも可能です。
「買い物かごを見る」というボタンをテンプレートモジュールで作成したり、様々な方法が考えられます。
ウェブページの作成や「買い物かごを見る」ボタンの作成については、「Movable Typeへの組み込み（※旧コンテンツ）」をご参考ください。

参考：※旧コンテンツ
MTのウェブページでSKELETON CARTのテンプレートを作成
 MTのウィジェットで「買い物かごを見る」を作成

7. 利用できるMTタグ

本プラグインを利用することで、Movable Typeのテンプレート上では以下のMTタグが利用できます。

<$MTItemId$>	商品IDを表示（<$MTEntryID$>使用時はブログ記事IDとなります）
<$MTItemPrice$>	商品価格を表示
<$MTItemName$>	商品名を表示
<$MTItemOptionLabel1$> <$MTItemOptionLabel2$> <$MTItemOptionLabel3$> <$MTItemOptionLabel4$> <$MTItemOptionLabel5$>	商品オプション項目のラベルを表示
<$MTItemOptionField1$> <$MTItemOptionField2$> <$MTItemOptionField3$> <$MTItemOptionField4$> <$MTItemOptionField5$>	商品オプション項目の入力内容を <option><select>～</select></option>で表示
<$MTItemGroupId$>	商品グループIDを「1～5」の番号で表示
<$MTItemStock$>	商品の在庫状態を「在庫あり：1」「在庫なし：0」で表示
<$MTItemStockMessage$>	「在庫切れ」選択時の代替メッセージを表示
<$MTScDir$>	SKELETON CARTのインストールURLを表示

Movable Type連携プラグイン SKELETON CART Connector for MT