[MOD] Переключение вида Список <-> Таблица с запоминанием

SooR · April 19, 2011

Делаем следующее:

CSS: добавляем в конец

/*=Category view*/
.view-buttons{float:left;margin-top: 7px;}
.view-buttons a{display:inline-block;height:16px;width:16px;margin-left:7px;}
.view-buttons a#grid{background:url('../image/view-table.png') no-repeat 0 0;}
.view-buttons a#list{background:url('../image/view-list.png') no-repeat 0 0;}
.view-buttons a.onpress{background-position:0 -16px!important;}

.grid{list-style-type:none;margin:5px 0;padding:0;text-align: center;}
.grid li{float: left;height: 215px;width: 25%;/*width: 32%;*/}
.grid .right{min-height: 50px;}
.grid .title{display:block; margin: 3px 0;}

.list{list-style-type:none;margin:5px 0;padding:0;overflow:hidden;}
.list li{clear:both;float:none;overflow:hidden;padding:20px;}
.list li + li{border-top:1px dotted #999999;}
.list .title{display:block;margin:0 0 10px;}
.list .main{float:left;}
.list .main .left{float:left;}
.list .main .left a{display:block;text-decoration:none;}
.list .main .right{float:right;margin: 0 20px;padding-top: 10px;}
.list .main .right .model{display:block;}
.list .other{float:right; padding-top: 10px;}
.list .other img{display:block;margin: 3px 0;}
/*=End category view */

HTML: в category.tpl заменяем

<table class="list">
      <?php for ($i = 0; $i < sizeof($products); $i = $i + 4) { ?>
      <tr>
        <?php for ($j = $i; $j < ($i + 4); $j++) { ?>
        <td width="25%"><?php if (isset($products[$j])) { ?>
          <a href="<?php echo $products[$j]['href']; ?>"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" /></a><br />
          <a href="<?php echo $products[$j]['href']; ?>"><?php echo $products[$j]['name']; ?></a><br />
          <span style="color: #999; font-size: 11px;"><?php echo $products[$j]['model']; ?></span><br />
          <?php if ($display_price) { ?>
          <?php if (!$products[$j]['special']) { ?>
          <span style="color: #900; font-weight: bold;"><?php echo $products[$j]['price']; ?></span>
          <?php } else { ?>
          <span style="color: #900; font-weight: bold; text-decoration: line-through;"><?php echo $products[$j]['price']; ?></span> <span style="color: #F00;"><?php echo $products[$j]['special']; ?></span>
          <?php } ?>
          <a class="button_add_small" href="<?php echo $products[$j]['add']; ?>" title="<?php echo $button_add_to_cart; ?>" > </a>
		  <?php } ?>
          <br />
          <?php if ($products[$j]['rating']) { ?>
          <img src="catalog/view/theme/default/image/stars_<?php echo $products[$j]['rating'] . '.png'; ?>" alt="<?php echo $products[$j]['stars']; ?>" />
          <?php } ?>
          <?php } ?></td>
        <?php } ?>
      </tr>
      <?php } ?>
    </table>

на

<ul class="<?php echo $view_mode; ?>" id="view">
      <?php foreach ($products as $product) { ?>
        <li>
          <div class="main">
            <div class="left">
              <a href="<?php echo $product['href']; ?>" class="thumb" rel="<?php echo $product['compare_thumb']; ?>">
                <img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>"  id="image-<?php echo $product['product_id']; ?>" />
              </a>
            </div>
            <div class="right">
              <a href="<?php echo $product['href']; ?>" class="title"><?php echo $product['name']; ?></a>
              <span class="model"><?php echo $product['model']; ?></span>
            </div>
          </div>
          <div class="other">
            <?php if ($display_price) { ?>
            <?php if (!$product['special']) { ?>
            <span style="color: #900; font-weight: bold;"><?php echo $product['price']; ?></span>
            <?php } else { ?>
            <span style="color: #900; font-weight: bold; text-decoration: line-through;"><?php echo $product['price']; ?></span> <span style="color: #F00;"><?php echo $product['special']; ?></span>
            <?php } ?>
            <a class="button_add_small" href="<?php echo $product['add']; ?>" title="<?php echo $button_add_to_cart; ?>" > </a>
  		      <?php } ?>
            <br />
            <?php if ($product['rating']) { ?>
            <img src="catalog/view/theme/default/image/stars_<?php echo $product['rating'] . '.png'; ?>" alt="<?php echo $product['stars']; ?>" />
            <?php } ?>
          </div>
        </li>
      <?php } ?>
    </ul>

заменяем

<div class="sort">
      <div class="div1">
        <select name="sort" onchange="location = this.value">
          <?php foreach ($sorts as $sorts) { ?>
          <?php if (($sort . '-' . $order) == $sorts['value']) { ?>
          <option value="<?php echo $sorts['href']; ?>" selected="selected"><?php echo $sorts['text']; ?></option>
          <?php } else { ?>
          <option value="<?php echo $sorts['href']; ?>"><?php echo $sorts['text']; ?></option>
          <?php } ?>
          <?php } ?>
        </select>
      </div>
      <div class="div2"><?php echo $text_sort; ?></div>
    </div>

на

<div class="sort">
      <div class="view-buttons">
        <a id="grid" class="change-view<?php echo ($view_mode == 'grid' ? ' onpress' : ''); ?>"></a>
        <a id="list" class="change-view<?php echo ($view_mode == 'list' ? ' onpress' : ''); ?>"></a>
      </div>
      <div class="div1">
        <select name="sort" onchange="location = this.value">
          <?php foreach ($sorts as $sorts) { ?>
          <?php if (($sort . '-' . $order) == $sorts['value']) { ?>
          <option value="<?php echo $sorts['href']; ?>" selected="selected"><?php echo $sorts['text']; ?></option>
          <?php } else { ?>
          <option value="<?php echo $sorts['href']; ?>"><?php echo $sorts['text']; ?></option>
          <?php } ?>
          <?php } ?>
        </select>
      </div>
      <div class="div2"><?php echo $text_sort; ?></div>
    </div>

перед

<?php echo $footer; ?>

вставляем

<script type="text/javascript"><!--
  $('.change-view').click(function(){
    $('#view').removeClass().addClass($(this).attr('id'));
    $('.change-view').removeClass('onpress');
    $(this).addClass('onpress');
    $.post('<?php echo $view_action; ?>', 'view=' + $(this).attr('id'));
  });
//--></script>

PHP: в category.php, после

$this->data['button_add_to_cart'] = $this->language->get('button_add_to_cart');

добавляем

$this->data['view_action'] = HTTP_SERVER . 'index.php?route=product/category/view';
$this->data['view_mode'] = (isset($this->session->data['view_mode']) ? $this->session->data['view_mode'] : 'grid');

В конец файла перед закрытием класса вставляем метод

public function view() {
    if ($this->request->server['REQUEST_METHOD'] == 'POST' && isset($this->request->post['view'])) {
      $this->session->data['view_mode'] = $this->request->post['view'];
    }
  }

Иконки видов: кидаем в папку с изображениями вашего шаблона

view_icons.zip

Собственно и всё.

Временную демку можно глянуть тут

snastik · April 24, 2011

Спасибо огромное полезная штуковина

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

SooR · April 24, 2011

Да просто, эту строчку

$this->data['view_mode'] = (isset($this->session->data['view_mode']) ? $this->session->data['view_mode'] : 'grid');

Меняем на

$this->data['view_mode'] = (isset($this->session->data['view_mode']) ? $this->session->data['view_mode'] : 'list');

Найди 1 отличие)

snastik · April 24, 2011

Спасибо получилось

а Вы не расматривали вариант вывода например первых 300 знаков описания в варианте Лист ?

как я понял сейчас поля полностью идентичны что в варианте грид что в лист

SooR · April 25, 2011

Идентичны, меняется только вид.

Можно вытащить первые n слов из описания и управлять ним с CSS.

Вот обрезка по словам:

private function cropTextByWord($text, $counttext = 10, $sep = ' ') { // исходный текст, сколько слов выводить, какой разделитель для слов
    $words = split($sep, $text);
    if ( count($words) > $counttext )
    $text = join($sep, array_slice($words, 0, $counttext));
    return $text;
  }

snastik · April 25, 2011

Вы имеете ввиду что каким то образом можно средствами CSS добиться того что в варианте LISt текст будет отображаться а в варианте GRID нет ? если да то можно чуточку подробней ?

спасибо

SooR · April 26, 2011

snastik, для текста в grid_mode в css прописать свойство display:none;

.grid .short-descr{display:none;}

snastik · April 26, 2011

спасибо попробую реализовать

SooR · June 21, 2011

Кстати, в последней версии OpenCart все усложнили яваскриптом... зачем?

Robson · July 20, 2011

Подскажите,

1) в каком файле нужно воткнуть слово "Режим отображение"? Чтобы эти слова стояли перед выбором отображения товаров

~~2) Где нужно поправить код чтобы по умолчанию товары выводились списком?~~ Разобрался :) написано во втором посте

fllik · July 22, 2011

так акк сделать обрезаение слов а то бывает большие названия и не красиво выходит!!! ?

fllik · August 4, 2011

2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 64
2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 64
2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 64
2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 64
2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 64
2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 64
2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 64
2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/category.tpl on line 64

вот эти строчки

            <div class="left">
              <a href="<?php echo $product['href']; ?>" class="thumb" rel="<?php echo $product['compare_thumb']; ?>">
                <img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>"  id="image-<?php echo $product['product_id']; ?>" />
              </a>
            </div>

fllik · August 7, 2011

Добрые люди кто сможет разобраться в данной ошибке7

fllik · August 14, 2011

тут кто то есть?

SooR · August 21, 2011

Очень добрые и очень занятые люди всегда здесь.

В чем беда? Дайте ссылку.

fllik · August 25, 2011

2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 64
2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 64
2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 64
2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 64
2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 64
2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 64
2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 64
2011-08-05 0:06:02 - PHP Notice:  Undefined index: compare_thumb in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 63
2011-08-05 0:06:02 - PHP Notice:  Undefined index: product_id in /www/sites/en-shop.zp.ua/public_html/catalog/view/theme/default/template/product/
category.tpl on line 64

это у меня в админке в там есть раздел ошибки вот там потсоянно это сыпится

tehnikawdom · August 31, 2011

можно посмотреть что это вообще такое, кто установил??

trance · October 28, 2011

Спасибо за отличный и нужный мод)

Жаль не работает чего-то.

Поставил все, ошибок нет, но при переключении вида, ничего не происходит... Может кто сталкивался?

freelancer · October 28, 2011

да, выглядит классно

Sign In

[MOD] Переключение вида Список <-> Таблица с запоминанием

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Similar Content

Recently Browsing 0 members

Покупателям

Разработчикам

Полезная информация

Последние дополнения

Important Information