EC CUBE titleを階層的に表示する

titleタグなので、
data/Smarty/templates/作成したテンプレート名/site_frame.tpl
を修正。

デフォルトだと、
サイト名 / カテゴリ名
とか、
サイト名 / 商品名
となる。
これを
商品名 | カテゴリ | サイト名
のように変えたい。

デフォルトでは、

<title>
<!--{$arrSiteInfo.shop_name|h}-->
<!--{if $tpl_subtitle|strlen >= 1}--> / 
<!--{$tpl_subtitle|h}-->
<!--{elseif $tpl_title|strlen >= 1}--> / 
<!--{$tpl_title|h}-->
<!--{/if}-->
</title>

となっている。

簡単にできると思ったら、結構面倒くさい。

$tpl_subtitleに入る文字列が、商品一覧ページと商品詳細ページで異なってしまう。

以下のようにカスタマイズしてみたが、汎用性には乏しいかな。
検証ももっと必要だし。

このカスタマイズによって、タイトルが
商品名 | カテゴリ名 | サイト名
と表示されるように。
現在作っているサイト構成では、

親カテゴリ(複数不可)
子カテゴリ(複数可)
商品

で統一しているけど、親カテゴリに複数登録する場合は非対応になってしまう。
商品詳細ページでは、子カテゴリは一つも表示しない。

data/class_extends/page_extends/products/LC_Page_Products_List_Ex.php
に以下の関数を追記。

function lfGetPageTitle($mode, $category_id = 0){
	if ($mode == 'search') {
		return "検索結果";
	} elseif ($category_id == 0) {
		return "全商品";
	} else {
		//$arrCat = SC_Helper_DB_Ex::sfGetCat($category_id);
		//return $arrCat['name'];
		$objDb = new SC_Helper_DB_Ex();
		$catStr = $objDb->sfGetCatCombName($category_id);
		$arrCat = explode(' | ',$catStr);
		krsort($arrCat);
		$arrCat = implode(' | ', $arrCat);
		return $arrCat;
	}
}

data/class_extends/page_extends/products/LC_Page_Products_Detail_Ex.php
に以下の関数を追記。

function getMainCatId($product_id){
	$objDb = new SC_Helper_DB_Ex();
	$mainCat = $objDb->sfGetRootId($product_id);
	return $mainCat;
}

function lfGetPageTitle($mode, $category_id = 0){
	if ($mode == 'search') {
		return "検索結果";
	} elseif ($category_id == 0) {
		return "全商品";
	} else {
		//$arrCat = SC_Helper_DB_Ex::sfGetCat($category_id);
		//return $arrCat['name'];
		$objDb = new SC_Helper_DB_Ex();
		$catStr = $objDb->sfGetCatCombName($category_id);
		$arrCat = explode(' | ',$catStr);
		krsort($arrCat);
		$mainCat = implode(' | ', $arrCat);
		return $mainCat;
	}
}

同ファイルのprocess()に以下を追加。

$category_id = $this->getMainCatId($this->tpl_product_id);
$this->mainCat =  $this->lfGetPageTitle($mode,$category_id);

data/Smarty/templates/marikona/site_frame.tpl
のtitleタグを以下のように変更

<title>
<!--{if $tpl_subtitle|strlen >= 1}--> 
<!--{$tpl_subtitle|h}--> | 
<!--{/if}-->
<!--{if $mainCat|strlen >= 1}--> 
<!--{$mainCat|h}--> | 
<!--{/if}-->
<!--{$arrSiteInfo.shop_name|h}-->
</title>

これで一応できたけど、改善の余地が多いなあ。

EC CUBE リスト表示にウィンドウショッピング機能をつける2

前回の続き。

リストと画像のみの表示切替を行ったとき、sessionを使って現在の状態を記憶しておく。
と予定して途中まで作成したのだけど、書き方がまずいのかEC CUBE側のsessionとバッティングしてしまう
あちこち弄り回すのは避けたいので、素直にsessionを諦めてcookieを使う。

それぞれのスイッチをクリックして表示の切り替えを行うと同時に、Ajaxでcookie処理を行う。

javascript部分

前回作成したcmn.jsを以下の様に変更。
sessionCtrl関数を作成し、切り替え時に呼び出されるように。
コメントアウト部分は動作確認に使用できる。

$(function() {
 displayWindow();
 displayList();
});

function displayWindow(){
	$("#disp_switch_img").live('click',function(event){
		event.preventDefault();
		$(".list_area").attr('class','list_window');
		cookieCtrl('window');
	})
}

function displayList(){
	$("#disp_switch_list").live('click',function(event){
		event.preventDefault();
		$(".list_window").attr('class','list_area clearfix');
		cookieCtrl('list');
	})
}

function cookieCtrl(disp){
	$.ajax({
		type: "GET",
		url: "/products/disp_switch.php",
		data: "disp=" + disp ,
		/*
		success: function(msg){
		 	alert( msg );
		}
		*/
	});
}

PHP部分

disp_switch.phpを作成。
html/products/にアップ。
アップ場所は他の場所でも構わないけど、変えた場合はJSから呼び出すurlも変更のこと。

if (empty($_GET['disp'])) exit();
$disp = $_GET['disp'];
$disp = htmlspecialchars(trim($disp));

if ( $disp == 'list'){
	setcookie("disp", "list", time()+3600);
}else if ( $disp == 'window'){
	setcookie("disp", "window", time()+3600);
}

echo $disp;

これでcookieにセットする部分はできあがり。
続いて表示処理。
ページを開く際にcookieのデータを読み込み、表示を切り替える。

表示切替を行っているのは、
data/Smarty/templates/作成したテンプレート名/products/list.tpl
の、

<div class="list_area clearfix">

のclassを切り替えることによって行っている。
なので、ページを開く際にcookieの状態によってこのテンプレートファイルのclass部分を書き分ければよい。

今回はclassファイルをいじる。

テンプレートファイルはいくつかのファイルを読み込んでいるが、ごくシンプルに書くとこんな感じ。
(これ以外にも実際はファイルを読んでいるので注意)

data/class/pages/products/LC_Page_Products_List.php
 ┗data/class_extends/page_extends/products/LC_Page_Products_List_Ex.php
   ┗data/Smarty/templates/作成したテンプレート名/products/list.tpl
     ┗html/products/list.php

LC_Page_Products_List_Exは、LC_Page_Products_Listを継承しているのみ。
カスタマイズを行う場合は、LC_Page_Products_List.phpを直接いじることなく、LC_Page_Products_List_Ex.phpをいじる。

LC_Page_Products_List_Ex.phpに以下を追加。

function ChkCookie(){
	if(!empty($_COOKIE['disp'])){
		$disp = htmlspecialchars(trim($_COOKIE['disp']));
		if ($disp == 'window'){
			$class_str = 'list_window';
		}else{
			$class_str = 'list_area clearfix';
		}
	}else{
		$class_str = 'list_area clearfix';
	}
	return $class_str;
}

さらに、同じファイル内のprocess()関数に以下を追加。

$this->classStr = $this->ChkCookie();

classファイルの変更は以上。

続いて、テンプレートファイル。
data/Smarty/templates/作成したテンプレート名/products/list.tpl
内から、

<div class="list_area clearfix">

を探して、以下のように変更。

<div class="<!--{$classStr|h}-->">

これでできあがり。

後は、切り替えの際の細かい部分を直す。
次回へ。

と思ったけど、大したもんでもないので、チャチャっと実装。
切り替えの際にエフェクトを入れるのと、現在選択中の表示のリンクを消すこと。

できあがり。

EC CUBEのリスト表示にウィンドウショッピング機能をつける

画像だけをリスト表示する機能が欲しい。

どうするかちょっと悩んだけど、スタイルの切り替えが一番楽かな。
ただし、スタイルを切り替えただけだとページ送りした際に元に戻ってしまうので、sessionとの併用が必要。

流れてとしては、

  1. 表示切替をクリックしたら、javascripでスタイル切り替え、Ajaxでsession処理
  2. 該当ページにアクセスしたときに、sessionチェックしてスタイル切り替える

さて、予定通りいくかな?

以下は実際に記述した内容。

HTML部分

まず、表示切替用のリンクを設ける。
テンプレートファイル
/Smarty/templates/作成したテンプレート名/products/list.tpl
を修正するして、切り替え用のリンクを設置。

表示件数の隣に

<a id="disp_switch_img" href="#disp_switch_img">画像のみ</a>
<a id="disp_switch_list" href="#disp_switch_list">リスト表示</a>

javascript部分

切り替えスイッチがクリックされたときに、該当部分のスタイル名を変更

cmn.jsを作成し、読み込むように。

$(function() {
 displayWindow();
 displayList();
});

function displayWindow(){
	$("#disp_switch_img").live('click',function(event){
		event.preventDefault();
		$(".list_area").attr('class','list_window');
	})
}

function displayList(){
	$("#disp_switch_list").live('click',function(event){
		event.preventDefault();
		$(".list_window").attr('class','list_area clearfix');
	})
}

CSS部分

画像のみ表示用のスタイルを準備。
他、微調整

common.cssに以下を追加

.list_window .listcomment,
.list_window .detail_btn,
.list_window .cart_area
{display:none;}

.list_window{
	width: 150px;
	height:250px;
	float:left;
	margin-left:20px;
}
.list_window div.listphoto {
	float:none;
}
#two_maincolumn_right .list_window div.listrightbloc ,
#two_maincolumn_left .list_window div.listrightbloc {
	float:none;
	width:100%;
}
.list_window div.listrightbloc ul.status_icon {
	margin-bottom:0;
}

contents.cssを微調整
clear:bothを追加。

.pagenumber_area {
clear:both;
padding-bottom: 10px;
background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
}

これで表示の切り替えができた。
注意点としては、商品名がとても長かったりするとレイアウトが崩れる。
その場合は、.list_windowのheightを調整すると回避できる。
もっとうまくCSSを記述できればいいのだけど、今回はこのくらいで。

次はsessionを利用して、表示状態を保持できるようにする。

EC CUBE リストの表示件数を変更する

EC CUBEの商品一覧ページにある標準のソート機能は、

  • 価格順
  • 新着順
  • 表示件数の変更

リスト表示の見た目も変えるけど、ここに画像のみ一覧表示という機能を付けたい。
楽天にあるウィンドウショッピング表示みたいなもの。

その前に、サンプルの商品を登録するのが面倒なので、表示件数の部分からいじる。
デフォルトでは15-30-50件。
この件数を変更する。

この変更は、テンプレートファイルではなく、classファイルをいじることになる。
EC CUBEでは、カスタマイズ用のclassファイルが予め用意されている。
大元のファイルは、
data/class
にある。
このファイルは触らない。
これらのファイルをただ継承しただけのファイルが
data/class_extends
にあるので、こちらのファイルをカスタマイズする。

商品一覧ページの件数は
data/class/pages/products/LC_Page_Products_List.php
にあり、継承しているファイルは
data/class_extends/page_extends/products/LC_Page_Products_List_Ex.php
となる。

が、ここまで書いてふと気づいた。
管理画面から変更できないかなー。
・・・あった。

システム設定>マスターデータ管理
から
mtb_product_list_max
を選択。
現在登録されている件数の変更や、新規追加ができる。

無駄な変更を加えるとこだった。
あぶない、あぶない。

件数を少なめに登録する。
少なくした理由は、ページネーションが動いている状態にしたいから。

続きは次回。

EC CUBE ブロック部分のカスタマイズ

ブロック部分はWordpressのウィジェットみたいに、表示位置を自由に変更できる。
個々のテンプレートファイルも独立している。

テンプレートファイルは、管理画面の

デザイン管理>PC>ブロック設定

から編集することも出来るが、エディタで編集したい。

ブロック部分のテンプレートファイルは

data/Smarty/templates/作成したテンプレート名/frontparts/bloc/

にある。

CSSはbloc.cssに記述されている。

EC CUBE カスタマイズの際にいじるファイル

先にも書いたように、サーバの非公開フォルダに「data」、公開フォルダに「html」をアップした。
テンプレートファイル(.tpl)は「data」フォルダの中にある。
CSSやJS、画像ファイルは、「html」フォルダの中。

階層で見ると
data/Smarty/templates/作成したテンプレート名
にテンプレートファイルがあり、
html/user_data/packages/作成したテンプレート名
にCSS、JS、画像などがある。

もちろん、CSSなどの場所は簡単に変えられるけど、特に理由がなければ変えずにいた方がいいと思う。

今回はHTML5対応から始めるけど、Wordpressの標準テーマの中身などを見ると、とても参考になるので、習っていこうと思う。

EC CUBE テンプレートファイルの種類1

テンプレートファイルの中身を覗いてみると、どのような構成になっているかわかる。
以下は最も基本的な構造。

site_frame.tpl
htmlタグがあるので、これが一番外。

site_main.tpl
bodyタグがあるので、これが次。

header.tpl
名前の通りヘッダ部分の記述があるので、これがその次。

index.tpl
記述が少ないが、トップページのアイキャッチ画像(デフォルトではアイスの写真)があるので、これはトップページ専用。

footer.tpl
名前の通りフッタ部分の記述があるので、これが最後。

図にするとこんな感じ。

テンプレートファイルの構成

他にもテンプレートはいっぱいあるけど、まずはこれらのテンプレートファイルをいじるところからスタート。

サイトを作成する際は、可能な限りHTML5を使うことを心がけている。
見たところEC CUBEでは使われていないが、支障が出ない範囲でHTML5への書き換えも行っていこうと思う。

EC CUBEには色々と便利な機能がそろっている。
またセキュリティ対策も施されている。
カスタマイズにより、これらの利点を殺さないようにする。

最初は外観のカスタマイズから始め、機能のカスタマイズはその後行おうと思う。

EC CUBE テンプレートの準備

デフォルトのテンプレートは、
/data/Smarty/templates/
にある。

今回は、まずPC用をカスタマイズするので、該当するのは、「default」。
このファイルを直接いじらない。
複製して、カスタマイズの元とする。

複製する場合は、このファイルをFTPなどで直接ダウンロードするのではなく、EC CUBEの管理画面から行う。
「デザイン管理」-「PC」-「テンプレート設定」を選択。
リストには「デフォルト」しかないので、これをダウンロード。

tpl_package_default_ダウンロードした年月日時間.tar.gz

みたいな感じでダウンロードされる。

ダウンロードしたファイルを、今度はそのままアップする。
「デザイン管理」-「PC」-「テンプレート追加」
を選択。
テンプレートコード、テンプレート名に任意の名前を付けて、先ほどのファイルを選択しアップロード。

アップロードしたら、「デザイン管理」-「PC」-「テンプレート設定」を選択。
先ほどアップしたテンプレートがリストに追加されていれば、OK。

このテンプレートを色々いじってカスタマイズを進めていく。

EC CUBE dataフォルダを移動

EC CUBEのdataフォルダを、公開フォルダとは別の場所に移動する。
移動した後、「html」フォルダ内にある、define.phpの中身を変更する。

define(“HTML2DATA_DIR”, “../data/”);

“../data/”の部分を、移動先に合わせて相対パスで書き換える。

インストール画面にアクセスしてエラーが出てなければ成功。

EC CUBEをインストール

公式サイトからダウンロード。

公式サイトはこちら

げ、二日前にバージョンがアップしてる。
まだインストールしたあと何もいじってないから、インストールしなおそっと。

ダウンロードしたファイルをサーバにアップしてインストールするのだが、ここでいくつか注意点。

  1. dataフォルダはサーバの公開フォルダとは別の場所にアップする。
  2. ファイルをサーバーにアップする場合は、圧縮した状態でアップし、その後解凍する。
  3. インストールが終わった後に、ファイルをサーバー上で圧縮してダウンロード、展開してエディタで使えるように。

1についてはセキュリティ上の配慮。
2と3について、安い共用のレンサバを利用しているため。
ファイル数が多いと、アップ・ダウンロード中にプチプチ切れる。
昔はこれでかなり困った。
圧縮して1つのファイルとして処理することにより、この問題を解決する。

公式サイトからダウンロードしたファイルを解凍すると、4つのフォルダがある。
このうち、アップするのは「data」と「html」だけでよい。

1で書いたように、「data」は公開フォルダ以外の場所にアップし、「html」を公開フォルダにアップする。
また、「ドメイン名/shop/」などで公開する場合は、「html」をフォルダごとアップすればいいが、「ドメイン/」で運用したい場合は、ルートにあたる場所に「html」フォルダの中身をアップする。