Попробуем перенести верстку модуля category из шаба R.Gen (вариант черно-серо-белой темы 4) на дефолтный шаб OpenCart 1.5.6.4.
Осмотр пациента показывает, что сперва подключим шрифт (для значков + и - в кружочках). Копируем все файлы шрифта rgen-webfont.* из /image/rgen/icons/ в свою /image/icons/ и вставляем в самое начало нашего stylesheet.css следующее:
Код:
@font-face {
font-family: 'rgenregular';
src: url('../image/icons/rgen-webfont.eot');
src: url('../image/icons/rgen-webfont.eot?#iefix') format('embedded-opentype'),
url('../image/icons/rgen-webfont.woff') format('woff'),
url('../image/icons/rgen-webfont.ttf') format('truetype'),
url('../image/icons/rgen-webfont.svg#rgenregular') format('svg');
font-weight: normal;
font-style: normal;
}
Там в стиле есть фон для открытых подкатегорий, находим в исходной теме Bullet.png и копируем в свою /image/.
Теперь берем их обработчик (он хорошо выделен в исходнике) и вставляем в свой
/catalog/view/javascript/common.js после
$(document).ready(function() { , т.е. во вторую строку следующее:
Код:
/* CATEGORIES */
$(".box-category .cc").each(function(index, element) {
//alert($(".box-category .cc").parent().hasClass('cat-active'));
if($(this).parent().hasClass('cat-active') == true){
$(this).addClass('open');
$(this).next().addClass('active');
}
});
$(".box-category .cc").click(function(){
if($(this).next().is(':visible') == false) {
$('.box-category .col-subcat').slideUp(300, function(){
$(this).removeClass('active');
$('.cc').removeClass('open');
});
}
if($(this).hasClass('open') == true) {
$(this).next().slideUp(300, function(){
$(this).removeClass('active');
$(this).prev().removeClass('open');
});
}else{
$(this).next().slideDown(300, function(){
$(this).addClass('active');
$(this).prev().addClass('open');
});
}
});
Берем новый кусок стилей, изменив путь к Bullet.png и поменяв цвет шрифта с #944737 на #333 (это для темы 4). Т.е. в stylesheet.css перед строкой /* box category */ вставляем фрагмент:
Код:
/*===================================================== CATEGORY LINK ==========*/
.col-links {
margin-top:-14px;
margin-bottom:40px;
}
.col-links ul {
list-style: none;
margin: 0;
padding: 0;
}
.col-links > ul > li {
padding:7px 0px;
border-bottom:1px solid #e0e0e0;
}
.col-links > ul > li > ul {
background-color: rgba(0, 0, 0, 0.02);
padding:10px 15px;
margin:11px 0 -11px 0;
display: none;
border-top:1px solid #e0e0e0;
}
.col-links > ul > li > a {
text-decoration: none;
color: #333;
font-weight:12px;
}
.col-links > ul > li.cat-active ul {
display: block;
}
.col-links > ul > li ul > li {
padding: 3px 0 3px 10px;
margin-bottom:1px;
background:url(../image/Bullet.png) no-repeat left 9px;
}
.col-links > ul > li ul > li > a {
text-decoration: none;
color: #333;
}
.col-links > ul > li > a:hover {
text-decoration: underline;
color: #333;
}
.col-links a {
color: #333;
font-weight:12px;
}
.col-links a:hover {
color: #333;
text-decoration:underline;
}
.box-category, ul.box-category ul{
margin-top:-15px;
}
.box-category ul > li {
padding:11px 0px 11px 0px;
position:relative;
}
.box-category > ul > li > a {
font-weight:bold;
}
.box-category .cc {
/*border: 2px solid rgba(0, 0, 0, 0.1);*/
position: absolute;
right: 2px;
top: 9px;
width: 20px;
height: 20px;
border-radius: 20px;
cursor:pointer;
}
.box-category .cc:before {
font-family: 'rgenregular';
font-style: normal;
font-weight: normal;
line-height: 1;
position: absolute;
right: 1px;
top: 2px;
content: 'B';
text-align: center;
font-size: 16px;
line-height: 1;
color:rgba(0, 0, 0, 0.2);
font-size:17px;
/*background:#090;*/
}
.box-category .cc.open:before {
content:'C';
}
Переходим к category.tpl, так как я использую дефолтную тему, то нахожу кусок кода:
Код:
<ul class="box-category">
<?php foreach ($categories as $category) { ?>
<li>
<?php if ($category['category_id'] == $category_id) { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>
<?php if ($category['children']) { ?>
<ul>
<?php foreach ($category['children'] as $child) { ?>
<li>
<?php if ($child['category_id'] == $child_id) { ?>
<a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>
<?php } ?>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php } ?>
</ul>
и меняю на следующее (прямо взятое из R.Gen)
Код:
<div class="box-category col-links">
<ul>
<?php foreach ($categories as $category) { ?>
<?php if ($category['category_id'] == $category_id) { ?>
<li class="cat-active">
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } else { ?>
<li>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>
<?php if ($category['children']) { ?>
<b class="cc"></b>
<ul class="col-subcat">
<?php foreach ($category['children'] as $child) { ?>
<li>
<?php if ($child['category_id'] == $child_id) { ?>
<a href="<?php echo $child['href']; ?>" class="active"><?php echo $child['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a>
<?php } ?>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>
По ходу мне не понравилась строчка
Заменил на
И всё, теперь модуль дефолтного шаба у меня выглядит и работает как в R.Gen.
Для шаба старого шопа остается внимательно прописать по аналогии стили в category.tpl
Дольше описывал, чем делал, т.к. все необходимое было под рукой. Этот модуль планирую вставить в один из своих работающих шопов, там по плану глубокая переделка на адаптивный диз.
А по первичному вашему вопросу нужно смотреть с целью переделки это место:
Код:
<script>
$(document).ready(function(){
var div;
$('.header-table').click(function(){
div=$(this).parent();
tt=$(this);
if(!$(this).hasClass('active')){
tt.addClass('active');
div.find('.v_dsc').slideDown(function(){
});
} else {
div.find('.v_dsc').slideUp(function(){
tt.removeClass('active');
});
}
});
});
</script>
Оно прямо в теле html, очень вероятно, что сидит в category.tpl.
