詳細な設定の前に、まずは動作確認！ SKELETON CARTなら簡単3ステップで始められます。
動作確認いただいた後、ゆっくりとカスタマイズをお楽しみください。

ダウンロードから動作確認まで

1. 初期設定ファイル init.php でメール送信先を変更
2. ファイル一式をサーバーへアップロード（※htaccess.txtを.htaccessにリネーム）
3. フォルダ templates_c のパーミッションを「777」に変更

基本機能の場合、以上でSKELETON CARTの動作をご確認いただけます。
サンプル商品の設置アドレス（例：http://www.example.com/sample_item.html）へアクセスして動作をお試しください。
正常動作をご確認いただけましたら、実際のご利用用途に合わせて細かくカスタマイズできますのでお試しください。

<script>
            SkeletonCartSettings = {
                // カートをルートパス以外に設置する場合は、以下にパスを指定する
                // 例）/shop に設置する場合は、/shopを指定する
                // 例）別サーバ(https://cart.example.com)に設置する場合は、https://cart.example.com を指定する
                app_base: '/shop',
            };
</script>

Movable Type連携マニュアル

SKELETON CART本体設置マニュアルのほか、Movable Type連携マニュアルを用意しています。
Movable Typeで商品登録から在庫管理までを行う場合は、本設置マニュアルでSKELETON CARTを設置した後、そちらのマニュアルもご参照ください。

Movable Type連携マニュアルへ

API利用マニュアル

version2.1.0より、APIを使用して商品ページから移動することなく、カートへ商品を追加できるようになりました。
また、version2.1.6以降では、在庫数などもAPIを利用して表示できます。

実際の動作デモもこちらでご覧いただけます。

APIの利用方法の詳細は、「APIのご利用方法について」をご参照ください。

APIのご利用方法について

SKELETON CARTの基本的な設置方法をご案内します。
各種オプション項目などを利用する場合は、後述するHTML記載方法にならって設置してください。

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

1. ダウンロードと構成ファイルの確認
2. 初期設定ファイルの編集
3. 商品掲載ページの編集
4. 商品データファイルの編集
5. HTMLテンプレートの編集
6. メールテンプレートの修正
7. ファイルのアップロード
8. パーミッションの変更
9. 動作テスト

1.ダウンロードしたzipファイルを解凍し、フォルダ・ファイルを確認してください。

2.初期設定ファイルの編集

初期設定ファイル「init.php」を開き、ファイル内に記載のあるとおりに内容を変更してください。

なお、動作確認の場合、最低限変更するのはメール送信先のみとなります。
その他は実装するウェブサイトに応じて変更してください。

最低限の編集箇所

// 受注メール（サイト運営者側が受信するメール）に記載される内容を設定してください
// 複数のメールアドレスを記載する際は「,」で続けて記載してください
// その場合、マルチバイトは利用できませんのでご留意ください　例）admin-1@example.com,admin-2@example.com
    'email_admin_to' => 'ジャクスタポジション <admin@example.com>',  // 受信アドレス
    'email_admin_from' => 'ジャクスタポジション <admin@example.com>',  // 送信者アドレス
    'email_admin_reply' => 'ジャクスタポジション <admin@example.com>',  // 返信先アドレス

// 購入者宛の自動返信メールのアドレス設定
    'email_user_from' => 'ジャクスタポジション <admin@example.com>',  // 送信者アドレス
    'email_user_reply' => 'ジャクスタポジション <admin@example.com>',  // 返信先アドレス

購入完了画面が正常に動作しない／メールが送信されない場合

ご利用のサーバーによっては、購入完了画面が「504 Gateway Time-out」などとなり、動作しない場合があります。
そのような場合、init.phpに記載のある「sendmail コマンドと引数の変更」の部分を変更し動作をお試しください。

変更前

// 'sendmail_command' => '/usr/sbin/sendmail -t -i',

変更後（先頭の // を削除）

'sendmail_command' => '/usr/sbin/sendmail -t -i',

3.商品掲載ページの編集

ダウンロードファイルに同梱されているsample_item.htmlを参考に、商品ページを編集してください。

商品をカートに追加するformタグのaction先と、カートの中を表示するonClick先は、商品掲載ページ（例：item.html）からinit.phpが設置されているディレクトリへの相対パス + cart/addに変更してください。

また、app_baseの内容も、設置ディレクトリに合わせて変更してください。

設置ディレクトリ構成例

• http://example.com/
  • item.html（商品ページ）
  • shop（SKELETON CART設置ディレクトリ）
    • ├ init.php
    • ├ bootstrap.php
    • ├ data/item.dat
    • ⋮

上記構成例でのHTMLサンプル

// フォームボタン
<form method="post" name="newdat" enctype="multipart/form-data" action="./shop/cart/add">

// 数量選択
<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>

// 商品IDを設置
<input type="hidden" name="id" value="1">

// 商品をカートへ追加するボタン
<input type="submit" value="買い物かごへ">

</form>

// カートの中身を見るボタン
<form>
<input type="button" value="買い物かごを見る" onClick="location.href='./shop/cart/show'">
</form>

// APIの設定
<script>
SkeletonCartSettings = {
    // カートをルートパス以外に設置する場合は、以下にパスを指定する
    // 例）/shop に設置する場合は、/shopを指定する
    // 例）別サーバ(https://cart.example.com)に設置する場合は、https://cart.example.com を指定する
    app_base: '/shop',
};
</script>

商品情報オプションを利用する

商品情報オプション（最大30個）を使用する場合、init.phpの以下に必要情報を入力し、HTML例にならって商品掲載ページにformパーツを埋め込んでください。

init.phpの設定例

// ■■商品情報（オプション項目）の設定■■
// 商品情報で使用するオプション項目のラベルを設定してください（最大で30個までご利用いただけます）
// 主に「カートの中身」で使用します（HTML上での使用方法はサンプルHTMLを参考にしてください）
// 使用しない場合は空欄にしてください
    'cart_item_opt1_label' => 'サイズ',
    'cart_item_opt2_label' => 'カラー',
    'cart_item_opt3_label' => 'メモ',
    'cart_item_opt4_label' => '商品掲載ページURL',
    ⋮

商品掲載ページへformパーツを追加する例

<form method="post" name="newdat" enctype="multipart/form-data" action="./shop/cart/add">
⋮
<p>サイズ<p>
<select name="opt1">
<option value="S" selected="selected">S</option>
<option value="M">M</option>
<option value="L">L</option>
</select>

<p>カラー</p>
<input type="radio" name="opt2" value="青" checked="checked">
<input type="radio" name="opt2" value="赤">
<input type="radio" name="opt2" value="黄色">
<input type="radio" name="opt2" value="緑">
<input type="radio" name="opt2" value="ピンク">

<p>メモ</p>
<input type="text" name="opt3" value="">

<!-- 商品掲載ページURL -->
<input type="hidden" name="opt4" value="http://www.example.com/item.html">
⋮
</form>

4.商品データファイルの編集

テキストエディタなどで商品情報ファイル「data/item.dat」を開き、以下の例にならって商品情報を記載してください。
商品ID|商品名|価格|商品グループID|在庫数|重量(g単位)になるように1行ずつ記載してください。
半角の「|（パイプライン・vertical bar）」で区切ります。
なお、商品IDと商品グループID、在庫数、重量は必ず半角数字を使用してください。

※重量制限する場合
1|Ｔシャツ01|2500|1|9|500
2|Ｔシャツ02|2600|2|10|500
3|T-Shirt03|2600|3|10|500

※重量制限しない場合（第6項目部分は空白のままでも正常動作します。）
1|Ｔシャツ01|2500|1|9
2|Ｔシャツ02|2600|2|10
3|T-Shirt03|2600|3|10

5.HTMLテンプレートの編集

カートの中身やお客さま情報入力画面など、HTMLテンプレート部分は自由に編集できます。
付属しているHTMLテンプレートと下記コードを参考にしてください。

1.カートの中身画面（_cart.html）

カートの中身を表示する際、{foreach $items as $item}から{/foreach}までは、カートに存在する商品の数だけ繰り返し表示され、カート内に商品が無い場合は{if $items == NULL}から{/if}までの部分が表示されます。

{foreach $items as $item}
      カートに存在する商品数の分だけ繰り返し表示する部分
{/foreach}
{if $items == NULL}
    カート内に商品が存在しない場合に表示する部分
{/if}

カートの中身でエラーがある場合（在庫数が足りない／制限重量オーバーなど）、以下の部分にエラーメッセージが表示されます。

{if $error_message != NULL}
      {$error_message|nl2br nofilter}
{/if}

init.phpで、送料が無料となる購入額を設定している場合、以下の方法（Smartyコマンド）で、その設定額までの差額を表示することができます。
（送料無料設定額$free_delivery_priceに商品小計$subtotalが満たない場合、その差額を表示）

{if $free_delivery_price > $subtotal}
      {($free_delivery_price-$subtotal)|number_format}
{/if}

商品オプション情報を表示する場合、以下のように記載するとその値がある場合に出力されます。
以下は「3.商品掲載ページの編集」で使用した商品情報オプションのコードと出力結果の例です

サイズ
{if $item.opt1 != NULL }{$cart_item_opt1_label}：{$item.opt1}{/if}
→ サイズ：M

カラー
{if $item.opt2 != NULL }{$cart_item_opt2_label}：{$item.opt2}{/if}
→ カラー：黄色

メモ
{if $item.opt3 != NULL }{$cart_item_opt3_label}：{$item.opt3}{/if}
→ メモ：これはテストです。

商品掲載ページURL
<input type="button" value="商品掲載ページへ戻る" onClick="location.href='{$item.opt4}'">
→ <input type="button" value="商品掲載ページへ戻る" onClick="location.href='http://www.example.com/'">

2.お客さま・お届先情報入力画面（_regi.html）

お客さま情報ほかの入力画面では「郵便番号から住所を自動入力するJavaScript」を使用しています。
その設置方法についてはyuubinbango.jsの説明ページをご確認ください。

また、お客さま情報・配送先情報では、各最大10個のオプション項目を使用できます。
init.phpをご参照のうえ、以下の例にならってご利用ください。

init.phpの設定例（注文者情報オプション項目）

// 注文者情報入力欄で使用するオプション項目のラベルを設定してください（最大で10個までご利用いただけます）
// 主に「内容確認（エラー画面）」で使用します（HTML上での使用方法はサンプルHTMLを参考にしてください）
// 使用しない場合は空欄にしてください
    'slip_user_opt1_label' => '性別',
    'slip_user_opt2_label' => '',
    ⋮

_regi.htmlへの設置例（注文者情報オプション項目）

<p>性別を選択してください</p>
<input type="radio" name="user_opt1" value="男性" {if $user_opt1=="男性"}checked="checked"{/if}> 男性
<input type="radio" name="user_opt1" value="女性" {if $user_opt1=="女性"}checked="checked"{/if}> 女性

init.phpの設定例（配送先情報オプション項目）

// 配送先情報入力欄で使用するオプション項目のラベルを設定してください（最大で10個までご利用いただけます）
// 主に「内容確認（エラー画面）」で使用します（HTML上での使用方法はサンプルHTMLを参考にしてください）
// 使用しない場合は空欄にしてください
    'slip_delivery_opt1_label' => 'ギフト包装',
    'slip_delivery_opt2_label' => '',
    ⋮

_regi.htmlへの設置例（配送先情報オプション項目）

<p>ギフト包装</p>
<input type="radio" name="delivery_opt1" value="する" {if $delivery_opt1=="する"}checked="checked"{/if}> する
<input type="radio" name="delivery_opt1" value="しない" {if $delivery_opt1=="しない"}checked="checked"{/if}> しない 

3.注文内容確認画面（_regi_conf.html）

注文内容の確認画面では、カート中身画面／お客さま・配送先情報入力画面で使用したSmartyタグがほぼ使用できます。
付属のHTMLテンプレートをご確認ください。

なお、送料{$postage|number_format}と支払方法別の手数料{$fee|number_format}は、この画面で初めて計算・出力されます。

購入完了画面では{if $delivery_flg != NULL }から{/if}の中身は、お客さま・配送先情報入力画面で「別の住所へ配送する」にチェックが入っている場合にのみ表示されます。

4.購入完了画面（_regi_comp.html）

購入手続きが完了すると{$id}で「受注番号」（注文完了日時から自動発行）が表示できるようになります。

購入完了画面では、以下のようにお客さまが選択した決済方法別に表示内容を切り替えて表示できます。

{if $payment_way == '1'}
      init.phpのpayment_wayが「1」の場合にここを表示
{elseif $payment_way == '2'}
      init.phpのpayment_wayが「2」の場合にここを表示
{elseif $payment_way == '3'}
      init.phpのpayment_wayが「3」の場合にここを表示
⋮
{/if}

PHPの論理演算子、比較演算子を使用することで細かな条件分岐が可能です。

{if $payment_way == '1' || $payment_way == '2'}
      支払方法が「1」または「2」の場合にここを表示
{/if}

{if $payment_way != '3'}
      支払方法の「3」を選択しなかった場合にここを表示
{/if}

また、クレジットカード決済代行会社へPOST送信にて接続する場合、以下のように変数を埋め込むことが可能です。
以下はクロネコWebコレクトへの接続例です。

<form name="UserForm" action="https://payment.kuronekoyamato.co.jp/webcollect/settleSelectAction.gw" method="post" target="_blank" accept-charset="Shift_JIS">
<input type="hidden" name="TRS_MAP" value="V_W02">
<input type="hidden" name="trader_code" value="クロネコWebコレクトの加盟店コード">
<input type="hidden" name="order_no" value="{$id}">
<input type="hidden" name="goods_name" value="お買上商品">
<input type="hidden" name="settle_price" value="{$payment}">
<input type="hidden" name="buyer_name_kanji" value="{$user_name}">
<input type="hidden" name="buyer_tel" value="{$user_tel}">
<input type="hidden" name="buyer_email" value="{$user_mail}">

<button type="submit" value="クレジットカードお支払手続きへ" onclick="document.charset='SHIFT_JIS';">クレジットカードお支払手続きへ</button>
</form>

5.エラー画面（_error.html）

商品データなどに不備がある場合など、なにかしらのエラーが発生した際、このテンプレートを利用してエラー内容が出力されます。

エラー内容は<!-- Error: {$error_message} -->のようにHTML内にコメントのカタチで出力されるほか、その内容に応じて以下のようにブラウザ側にも表示します。

{if $error_id == NULL}
    エラー内容が不明な場合
{elseif $error_id == 'different_group_id'}
    init.phpにて異なる商品グループを同時に購入できないよう設定しているケースで、異なる商品グループの商品をカートに追加しようとした場合のエラー
{elseif $error_id == 'illegal_item_dat'}
    商品データファイルに何かしらの不備がある場合のエラー
{elseif $error_id == 'soldout'}
    商品在庫数が注文個数を下回っている場合のエラー
    なお、{$error_message|nl2br nofilter}部分にその商品に関する情報が出力されます。
{elseif $error_id == 'weight'}
    購入時の総重量を制限しているケースで、カートに追加した商品がその重量を超えている場合のエラー
    なお、{$error_message|nl2br nofilter}部分にその商品に関する情報が出力されます。
{/if}

6.メンテナンス状況表示画面（_maintenance.html）

init.phpで指定したメンテナンス期間中である場合に、カートの中身画面に代わってこちらのページを表示します。
またその際、以下の部分で設定されたメンテナンス期間を表示します。

{if $maintenance_start || $maintenance_end }
<p>メンテナンス期間：{$maintenance_start|date_format:'%Y年%m月%d日%H時%M分'}{if $maintenance_start}から{/if}
{$maintenance_end|date_format:'%Y年%m月%d日%H時%M分'}{if $maintenance_end}まで{/if}</p>
{/if}

7.各テンプレート共通パーツ

ヘッダーやフッターなど、各テンプレートで共通化するファイルはtemplates/includeディレクトリに格納できます。
付属テンプレートでは_header.htmlと_footer.htmlのみですが、作成数に制限はありません。

includeディレクトリに格納した後、以下の例のようにHTMLテンプレート側に記載することで外部ファイルとして読み込むことができます。

_header.htmlを読み込む場合

{include file="include/_header.html"}

8.その他

これまでのHTMLテンプレート内にもあったとおり、HTMLテンプレート（メールテンプレート）上で「表示される金額にカンマを入れる」場合、以下のように|number_formatを追加すると、自動的にカンマが入ります。
|number_formatを入れない場合、カンマは入りません。

例：お支払合計が10,000円の場合
{$payment} » 10000
{$payment|number_format} » 10,000

また、オプション項目などでtextareaを使用し、その内容をHTMLテンプレート上で表示する際、以下のように|nl2br nofilterと追加すると、入力した内容の改行コード\nが<br>に変換表示されます。
nofilterを入れない場合は改行コード\nのみとなり、HTML上では改行されません。

{$変数名|nl2br nofilter}

なお、メールテンプレートではnofilterは不要となります。（改行コードのみで改行されます）

6.メールテンプレートの修正

受注データ及び購入者控えに使用されるメールテンプレートも、上記HTMLテンプレートと同様に変更・修正出来ます。
メールを通販ソフトへの取り込む際など、必要に応じてレイアウトを変更してください。

7.ファイルのアップロードとパーミッションの変更

ここまでの作業が完了したら、sample_item.htmlを除く全てのファイル／フォルダをインストールディレクトリ（今回の例ではshop）にアップロードしてください。

アップロードした後、以下のようにファイルのリネーム及び、ディレクトリ／ファイルのパーミッションを変更してください。

ファイルのリネーム

パーミッションの変更

8.動作テスト

パーミッションの変更が終わったら、商品掲載ページからカートへ商品を追加してみてください。
商品をカートに追加できたら設置作業は完了です。

設置がうまくいかないなどの場合は、お問い合わせいただくか、設置代行サービス（カスタマイズサービス）のご利用をご検討ください。