Javascript в файле category.tpl

[Orlanov]

Здравствуйте, помогите разобраться с куском javascript кода в файле ../../template/product/category.tpl

Предназначен он для замены стилей (насколько я понял) когда выбираем вид отображения(сетка/витрина) каталога с товарами.

Вот сам код:

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>');
  $.cookie('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; ?>');
  $.cookie('display', 'grid');
}
}
view = $.cookie('display');
if (view) {
display(view);
} else {
display('list');
}
//--></script>

Если возможно прокаментируйте в коде основные моменты.

[snastik]

так там вроде все и так прокомментировано названием id и классов

[Maks]

Присоединяюсь к ТС... Попытался расширить набор дивов, в итоге изначально ничего не менялось. Когда добрался до это скрипта любые мои попытки вели к некорректной работе. Там два вида строк - с объявлением переменных и без. Какие за что отвечают и как собственно добавить нужный див например в режим "grid" ?

[dimmaq]

Элементарцый же скрипт, из html выдираются данные (название, цена итд) и формируется другой вид списка товаров.

.each() ищет элементы списка, в элементах ищется, например, имя товара $(element).find('.name').html()

новая структура сбирается в переменную html и перезаписывает текущий $(element).html(html)

ИМХО метод - полное говно, тотже эффект можно получить одним переключением css класса без изменения DOM. Код становится проще, быстрее и понятнее.

[Maks]

dimmaq, спасибо за ответ. я все это понял изначально, но видимо мой вчерашний ночной мозг требовал перезагрузки и не переключился на частоту анализа. разобрался сейчас что к чему, после просмотра всего в кода в целом.