Jump to content
Sign in to follow this  
TopClans

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

Recommended Posts

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

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

Share this post


Link to post
Share on other sites

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

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

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

.product-grid > div

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.