CS-CartはECサイトを構築するためのCMSパッケージなのですが、11月版にフリー版が出たとのことでCS-Cartについてと、勉強会の内容のおさらいを含めて記事を書いていきます。

INDEX

• 1. CS-Cartって？
• 2. CS-Cartフリー版のダウンロード
• 3. CS-Cartフリー版のインストール
• 4. CSSによるカスタマイズ
• 5. ブロック機能
• 6. テンプレートフック
• 7. その他
• 8. 当日のスライド
• 9. リンク

1. CS-Cartって？

CS-Cartフリー版

EC-CUBEのようなECサイト（ショッピングカートサイト）を構築する為のパッケージで、PHP＋MySQLで構築されてます。

2. CS-Cartフリー版のダウンロード

1. CS-Cartフリー版のダウンロードページへ行き、「カートに追加」をクリックします。

2. 「購入手続き」をクリックします。（※フリー版のダウンロードは無料です）

3. 初めての場合「会員登録」をクリックします。

4. 連絡先情報を入力して「次へ」をクリックします。

5. 都道府県を選択して「次へ」をクリックします。

6. 「購入する」をクリックします。

7. 「ダウンロード」をクリックします。

8. ダウンロードするファイル名をクリックします。

9. インストールファイルがダウンロードされました。

3. CS-Cartフリー版のインストール

先ずはXAMPPやMAMPにローカル環境を構築します。いきなりレンタルサーバなどにアップすることも出来ますが、勉強やテスト目的であれば先ずはローカル環境の方が良いでしょう。

取り合えずXAMPP前提で説明していきますが、XAMPPやMAMPのインストールの説明は割愛させて頂きます。
（※XAMPP(Apache+MySQL)を起動後、phpMyAdmin「http://localhost/phpmyadmin」にアクセスしてデータベース「cart」を作成しておいてください。）

1. XAMPPのドキュメントルート「htdocs」に「cscart」ディレクトリを作成して、ダウンロードしたファイルを解凍して「cscart」配下に展開します。

↓cscart配下のファイル

2. 「http://localhost/cscart」にアクセスして[インストール]をクリックします。

3. 「CS-Cartのソフトウェアライセンス規約に同意する」にチェックを入れて「次へ」をクリックします。

4. 「FAIL」がないか確認してください。「CURLのサポート」が「FAIL」の場合XAMPPのインストールディレクトリ内の「php\php.ini」を編集して「;extension=php_curl.dll」の「;」を外してコメントアウトを解除してください。

extension=php_curl.dll

Apache再起動後、設定が反映されます。

5. 全てOKになったら「次へ」をクリックします。
レンタルサーバーなどにアップロードしている場合はパーミッションの設定を行なってください。

config.local.php – すべてのユーザーに読み取り/書き込みを許可 (666)
/images (とそのサブディレクトリ) – すべてのユーザーに読み取り/書き込み/実行を許可 (777)
/skins – すべてのユーザーに読み取り/書き込み/実行を許可 (777)
/var (とそのサブディレクトリ) – すべてのユーザーに読み取り/書き込み/実行を許可 (777)

6. 「MySQLユーザー名」、「MySQLパスワード」、「管理者用Eメールアドレス」を入力し、「デモ用データのインストール」にチェックを入れます。
その他は自動で入ってる筈です。XAMPPの場合、何も設定してない場合「MySQLユーザー名」が「root」、「MySQLパスワード」はなしで良いです。暗号化キーも任意のものに変えた方が良いと思います。
情報を入力したら「次へ」をクリックします。

ライセンスキーですが、管理者用パネルに最初にログインしてから３-５営業日以内に管理者用メールアドレスに送信と書いてるのですが、ローカルの場合はオンラインアップデートに対応していないためメール通知は来ません。

（※ライセンスキーについてはこちらをご覧ください。）

7. 「データベースのインストールが完了しました。」と表示されたら「次へ」をクリックします。

8. スキンの選択を促されますがここでは「Basic Skin」しか選べませんので「次へ」をクリックします。

9. 「スキンのインストールが完了しました。」と表示されたら「次へ」をクリックします。

10. インストール完了メッセージが表示されたらインストール終了です。
ローカル環境のXAMPPにインストールした場合、ショップページのURLが「http://localhost/cscart/index.php」、管理者用パネルのURLが「http://localhost/cscart/admin.php」になります。

※再インストール用の認証コードも一応控えておきましょう。

警告が出ますのでこちらもレンタルサーバーなどにアップロードしている場合はパーミッションの設定を行なった方が良いでしょう。
admin.php のファイル名変更も参照してください。この辺も今回は割愛させて頂きます（セキュリティを考えると変更した方が良いです。）

ご注意ください!
セキュリティの観点から、すぐに install ディレクトリをリネームまたは削除し、admin.php をリネームしてください。

また、config.local.php のパーミッションを 644 に変更してください。

11. ユーザー名「admin」、パスワード「admin」で管理者用パネルにログインできます。

ショップページはこんな感じです。

5. CSSによるカスタマイズ

むやみやたらにテンプレートを編集するとCS-Cartのバージョンアップで上書きされてしまい「オワタ＼(^o^)／」状態に陥ってしまうようです。
テンプレートを直接編集するのは最終手段のようで、「じゃあどうするんだ！」という声が聞こえてきそうですが、先ずは日本語版アドオンの「style.css」を編集してカスタマイズしていってみましょう。

この「style.css」ですが、インストールディレクトリ内の「skins\basic\customer\addons\localization_jp」内にあります。
必ず最後に読み込まれるようでして、スタイルを上書きすることが可能です。

Firefoxの拡張機能「Firebug」などを活用していきましょう。

ショップページの吐き出されたHTML要素やCSSをFirebugで確認しながらstyle.cssを編集することで装飾をカスタマイズ出来ます。

5. ブロック機能

CS-Cartにはページ構成を管理する「ブロック機能」というものがあります。
ページの装飾には日本語版アドオンの「style.css」の編集、ページのコンテンツのカスタマイズは「ブロック機能」を使用。
これだけでかなりいろいろなことが出来てしまうんですねー。

ざっとブロックの種類を以下に。

【一覧用オブジェクト】
商品・・・商品やそのリストを表示します。
カテゴリー・・・カテゴリーのリストを表示します。
ページ・・・ページのリストを表示します。
商品フィルタ・・・商品フィルターに基づくリスト表示を行います。
支払方法・・・支払い方法のアイコンを表示します。
配送方法・・・配送方法のアイコンを表示します。
メールマガジン・・・購読可能なメールマガジンのリストを表示します。
タグ（タグアドオン有効時）・・・タグクラウドなどを表示します。
アンケート（アンケートアドオン有効時）・・・アンケートを表示します。
バナー（バナー管理アドオン有効時）・・・バナーを表示します。

【標準サイドボックス】
商品比較・・・商品比較リストを表示します。
マイアカウント・・・アカウントへのリンクを表示します。
検索・・・検索窓を表示します。
送料見積もり店舗所在地（店舗所在地アドオン有効時）・・・店舗所在地の検索窓を表示します。
お客様の声（コメントとレビューアドオン有効時）・・・お客様からのレビューを表示します。

【スペシャル】
HTMLブロック・・・自由にHTMLを記述できるブロックです。
個別のHTMLブロック・・・ページ別にHTMLを記述出来るブロック
RSSフィード・・・RSSフィードをリスト化して表示します。

管理者用パネルにログインしてカスタマイズしていこう

管理者用パネルにログインして、実際にブロック機能を扱っていきます。

管理画面にログインして「デザイン」メニューの「ブロック」を選択します。

ブロックとかグループを追加出来るんですねー。レイアウトも色々変えられます。

6. テンプレートフック

フックってなに？

フック（Hook）は、プログラム中の特定の箇所に、利用者が独自の処理を追加できるようにする仕組みである。また、フックを利用して独自の処理を追加することを「フックする」という。
処理を追加できる箇所は、元のプログラムの開発者によって、あらかじめ決められている。初期化処理や入出力処理などの直前・直後が対象としてよく選ばれる。

WordPressにもフックがありますねー。あらかじめ決められた箇所に自分の独自処理を追加してカスタマイズが可能です:)

フックの記述

{hook name="index:footer"}{/hook}

テンプレートの中で{hook}～{/hook}のように書かれている記述を「hook(フック)ポイント」と言います。

{hook name="index:jp_html_xmlns"}
    <html xmlns="http://www.w3.org/1999/xhtml"
    lang="{$smarty.const.CART_LANGUAGE|lower}">
{/hook}

もしくは処理がフックポイントの中に書かれているものもあります。

「ん？$smarty.constだと？」と思われた方もいるでしょう。
そうです、テンプレートエンジンにはEC-CUBE同様「Smarty」が使用されています。
ここで肩を落とす方もいらっしゃるかも知れませんが、僕は良く記述方法を忘れます…X(

命名規則

“index:footer”・・・「index」というセクションの「footer」という名前のフックポイントです。

フックのタイミング

pre・・・フックポイントが読み込まれる直前に変更内容を表示する
post・・・フックポイントが読み込まれた直後に変更内容を表示する
override・・・フックポイント内をオーバーライド（上書き）する

フックを司るアドオン「My changes」

先ずは管理者用パネルの「一般設定」の「アドオン」で「My cahnges」が有効になっているか確認してみます（通常有効になっている筈です）。

ただ「skins\basic\customer\addons」ディレクトリ内に「my_changes」ディレクトリがないので「my_changes」と他必要ディレクトリを作成してフック用のテンプレートファイルを作成します。

アドオン用ディレクトリ「my_changes」作成、その下に「hooks」ディレクトリ作成。
その下の「index」ディレクトリがセクションで「footer.post.tpl」は「フックポイント名.処理のタイミング.tpl」になります。
「skins\basic\customer\index.tpl」の

{hook name="index:footer"}{/hook}

の部分でフックされます。

footer.post.tplは以下のようにしました。

<p style="color: #f00; text-align: center">フックテスト</p>

ショップページを確認してみましょう。
「footer.post.tpl」の内容がフックされて表示されています。

※上手く適用されない場合は、キャッシュをクリアしてください。キャッシュをクリアしたい場合「http://localhost/cscart/admin.php?cc」とかで出来るみたいです。

7. その他

デザインモード

管理者用パネルから「デザイン」の「デザインモード」を選択します。
「翻訳モード」と「カスタマイズモード」が有効に出来ます。
試しに「カスタマイズモード」でショップページを表示した状態を見てみましょう。

ブロックにカーソルを合わせると使用しているテンプレートが分かります。

テンプレート名をクリックすると「テンプレートエディタ」が起動します。

フックポイントは自分で作成可能

フックポイントがない！という場合は自分でフックポイントの作成も可能です。
フックを使えば好きなjQueryを読み込むなども可能です。

「SEO」アドオンの注意

SEOアドオンの使用は、アドオンの管理で「SEO」を有効にしていること「Apache + mod_rewrite」を有効にしていることが条件ですが、もう一つ注意があります。
今回のようなドキュメントルートに「cscart」などとディレクトリを作成してCS-Cartをインストールしている場合（ルートにインストールしていない場合ですね）インストールディレクトリ内の「.htaccess」を編集しましょう。

RewriteBase /

の部分を

RewriteBase /cscart

に変更します。

※「cscart」の部分はご自身の環境に合わせてくださいね。

テンプレート内のJSやCSS

外部ファイルじゃなくて直接書きたいのに動かないよ！って時は{literal}{/literal}で括ってください（※これはSmartyの書き方になります）。

{literal}
<script type="text/javascript">
function test() {
    //yourcode
}
</script>
{/literal}

8. 当日のスライド

9. リンク

まだまだ技術的なことを含め情報が少ないので、susipakuさんとCS-Cartの情報を広げていけたらなーと思います。

以下susi-paku webより

• EC-CUBEより使いやすい！ネットショップ構築ソフトのCS-CARTが無料のフリー版（期間制限なし）をリリースするよ！
• CS-CARTフリー版11/11遂にリリース！クレカ決済が基本料無料や導入方法など使ってみたレビュー