EC-CUBEのカテゴリブロック・カスタマイズ完全版

以前から複数の質問があったカテゴリブロックについて、一つの解決方法が出たので投稿します。
折り畳みjQueryつきです。

このカスタマイズのできるバージョンについて

旧バージョンでは、このカスタマイズブロックは、category.tplの1枚で構成されてました。
しかし、最近のバージョンでは下記2枚で構成。
category.tpl
category_tree_fork.tpl

今回のカスタマイズに関しては、最新のバージョンを対象としているわけで、古いバージョンにとっては少しやっかいかもしれません。
しかし、できないというわけではないので、参考程度に触ってみてください。


Tpl2枚の調整


/data/Smarty/templates/default/frontparts/bloc/category.tpl
全部以下に書き換え。

<style>
.disnon{display:none;}
</style> 

<script type="text/javascript">//<![CDATA[
    $(function(){
        $('#category_area li.level1:last').css('border-bottom', 'none');

		$('.toggle_btn').click(function(){
			$(this).next("ul").slideToggle("fast");//”slow”、”normal”、”fast”
			if ( $(this).hasClass("closed") ){
				$(this).text("隠す");
				$(this).addClass('opend');
				$(this).removeClass('closed');
			}else{
				$(this).text("表示");
				$(this).removeClass('opend');
				$(this).addClass('closed');
			}
		});
		
		//表示・隠すの取得と変更
		var disp_one = $("#category_area").find(".onmark").attr("class");
		var disp = disp_one.replace(/ onmark/g,'');
		var level_one = parseInt(disp.replace(/level/g,'')) + 1;
		var level = "level" + level_one;
		var ul_class_one = $("ul."+disp).attr("class");
		var ul_class = ul_class_one.replace(disp,'');
		if(ul_class == " disnon"){
			$("ul."+disp).prev("a").text("表示");
			$("ul."+disp).prev("a").removeClass('opend');
			$("ul."+disp).prev("a").addClass('closed');
		}else{
			$("ul."+level).prev("a").text("表示");
			$("ul."+level).prev("a").removeClass('opend');
			$("ul."+level).prev("a").addClass('closed');
		}
    });
//]]></script>

<!--{strip}-->
    <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>
                <!--{include file="`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/category_tree_fork.tpl" children=$arrTree treeID="" display=1}-->
            </div>
        </div>
    </div>
<!--{/strip}-->


/data/Smarty/templates/default/frontparts/bloc/category_tree_fork.tpl
全部以下に書き換え。

<!--{strip}-->
    <ul <!--{if $child.level}-->class="level<!--{$child.level}--><!--{if $child.level > 2 and $display == 0}--> disnon<!--{/if}-->"<!--{/if}-->>
        <!--{foreach from=$children item=child}-->
            <li class="level<!--{$child.level}--><!--{if in_array($child.category_id, $tpl_category_id)}--> onmark<!--{/if}-->">
                <p><a href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$child.category_id}-->"<!--{if in_array($child.category_id, $tpl_category_id)}--> class="onlink"<!--{/if}-->><!--{$child.category_name|h}-->(<!--{$child.product_count|default:0}-->)</a></p>
                <!--{if in_array($child.category_id, $arrParentID)}-->
                    <!--{assign var=disp_child value=1}-->
                <!--{else}-->
                    <!--{assign var=disp_child value=0}-->
                <!--{/if}-->
                <!--{if isset($child.children|smarty:nodefaults)}-->
                
                    <!--{if $child.level > 2}-->
                    	<a href="javascript: void(0)" class="toggle_btn level<!--{$child.level}--> <!--{if $display == 0}-->colsed<!--{else}-->opend<!--{/if}-->">
                        	<!--{if $display == 0}-->表示<!--{else}-->隠す<!--{/if}-->
                        </a>
                    <!--{/if}-->

                    <!--{include file="`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/category_tree_fork.tpl" children=$child.children display=$disp_child}-->
                <!--{/if}-->
            </li>
        <!--{/foreach}-->
    </ul>
<!--{/strip}-->

総括

折り畳み部分で多少、手間取りましたがなんとかなりました。

注意としてはクラス名などを変更すると動かなくなることでしょうね。
CSSだけでデザインを変更することで、機能は維持できます。


しかし、jQueryはまだまだ拙いですな。
もっと綺麗に書けるのでしょうが、今はこんなものです。
動いてますし、問題ないでしょう。

では、長年のしがらみも決着ということで。

Be the first to comment

Leave a Reply

Your email address will not be published.


*