Movable Type連携マニュアル
SKELETON CART(スケルトンカート)なら、Movable Typeとの連携がスムースに始められます!
本サイトで無償配布しているSkeletonCartConnector / MTDBConnectorで、SKELETON CARTとMovable Typeを「ECサイト」として連携できます。
プラグインを追加することで、ブログ記事の作成画面に「商品名」や「価格」などの専用入力欄が追加されるので、ブログ記事を書くのと同じ方法で商品ページを作成・管理可能。
SKELETON CARTにない商品ページ作成機能をMovable Typeで補うことができるうえ、別々の管理画面で商品登録などをする必要もありません。
しかも、この2つのプラグインを使用することで、商品が売れた際の在庫数をデータベースから自動減算して商品ページにリアルタイム表示可能。(再構築不要)
数量限定商品などで、在庫がないのに注文を受けてしまうという事態も未然に防ぐことが可能です。
SkeletonCartConnector / MTDBConnectorは、SKELETON CARTご利用者さまなら今すぐ無償でご利用いただけます。
動作環境
Movable Type用プラグイン「SkeletonCartConnector」、SKELETON CART用プラグイン「MTDBConnector」は、Movable Type 6以上で動作確認をしています。
※MT7のコンテンツタイプではご利用いただけませんのでご留意ください。
Movable Type、SKELETON CARTのインストール
Movable Typeのインストール
Movable Type(ソフトウェア版)の最新バージョンは以下より購入・ダウンロードが可能です。
ライセンス買い切り型 CMS - Movable Type ソフトウェア版 | CMS プラットフォーム Movable Type
また、インストールにあたってはMovable Typeのドキュメントサイト及びマニュアル(スタートガイド)をご参照ください。
本マニュアルでは、MT6を使用して、https://www.juxtaposition.jp/skeleton-cart/demo-mt/がウェブサイトのルートディレクトリとなるよう設定しています。ご利用の環境に合わせて読み替えてください。
インストール後、MTが正常動作することを確認してください。
SKELETON CARTのインストール
Movable Typeとは別にSKELETON CARTもインストールを行ってください。
なお、本プラグイン連携は試用版でも動作確認出来ますのでご利用ください。
SKELETON CART試用版のダウンロード、製品版のご購入はこちら
インストール・設定の解説はこちら
本マニュアルでは、https://www.juxtaposition.jp/skeleton-cart/demo-mt/shop/がSKELETON CARTの設置ディレクトリとなるようインストールしています。ご利用の環境にあわせて読み替えてください。
インストール後、SKELETON CARTが正常動作することを確認してください。
SkeletonCartConnectorとMTDBConnectorのインストール
SkeletonCartConnectorのインストール
SkeletonCartConnectorは、Movable Typeの記事作成/編集画面をSKELETON CART用の商品ページ作成・編集画面として利用するためのMovable Type用プラグインです。
このプラグインをインストールすると、「商品名」や「価格」など、SKELETON CARTが必要とする情報の専用入力フォームがブログ記事作成/編集画面に設置されます。
ダウンロードしたファイルを解凍してできた「SkeletonCartConnector」フォルダを、MTのプラグインフォルダ(例:/mt/plugins/)にアップロードしてください。
アップロード後、MTにサインインする際にデータベースのアップグレードが始まります。
アップグレードが正常に終わるとインストール完了となります。
SkeletonCartConnectorの設定
SkeletonCartConnectorを使用するウェブサイト/ブログの管理画面へ移動して、左サイドメニューの「ツール」から「プラグイン」を選択してください。
プラグインの一覧でSKELETON CART Connector for MTが「有効」になっていることを確認してプラグインの設定を開いてください。
設定を開くと各種設定が行えます。
プラグインの有効化(必須)
このチェックボックスを「ON」にすると、ブログの記事作成フォームにSKELETON CART専用の入力フィールド(商品名や価格など)が表示されます。
在庫管理有効化
このチェックボックスを「ON」にすると、ブログの記事作成フォームにSKELETON CART専用フィールドとして「在庫数」のフィールドが表示されます。
SKELETON CARTの在庫管理機能を利用する場合、このチェックを入れます。(在庫管理にいついては後述)
PHPを使って在庫表示
在庫管理機能を利用して、かつリアルタイムな在庫表示を行う場合はここにチェックを入れます。(在庫管理にいついては後述)
インストール先(必須)
SKELETON CARTをインストールしたディレクトリをhttp:// or https://から入力してください。
商品コード
SKELETON CARTで使用する「商品コード(商品ID)」は一意である必要があります。
このチェックボックスを「ON」にすると、MTが記事ごとに自動設定するブログ記事ID<mt:EntryID>
を商品IDに流用するので商品IDが重複するといった入力ミスを未然に防ぐことができます。(「ON」になっている場合、記事作成フォームには以下の商品コード入力欄が表示されません。)
商品情報オプション
SKELETON CARTでは、商品情報として最大30個の商品情報オプション項目を使用できます。
本プラグインではそのうち5つを記事入力フォーム上で使用することが出来ます。
使用する商品情報オプション項目のチェックボックスを「ON」にすると、記事入力フォームにそのフィールドが表示されます。
また、ラベル(例:カラー)を入力すると記事入力フォームでそのラベルが表示され、MTMLタグ(後述)によりテンプレート上でも出力できるようになります。
オプションIDはSKELETON CARTの初期設定ファイル(init.php)で設定しているIDと揃えて入力してください。
例えば、init.phpで以下のような設定がある場合、赤字部分の数字を入力します。
$Cfg['cart_item_opt1_label'] = 'カラー';
$Cfg['cart_item_opt2_label'] = 'サイズ';
なお、プラグインの設定から利用できる商品情報オプション項目は5つですが、init.phpで設定出来る残り25個についてもテンプレート上では使用できます。
例えば、戻り先のURLや商品サムネイル画像など、テンプレート側で値を入れられるものにご利用いただけます。
商品グループ
SKELETON CARTで使用する商品グループIDに使用します。
ここでラベルを設定するとブログ記事作成フォームにそのラベルが表示されます。
商品グループを利用しない場合は、空欄(初期)のままで問題ありません。
商品情報入力フォーム(ブログ記事入力画面)
以上のプラグイン設定を完了後、変更内容を保存してください。
ブログ記事入力画面では、以下のようにフィールドが追加されています。
MTDBConnectorの設定とインストール
MTDBConnectorは、SKELETON CARTが必要とする商品情報ファイル(商品名や価格を記載したファイル、通常はitem.dat)に代わって、Movable TypeのデータベースへSKELETON CARTが直接アクセスするためのSKELETON CART用プラグインです。
これを使用することでitem.datの作成・管理が不要となるほか、在庫管理を行う場合はリアルタイムな在庫数の表示も可能となります。
zipファイルをダウンロードして解凍した後、MTDBConnectorフォルダ内のConfig.phpをテキストエディタ等で開いて初期設定を行ってください。
ディレクトリパスの設定
Movable Typeの「mt-config.cgi」が格納されているディレクトリをフルパスで指定します。
(※以下は例です)
'mtConfigFile' => '/usr/lib/cgi-bin/mt/mt-config.cgi',
※MTクラウドをご利用の場合、上記を'mtConfigFile' => '/app/movabletype/mt-config.cgi',
と設定してください。
商品IDの設定
商品IDとしてブログ記事IDを使用する場合は「1」を、使用しない場合は「0」を設定します。
'useEntryID' => 0,
Movable Typeインストールディレクトリの設定
Movable Typeがインストールされているディレクトリをフルパスで指定します。
(※以下は例です)
'mtBaseDir' => '/usr/lib/cgi-bin/mt',
※MTクラウドをご利用の場合は、上記を'mtBaseDir' => '/app/movabletype/',
と設定してください。
プラグインのアップロード
上記設定が完了したら、SKELETON CARTのプラグインディレクトリ(plugins)にMTDBConnectorフォルダごとアップロードしてください。
- https://www.juxtaposition.jp/skeleton-cart/demo-mt/shop/
- plugins(SKELETON CARTプラグインディレクトリ)
- ├ MTDBConnector
- ⋮
- plugins(SKELETON CARTプラグインディレクトリ)
以上でMTDBConnectorの設定とインストールは完了です。
Movable Typeテンプレートの作成と編集
購入ボタンモジュールの作成
Movable Typeから出力される商品ページに「買い物かごへ」のボタンを表示するためのモジュールを作成します。
テンプレート作成画面「テンプレートモジュールの作成」で以下の内容をコピー&ペーストして、「購入ボタン」という名前で保存してください。
なお、この例では以下のように想定されています。
- 商品IDの入力がない場合、購入ボタン部分を表示しない
- 後述する「在庫状況のリアルタイム表示」の使用状況にあわせて表示内容を自動的に切り替える
- 商品情報オプション3に「ブログ記事中の画像(最新1枚)」のURLを設定する(テンプレートへの直接埋め込み/プラグイン側では未設定)
- 商品情報オプション4に「商品ページのURL」を設定する(テンプレートへの直接埋め込み/プラグイン側では未設定)
<MTIf tag="itemid">
<p>商品名: <mt:itemname></p>
<form method="post" name="add_item" enctype="multipart/form-data" action="<mt:ScDir>/cart/add">
価格:<span class="item_price"><mt:itemprice numify="1"></span> 円<br>
<mt:ScIfUseDynamicBlock>
在庫数:<mt:itemRealStockQuantity />点<br>
</mt:ScIfUseDynamicBlock>
購入数量:<select name="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:ScIfUseDynamicBlock>
<mt:ScDynamicBlock>
購入:
<mt:IfItemRealStockQuantity eq="0">
<input value="在庫がありません" type="submit" disabled=disabled />
<mt:Else>
<mt:IfItemRealStockQuantity ge="10">
<input value="カートへ入れる(在庫10点以上)" type="submit" />
<mt:Else>
<input value="カートへ入れる(在庫10点未満)" type="submit" />
</mt:IfItemRealStockQuantity>
</mt:IfItemRealStockQuantity>
</mt:ScDynamicBlock>
<mt:Else>
<mt:setvarblock name="status"><mt:itemSalesStatus></mt:setvarblock>
<mt:if name="status">購入:<input value="買い物かごへ" type="submit" />
<mt:Else>
<mt:ItemStatusMessage>
</mt:if>
</mt:ScIfUseDynamicBlock>
<input type="hidden" name="opt3" value="<mt:Assets type="image" lastn="1"><$mt:AssetURL$></mt:Assets>">
<input type="hidden" name="opt4" value="<mt:EntryPermaLink>">
<input name="id" value="<mt:itemid>" type="hidden" />
<mt:ScSupportScript />
</form></MTIf>
<mt:ItemOptionLabel*>
の部分は、記事入力フォームで保存した内容に応じて、セレクトボックスのHTMLを自動的に出力します。
商品情報オプションの設定例
HTMLの出力例
<select name="cart_item_opt1">
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
</select>
<select name="cart_item_opt2">
<option value="白">白</option>
<option value="茶色">茶色</option>
<option value="黒">黒</option>
</select>
記事テンプレートへのモジュールの追加
購入ボタンパーツを表示したい位置に、<mt:Include module="購入ボタン">
を追加してください。
以上でテンプレートの作成は完了です。
この段階までの動作確認
在庫管理を行わない場合はこの段階で、Movable TypeとSKELETON CARTの連携は完了となります。
管理画面で商品情報(記事)を作成のうえ、SKELETON CARTへの接続を確認してください。
商品重量を利用する場合
商品に重量を設定し、受注制限や「都道府県別に重量区分のある送料を設定する」場合、以下の設定も行ってください。
商品重量
SkeletonCartConnectorプラグインの設定で「商品重量」の項目をONにして保存してください。
上記設定を終えると、商品情報(記事)作成画面で商品重量の入力欄が表示されます。
商品重量をグラム単位で入力してください。
テンプレートモジュール「購入ボタン」の任意の場所に重量を出力するための<mt:ItemWeight numify="1">
を記載してください。
※numify="1"を指定することで、このモディファイアを付与したファンクションタグの数値を3桁ごとに , (カンマ)で区切って出力します。
上記を保存して商品情報ページを再構築すると、商品ページ側に「重量」を表示することができます。
在庫管理(リアルタイム在庫表示)機能の設定
SkeletonCartConnector/MTDBConnectorを利用することで、再構築なしにリアルタイムな在庫数を表示するなどが実現できます。
以下はそのマニュアルとなりますので、在庫管理をご利用になる場合にご参考ください。
動作条件
本機能を利用する場合、ご利用サーバーでPHP(5.3以上)が利用できる必要があります。
また、Movable Typeから書き出されている商品ページ(記事)がHTMLで作成されている場合、そのままでは動作しません。
PHPで書きだす(拡張子 .php)か、あるいはhtaccessなどで拡張子が.htmlのままPHPが動作するように設定してください。
MTクラウドをご利用の場合
MTクラウドをご利用で、リアルタイム在庫表示機能をご利用いただく場合、商品ページ(記事)はPHPで書き出す(拡張子 .php)必要がありますのでご留意ください。
(MTクラウドでは.htaccessによる拡張子変更を許可されていません)
init.phpの設定
SKELETON CARTの設定ファイル init.php で、「在庫に関する機能の設定」の部分を「利用する」に変更してください。
// ■■在庫に関する機能の設定■■
// 在庫数設定機能を利用するか否かを設定してください
// 0:利用しない、1:利用する
// ※使用する場合、item.datの「第5引数」が在庫数としてカウントされます
// ・注文を受け付けた時、注文数分をその時点での在庫数から減算します(在庫数以上の注文は受け付けません)
// ・在庫数が「0」になった時点でその商品をカートへ追加出来なくなります(追加する際にエラーが表示されます)
// ・第5引数が「空欄」の場合、「0」とみなされます
'item_amount_use_sw' => '1',
SkeletonCartConnectorの設定
Movable Typeのプラグインの設定で「在庫管理有効化」「PHPを使って在庫表示」のチェックをONにしてください。
ダイナミック・パブリッシング利用時の留意点
ダイナミック・パブリッシングで在庫管理機能を使用する場合、プラグインの設定で「PHPを使って在庫表示」のチェックをOFFにしてください。
この場合、ファンクションタグ:<mt:ItemStockQuantity>
がリアルタイムな在庫数をそのまま取得・表示できるので、以下の様にMTMLを書くことが可能です。
<mt:if tag="ItemStockQuantity" lt="10">
残り <mt:ItemStockQuantity> 個<br>
購入:<input value="買い物かごへ" type="submit" />
<mt:ElseIf eq=0>
在庫なし
<mt:Else>
購入:<input value="買い物かごへ" type="submit" />
</mt:If>
在庫数の設定方法
上記のプラグイン設定が完了すると、商品情報入力フォーム(ブログ記事入力画面)に以下の在庫数量に関する入力項目が追加されます。
在庫数を調整する場合は、数値を入れて「追加」または「削減」を選択し、商品情報(記事)を保存・再構築してください。
在庫数設定機能の動作確認
上記の設定後、再構築すると先のテンプレートモジュール「購入ボタン」では以下のように購入ボタンパーツが出力されます。
SKELETON CARTで購入手続きを行い、在庫数が減少することをご確認ください。
SKELETON CART用プラグインとの併用
Movable TypeとSKELETON CARTを連携させたまま、他のSKELETON CART用プラグインも併用できます。
都道府県別重量区分送料設定プラグインとの併用
Movable TypeとSKELETON CARTを連携させた状態で、都道府県別に設定された重量区分のある送料を適用させる場合については、都道府県別重量区分送料設定プラグインのマニュアルページに詳細を記載していますのでご参考ください。
商品オプション料金加算プラグインとの併用
SkeletonCartConnectorとMTDBConnectorの利用時、この商品オプション料金加算プラグインを利用しなくても同じ機能を実現できます。
利用方法については商品オプション料金加算プラグインのマニュアルページに詳細を記載していますのでご参考ください。
テンプレートタグ(MTML)の解説
SkeletonCartConnectorプラグインをインストールすると、Movable Typeのテンプレート上で以下のテンプレートタグが利用できます。
<mt:ItemId> | 商品IDを表示(<mt:EntryID>使用時はブログ記事IDとなります) |
---|---|
<mt:ItemPrice> | 商品価格を表示 |
<mt:ItemName> | 商品名を表示 |
<mt:ItemOptionLabel1> <mt:ItemOptionLabel2> <mt:ItemOptionLabel3> <mt:ItemOptionLabel4> <mt:ItemOptionLabel5> |
商品オプション項目のラベルを表示 |
<mt:ItemOptionField1> <mt:ItemOptionField2> <mt:ItemOptionField3> <mt:ItemOptionField4> <mt:ItemOptionField5> |
商品オプション項目の入力内容を <option><select>~</select></option>で表示 |
<mt:ItemGroupId> | 商品グループIDを「1~5」の番号で表示 |
<mt:itemSalesStatus> | 商品の販売状態を「販売中:1」「販売休止中:0」で表示 |
<mt:ItemStatusMessage> | 「販売休止中」選択時の代替メッセージを表示 |
<mt:ItemStockQuantity> | 商品在庫数を表示(※DB内の数値となります) |
<mt:ItemWeight> | 商品重量を表示 |
<mt:ScDir> | SKELETON CARTのインストールURLを表示 |
<mt:ItemRealStockQuantity> | スタティックパブリッシングで在庫管理機能を利用していて、かつプラグインの設定で「動的ブロックを使用」がONの場合に、DB内の在庫数を表示 ダイナミックパブリッシングあるいはDynamicMTML利用時は設定にかかわらずDB内の在庫数を表示 |
<mt:ScDynamicBlock> | 後述する<mt:IfItemRealStockQuantity>を利用する際に必要となるブロックタグ |
<mt:IfItemRealStockQuantity> | スタティックパブリッシングで在庫管理機能を利用していて、かつプラグインの設定で「動的ブロックを使用」がONの場合に、DB内の在庫数に応じた分岐が可能となる条件タグ |
<mt:ScIfUseDynamicBlock> | プラグインの設定で「動的ブロックを使用」にチェックが入っている場合に、その中身を実行するブロックタグ<mt:Else>と併用して条件分岐が可能 |
ライセンスについて
SkeletonCartConnector/MTDBConnectorは、SKELETON CARTライセンスご購入者の方に無償利用いただけます。
SKELETON CART本体と同様のご利用規約が適用となりますので、併せてご確認ください。
ご利用規約は、ダウンロードページに記載しています。