2012年10月13日カテゴリー:

EC-CUBE2.12:jQueryでスライドするピックアップ商品(PICKUP)

▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから(facebookユーザーのみ)

ブロックの横幅内にアイテムの数が収まる場合は、スライドしない。ボタンも表示されない。

1 管理画面からピックアップ商品を登録できるようにする。

(1)データベースにテーブルを作成


【MySQL・PostgreSQL】

[php]
CREATE TABLE dtb_pickup (
best_id int NOT NULL,
category_id int NOT NULL,
rank int NOT NULL DEFAULT 0,
product_id int NOT NULL,
title text,
comment text,
creator_id int NOT NULL,
create_date timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
update_date timestamp NOT NULL,
del_flg smallint NOT NULL DEFAULT 0,
PRIMARY KEY (best_id)
);
[/php]

 パラメータから登録数を入力できるようにする

[php]
INSERT INTO mtb_constants (id, name, rank, remarks) VALUES (‘PICKUP_NUM’, ’10’, 1429, ‘ピックアップ商品表示数’);
[/php]

★パラメータ設定を開き、「この内容で登録する」をクリックする。

(2)ピックアップ商品管理画面

 ■html/admin/contents/pickup.php

[php]
init();
$objPage->process();
?>
[/php]

 ■data/class_extends/page_extends/admin/contents/LC_Page_Admin_Contents_Pickup_Ex.php

[php]

[/php]

 ■data/class/pages/admin/contents/LC_Page_Admin_Contents_Pickup.php

[php]
tpl_mainpage = ‘contents/pickup.tpl’;
$this->tpl_mainno = ‘contents’;
$this->tpl_subno = ‘pickup’;
$this->tpl_maintitle = ‘コンテンツ管理’;
$this->tpl_subtitle = ‘ピックアップ商品管理’;
//最大登録数の表示
$this->tpl_disp_max = PICKUP_NUM;
}

/**
* Page のプロセス.
*
* @return void
*/
function process() {
$this->action();
$this->sendResponse();
}

/**
* Page のアクション.
*
* @return void
*/
function action() {
$objFormParam = new SC_FormParam_Ex();
$this->lfInitParam($objFormParam);
$objFormParam->setParam($_POST);
$objFormParam->convParam();
$objQuery =& SC_Query_Ex::getSingletonInstance();
$objDb = new SC_Helper_DB_Ex();

switch ($this->getMode()) {
case ‘down’: //商品の並び替えをする。ピックアップはデータベースの登録が昇順なので、Modeを逆にする。
$arrRet = $objQuery->select(‘best_id’, ‘dtb_pickup’, ‘rank = ?’, array($_POST[‘rank’])); //ピックアップidの取得
$best_id = $arrRet[0][‘best_id’];
$objDb->sfRankUp(‘dtb_pickup’,’best_id’,$best_id);
$arrPost = $objFormParam->getHashArray();
$arrItems = $this->getPickupProducts();
break;

case ‘up’: //商品の並び替えをする。ピックアップのみデータベースの登録が昇順なので、Modeを逆にする。
$arrRet = $objQuery->select(‘best_id’, ‘dtb_pickup’, ‘rank = ?’, array($_POST[‘rank’])); //ピックアップidの取得
$best_id = $arrRet[0][‘best_id’];
$objDb->sfRankDown(‘dtb_pickup’,’best_id’,$best_id);
$arrPost = $objFormParam->getHashArray();
$arrItems = $this->getPickupProducts();
break;

case ‘regist’: // 商品を登録する。
$this->arrErr = $this->lfCheckError($objFormParam);
$arrPost = $objFormParam->getHashArray();
// 登録処理にエラーがあった場合は商品選択の時と同じ処理を行う。
if (SC_Utils_Ex::isBlank($this->arrErr)) {
$member_id = $_SESSION[‘member_id’];
$this->insertPickupProduct($arrPost,$member_id);
$arrItems = $this->getPickupProducts();
} else {
$arrItems = $this->setProducts($arrPost, $arrItems);
$this->checkRank = $arrPost[‘rank’];
}
$this->tpl_onload = “window.alert(‘編集が完了しました’);”;
break;
case ‘delete’: // 商品を削除する。
$this->arrErr = $this->lfCheckError($objFormParam);
$arrPost = $objFormParam->getHashArray();
if (SC_Utils_Ex::isBlank($this->arrErr)) {
$this->deleteProduct($arrPost);
$arrItems = $this->getPickupProducts();
}
$this->tpl_onload = “window.alert(‘削除しました’);”;
break;
case ‘set_item’: // 商品を選択する。
$this->arrErr = $this->lfCheckError($objFormParam);
$arrPost = $objFormParam->getHashArray();
if (SC_Utils_Ex::isBlank($this->arrErr[‘rank’]) && SC_Utils_Ex::isBlank($this->arrErr[‘product_id’])) {
$arrItems = $this->setProducts($arrPost, $this->getPickupProducts());
$this->checkRank = $arrPost[‘rank’];
}
break;
default:
$arrItems = $this->getPickupProducts();
break;
}

$this->category_id = intval($arrPost[‘category_id’]);
$this->arrItems = $arrItems;

// カテゴリ取得
$objDb = new SC_Helper_DB_Ex();
$this->arrCatList = $objDb->sfGetCategoryList(‘level = 1’);

}

/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}

/**
* パラメーターの初期化を行う
* @param Object $objFormParam
*/
function lfInitParam(&$objFormParam) {
$objFormParam->addParam(‘商品ID’, ‘product_id’, INT_LEN, ‘n’, array(‘EXIST_CHECK’, ‘NUM_CHECK’, ‘MAX_LENGTH_CHECK’));
$objFormParam->addParam(‘カテゴリID’, ‘category_id’, INT_LEN, ‘n’, array(‘EXIST_CHECK’, ‘NUM_CHECK’, ‘MAX_LENGTH_CHECK’));
$objFormParam->addParam(‘ランク’, ‘rank’, INT_LEN, ‘n’, array(‘EXIST_CHECK’, ‘NUM_CHECK’, ‘MAX_LENGTH_CHECK’));
$objFormParam->addParam(‘コメント’, ‘comment’, LTEXT_LEN, ‘KVa’, array(‘MAX_LENGTH_CHECK’));
}

/**
* 入力されたパラメーターのエラーチェックを行う。
* @param Object $objFormParam
* @return Array エラー内容
*/
function lfCheckError(&$objFormParam) {
$objErr = new SC_CheckError_Ex($objFormParam->getHashArray());
$objErr->arrErr = $objFormParam->checkError();
return $objErr->arrErr;
}

/**
* 既に登録されている内容を取得する
* @return Array $arrReturnProducts データベースに登録されているピックアップ商品の配列
*/
function getPickupProducts() {
$objQuery = $objQuery =& SC_Query_Ex::getSingletonInstance();
$col = ‘dtb_products.name,dtb_products.main_list_image,dtb_pickup.*’;
$table = ‘dtb_pickup INNER JOIN dtb_products ON dtb_pickup.product_id = dtb_products.product_id’;
$where = ‘dtb_pickup.del_flg = 0’;
$order = ‘rank’;
$objQuery->setOrder($order);
$arrProducts = $objQuery->select($col, $table, $where);

$arrReturnProducts = array();
foreach ($arrProducts as $data) {
$arrReturnProducts[$data[‘rank’]] = $data;
}
return $arrReturnProducts;
}

/**
* ピックアップ商品の新規登録を行う。
* @param Array $arrPost POSTの値を格納した配列
* @param Integer $member_id 登録した管理者を示すID
*/
function insertPickupProduct($arrPost,$member_id) {
$objQuery = $objQuery =& SC_Query_Ex::getSingletonInstance();
// 古いピックアップ商品のデータを削除する。
$this->deleteProduct($arrPost);

$sqlval = array();
$sqlval[‘product_id’] = $arrPost[‘product_id’];
$sqlval[‘category_id’] = $arrPost[‘category_id’];
$sqlval[‘rank’] = $arrPost[‘rank’];
$sqlval[‘comment’] = $arrPost[‘comment’];
$sqlval[‘creator_id’] = $member_id;
$sqlval[‘create_date’] = ‘CURRENT_TIMESTAMP’;
$sqlval[‘update_date’] = ‘CURRENT_TIMESTAMP’;
$sqlval[‘best_id’] = $objQuery->nextVal(‘dtb_pickup_best_id’);
$objQuery->insert(‘dtb_pickup’, $sqlval);
}

/**
* データを削除する
* @param Array $arrPost POSTの値を格納した配列
*/
function deleteProduct($arrPost) {
$objQuery = $objQuery =& SC_Query_Ex::getSingletonInstance();
$table = ‘dtb_pickup’;
$where = ‘category_id = ? AND rank = ?’;
$arrWhereVal = array($arrPost[‘category_id’],$arrPost[‘rank’]);
$objQuery->delete($table, $where, $arrWhereVal);
}

/**
* 商品情報を取得する
* @param Integer $product_id 商品ID
* @return Array $arrProduct 商品のデータを格納した配列
*/
function getProduct($product_id) {
$objQuery = $objQuery =& SC_Query_Ex::getSingletonInstance();
$col = ‘product_id,main_list_image,name’;
$table = ‘dtb_products’;
$where = ‘product_id = ? AND del_flg = 0’;
$arrWhereVal = array($product_id);
$arrProduct = $objQuery->select($col, $table, $where, $arrWhereVal);
return $arrProduct[0];
}

/**
* 商品のデータを表示用に処理する
* @param Array $arrPost POSTのデータを格納した配列
* @param Array $arrItems フロントに表示される商品の情報を格納した配列
*/
function setProducts($arrPost,$arrItems) {
$arrProduct = $this->getProduct($arrPost[‘product_id’]);
if (count($arrProduct) > 0) {
$rank = $arrPost[‘rank’];
foreach ($arrProduct as $key => $val) {
$arrItems[$rank][$key] = $val;
}
$arrItems[$rank][‘rank’] = $rank;
}
return $arrItems;
}

}
[/php]

 ■data/Smarty/templates/admin/contents/pickup.tpl

[php]

ブロックの横幅内にアイテムの数が収まる場合はスライドしません。スライドさせるためには登録商品を増やしてください。

順位 商品/コメント 編集 削除 並び替え ピックアップ商品()


商品名:


商品を選択する






この内容で登録する


–>

[/php]

 ■data/Smarty/templates/admin/contents/subnavi.tpl 追加

[php]
 class=”on” id=”navi-contents-pickup”>(3)ピックアップ商品検索ポップアップ

 ■html/admin/contents/pickup_search.php

[php]
init();
$objPage->process();
?>
[/php]

 ■data/class_extends/page_extends/admin/contents/LC_Page_Admin_Contents_PickupSearch_Ex.php

[php]

[/php]

 ■data/class/pages/admin/contents/LC_Page_Admin_Contents_PickupSearch.php

[php]
tpl_mainno = ‘contents’;
$this->tpl_subno = ”;

$this->tpl_subtitle = ‘商品検索’;
}

/**
* Page のプロセス.
*
* @return void
*/
function process() {
$this->action();
$this->sendResponse();
}

/**
* Page のアクション.
*
* @return void
*/
function action() {

$objDb = new SC_Helper_DB_Ex();
$objFormParam = new SC_FormParam_Ex();
$this->lfInitParam($objFormParam);
$objFormParam->setParam($_POST);
$objFormParam->convParam();

switch ($this->getMode()) {
case ‘search’:
// POST値の引き継ぎ
$this->arrErr = $this->lfCheckError($objFormParam);
$arrPost = $objFormParam->getHashArray();
// 入力された値にエラーがない場合、検索処理を行う。
// 検索結果の数に応じてページャの処理も入れる。
if (SC_Utils_Ex::isBlank($this->arrErr)) {
$objProduct = new SC_Product_Ex();

$wheres = $this->createWhere($objFormParam,$objDb);
$this->tpl_linemax = $this->getLineCount($wheres,$objProduct);

$page_max = SC_Utils_Ex::sfGetSearchPageMax($arrPost[‘search_page_max’]);

// ページ送りの取得
$objNavi = new SC_PageNavi_Ex($arrPost[‘search_pageno’], $this->tpl_linemax, $page_max, ‘fnNaviSearchOnlyPage’, NAVI_PMAX);
$this->tpl_strnavi = $objNavi->strnavi;      // 表示文字列
$startno = $objNavi->start_row;

$arrProduct_id = $this->getProducts($wheres, $objProduct, $page_max, $startno);
$this->arrProducts = $this->getProductList($arrProduct_id,$objProduct);
$this->arrForm = $arrPost;
}
break;
default:
break;
}

// カテゴリ取得
$this->arrCatList = $objDb->sfGetCategoryList();
$this->setTemplate(‘contents/pickup_search.tpl’);

}

/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}

/**
* パラメーターの初期化を行う
* @param Object $objFormParam
*/
function lfInitParam(&$objFormParam) {
$objFormParam->addParam(‘商品ID’, ‘search_name’, LTEXT_LEN, ‘KVa’, array(‘MAX_LENGTH_CHECK’));
$objFormParam->addParam(‘商品ID’, ‘search_category_id’, INT_LEN, ‘n’, array(‘MAX_LENGTH_CHECK’,’NUM_CHECK’));
$objFormParam->addParam(‘商品コード’, ‘search_product_code’, LTEXT_LEN, ‘KVa’, array(‘MAX_LENGTH_CHECK’));
$objFormParam->addParam(‘ページ番号’, ‘search_pageno’, INT_LEN, ‘n’, array(‘MAX_LENGTH_CHECK’,’NUM_CHECK’));
}

/**
* 入力されたパラメーターのエラーチェックを行う。
* @param Object $objFormParam
* @return Array エラー内容
*/
function lfCheckError(&$objFormParam) {
$objErr = new SC_CheckError_Ex($objFormParam->getHashArray());
$objErr->arrErr = $objFormParam->checkError();
return $objErr->arrErr;
}

/**
*
* POSTされた値からSQLのWHEREとBINDを配列で返す。
* @return array (‘where’ => where string, ‘bind’ => databind array)
* @param SC_FormParam $objFormParam
*/
function createWhere(&$objFormParam,&$objDb) {
$arrForm = $objFormParam->getHashArray();
$where = ‘alldtl.del_flg = 0’;
$bind = array();
foreach ($arrForm as $key => $val) {
if ($val == ”) {
continue;
}

switch ($key) {
case ‘search_name’:
$where .= ‘ AND name ILIKE ?’;
$bind[] = ‘%’.$val.’%’;
break;
case ‘search_category_id’:
list($tmp_where, $tmp_bind) = $objDb->sfGetCatWhere($val);
if ($tmp_where != ”) {
$where.= ‘ AND alldtl.product_id IN (SELECT product_id FROM dtb_product_categories WHERE ‘ . $tmp_where . ‘)’;
$bind = array_merge((array)$bind, (array)$tmp_bind);
}
break;
case ‘search_product_code’:
$where .=    ‘ AND alldtl.product_id IN (SELECT product_id FROM dtb_products_class WHERE product_code LIKE ? GROUP BY product_id)’;
$bind[] = ‘%’.$val.’%’;
break;
default:
break;
}
}
return array(
‘where’=>$where,
‘bind’ => $bind
);
}

/**
*
* 検索結果対象となる商品の数を返す。
* @param array $whereAndBind
* @param SC_Product $objProduct
*/
function getLineCount($whereAndBind,&$objProduct) {
$where = $whereAndBind[‘where’];
$bind = $whereAndBind[‘bind’];
// 検索結果対象となる商品の数を取得
$objQuery =& SC_Query_Ex::getSingletonInstance();
$objQuery->setWhere($where);
$linemax = $objProduct->findProductCount($objQuery, $bind);
return $linemax;   // 何件が該当しました。表示用
}

/**
* 検索結果の取得
* @param array $whereAndBind string whereと array bindの連想配列
* @param SC_Product $objProduct
*/
function getProducts($whereAndBind,&$objProduct, $page_max, $startno) {
$where = $whereAndBind[‘where’];
$bind = $whereAndBind[‘bind’];
$objQuery =& SC_Query_Ex::getSingletonInstance();
$objQuery->setWhere($where);
// 取得範囲の指定(開始行番号、行数のセット)
$objQuery->setLimitOffset($page_max, $startno);
// 検索結果の取得
return $objProduct->findProductIdsOrder($objQuery, $bind);
}

/**
* 商品取得
*
* @param array $arrProductId
* @param SC_Product $objProduct
*/
function getProductList($arrProductId, &$objProduct) {
$objQuery =& SC_Query_Ex::getSingletonInstance();

// 表示順序
$order = ‘update_date DESC, product_id DESC’;
$objQuery->setOrder($order);
return $objProduct->getListByProductIds($objQuery, $arrProductId);
}
}
[/php]

 ■data/Smarty/templates/admin/contents/pickup_search.tpl

[php]



カテゴリ 商品コード


件が該当しました。


商品画像 商品コード 商品名 決定


–>

商品が登録されていません



[/php]

2 下記より、jQueryプラグイン「carouFredSel」をダウンロードし、■html/js/jquery.caroufredselフォルダに置く。
http://caroufredsel.frebsite.nl/

3 ■data/Smarty/templates/default/site_frame.tpl 追加

[php]


[/php]

4 ブロックを新規作成する

(1) ■html/frontparts/bloc/pickup.php

[php]
blocItems = $params[‘items’];
register_shutdown_function(array($objPage, “destroy”));
$objPage->init();
$objPage->process();
?>
[/php]

(2) ■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Pickup_Ex.php

[php]

[/php]

(3) ■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Pickup.php

[php]
arrSiteInfo = SC_Helper_DB_Ex::sfGetBasisData();
}

/**
* Page のプロセス.
*
* @return void
*/
function process() {
$this->action();
$this->sendResponse();
}

/**
* Page のアクション.
*
* @return void
*/
function action() {

// 基本情報を渡す
$objSiteInfo = SC_Helper_DB_Ex::sfGetBasisData();
$this->arrInfo = $objSiteInfo->data;

//ピックアップ商品表示
$this->arrPickupProducts = $this->lfGetRanking();
}

/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}

/**
* ピックアップ商品検索.
*
* @return array $arrPickupProducts 検索結果配列
*/
function lfGetRanking(){
$objQuery =& SC_Query_Ex::getSingletonInstance();
$objProduct = new SC_Product_Ex();

// ピックアップ商品取得
$col = ‘best_id, category_id, rank, product_id, title, comment, create_date, update_date’;
$table = ‘dtb_pickup’;
$where = ‘del_flg = 0’;
$objQuery->setOrder(‘rank’);
$objQuery->setLimit(RECOMMEND_NUM);
$arrPickupProducts = $objQuery->select($col, $table, $where);

$objQuery =& SC_Query_Ex::getSingletonInstance();
if (count($arrPickupProducts) > 0) {
// 商品一覧を取得
// where条件生成&セット
$arrProductId = array();
$where = ‘product_id IN (‘;
foreach ($arrPickupProducts as $key => $val) {
$arrProductId[] = $val[‘product_id’];
}
// 取得
$arrTmp = $objProduct->getListByProductIds($objQuery, $arrProductId);
foreach ($arrTmp as $key => $arrRow) {
$arrProductList[$arrRow[‘product_id’]] = $arrRow;
}
// ピックアップ商品情報にマージ
foreach (array_keys($arrPickupProducts) as $key) {
$arrRow =& $arrPickupProducts[$key];
if (isset($arrProductList[$arrRow[‘product_id’]])) {
$arrRow = array_merge($arrRow, $arrProductList[$arrRow[‘product_id’]]);
} else {
// 削除済み商品は除外
unset($arrPickupProducts[$key]);
}
}
}
return $arrPickupProducts;
}
}
?>
[/php]

(4) ■data/Smarty/templates/default/frontparts/bloc/pickup.tpl

[php]



[/php]

(5) データベースdtb_blocテーブルに追加する

[php]
INSERT INTO dtb_bloc (device_type_id, bloc_id, bloc_name, tpl_path, filename, create_date, update_date, php_path, deletable_flg) VALUES (10, 17, ‘ピックアップ商品’, ‘pickup.tpl’, ‘pickup’, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, ‘frontparts/bloc/pickup.php’, 0);
[/php]

5 cssファイルを編集する

■html/user_data/packages/default/css/bloc.css 追加

[css]

/* ===============================================
▼ピックアップ商品
=============================================== */
#pickup_area {
clear:both;
position:relative;
overflow:hidden;
border: 1px solid #ccc;
background:url(../img/background/bg_pickup.png) no-repeat;
padding:4px 0;
padding-left:25px;
padding-right:40px;
}
#topcolumn #pickup_area {
margin-bottom:0;
}
#pickup_area #wrapper {
width:100%;
overflow: hidden;
}
#pickup_area div.item{
display:block;
float: left;
width:165px;
margin-right:10px;
}
#pickup_area .productImage {
float:left;
width:70px;
}
#pickup_area .productContents {
float:left;
width:95px;
line-height:1.1em;
}
#pickup_area .rank_1 {
background-color:#eee;
}
#pickup_area .productImage img {
border: 1px solid #ccc;
}
#pickup_area .price_area {
font-size:90%;
text-align:center;
letter-spacing:0;
}
#pickup_area .product_comment {
font-size:80%;
}
#pickup_area #next_pickup {
position: absolute;
top: 20px;
right: 10px;
width: 12px;
height: 30px;
cursor: pointer;
background: transparent url(../img/button/btn_prev_next_01.png) no-repeat -12px 0;
}
#pickup_area #next_pickup:hover {
background-position: -12px -30px;
}
#pickup_area #prev_pickup {
position: absolute;
top: 20px;
right: 23px;
width: 12px;
height: 30px;
cursor: pointer;
background: transparent url(../img/button/btn_prev_next_01.png) no-repeat 0 0;
}
#pickup_area #prev_pickup:hover {
background-position: 0 -30px;
}

/* three_maincolumn 対応 */
#three_maincolumn #pickup_area div.item {
width:120px;
margin-right:5px;
}
#three_maincolumn #pickup_area .productImage {
width:70px;
}
#three_maincolumn #pickup_area .productContents {
width:50px;
}
/* two_maincolumn_left、two_maincolumn_right 対応 */
#two_maincolumn_left #pickup_area div.item,
#two_maincolumn_right #pickup_area div.item {
width:130px;
margin-right:5px;
}
#two_maincolumn_left #pickup_area .productImage,
#two_maincolumn_right #pickup_area .productImage {
width:70px;
}
#two_maincolumn_left #pickup_area .productContents,
#two_maincolumn_right #pickup_area .productContents {
width:60px;
}
/* side_column 対応 */
.side_column #pickup_area #wrapper {
}
.side_column #pickup_area div.item {
float: none;
width:90px;
margin-right:0;
}
.side_column #pickup_area .productImage {
float: none;
width:90px;
}
.side_column #pickup_area .productContents {
float: none;
width:90px;
}
.side_column #pickup_area .price_area {
font-size:100%;
text-align:left;
letter-spacing:1px;
}
[/css]

5 画像を追加
■img/background/bg_pickup.png

■img/button/btn_prev_next_01.png