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

EC-CUBE

2014年10月31日 04:32

jQuery,Smarty,ver.2.12

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

この記事は最終更新日から1年以上が経過しています。

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

旧バージョンでは、このカスタマイズブロックは、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}-->