В стандартном шаблоне, на страницах типа поиска и категорий мы имеем всего 2 схемы вывода товара - Список/Сетка
А что если необходимо добавить 3й? В сети информацию я не нашел, поэтому выкладываю свой способ
Сразу отступлю, что языковые переменные мне было лень прописывать, поэтому кому нужно - сами разберутся.
Открываем файл product/category.tpl , находим эту часть кода:
<div class="display"><b><?php echo $text_display; ?></b> <?php echo $text_list; ?> <b>/</b> <a onclick="display('grid');"><?php echo $text_grid; ?></a></div>
и заменяем на
<div class="display"><b><?php echo $text_display; ?></b> <?php echo $text_list; ?> <b>/</b> <a onclick="display('grid');"><?php echo $text_grid; ?></a> <b>/</b> <a onclick="display('list1');">Новый</a></div>
То есть добавляем кнопку для новой схемы <a onclick="display('list1');">Новый</a> , где list1 в моем случае - класс для новой схемы.
Далее, в самом низу файла находим внушительный скрипт, отвечающий за переключение между схемами и выводом элементов для этих схем, выглядит он так:
<script type="text/javascript"><!--
function display(view) {
if (view == 'list') {
$('.product-grid').attr('class', 'product-list');
$('.product-list > div').each(function(index, element) {
html = '<div class="right">';
html += ' <div class="cart">' + $(element).find('.cart').html() + '</div>';
html += ' <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += ' <div class="compare">' + $(element).find('.compare').html() + '</div>';
html += '</div>';
html += '<div class="left">';
var image = $(element).find('.image').html();
if (image != null) {
html += '<div class="image">' + image + '</div>';
}
var price = $(element).find('.price').html();
if (price != null) {
html += '<div class="price">' + price + '</div>';
}
html += ' <div class="name">' + $(element).find('.name').html() + '</div>';
html += ' <div class="description">' + $(element).find('.description').html() + '</div>';
var rating = $(element).find('.rating').html();
if (rating != null) {
html += '<div class="rating">' + rating + '</div>';
}
html += '</div>';
$(element).html(html);
});
$('.display').html('<b><?php echo $text_display; ?></b> <?php echo $text_list; ?> <b>/</b> <a onclick="display(\'grid\');"><?php echo $text_grid; ?></a>');
$.totalStorage('display', 'list');
} else {
$('.product-list').attr('class', 'product-grid');
$('.product-grid > div').each(function(index, element) {
html = '';
var image = $(element).find('.image').html();
if (image != null) {
html += '<div class="image">' + image + '</div>';
}
html += '<div class="name">' + $(element).find('.name').html() + '</div>';
html += '<div class="description">' + $(element).find('.description').html() + '</div>';
var price = $(element).find('.price').html();
if (price != null) {
html += '<div class="price">' + price + '</div>';
}
var rating = $(element).find('.rating').html();
if (rating != null) {
html += '<div class="rating">' + rating + '</div>';
}
html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';
$(element).html(html);
});
$('.display').html('<b><?php echo $text_display; ?></b> <a onclick="display(\'list\');"><?php echo $text_list; ?></a> <b>/</b> <?php echo $text_grid; ?>');
$.totalStorage('display', 'grid');
}
}
view = $.totalStorage('display');
if (view) {
display(view);
} else {
display('list');
}
//--></script>
Убираем у старого скрипта условие else, заменяя на if и по этой же схеме добавляем новое условие для новой схемы (за основу взял схему для списка) Проще говоря, заменяем вышеприведенный кусок кода, на этот:
<script type="text/javascript"><!--
function display(view) {
if (view == 'list') {
$('.product-list1').attr('class', 'product-list');
$('.product-grid').attr('class', 'product-list');
$('.product-list > div').each(function(index, element) {
html = '<div class="right">';
html += ' <div class="cart">' + $(element).find('.cart').html() + '</div>';
html += ' <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += ' <div class="compare">' + $(element).find('.compare').html() + '</div>';
html += '</div>';
html += '<div class="left">';
var image = $(element).find('.image').html();
if (image != null) {
html += '<div class="image">' + image + '</div>';
}
var price = $(element).find('.price').html();
if (price != null) {
html += '<div class="price">' + price + '</div>';
}
html += ' <div class="name">' + $(element).find('.name').html() + '</div>';
html += ' <div class="description">' + $(element).find('.description').html() + '</div>';
var rating = $(element).find('.rating').html();
if (rating != null) {
html += '<div class="rating">' + rating + '</div>';
}
html += '</div>';
$(element).html(html);
});
$('.display').html('<b><?php echo $text_display; ?></b> <?php echo $text_list; ?> <b>/</b> <a onclick="display(\'grid\');"><?php echo $text_grid; ?></a> <b>/</b> <a onclick="display(\'list1\');">Новый</a>');
$.totalStorage('display', 'list');
}
if (view == 'grid'){
$('.product-list').attr('class', 'product-grid');
$('.product-list1').attr('class', 'product-grid');
$('.product-grid > div').each(function(index, element) {
html = '';
var image = $(element).find('.image').html();
if (image != null) {
html += '<div class="image">' + image + '</div>';
}
html += '<div class="name">' + $(element).find('.name').html() + '</div>';
html += '<div class="description">' + $(element).find('.description').html() + '</div>';
var price = $(element).find('.price').html();
if (price != null) {
html += '<div class="price">' + price + '</div>';
}
var rating = $(element).find('.rating').html();
if (rating != null) {
html += '<div class="rating">' + rating + '</div>';
}
html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';
$(element).html(html);
});
$('.display').html('<b><?php echo $text_display; ?></b> <a onclick="display(\'list\');"><?php echo $text_list; ?></a> <b>/</b> <?php echo $text_grid; ?> <b>/</b> <a onclick="display(\'list1\');">Новый</a>');
$.totalStorage('display', 'grid');
}
if (view == 'list1') {
$('.product-grid').attr('class', 'product-list1');
$('.product-list').attr('class', 'product-list1');
$('.product-list1 > div').each(function(index, element) {
html = '<div class="right">';
html += ' <div class="cart">' + $(element).find('.cart').html() + '</div>';
html += ' <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += ' <div class="compare">' + $(element).find('.compare').html() + '</div>';
html += '</div>';
html += '<div class="left">';
var image = $(element).find('.image').html();
if (image != null) {
html += '<div class="image">' + image + '</div>';
}
var price = $(element).find('.price').html();
if (price != null) {
html += '<div class="price">' + price + '</div>';
}
html += ' <div class="name">' + $(element).find('.name').html() + '</div>';
html += ' <div class="description">' + $(element).find('.description').html() + '</div>';
var rating = $(element).find('.rating').html();
if (rating != null) {
html += '<div class="rating">' + rating + '</div>';
}
html += '</div>';
$(element).html(html);
});
$('.display').html('<b><?php echo $text_display; ?></b> <a onclick="display(\'list\');"><?php echo $text_list; ?></a> <b>/</b> <a onclick="display(\'grid\');"><?php echo $text_grid; ?></a> <b>/</b> Новый');
$.totalStorage('display', 'list1');
}
}
view = $.totalStorage('display');
if (view) {
display(view);
} else {
display('list');
}
//--></script>
Будут вопросы по скрипту - задавайте, расписывать все подробно - скучно и непонятно Дальше дело за малым - в условии if (view == 'list1') { добавляем/убираем ненужные элементы (типа блока с описанием, рейтинг и т.д.) и добавляем в файл stylesheet.css класс product-list1 со своими стилями (за основу можно взять product-list и подправить стили под себя).