Archive of published posts on 2012.7月

EC-CUBEでおすすめ商品ブロックに大きめな画像を使う方法

Posted by specterant on 2012.07.31

通常、おすすめ商品ブロックで設定されている画像は
「一覧-メイン画像 [130×130]」が使用され、リサイズをかけて表示されます。

で、130×130px以上のサイズで表示したい時は、
まぁ、設定すれば表示はされますが、画像が荒れます…はい。
そう…美しくないです。

そんな訳で、「詳細-メイン画像 [260×260]」を使用してみます。
変更箇所は「/data/Smarty/templates/default/frontparts/bloc/recommend.tpl」の32行目あたりのimgタグ部分です。

//変更前
<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->

//変更後(※「main_list_image」の「_list」を削除)
<!--{$arrProduct.main_image|sfNoImageMainList|h}-->
このように変更すれば、「詳細-メイン画像 [260×260]」を使用してくれます。

260×260px以上にしたいんだよね〜って時は、テンプレートだけでは実現出来ないので、
「/data/class_extends/SC_Product_Ex.php」に下記を追加します。
function lists(&$objQuery) {
	$col = <<< __EOS__
								product_id
								,product_code_min
								,product_code_max
								,name
								,comment1
								,comment2
								,comment3
								,main_list_comment
								,main_image
								,main_list_image
								,main_large_image
								,price01_min
								,price01_max
								,price02_min
								,price02_max
								,stock_min
								,stock_max
								,stock_unlimited_min
								,stock_unlimited_max
								,deliv_date_id
								,status
								,del_flg
								,update_date
								__EOS__;
	$res = $objQuery->select($col, $this->alldtlSQL());
	return $res;
}
そして、またまた「/data/Smarty/templates/default/frontparts/bloc/recommend.tpl」
32行目あたりのimgタグ部分を下記のように変更すれば、「詳細-メイン拡大画像[500×500]」を使用してくれます。
//変更前
<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->

//変更後(※「main_list_image」の「list」を「large」に変更)
<!--{$arrProduct.main_large_image|sfNoImageMainList|h}-->
ちなみに、リサイズ指定しなければ、240pxでリサイズします。
また、EC-CUBE 2.12.1で検証しました。

5 Comments

jQueryのfindメソッド

Posted by specterant on 2012.07.23

findメソッドは、指定した要素の子要素を、引数で指定した要素に合致したものを取得します。
例えば、ulタグのliタグに背景色を追加しちゃうみたいなことが出来ます。

/********************************
//書式
********************************/
$('セレクタ').find('取得したい子要素');
/********************************
//そんな訳で、記述例
********************************/
$('ul').find('li').css('background-color', 'green');

/********************************
//HTMLの記述
********************************/
<ul>
<li>liタグ</li>
<li>liタグ</li>
<li>liタグ</li>
</ul>

//jQueryで下記のように変更される。
<ul>
<li style="background-color: green;">liタグ</li>
<li style="background-color: green;">liタグ</li>
<li style="background-color: green;">liタグ</li>
</ul>
ちなみに、findメソッドを利用した方が、高速化するみたいです。
//findメソッドを利用しない場合
$('ul li');

//findメソッドを利用する場合
$('ul').find('li');

No Comments

EC-CUBEで商品カテゴリを全て表示させる方法

Posted by specterant on 2012.07.20

タイトル通り、全て表示させる方法です。
通常、親カテゴリページに遷移したら、
子カテゴリが表示される設定になっています。
常に、子カテゴリも表示させたいんだよ〜って時のカスタムです。

はい。そんな訳で、変更箇所は「/data/Smarty/templates/default/frontparts/bloc/category.tpl」です。
※ちなみに、EC-CUBE 2.12.1で検証しています。

/* //////////////////////////////////////////////////////////////////////////////
// 【1】と【2】を削除
////////////////////////////////////////////////////////////////////////////// */
<script type="text/javascript">//<![CDATA[
$(function(){
	$('#category_area li.level1:last').css('border-bottom', 'none');
});
//]]></script>
<div class="block_outer">
	<div id="category_area">
		<div class="block_body">
			<h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_category.gif" alt="商品カテゴリ" /></h2>
			<!--{strip}-->
			<ul id="categorytree">
				<!--{assign var=preLev value=1}-->
				<!--{assign var=firstdone value=0}-->
				<!--{section name=cnt loop=$arrTree}-->
				<!--{* 表示フラグがTRUEなら表示 *}-->
				<!--{if $arrTree[cnt].display == 1}--> // →→→→→→→→→→→→→→→→【1】
				<!--{assign var=level value=`$arrTree[cnt].level`}-->
				<!--{assign var=levdiff value=`$level-$preLev`}-->
				<!--{if $levdiff > 0}-->
				<ul>
				<!--{elseif $levdiff == 0 && $firstdone == 1}-->
				</li>
				<!--{elseif $levdiff < 0}-->
				<!--{section name=d loop=`$levdiff*-1`}-->
				</li>
				</ul>
				<!--{/section}-->
				</li>
				<!--{/if}-->
				<li class="level<!--{$level}--><!--{if in_array($arrTree[cnt].category_id, $tpl_category_id)}--> onmark<!--{/if}-->">
				<p><a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$arrTree[cnt].category_id}-->"<!--{if in_array($arrTree[cnt].category_id, $tpl_category_id)}--> class="onlink"<!--{/if}-->><!--{$arrTree[cnt].category_name|h}-->(<!--{$arrTree[cnt].product_count|default:0}-->)</a></p>
				<!--{if $firstdone == 0}--><!--{assign var=firstdone value=1}--><!--{/if}-->
				<!--{assign var=preLev value=`$level`}-->
				<!--{/if}--> // →→→→→→→→→→→→→→→→【2】
				<!--{* セクションの最後に閉じタグを追加 *}-->
				<!--{if $smarty.section.cnt.last}-->
				<!--{if $preLev-1 > 0}-->
				<!--{section name=d loop=`$preLev-1`}-->
				</li>
				</ul>
				<!--{/section}-->
				</li>
				<!--{else}-->
				</li>
				<!--{/if}-->
				<!--{/if}-->
				<!--{/section}-->
			</ul>
			<!--{/strip}-->
		</div>
	</div>
</div>
ちと、分かりづらいので、
【1】と【2】をピックアップしました。
// <!--{* 表示フラグがTRUEなら表示 *}-->の下部分の記述を削除
<!--{if $arrTree[cnt].display == 1}--> // →→→→→→→→→→→→→→→→【1】

// <!--{* セクションの最後に閉じタグを追加 *}-->の上部分の記述を削除
<!--{/if}--> // →→→→→→→→→→→→→→→→【2】
まぁ〜、上記の2箇所を削除すれば、全て表示されます。

No Comments

EC-CUBEでパンくずリストを設置してみる

Posted by specterant on 2012.07.18

2.4.4と2.11以降ではカスタマイズが違っているので、2.12.1で実験してみました。
そんな訳で、私用コピペのためのメモです。
変更箇所は下記データです。

・/data/class_extends/page_extends/products/LC_Page_Products_List_Ex.php
・/data/class_extends/page_extends/products/LC_Page_Products_Detail_Ex.php

/* //////////////////////////////////////////////////////////////////////////////
// [/data/class_extends/page_extends/products/LC_Page_Products_List_Ex.php]
////////////////////////////////////////////////////////////////////////////// */
function process()
{
	parent::process();
	$this->action(); //追加
}


// 下記追加
function action()
{
	parent::action();
	$objDb = new SC_Helper_DB_Ex();
	if($this->arrForm['category_id']) {
		$arrCatId = $objDb->sfGetParents("dtb_category", "parent_category_id", "category_id", $this->arrForm['category_id']);
		$TopicPath = '<a href="../">' . HOME . '</a> &gt; ';
		foreach($arrCatId as $key => $val) {
			$arrCatName = $objDb->sfGetCat($val);
			if($val != $this->arrForm['category_id']) {
				$TopicPath .= '<a href="./list.php?category_id=' .$val. '">'. $arrCatName['name'] . '</a> &gt; ';
			}
			else {
				$TopicPath .= $arrCatName['name'];
			}
		}
	}
	else {
		$TopicPath = '<a href="../">' . HOME . '</a> &gt; ' . $this->arrForm['name'] . " の検索結果";
	}
	$this->TopicPath = $TopicPath;
}
/* //////////////////////////////////////////////////////////////////////////////
// [/data/class_extends/page_extends/products/LC_Page_Products_Detail_Ex.php]
////////////////////////////////////////////////////////////////////////////// */
function process()
{
	parent::process();
	$this->action(); //追加
}


// 下記追加
function action()
{
	parent::action();
	$objDb = new SC_Helper_DB_Ex();
	$arrCategory_id = $objDb->sfGetCategoryId( $this->arrProduct['product_id'] );
	$arrCatId = $objDb->sfGetParents( "dtb_category", "parent_category_id", "category_id", $arrCategory_id[0] );
	$TopicPath = '<a href="../">'.HOME.'</a> &gt; ';
	foreach ( $arrCatId as $key => $val ) {
		$arrCatName = $objDb->sfGetCat( $val );
		$TopicPath .= '<a href="./list.php?category_id='.$val.'">'.$arrCatName['name'].'</a>';
		if ( $val != $arrCategory_id[0] ) {
			$TopicPath .= ' &gt; ';
		}
	}
	$this->TopicPath = $TopicPath.' &gt; '.$this->arrProduct['name'];
}
あとは、テンプレートデータに下記を記述すれば、
パンくずリストが表示されます。
<!--{$TopicPath}-->

下記ページを参考にさせていただきました。
EC-CUBE 開発コミュニティ – フォーラム

No Comments

EC-CUBEで商品一覧ページで横並びレイアウトの時などに使えるカスタム

Posted by specterant on 2012.07.17

最近EC-CUBE 2.12.1がリリースされました。
私は、2.4.4を触ってからは、全くでして、
そろそろ、最新版も触っとかないとなぁ〜ってことで、
色々調査している最中です。

2.4.4の時、簡単なカスタムをしたのですが、
数年の月日が経ちどこを触ったのか分からなくなってしまいました。
これでは、今後また、同じことを調べることになってしまい、
時間の無駄になるのでメモすることにしました。

そんな訳で、横並びレイアウトの時などに使えるカスタムの私用コピペ。
変更箇所は「/data/Smarty/templates/default/products/list.tpl」です。

//最後の商品または3つ目の商品の後にコードを追加
<!--{if $smarty.foreach.arrProducts.last || $smarty.foreach.arrProducts.iteration % 3 === 0}-->
コードを記述
<!--{/if}-->

ちなみに、2.12.1で検証しました。

下記ページを参考にさせていただきました。
EC-CUBE 開発コミュニティ – フォーラム

No Comments