Перейти к содержанию
TopClans

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

Рекомендуемые сообщения

Всем привет. Использую шаблон 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">)

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

.product-grid > div

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Хотя так неверно как в предыдущем посте, так как и все 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');

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.