Установка скрипта «Переключение вида просмотра товаров»

Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Сайтов много, а вариантов дизайна интерфейса ещё больше! Но не так просто угодить клиенту и точно предугадать его вкусы.
Владельцы магазинов решают эти вопросы по разному, но большинство решений сводится к одному общему "стандарту" дизайна, к которому клиентам необходимо будет привыкать.
Если вы придерживаетесь иной политики в своем магазине и желаете наверняка угодить каждому клиенту, скрипт переключения вида просмотра товаров идеально подойдет для вас и приятно удивит ваших клиентов тремя вариантами шаблона вида товаров: табличного, блокового, и строчного с возможностью их переключения.

Выбранный вид шаблона товаров сохраняется в текущей сессии при помощи cookie и в пределах посещения магазина вашим клиентам не придется заново выбирать вид товаров при переходе по категориям магазина или по всему сайту в целом.
По-умолчанию в скрипте включен "Обычный" вид товаров – стандартный дизайн с полным описанием.
"Блочный" вид сгруппирует товары в компактные блоки, по три блока на одну строку. А вид "Компактный" изрядно урежет описание товаров и выведет их в виде аккуратных строк, останется лишь основное: фото, название, количество, цена и кнопка добавления в корзину (при необходимости вы можете добавить\убрать не нужные поля).

Преимущества скрипта:

позволяет создать вид товаров подходящий практически любому клиенту;
простота установки;
простота в изменениях скрипта (необходимы лишь базовые знания в CSS для изменения вида дизайна товаров). Для иконок используются специальные шрифты, в скрипте не задействованы графические элементы. Таким образом цвета иконок также очень просто изменить, заменив зеленый цвет на нужный вам;
в комплект скрипта входит (только для вида товаров) дополнительный скрипт – кнопки плюс/минус (+/-) для количества товаров;
работает на JQuery и cookie без использования PHP.

Перед установкой, сделайте полный бэкап шаблонов на случай, если вы в какой-то момент решите вернуть прежний вид сайту или отдельным его элементам. Сделать это можно в Панели управления » Управление дизайном » Backup шаблонов.

Первый шаг: загрузка файлов на сайт

Перейдите в Панель управления » Файловый менеджер.

В правом верхнем углу кликните на кнопку "Создать папку", введите название папки js.

Кликните на галочку и ура, мы создали папку с нужным именем!:) Теперь абсолютно идентичным действиям создайте папку, но только с названием css.

Теперь зайдите в папку js и загрузите в эту папку файлы "items-shop.js" и "jquery.cookie.js" из архива со скриптом (папка "скрипты").

Первый шаг: установка кода

Перейдите в Панель управления » Управление дизайном » Интернет-магазин: Каталог товаров, найдите системную переменную $BODY$ и вместо неё разместите код:

<div class="item-shop">
 <ul class="goods-list">$BODY$</ul>
</div>

Затем, если вы используете на главной странице магазина блоки, такие как "популярные", "бестселлеры" и "новинки", их нужно аналогично заключить в код, который указан выше, только вместо переменной $BODY$ должна быть установлена актуальная переменная. То есть вместо $TOP_VIEW$ замените:

<div class="item-shop">
 <ul class="goods-list">$TOP_VIEW$</ul>
</div>

вместо $TOP_SOLD$:

<div class="item-shop">
 <ul class="goods-list">$TOP_SOLD$</ul>
</div>

и соответственно вместо $LAST_ADD$:

<div class="item-shop">
 <ul class="goods-list">$LAST_ADD$</ul>
</div>

В частности, если вы используете на странице товара такой блок как "Просмотренные ранее товары", замените системную переменную $LASTV_2$ на:

<div class="item-shop">
 <ul class="goods-list">$LASTV_2$</ul>
</div>

если вы используете блок "С этим товаром покупают", замените системную переменную <?$RECOMMENDED_PRODUCTS$()?> на:

<div class="item-shop">
 <ul class="goods-list"><?$RECOMMENDED_PRODUCTS$()?></ul>
</div>

Далее в этом же шаблоне, там где вы хотите видеть переключатели режимов вида товаров, разместите код:

<div class="item-shop">
    <a class="normal-mode" href="javascript://" onclick="easyRander('normal');" title="Обычный"><i class="fa fa-th-list"></i></a>
    <a class="table-mode" href="javascript://" onclick="easyRander('table');" title="Табличный"><i class="fa fa-th-large"></i></a>
    <a class="compact-mode" href="javascript://" onclick="easyRander('small');" title="Компактный"><i class="fa fa-align-justify"></i></a>
</div>

Запомните класс item-shop, о нем пойдет речь в четвертом шаге этой инструкции.

Далее, перейдите в Панель управления » Управление дизайном » Интернет-магазин, и в шаблоны главная страница магазина, каталог товаров и страница товара перед тегами </body></html> разместите следующие коды:

<script type="text/javascript" src="/js/items-shop.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>

Обратите внимение, библиотека jquery.cookie.js используется в этом скрипте. Если вы уверены, что на вашем сайте уже подключена эта библиотека, в предыдущем коде можете удалить вторую строку.

не забудьте сохранить изменения. :)

Теперь перейдите в Панель управления » Управление дизайном » Интернет-магазин: Вид товара в каталоге, удалите весь шаблон и разместите на его место:

<li><?if($MODER_PANEL$)?><div style="position:absolute;right:0">$MODER_PANEL$</div><?endif?>
    <div class="result-image">
	<a href="$ENTRY_URL$"><img src="$THUMB$" id="$BLOCK_PREF$-gphoto-$ID$" alt="" /></a>
    </div>
    <div class="result-info">
	<h4 class="title"><a href="$ENTRY_URL$">$NAME$</a></h4>
	<?if($CAT_NAME$)?><a href="$CAT_URL$"><p class="location">$CAT_NAME$</p></a><?endif?>
	<p class="desc">
	<?substr($DESCRIPTION$,0,610)?><?if(len($DESCRIPTION$)>610)?>...<?endif?>
    </p>
    <div class="btn-row">
	<?ifnot($CUR_GROUP_ID$ == "999")?><a href="javascript://" id="all-$ID$-wish" onclick="wishlist(this);" title="Добавить в список желаний"><i class="fa fa-heart"></i></a><?endif?>
	<?if($STOCK$)?><a href="javascript://" title="В наличии: $STOCK$" onclick="_uWnd.alert('Осталось в наличии: <b>$STOCK$</b>.','Информация о наличии товара',{w:270,h:80,t:8000});"><i class="fa fa-check"></i></a><?else?><a href="javascript://" title="Отсутствует на складе" onclick="_uWnd.alert('Товар <b>«$NAME$»</b> – отсутствует на складе.','Информация о наличии товара',{w:290,h:80,t:8000});"><i class="fa fa-times"></i></a><?endif?>
	<a href="/index/8-$ADD_UID$"><i class="fa fa-user" title="Перейти на страницу автора"></i></a>
	<a href="$ENTRY_URL$" title="Перейти на страницу товара"><i class="fa fa-sign-in"></i></a>
    </div>
</div>
<div class="result-price">
    <span class="price<?if($PRICE_OLD$)?> reds<?else?> no-reds<?endif?>"><?if($PRICE$)?>$PRICE$<?else?>бесплатно<?endif?> <small><?if($PRICE_OLD$)?>$PRICE_OLD$<?endif?></small></span>
    <span class="plus-minus"><a href="javascript://" class="tic-tac plus" data-incval="-1">-</a><input type="text" id="q$BLOCK_PREF$-$ID$-basket" value="1" min="1" step="1" class="form-control" size="3" onfocus="this.select()" onkeypress="return checkNumber(this, event, '1');"><a href="javascript://" class="tic-tac minus" data-incval="1">+</a></span>
    <span class="addbasket"><a href="javascript://" class="btn btn-inverse btn-block" onclick="add2Basket('$ID$','$BLOCK_PREF$');">В корзину</a></span>
</div>
</li>

после чего сохраните изменения.

Третий шаг: установка стилей

Перейдите в Панель управления » Управление дизайном » Интернет-магазин: Таблица стилей (CSS), в самое начало разместите следующий код:

@import url(/css/font-awesome.css);
/*-------- {НАЧАЛО} — обычный режим (первый) --------*/
/* полный блок с товарами */
.item-shop.normal .goods-list {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 100%
}
/* выполняем обтекание */
.item-shop.normal .goods-list li:after,
.item-shop.normal .goods-list li:before {
 content: '';
 display: table;
 clear: both
}
/* обращаемся к товарам */
.item-shop.normal .goods-list li {
 background: #fff;
 border-radius: 3px;
 overflow: hidden;
 margin-top:15px;
}
/* обращаемся к блоку с информацией, изображением и ценой */
.item-shop.normal .goods-list .result-info, .item-shop.normal .goods-list .result-image, .item-shop.normal .goods-list .result-price {
 display: table-cell;
 vertical-align: top;
 padding: 20px;
 position: relative;
 width: 60%;
}
/* стилизуем изображение товара */
.item-shop.normal .goods-list .result-image {
 width: 270px;
 padding: 0;
 overflow: hidden;
 background: #fff;
 vertical-align: middle
}
/* фикс для firefox */
.item-shop.normal .goods-list .result-image a {
 display: block
}
/* при наведении на изображение товара делаем прозрачней её */
.item-shop.normal .goods-list .result-image a:focus,
.item-shop.normal .goods-list .result-image a:hover {
 opacity: .8;
 filter: alpha(opacity=80)
}
/* ставим ширину для изображения товара */
.item-shop.normal .goods-list .result-image img {
 width: 100%
}
/* стилизуем тайтл (название товара) */
.item-shop.normal .goods-list .title {
 margin: 0 0 8px;
 font-size: 20px;
 line-height: 24px
}
/* снова тайтл, на этот раз обратились к ссылке */
.item-shop.normal .goods-list .title a {
 color: #333;
}
/* красим тайтл в другой цвет при наведении */
.item-shop.normal .goods-list .title a:hover {
 color: #777;
}
/* стилизуем название категории */
.item-shop.normal .goods-list .location {
 color: #999;
 text-transform: uppercase;
}
/* стилизуем описание товара */
.item-shop.normal .goods-list .desc {
 margin-bottom: 20px;
 max-height: 32px;
 overflow: hidden;
 text-overflow: ellipsis;
 line-height: 16px
}
/* стилизуем значки (иконки) */
.item-shop.normal .goods-list .btn-row a {
 color: #666;
 font-size: 20px;
 line-height: 14px;
 opacity: .2
}
/* при наведении курсора на них делаем их видимыми на 100% */
.item-shop.normal .goods-list .btn-row a:focus,
.item-shop.normal .goods-list .btn-row a:hover {
 opacity: 1;
 filter: alpha(opacity=100)
}
/* между иконками отступы */
.item-shop.normal .goods-list .btn-row a+a {
 margin-left: 10px
}
/* стилизуем цену */
.item-shop.normal .goods-list .result-price {
 width: 240px;
 font-size: 28px;
 text-align: center;
 border-left: 1px dashed #d9e0e7;
 /* padding-top: 30px */
}
/* меняем цвет у основной цены в том случае, если указана старая цена */
.item-shop.normal .goods-list .result-price .reds {
 color:#E5392F;
}
/* стилизуем старую цену */
.item-shop.normal .goods-list .result-price small {
 display: block;
 font-size: 12px;
 color: #999;
 text-decoration: line-through;
}
/* стилизуем кнопку ПЛЮС кол-ва товаров */
.item-shop.normal .plus{
 margin-right:5px;
 font-size:20px;
}
/* стилизуем кнопку МИНУС кол-ва товаров */
.item-shop.normal .plus, .item-shop.normal .minus {
 color: #757C83 !important;
 /* vertical-align: top !important; */
}
.item-shop.normal .minus {
 margin-left:5px !important;
 font-size:20px;
}
/* стилизуем поле где количество товаров */
.item-shop.normal .form-control {
 margin-top:20px !important;
 width: auto !important;
 text-align: center !important;
 font-size: 17px!important;
 background: #fff!important;
 box-shadow: none!important;
 border: 1px dashed #d9e0e7 !important;
 padding: 7px!important;
}
/* делаем отступ для кнопки купить(в корзину) */
.item-shop.normal .goods-list .result-price .btn {
 margin-top: 30px
}
/*-------- {КОНЕЦ} — обычный режим (первый) --------*/
/*-------- {НАЧАЛО} — табличный режим (второй) --------*/
/* удаляем ненужное для этого вида (в этом случае описание) */
.item-shop.table .goods-list .desc{
 display:none;
}
/* полный блок с товарами */
.item-shop.table .goods-list {
 list-style-type: none !important;
 margin: 0;
 padding: 0;
 width: 100%
}
/* обращаемся к товарам */
.item-shop.table .goods-list li {
 background: #fff;
 border-radius: 3px;
 overflow: hidden;
 width: 32%;
 float:left;
 margin-left:5px;
 margin-top:20px;
}
/* выполняем обтекание */
.goods-list li:after,
.goods-list li:before {
 content: '';
 display: table;
 clear: both;
}
/* обращаемся к блоку с информацией, изображением и ценой */
.item-shop.table .goods-list .result-info, .item-shop.table .goods-list .result-image, .item-shop.table .goods-list .result-price {
 display: table;
 vertical-align: top;
 padding: 20px;
 position: relative;
 width: 90%;
 text-align:center;
}
/* стилизуем изображение товара */
.item-shop.table .goods-list .result-image { 
 display:table;
 margin:0 auto;
 width:100%;
 max-height: 175px;
 max-width: 231px;
 vertical-align: middle;
}
/* фикс для firefox */
.item-shop.table .goods-list .result-image a {
 display: block;
}
/* при наведении на изображение товара делаем прозрачней её */
.item-shop.table .goods-list .result-image a:focus,
.item-shop.table .goods-list .result-image a:hover {
 opacity: .8;
 filter: alpha(opacity=80)
}
/* ставим ширину для изображения товара */
.item-shop.table .goods-list .result-image img {
 width: 100%;
}
/* стилизуем тайтл (название товара) */
.item-shop.table .goods-list .title {
 margin: 0 0 8px;
 font-size: 20px;
 line-height: 24px;
 display:table;
 width:100%;
 height:72px;
}
/* снова тайтл, на этот раз обратились к ссылке */
.item-shop.table .goods-list .title a {
 color: #333;
 display: table-cell;
 vertical-align: middle;
 height: 72px;
}
/* красим тайтл в другой цвет при наведении */
.item-shop.table .goods-list .title a:hover {
 color: #777;
}
/* стилизуем название категории */
.item-shop.table .goods-list .location {
 color: #999;
 text-transform: uppercase;
 height: 52px;
}
/* стилизуем значки (иконки) */
.item-shop.table .goods-list .btn-row a {
 color: #666;
 font-size: 20px;
 line-height: 14px;
 opacity: .2
}
/* при наведении курсора на них делаем их видимыми на 100% */
.item-shop.table .goods-list .btn-row a:focus,
.item-shop.table .goods-list .btn-row a:hover {
 opacity: 1;
 filter: alpha(opacity=100)
}
/* между иконками отступы */
.item-shop.table .goods-list .btn-row a+a {
 margin-left: 10px
}
/* стилизуем цену */
.item-shop.table .goods-list .result-price {
 width: 90%;
 font-size: 28px;
 text-align: center;
 padding-top: 30px
}
.item-shop.table .goods-list .result-price .no-reds {
 display:block;
 height:50px;
 margin-top:11px;
}
/* меняем цвет у основной цены в том случае, если указана старая цена */
.item-shop.table .goods-list .result-price .reds {
 color:#E5392F;
}
/* стилизуем старую цену */
.item-shop.table .goods-list .result-price small {
 display: block;
 font-size: 12px;
 color: #999;
 text-decoration: line-through;
}
.item-shop.table .goods-list .result-price small span {vertical-align: middle !important;}
/* красим кнопку плюс\минус кол-ва товаров */
.item-shop.table .plus, .item-shop.table .minus {
 color: #757C83 !important;
 /* vertical-align: -15px !important; */
}
/* стилизуем кнопку ПЛЮС кол-ва товаров */
.item-shop.table .plus{
 margin-right:5px;
 font-size:25px;
}
/* стилизуем кнопку МИНУС кол-ва товаров */
.item-shop.table .minus {
 margin-left:5px;
 font-size:25px;
}
/* стилизуем поле где количество товаров */
.item-shop.table .form-control {
 margin-top:20px !important;
 width: auto !important;
 text-align: center !important;
 font-size: 25px !important;
 background: #fff !important;
 box-shadow: none !important;
 border: 1px dashed #d9e0e7 !important;
 padding: 7px !important;
}
/* делаем отступ для кнопки купить(в корзину) */
.item-shop.table .goods-list .result-price .btn {
 margin-top: 30px
}
/*-------- {КОНЕЦ} — табличный режим (второй) --------*/
/*-------- {НАЧАЛО} — компактный режим (третий) --------*/
/* удаляем ненужное для этого вида (в этом случае описание) */
.item-shop.small .desc,
.item-shop.small .btn-row {
 display:none;
}
/* полный блок с товарами */
.item-shop.small .goods-list {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 100%
}
/* обращаемся к товарам */
.item-shop.small .goods-list li {
 background: #fff;
 border-radius: 3px;
 width: 100%;
 margin-left:5px;
 margin-bottom:10px;
}
/* выполняем обтекание */
.goods-list li:after,
.goods-list li:before {
 content: '';
 display: table;
 clear: both
}
/* обращаемся к блоку с информацией и изображением */
.item-shop.small .goods-list .result-info, .item-shop.small .goods-list .result-image {
 padding: 20px;
 float:left;
}
/* стилизуем изображение товара */
.item-shop.small .goods-list .result-image { 
 display:table;
 margin:0 auto;
 width:5%;
 max-height: 175px;
 max-width: 231px;
 vertical-align: middle;
}
/* фикс для firefox */
.item-shop.table .goods-list .result-image a {
 display: block;
}
/* при наведении на изображение товара делаем прозрачней её */
.item-shop.small .goods-list .result-image a:focus,
.item-shop.small .goods-list .result-image a:hover {
 opacity: .8;
 filter: alpha(opacity=80)
}
/* ставим ширину для изображения товара */
.item-shop.small .goods-list .result-image img {
 width: 100%;
}
/* добавляем параметры для "плавного появления" картинки */
.item-shop.small .goods-list .result-image img {
 transition: all ease .3s; 
 -o-transition: all ease .3s; 
 -moz-transition: all ease .3s;
 -webkit-transition: all ease .3s; 
 -ms-transition: all ease .3s; 
}
/* увеличиваем картинку при наведении */
.item-shop.small .goods-list .result-image img:hover{
 -moz-transform: scale(3.0);
 -ms-transform: scale(3.0);
 -webkit-transform: scale(3.0);
 -o-transform: scale(3.0);
}
/* стилизуем тайтл (название товара) */
.item-shop.small .goods-list .title {
 margin: 0 0 8px;
 font-size: 17px;
 line-height: 24px;
 white-space: pre-wrap;
 width:300px;
}
/* снова тайтл, на этот раз обратились к ссылке */
.item-shop.small .goods-list .title a {
 color: #333;
 white-space: pre-wrap;
}
/* красим тайтл в другой цвет при наведении */
.item-shop.small .goods-list .title a:hover {
 color: #777;
}
/* стилизуем название категории */
.item-shop.small .goods-list .location {
 color: #999;
 text-transform: uppercase;
 width:300px;
 white-space: pre-wrap;
}
/* обращаемся к блоку с ценой */
.item-shop.small .result-price {
 float:right;
 margin-top:50px;
}
/* меняем цвет у основной цены в том случае, если указана старая цена */
.item-shop.small .goods-list .result-price .reds {
 color:#E5392F;
}
/* стилизуем цену */
.item-shop.small .goods-list .result-price small {
 display: block;
 font-size: 12px;
 color: #999;
 text-decoration: line-through;
}
/* стилизуем блок регулировки кол-ва товаров */
.item-shop.small .plus-minus{
 margin-right:10px;
 font-size: 12px;
 text-align: center;
 padding-top: 20px;
}
/* стилизуем блок с ценой */
.item-shop.small .price{
 float:left; 
 margin-right:58px;
 text-align:center;
}
/*стилизуем блок с кнопкой "купить"*/
.item-shop.small .addbasket{
 margin-left:53px;
 margin-right:15px; 
}
/* красим кнопку плюс\минус кол-ва товаров */
.item-shop.small .plus, .minus {
 color: #757C83 !important;
}
/* стилизуем кнопку ПЛЮС кол-ва товаров */
.item-shop.small .plus{
 margin-right:3px;
 font-size:9px;
}
/* стилизуем кнопку МИНУС кол-ва товаров */
.item-shop.small .minus {
 margin-left:3px;
 font-size:12px;
}
/* стилизуем поле где количество товаров */
.item-shop.small .form-control {
 width: auto!important;
 text-align: center!important;
 font-size: 11px!important;
 background: #fff!important;
 box-shadow: none!important;
 border: 1px dashed #d9e0e7 !important;
 padding: 7px!important;
}
/*-------- {КОНЕЦ} — компактный режим (третий) --------*/
/* делаем плавные эффекты при наведении */
.item-shop a i, .item-shop.normal .list-item, .item-shop.table .list-item, .item-shop.small .list-item, .goods-list .btn, .goods-list .title a, .goods-list .result-image img{
 transition: all ease .3s; 
 -o-transition: all ease .3s; 
 -moz-transition: all ease .3s;
 -webkit-transition: all ease .3s; 
 -ms-transition: all ease .3s; 
}
/* стилизуем кнопку купить для всех режимов */
.item-shop.normal .btn, .item-shop.table .btn, .item-shop.small .btn { 
 background-image: none;
 border: 1px solid transparent;
 border-radius: 4px;
 cursor: pointer;
 font-size: 14px;
 font-weight: 400;
 line-height: 1.43;
 margin-bottom: 0;
 padding: 6px 12px;
 text-align: center;
 vertical-align: middle;
 white-space: nowrap;
 background: #2D353C;
 border-color: #2D353C;
 color: #fff;
}
/* красим кнопку купить при наведении */
.item-shop.normal .btn:hover, .item-shop.table .btn:hover, .item-shop.small .btn:hover {
 background: #4A5156;
 border-color: #4A5156;
}
/* ширина для кнопки купить */
.item-shop.normal .btn-block, .item-shop.table .btn-block { 
 display: block;
 width: auto;
}
/* убираем фоновую картинку при добавлении в список желаний */
.goods-list .wdel, .goods-list .wadd{
 background-image: none !important;
 cursor: pointer;
}
/* картинка "загрузка" для добавления\удаления из списка желаний */
.goods-list .wait {
 background:url(data:image/gif;base64,R0lGODlhFAAUAKUAAAQCBISChMTCxOTi5KSipNTS1FxaXPT29LSytCQiJJSSlMzKzOzq7KyqrNza3AwODPz+/Ly6vJyanAQGBMTGxOTm5KSmpNTW1GRiZPz6/CQmJMzOzOzu7KyurNze3Ly+vJyenP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBgAhACwAAAAAFAAUAAAGpcCQUAhxfBoeRcJgOQyfQk9DIgFVJA8AINGBCh3UDycjPAgw2u5zkKFwvEJKIOMZeiQbOHQhqWcsIG96QwwgFhB3AoNQAn0REoKLQgwSHxYEEJJDGSANDnWadhceA6F2A5eZoRkEFo+RkpQfYBSmH31/gZocnWR3eZKNoCFsC7BPHAUZDlB3IBQMqhkMjX1wHhZUBBUOBFQWw17LERYDBRYfHmRPQQAh+QQJBgAiACwAAAAAFAAUAIUEAgSEgoTEwsTk4uSkoqRcWlzU0tT09vS0srQkIiSUkpTMyszs6uysqqzc2twMDgx0cnT8/vy8urycmpwEBgTExsTk5uSkpqRkYmTU1tT8+vwkJiTMzszs7uysrqzc3ty8vrycnpz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGpUCRUBhxgBofRaJwOQyfwk9jMglZJg8AIOGBCh1UUEcjPAgw2u5zoKl0vMJK4NAYfiYcOBQC6GouIW96QxUUCQd3AoNQaBcSE4KLcQBMBBGSQwcPCQ4fmE8EEx8Dn3YfF5alGgSOkKUMEyBgFaUgon+BmB0hDWR3eZICokNsC5FQHQYaDlB3IRUMlyIaDMLDXqdUBBYOoRMXnnrLEhcDBhcgH2RPQQAh+QQJBgAlACwAAAAAFAAUAIUEAgSEgoTEwsTk4uRUVlSkoqTU0tT09vS0srRkZmQkIiSUkpTMyszs6uysqqzc2twMDgxkYmT8/vy8urx0cnScmpwEBgTExsTk5uRcWlykpqTU1tT8+vxsamwkJiTMzszs7uysrqzc3ty8vrycnpz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGqMCSUCh5jByihSKjOQyfQpGjUiFhKhAAQBGCCh/UEYgjPAgi2u5zwLmAvMJL4OAYiiofOJQC6HI0JG96QxcWCgd3AoNQaBoTFYKLcQAEGgUSkkMHEB4PIplPBRUiA6BDIQ6WmKAcEAqPkZIXlGAXpo1/gZkfhk53eZIdAHVCbAyxTyAGByRQdyQXDascDQJUpV4iGlQFGA+iFRqfehwPExoDBhojImRPQQAh+QQJBgAoACwAAAAAFAAUAIUEAgSEgoTEwsTk4uRUVlSkoqS0srQcHhzU0tT09vRkZmSUkpQMDgzMyszs6uysqqy8urxkYmQkJiTc2tz8/vx0cnScmpwEBgSMiozExsTk5uRcWlykpqS0trQkIiT8+vxsamwUEhTMzszs7uysrqy8vrzc3tycnpz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGqUCUUEiZlB6mhWfDSQyfQtPDYjlpLAwAwEOCCifU0ugjTAgi2u5z8MmMvMJMIPEYmiwiOLQC6H44J296QxkXHgl3AoNQaBwQFoKLcQAEHAUUkkMJDBITJplPBRYmA6BDJA+WmKAfDB6PkZIZlGAZpo1/gZkihk53eZIgAHVCbA2xTyIYCSdQdycZDqsfDREXAB1wJhxUBRonIVoHxHAfExAcAxgHBAVOT0EAIfkECQYAKgAsAAAAABQAFACFBAIEhIKExMLEVFJU5OLkpKKkZGZktLK0HB4c1NLU9Pb0lJKUDA4MzMrMZGJk7OrsrKqsdHJ0vLq8XFpcJCYk3Nrc/P78nJqcBAYEjIqMxMbEVFZU5ObkpKakbGpstLa0JCIk/Pr8FBIUzM7M7O7srK6sdHZ0vL683N7cnJ6c////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABqtAlVBoqZwgqAVo0lEMn0IU5HJJcS4MAABUggor1BMpJFQIHNrukxDSkLxCTUABGaIuIzg0AuiGOilvekMaGCAKdwKDUGgdEheCi3EAGx0FFpJDCgwUFSiZTwUXKASgQyUQlpigIQwgj5GSGpRgGqaNf4GZI4ZOd3mSHgB1QgQKJgl6IxkKKVAFABgeDWQqIQ0OGAAfcB0IWiIfKSJaCMRwCgUDCCULCANNUEEAIfkECQYAKgAsAAAAABQAFACFBAIEhIKExMLEVFJU5OLkpKKkZGZktLK0HB4c1NLU9Pb0lJKUDA4MzMrMZGJk7OrsrKqsdHJ0vLq8XFpcJCYk3Nrc/P78nJqcBAYEjIqMxMbEVFZU5ObkpKakbGpstLa0JCIk/Pr8FBIUzM7M7O7srK6sdHZ0vL683N7cnJ6c////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABq5AlVBoqZwgqAVo0lEMn0IU5HJJcS4MAABUggor1BMpJFQIHNrukxDSkLxCTUABGaIuIzg0AuiGOilvekMaGCAKdwKDUGgdEheCi3EAGx0FFpJDCgwUFSiZTwUXHQegQwcdCCJkoCEMIAMAeaAalAUABqYGAE0IGAmZI4ZOHQABmbt1QhAKJsBwIxkKKVC3GB4NrCENDhgAH3CpWiIfKSJaCMpwCgUDCCULCANNUEEAIfkECQYAKgAsAAAAABQAFACFBAIEhIKExMLEVFJU5OLkpKKkZGZktLK0HB4c1NLU9Pb0lJKUDA4MzMrMZGJk7OrsrKqsdHJ0vLq8XFpcJCYk3Nrc/P78nJqcBAYEjIqMxMbEVFZU5ObkpKakbGpstLa0JCIk/Pr8FBIUzM7M7O7srK6sdHZ0vL683N7cnJ6c////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABqpAlVBoqZwgqAVo0lEMn0IU5HJJcS4MAABUggor1BMpJFQIHNru8xPSkLxCTUABGUIAGTg0AugqEAAjek8aGCAKBQAGg1BoHQMADYyEABsIImSTZQwUFx2aTwWeB6BDJRCXmZohDCCQgqAalYmLoAYATQgYCZojhk4dAAGat3VCEAomvHAjGQopUIkYHg2ZIQ0OGAAfcB2AACIfKSJaCMZwiAMIJQsIA01QQQAh+QQJBgAiACwAAAAAFAAUAIUEAgSEgoTEwsRUUlSkoqRkZmQcHhz09vS0srSUkpTMzswMDgxkYmSsqqx0cnTMysxcWlwkJiS8urycmpwEBgSMiozExsRUVlSkpqRsamwkIiT8+vy0trTU0tQUEhSsrqx0dnScnpz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGqUCRUHjAXDSISgSCOQyfwoYGAFhwQguq5gMVhgAUiGVDFDCo3CfnkFF0hY/AoTFsACpvaIbCPRgAbnlDDwAaBwQABYJQZxgDAA+LTxYAFwYeZJJECxETGJpPBJ4IoEMfDZeZmhsLGo+BmpQXiIqgBQBNBhQdmgoUhiIYAAGat3RRByC8bwoVByFQiBQZD5kbDwwUABxvGH8AHlceVAbHb4cDBh8JBgNNUEEAIfkECQYAKQAsAAAAABQAFACFBAIEhIKExMLEVFJUpKKk5OLk1NLUZGZktLK0HB4clJKU9Pb0DA4MzMrMZGJkrKqs3NrcdHJ0vLq8XFpcJCYknJqc/P78BAYEjIqMxMbEVFZUpKak7Ors1NbUbGpstLa0JCIk/Pr8FBIUzM7MrK6s3N7cdHZ0vL68nJ6c////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABq3AlFC42GhAiM7jVLIMn8IHCABgfCCoSmVTgApRgMskExJaOIJs9/lZeEZeIWcU2gwfAEwc6rmQUgsJAHB7Qw0AIAsEAAeFUA4AGwMADY5PGQAaCSJllkQMFFueTwRbCKNDJA+bnZ4hDCCThJ6YGouNoweRgRcGniMXiSkbAAGeug93Cya+cSMYCyhQixceDZ0hDQ4XAB9xG4IAIh8oIlQJyXuKAwkkCgkDGwtQQQAh+QQJBgAlACwAAAAAFAAUAIUEAgSEgoTEwsSkoqRUUlTk4uS0srTU0tQcHhxkZmSUkpT09vQMDgysqqy8urzc2tzMysxkYmR0dnScmpz8/vwEBgSMioykpqRUVlTs6uy0trTU1tQkIiRsamz8+vwUEhSsrqy8vrzc3tzMzsycnpz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGrcCSULi4YDiGTSMkogyfwgYHAGBoHqTJ5FKACkmASkTgEVIygmz3qVl0Rl5hZkQRDRsASxya7i4QAHB7QxkkDR4DAAmDfBMiBAAQjE8ZEyEIH2WTRIZbm08iGxcGn0MGF5iamx4MHJCCmxAAGImLnxEAF38VB5sjFRwLJRcAAZsJAA13CxK9cSMWCyRQiRUdEJoeEBEVABpxqFQfGiQfVAjKewsDBAggCggEulBBACH5BAkGACcALAAAAAAUABQAhQQCBISChMTCxOTi5KSipFRSVNTS1LSytBweHPT29GRmZJSSlAwODMzKzKyqrNza3Ly6vOzq7GRiZPz+/HR2dJyanAQGBIyKjMTGxKSmpFRWVNTW1LS2tCQiJPz6/GxqbBQSFMzOzKyurNze3Ly+vOzu7JyenP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaqwJNQmMhoOoeNgzSaDJ9CRwcAYHAepkolM4AKTQCLBOMRTgaYbPfJSXxCXmEkNBkNHYBLHIqpdBMIAHB7QxEmDh4EAAqEUAIVIwUADY1PERUkCCBllUSHW51PIxsZB6FDAyOanJ0Th5KDnZcQioyhjyOAFgadJVtOGQABnbh3CRS8cSEXCXZPihYfDZweDRIWABxxGYEAIBwmIFQIDoQJBAUIIgsIBRkJUEEAIfkECQYAJgAsAAAAABQAFACFBAIEhIKExMLE5OLkVFJUpKKk1NLUtLK0HB4c9Pb0ZGZkDA4MnJqczMrMrKqs3NrcvLq87OrsZGJk/P78dHZ0BAYEjIqMxMbEVFZUpKak1NbUtLa0JCIk/Pr8bGpsFBIUnJ6czM7MrK6s3N7cvL687O7s////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABqZAk1CYyGA4B42DNJoMn0IHBwBYbB4gBiMzgApBgIrk0hFOBpds97lJeEJeYSQ0GQ0dAEscemF0EwgAcHtDESAOHQUACoRQAgwjBAANjU8RDCQIH2WVRIdbnU8jGhkHoUMDI5qcnROHkoOdlxCKjKGPI4AVBp0lW04ZAAGduHcJFLxxJQYJdk+KFR4NnBMRj35xGYEAH1cFWhnOcQkFBAgipCQPTk9BACH5BAkGACYALAAAAAAUABQAhQQCBISChMTCxOTi5KSipFRSVNTS1LSytPT29BweHGRiZAwODJyanMzKzOzq7KyqrNza3Ly6vPz+/GxqbAQGBIyKjMTGxOTm5KSmpFRWVNTW1LS2tPz6/CQiJGRmZBQSFJyenMzOzOzu7KyurNze3Ly+vP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaoQJNQiMBkOgfNo0SSDJ/CRwcAWGwgIAYDM4AKQQCKwsIRSi6CbPe5QUxCXqEjJCENH4BKHGphdBEJAHB7Qw4gDxwEAB6EUAIMJAUADY1PFwwlCR9llWaHW51PJBoYB6FDAySanJ0Sh5KDnQ4MEYqMoY8kgBQGnSJbThgAAZ25dxwNInsiBgh2ogwgFg5OJhwOj35xJBhaBBcQBFoYz3EcEBFcBhhM1UNBACH5BAkGACMALAAAAAAUABQAhQQCBIyKjMTGxOTm5KyqrFRWVNTW1BweHPT29Ly6vJyanAwODMzOzGRiZNze3KSipOzu7LSytPz+/MTCxGxqbAQGBMzKzOzq7Nza3CQiJPz6/Ly+vJyenBQSFNTS1GRmZOTi5KSmpLS2tP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAatwJFQiAgVMhEDYeOQDJ9CQgYAWIgwHIUiBIIKOYBKQ6ARSgaTbPcpQlAYXuGFIXEMCYBAHCpQdBEHAHB7QxccBBoPAB+EUBMKDgUAFo1PAwobBx1llWaHCg+dTw4GDmuiI6YhD06iEg8hCQoQqBcKCRgKAqgbkBohHLSVEIdlDgqDjY92QiAaFsJeEB4aGFDHHAIXrRoXj5BxDiFaDwMYD1ohzHHVCVweIUycQ0EAIfkECQYAHgAsAAAAABQAFACEBAIEnJqczM7M7OrsvLq8VFZU3N7crKqs9Pb0xMbEJCIkpKKk1NbUDA4MxMLEZGJk5Obk/P78BAYEnJ6c1NLU7O7svL685OLktLK0/Pr8zMrMpKak3NrcbGps////AAAABZ2gJ4rIVigYc1hGNL7ioQBAg3FTEGwXLE4AySOREUUgjlzvdUF0BD7RQBAxjAwBShSWCPQym8lg+xpMDhmsgwxzBAyEQIX9ggQsm4WLbjxzrHxXf0uBHgYGeXt8GQsbcXOBA3ccAQmFFm9gE5BsFWdFWFB0boAeFxkanDAVFBkcMFgTCQN7GQNub1GIOgsQHAs6G6U+rgQ8FBssRS8hACH5BAkGABUALAAAAAAUABQAhJyanMzOzOzq7Ly6vNze3KSmpMTGxNTW1Pz6/KSipMTCxOTm5JyenNTS1Ozu7Ly+vOTi5KyqrMzKzNza3Pz+/P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWXYCWK1PRExBE9BDW+IhEBALNMDI3C4kQ/DgRJ8MhBYBCEwcETCQIUwogACDRhEoAUUWAwryMBoxAFKMAwhXYA+KKdgEch4XqLEIzIRGqfHghHfTEQc3V2CAkFbG5vAnE+BoIPWlxedg55QlRWb2p8FUkSjC8ODQgTMFQMBgJ1CAJqWk0EBTQJNwk0BZ88pwMFEA0FLEIvIQA7) no-repeat top right !important;
}
/* иконки режимов */
/* стилизуем кнопочки переключения режимов */
.item-shop a i{
 font-size:15pt;
margin-top:15px;
margin-bottom:15px;
margin-left:5px;
}
/* перемещаем право */
.item-shop a:first-child i{
margin-left:10px;
}
/* при наведении */
.item-shop a i:hover{
 color:#E5392F;
}
/* активный режим */
.item-shop.normal .normal-mode i,
.item-shop.table .table-mode i,
.item-shop.small .compact-mode i{
 color:#E5392F;
}
.item-shop .list-item a, .item-shop .list-item a:hover{text-decoration: none !important;}
/*---- END ----*/

В том случае, если максимальная длина шаблона превышает допустимое значение (лимит 40 000 символов), удалите часть кода, которая отмечена на скриншоте: http://screencast.com/t/yqtHLqQuBMq.

Информация о классах:

goods-list – блок с товарами

goods-list li – обращаемся к товарам

goods-list .result-info, .item-shop.normal .goods-list .result-image, .item-shop.normal .goods-list .result-price – обращаемся к блоку с информацией, изображением и ценой

result-image – обращаемся к блоку изображения товара

result-image img – обращаемся к изображению товара

title – обращаемся к названию товара

location – обращаемся к названии категории

desc – обращаемся к описанию товара

btn-row a – обращение к значкам (иконки)

result-price – обращение к цене

result-price small – обращение к старой цене

s_old – обращение к старой цене

new-price – обращение к цене

tic-tac.plus – кнопка "плюс"

tic-tac.minus – кнопка "минус"

form-control – поле кол-ва товаров

btn – обращение к кнопке "купить"

Четвертый шаг: настройка и использование

Принцип редактирования вида товара в режимах.

Итак, в первом шаге инструкции мы упомянули про класс item-shop. Этот класс присваивается родительскому блоку всему каталогу товаров. Чтобы изменять стиль товаров, нужно обращаться к дочерним элементам этого же класса item-shop.
Наш скрипт к классу item-shop добавляет ещё один класс из трёх классов (в зависимости от выбранного режима), которые впоследствии становятся родительским и инструментом для правильного обращения посредством CSS.

Класс normal – если активирован обычный режим;
Класс table – если активирован "табличный" режим;
Класс small – если активирован "компактный" режим.

Не упускайте в своих стилях обращение именно к этим классам, если хотите установить разный стиль элемента в разных режимах.

Допустим, если вы в какой-то из режимов желаете разместить рейтинг, то соответственно нужно отредактить шаблон вида материалов, перейдя в Панель управления » Управление дизайном » Интернет-магазин: Вид товара в каталоге, и выставив код рейтинга (при этом не забудьте его заключить в класс) ПЕРЕД кодом <div class="result-price">

<?if($RATING$)?>
 <div class="shop-rate">
  <?$RSTARS$('15','/.s/t/1111/rating.png','0','float')?>
 </div>
<?endif?>

Обратите внимание, где мы разместили класс shop-rate, так мы дали имя блоку с рейтингом и сможем обращаться к нему по этому имени.

Теперь нам нужно скрыть этот рейтинг из двух других режимов. Допустим, мы хотим чтобы этот рейтинг был в последнем режиме (компактном), а в остальных режимах его не было. Для этого возвращаемся в шаблон Интернет-магазин: Таблица стилей (CSS), и в конце кода скрываем блок shop-rate от режимов "обычный" и "табличный":

.item-shop.normal .shop-rate, .item-shop.table .shop-rat {display:none;}

Тут мы обратились к обычному режиму и к компактному, выделенное красным цветом сам блок с рейтингом.

Добавление столбцов в компактном режиме.

В том случае, если вы желаете установить в компактном виде ещё один столбец, вам потребуется задать соответствующие стили. Например:

.shop-rate {
 float:left; /* выполняем выравнивание рейтинга по ЛЕВОМУ краю */
 margin-top: 55px; /* делаем отступы сверху */
 margin-left:50px; /* делаем отсупы от левой стороны */
}

и остается только открыть шаблон "Вид товаров в каталоге" и разместить код рейтинга (код рейтинга предоставлен выше) ПЕРЕД кодом:

<div class="result-price">

Вопросы и ответы

Я хочу чтобы на главной странице или на какой-нибудь был другой вариант режима

В таком случае, ПОСЛЕ скриптов:

<script type="text/javascript" src="/js/items-shop.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>

разместите следующий код:

<script type="text/javascript">$.cookie("item_mode", "table");</script>

— выделенное красным цветом вариант режима. Варианты:

normal – стандартный
table – табличный
small – компактный

Я хочу увеличить\уменьшить скорость анимации

В скрипте items-shop.js найдите следующую строчку кода:

/* функция плавного появления списка товаров */
function easyRander(_class) {
 var speedIN = 100;
 var speedOUT = 100;
 var easyCLASS = '.item-shop';

Соответственно, выделенное красным цветом – это скорость при появлении товаров, синим – скорость при скрытии.

Установка завершена. Если у вас возникли вопросы, которые не затрагивались в документации, спрашивайте в комментариях к товару.