動作確認までの3ステップ

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

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

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

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

Movable Type連携マニュアル

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

API利用マニュアル

version2.1.0より、APIを使用して商品ページから移動することなく、カートへ商品を追加できるようになりました。
標準テンプレートのほかに同梱されているsample_api.htmlとsample_api_2.htmlをご参考ください。

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

本体設置マニュアル

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

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

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

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

bootstrap.php コアファイル 編集:不要
common 共通ファイル
css 共通CSSファイル(サンプル) 編集:任意
images 共通画像ファイル(サンプル) 編集:任意
js/script.js フォームボタン制御用JSファイル 編集:不要
data/item.dat 商品データファイル 編集:必須
htaccess.txt .htaccessにリネームしてサーバーへ設置 編集:任意
index.php コアファイル 編集:不要
init.php 初期設定ファイル 編集:必須
lib プログラムコアフォルダ 編集:不要
logs 各種ログ保存フォルダ 編集:不要
plugins プラグインインストールフォルダ 編集:任意
sample_item.html 商品サンプル用データ 編集:任意
smarty_plugins システム用プラグインフォルダ 編集:不要
sys_templates システム用テンプレートフォルダ 編集:不要
templates 各種テンプレート格納フォルダ
_cart.html カートの中身用テンプレート 編集:任意
_error.html エラー用テンプレート 編集:任意
_mail_order.txt 受注用メールテンプレート 編集:任意
_mail_user.txt 購入控用メールテンプレート 編集:必須
_maintenance.html メンテナンス用テンプレート 編集:任意
_regi_comp.html 購入完了画面用テンプレート 編集:任意
_regi_conf.html 入力内容確認用テンプレート 編集:任意
_regi.html お客様情報・お届先情報入力フォーム用テンプレート 編集:任意
include/_footer.html
include/_header.html
各テンプレート共通ヘッダ/フッタ用テンプレート 編集:任意
templates_c テンプレートキャッシュフォルダ 編集:不要
vendor ベンダー配布ファイル設置フォルダ 編集:不要
VERSION SKELETON CARTバージョン説明ファイル 編集:不要

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>',  // 返信先アドレス

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

以下の記載例のようにフォーム部品を商品情報HTMLへ記載してください。

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

設置ディレクトリ構成例

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

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

商品情報オプション(最大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|Tシャツ01|2500|1|9|500
2|Tシャツ02|2600|2|10|500
3|T-Shirt03|2600|3|10|500

※重量制限しない場合(第6項目部分は空白のままでも正常動作します。)
1|Tシャツ01|2500|1|9
2|Tシャツ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のみですが、作成数に制限はありません。

inckudeディレクトリに格納した後、以下の例のように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)にアップロードしてください。

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

ファイルのリネーム

htaccess.txt .htaccessにリネーム

パーミッションの変更

template_c 777
data 705 or 700 在庫管理機能を使用する場合
data/item.dat 600 在庫管理機能を使用する場合
logs 705 or 700 ログデータをサーバー内に残す場合

8.動作テスト

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

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

9.APIのご利用方法について

version2.1.0以降でご利用いただけるAPIの利用方法についてご案内します。
データに同梱されているsample_api.htmlを参考に、以下を商品ページで実装願います。
サンプルでは商品一覧になっていますが、商品ページが分かれている場合、その商品ページごとに設置する必要があります。
また、sample_api_2.htmlのように、最後のJavaScript部分の改造でさまざまな表現も可能です。

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

1.APIを利用するためのJavaScriptを追加

APIを使用するページで、以下のJavaScriptを記載または読み込んでください。

<script>
SkeletonCartSettings = {
    // 以下にSKELETON CARTインストールディレクトリへのパス + api を記載してください
    api_base: './api'
};
</script>
<script src="common/js/sc.js"></script>

2.カートバッジの設置

カートの中にある商品数を表示するカートバッジは、以下のHTML(例)で追加してください。

<!-- Cart Item Bagde -->
<div id="cart_content" class="sticky">
    <a href="cart/show" class="btn btn-outline-danger">
    <i class="fa fa-shopping-cart"></i> 
    <span id="item_count" class="badge badge-danger"></span>
    </a>
</div>
<!-- / Cart Item Badge -->

3.formパーツの修正

APIを利用して商品をカートに追加するために、form部分にclass="item"data-toggle="modal"data-target="#myModal"を追加してください。

formタグ部分
<form method="post" name="newdat" enctype="multipart/form-data" action="cart/add" class="item">
ボタン部分
<input type="submit" value=" カートへ追加" class="btn btn-success" data-toggle="modal" data-target="#myModal">

4.モーダルウィンドウ部分の設置

商品を追加した際や、なにかエラーが発生した際に表示するモーダルウィンドウは、以下のHTML(例)で追加してください。

<!-- Modal Widnow-->
    <!-- add cart -->
    <div class="modal" id="modal01">
        <div class="overLay modalClose"></div>
        <div class="inner">
            <i class="fa fa-check-circle-o" aria-hidden="true"></i>
            <p>商品をカートに追加しました!</p>
            <form>
                <input type="button" value=" カートを見る" onClick="location.href='cart/show'" class="btn btn-primary">
            </form>
            <a href="#!" class="modalClose"><span class="fa fa-times-circle" aria-hidden="true"></span> 閉じる</a>
        </div>
    </div>

    <!-- error -->
    <div class="modal" id="modal02">
        <div class="overLay modalClose"></div>
        <div class="inner">
            <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
            <p>ERRORが発生しました<br>
            <span class="error-message">エラーが発生しました。</span></p>
            <a href="#!" class="modalClose"><i class="fa fa-times-circle" aria-hidden="true"></i> 閉じる</a>
        </div>
    </div>
<!-- /modal window-->

5.モーダルウィンドウの動作とカートへ商品を追加するJavaScriptの設置

商品を追加した際、上記のモーダルウィンドウを表示して、カートバッジにそれを加算するJavaScriptを追加してください。

<script>
    $(function() {
        $('#item_count').scItemCount();

        $('form.item').scItem({
            onAdd: function(data) {
                $('#modal-success').fadeIn('fast');
                $('#modal-error').css('display','none');
                $('#item_count').scItemCount('update');
            },
            onError: function(data) {
                $('#modal-success').css('display','none');
                $('#modal-error').fadeIn('fast');
                $('.modal-body .error-message').text(data.error);
            }
        });
        $('#myModal').on('hide.bs.modal', function (e) {
            $('#modal-success').css('display','none');
            $('#modal-error').css('display','none');
        });
    });
</script>

以上で設置作業は完了です。
商品ページへアクセスして正常に動作していることを確認してください。