Шаблон HYLA: оформить продукты в категориях в div с классом

[TopClans]

Всем привет. Использую шаблон HYLA, решил немного приукрасить страницу категории с товарами.

В виде "список" я умудрился сделать, а вот с "сеткой" не получается, код посложнее.

Итак, мне нужно оформить каждый товар на странице категории в режиме "сетки" не просто в <div> </div>, как сейчас, а в <div class="abcd"></div>. Вот весь код скрипта из /catalog/view/theme/hyla/template/product/category.tpl:

<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>';  

  html += '<div class="left category-drop-shadow curved curved-vt-2">';

  var image = $(element).find('.image').html();

  if (image != null) {
   html += '<div class="image">' + image + '</div>';
  }

  var price = $(element).find('.price').html();
  html += '  <div class="cart">' + $(element).find('.cart').html() + '</div>';
  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>';

  html += '  <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
  html += '  <div class="compare">' + $(element).find('.compare').html() + '</div>';
  html += '</div>';

  $(element).html(html);
 }); 

 $('.display').html('<b><?php echo $text_display; ?></b>   <?php echo $text_list; ?> <img src="catalog/view/theme/hyla/image/product-list.png" alt="<?php echo $text_list; ?>" title="<?php echo $text_list; ?>" /> <b>/</b> <a onclick="display(\'grid\');"><?php echo $text_grid; ?></a> <img src="catalog/view/theme/hyla/image/product-grid.png" alt="<?php echo $text_grid; ?>" title="<?php echo $text_grid; ?>" onclick="display(\'grid\');"/>');

 $.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>';
  }


  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> <img src="catalog/view/theme/hyla/image/product-list.png" alt="<?php echo $text_list; ?>" title="<?php echo $text_list; ?>" onclick="display(\'list\');"/> <b>/</b> <?php echo $text_grid; ?> <img src="catalog/view/theme/hyla/image/product-grid.png" alt="<?php echo $text_grid; ?>" title="<?php echo $text_grid; ?>"/>');

 $.cookie('display', 'grid');
}
}

как видите, вот здесь мне хватило то ли мозгов, то ли везения:

$('.product-list > div').each(function(index, element) {
  html  = '<div class="right">';
  html += '</div>'; 

  html += '<div class="left category-drop-shadow curved curved-vt-2">';

(было просто <div class="left">)

очень надеюсь на вашу отзывчивость =)

[TopClans]

Да ладно, неужели это так сложно?

[pashast]

Просто возьми и допиши нужны класс в следующий div после div.product-list выше по коду.

В яваскрипт в этом случае не надо лезть.

ps. Я бы вообще не плодил классы. Можно ведь использовать селектор

.product-grid > div

[TopClans]

Можно подробнее? Как в итоге должно быть?

[pashast]

Можно подробнее? Как в итоге должно быть?

.product-grid > div {
 твои правила;
}

[TopClans]

Этот вариант я рассматривал, не хочется опять засорять css файл, если опять писать - то целый сет классов дописывать.

Можно инструкцию, как в данном скрипте просто добавить класс к диву?

[pashast]

http://prntscr.com/p4ile

[pashast]

Хотя так неверно как в предыдущем посте, так как и все div в product-list тоже зацепит.

так правильно будет, добавим класс (155 строка - дефолтного шаблона)

} else {
      $('.product-list').attr('class', 'product-grid');


   $('.product-grid > div').attr('class', 'ololo');

удалим класс в режиме продукт-лист (111 строка)

function display(view) {
if (view == 'list') {
 $('.product-grid').attr('class', 'product-list');

    $('.product-list > div').removeAttr('class');