Пара слов о программировании

Один из клиентов, для которого я делал магазин, с довольно большим количеством продукции, захотел разделить их на сайте по своим особым признакам. У каждого продукта эти признаки свои. Какой-то может быть со скидкой, какой-то иметь "специальную" цену, какой-то быть и вообще бесплатным. Первоначально задумывались специальные страницы для скидок. Но после обсуждения, было решено, что посетителю сайта нет дела до того, почему продукт распродается со скидкой, и разбиение списка с продуктами на разные страницы может плохо сказаться на юзабилити.

Вместо этого, мы решили объединить такие страницы в одну, но позволить как смотреть все продукты сразу, так и фильтровать по специфичным признакам. Немного jQuery нам в помощь!

Демо

Разметка

Каждый блок обернут в div. Он имеет один общий класс и класс своего типа. У div`ов нет атрибута href, но они могут иметь атрибут rel, в котором я и буду хранить url. В примере щелчок по div`у не работает, этот код за комментирован, но вы можете посмотреть как он работает.

<div class="discounted-item freeshipping" rel="/store/products/12539">
	<img src="images/12539.jpg" alt="fieldlazer" />
	<div class="reasonbar">
		<div class="prod-title" style="width: 70%;">
Крем для лица "Динамик"</div>
		<div class="reason" style="width: 29%;">Бесплатно!</div>
	</div>
	<div class="discount-bar">
		Цена: <span>0 руб</span>  
                <strike>Старая цена: 735 руб</strike> 
                <strong>Сэкономь 735 руб!</strong>
	</div>
</div>

Фильтрующее меню это просто набор ссылок. Каждая ссылка имеет свой id, который равен классу продуктов.

<p id="catpicker">
	<a href="#" id="allcat" class="current">Всё</a> | 
	<a href="#" id="reduced" class="filter">Скидка</a> | 
	<a href="#" id="freeshipping" class="filter">Бесплатно!</a> | 
	<a href="#" id="discontinued" class="filter">Распродажа</a> | 
	<a href="#" id="webonly" class="filter">Только 
в интернет-магазине</a>
</p>

CSS

В CSS нет ничего специфичного, но я его приведу для красивого отображения примера.

*                           { margin: 0; padding: 0; }
html                        { overflow-y: scroll; }
body                        { font: 12px Georgia; }
 
#page-wrap                  { width: 690px; margin: 20px auto; }
 
h1                          { font: 30px Georgia; margin: 0 0 10px 0;  }
 
.discounted-item            { width: 100%; margin: 0 0 10px 0; position: relative; cursor: pointer;
                              height: 125px; }
 
.discount-bar               { padding: 10px 0 10px 100px; font: italic 18px Georgia, Serif; }
.discount-bar strike        { color: #999; padding: 0 5px; }
.discount-bar span          { font: bold 18px Helvetica, Sans-Serif; }
 
.reasonbar                  { padding: 4px 0 4px 100px; overflow: hidden;
                              width: 540px; color: white; }
 
.prod-title                 { width: 49%; float: left; font: bold 17px Helvetica, Sans-Serif; }
.reason                     { width: 49%; float: right; text-align: right; text-transform: uppercase; 
                              letter-spacing: 2px; padding: 0 5px 0 0; }
 
.discounted-item img        { position: absolute; top: 0; left: 0; }
 
.reduced                    { border: 2px solid #A34427; }
.reduced .reasonbar         { background: #A34427; }
.reduced .discount-bar      { color: #A34427; background: white; }
 
.freeshipping               { border: 2px solid #8B3C2A; }
.freeshipping .reasonbar    { background: #8B3C2A; }
.freeshipping .discount-bar { color: #8B3C2A; background: white; }
 
.limited                    { border: 2px solid #D18D4D; }
.limited .reasonbar         { background: #D18D4D; }
.limited .discount-bar      { color: #D18D4D; background: white; }
 
.discontinued               { border: 2px solid #80401D; }
.discontinued .reasonbar    { background: #80401D; }
.discontinued .discount-bar { color: #80401D; background: white; }
 
.webonly                    { border: 2px solid #B37141; }
.webonly .reasonbar         { background: #B37141; }
.webonly .discount-bar      { color: #B37141; background: white; }
 
.buynow                     { position: absolute; bottom: -13px; left: 126px; }
 
.current                    { font-weight: bold; font-size: 15px; }

Немного пояснений:

• Так как высота страницы изменяется, вертикальный скрол включен принудительно, чтобы он не появлялся и исчезал.
• Рисунки позиционируются абсолютно. В отличие от float, это очень легко и надежно.
• У div`ов курсор установлен как pointer, чтобы показать что они кликабельны.

JavaScript+jQuery

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

$(".discounted-item")
  .css("opacity","0.8")
  .hover(function(){
    $(this).css("opacity","1")
  }, function() {
    $(this).css("opacity","0.8")
  })

Добавляем фильтрование:

$("#allcat").click(function(){
  $(".discounted-item").slideDown()
  $("#catpicker a").removeClass("current")
  $(this).addClass("current")
  return false
})
$(".filter").click(function(){
  var thisFilter = $(this).attr("id")
  $(".discounted-item").slideUp()
  $("."+ thisFilter).slideDown()
  $("#catpicker a").removeClass("current")
  $(this).addClass("current")
  return false
})

Код для кнопки "показать все" немного другой, т.к. она разворачивает всё блоки.

В примере так же используется еще одна "фишка" - блоки сортируются в случайном порядке на странице, используя плагин для jQuery от James Padolsey