Введение

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

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

По умолчанию можно добавить к сравнению до 20 товаров, но в файле настроек этот лимит можно увеличить. Также присутствует ограничение на скорость загрузки товаров - по умолчанию 2 секунды. Однако, отсутствует ограничение на количество полей товара. В инструкции есть пример, как добавлять поля. Также в скрипте можно легко добавить новые кнопки в меню или в поля товара.

Обновление 1.5
1. Теперь при сравнении товаров можно сравнить 40 дополнительных полей. Читайте подробнее в восьмом шаге инструкции!
2. Появился список полей, которые не нужно скрывать, когда вы нажимаете на кнопку "Показать отличия".

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

Перейдите в Панель управления » Файловый менеджер. В правом верхнем углу кликните на кнопку "Создать папку", введите название папки js. Кликните на галочку и ура, мы создали папку с нужным именем!:) Теперь абсолютно идентичным действиям создайте папку, но только с названием img.

Теперь зайдите в папку js и загрузите в эту папку файлы "comapre.js", "compare.settings.js" и "jquery.cookie.js" из архива со скриптом (папка "скрипты").
Далее, перейдите в папку IMG и загрузите в неё все файлы, которые находятся в архиве со скриптом (папка "иконки").

Второй шаг: установка кода

Создание информера

Перейдите в Панель управления » Информеры, нажмите на кнопку "Создать информер" и осуществите настройки информера, как на скриншоте: Созданный информер появится в конце списка и у него будет код типа $MYINF_N$, где N - уникальный порядковый номер. Запомните этот код и номер.
Далее нажмите на кнопку "Управление дизайном информера" и вместо всего кода вставьте следующий и сохраните изменения:

<!-- Объект uCoz.mf добавлен -->

Более детально на скриншоте:

Редактирование дизайна

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

<div class="compare-add compare-$BLOCK_PREF$" data-citem="$ID$"></div>
<script type="text/javascript">
    if (typeof compare !== "undefined") {compare.preload()};
    $(document).ready(function () {
	$('.compare-$BLOCK_PREF$[data-citem=$ID$] [class*=round]').die('click').live('click', function () {
	    compare.round(this, $ID$);
	});
    });
</script>
<div class="compare-data" 
data-thumb = '<img src="$THUMB$"><div class="compare-remov" data-remov="$ID$">x</div>'
data-entry_title = '<a href="$DESC_LINK$" target="_blank">$ENTRY_TITLE$</a>'
data-art_no = '$ART_NO$'
data-price = '<?if($PRICE_OLD$)?><s>$PRICE_OLD$</s><?endif?>$PRICE$'
data-brief = '$BRIEF$'
data-brand = '$BRAND$'
data-warr = '$WARR$'
data-stock = '$STOCK$'
data-stock_total = '$STOCK_TOTAL$'
data-weight = '$WEIGHT$'
data-unit = '$UNIT$'
data-file_size = '$FILE_SIZE$'
data-entry_type = '<?if($ENTRY_TYPE$=0)?>Материальный товар<?endif?><?if($ENTRY_TYPE$=1)?>Файл<?endif?><?if($ENTRY_TYPE$=2)?>Электронный товар<?endif?>'
data-is_in_discount = '<?if($IS_IN_DISCOUNT$=0)?>Не входит<?else?>Входит<?endif?>'
data-other1 = '$OTHER1$'
data-other2 = '$OTHER2$'
data-other3 = '$OTHER3$'
data-other4 = '$OTHER4$'
data-other5 = '$OTHER5$'
data-other6 = '$OTHER6$'
data-other7 = '$OTHER7$'
data-other8 = '$OTHER8$'
data-other9 = '$OTHER9$'
data-rating_num_float = '$RATING_NUM_FLOAT$'
data-to_item = '<a href="$DESC_LINK$">К товару</a><a data-buy="$ID$">.</a>'
></div>

После этого сохраните изменения.

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

<div class="compare-add compare-$BLOCK_PREF$" data-citem="$ID$"></div>
<script type="text/javascript">
    if (typeof compare !== "undefined") {compare.preload()};
    $(document).ready(function () {
	$('.compare-$BLOCK_PREF$[data-citem=$ID$] [class*=round]').die('click').live('click', function () {
	    compare.round(this, $ID$);
	});
    });
</script>

Затем вам нужно разместить на сайте кнопку "Начать сравнение". Если вы еще не знаете, где бы вы хотели ее разместить, рекомендую вам найти в шаблоне код $BASKET$ - эта переменная выводит корзину. Обычно корзина находится в шаблоне Глобальные блоки: Первый контейнер. Соответственно, после кода $BASKET$ разместите следующий код:

<div class="compare-in-sidebar"></div>
<div class="compare-clear"></div>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/compare.settings.js"></script>
<script type="text/javascript" src="/js/compare.js"></script>
$MYINF_N$

Тут вместо N вставьте порядковый номер информера, который вы запомнили в начале данного шага.

Третий шаг: выбор дизайна скрипта

Перейдите в Панель управления » Файловый менеджер: Папка "js", откройте редактор файла compare.settings.js и найдите в коде объект templates. Данный объект содержит четыре шаблона:
1. compare_yes - вид кнопки "К сравнению", когда товар уже выбран;
2. compare_no - вид кнопки "К сравнению", когда товар еще не выбран;
3. in_sidebar - Вид кнопки "Начать сравнение" в боковой колонке магазина;
4. head - шапка страницы сравнения (одинаковая во всех трех вариантах).

Эти шаблоны написаны на языке HTML. Если вы обладаете знаниями этого языка, вы можете создать свои шаблоны. Обратите внимание, в первых двух шаблонах вы можете использовать три специальных класса (значения атрибута class):
compare-round-set - класс для кнопки, которая добавит товар в список к сравнению;
compare-round-del - класс для кнопки, которая удалит товар из списка к сравнению;
compare-round-go - класс для кнопки, которая откроет страницу сравнения.
Скрипт реагирует на наличие этих классов и делает их кликабельными.
И еще, в третьем шаблоне можно использовать следующие специальные классы:
compare-go - класс для кнопки/области, которая при нажатии откроет страницу сравнения.
compare-num - класс для блока, в котором отображается количество товаров к сравнению.

Если вы выбрали первый вариант

Первый вариант интерфейса выглядит так:
Перейдите в Панель управления » Файловый менеджер: Папка "js", откройте редактор файла compare.settings.js и найдите в коде объект templates. По умолчанию этот объект содержит такой код:

compare_yes: 'Товар уже добавлен к сравнению<br><span class="compare-round-del">Отмена</span> | <span class="compare-round-go">Начать сравнение</span>',
compare_no: '<span class="compare-round-set">Добавить к сравнению</span>',
in_sidebar: '<div class="compare-go">Сравнить товары: <div class="compare-num"></div></div>',
head: '<div class="compare-head-title">Список товаров к сравнению</div><div class="compare-line"></div>'

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

/* compare template */
.compare-add {
    border: 1px solid #8F8F8F;
    border-radius: 5px;
    padding: 15px 5px;
    margin: 10px 0;
    text-align: center;
    font-size: 12px;
    min-height: 65px;
    box-sizing:border-box;
}
.compare-add span {
    display: inline-block;
    cursor: pointer;
}
.compare-round-set {
    cursor: pointer;
    font-size: 20px;
    padding-top: 4px;
}
.compare-round-del, .compare-round-go {
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}
.compare-add span:hover {
    border-bottom: 1px dashed #8F8F8F;
}
.compare-in-sidebar {
    border: 1px solid #8F8F8F;
    border-radius: 5px;
    padding: 15px 5px;
    margin: 10px 0;
    text-align: center;
    font-size: 14px;
    box-sizing:border-box;
    cursor: pointer;
}
.compare-in-sidebar .compare-num {
    display: inline;
    font-weight: bolder;
}
/* end compare template */

Информация о классах:
Цветовая схема:
В стилях встречаются следующие цвета (вы можете указать свои цвета).

Если вы выбрали второй вариант

Второй вариант интерфейса выглядит так:
Перейдите в Панель управления » Файловый менеджер: Папка "js", откройте редактор файла compare.settings.js и найдите в коде объект templates. Содержимое этого объекта сделайте следующим:

compare_yes: '<div class="compare-round-del"><div class="compare-check"></div></div>',
compare_no: '<div class="compare-round-set"></div>',
in_sidebar: '<div class="compare-go">Сравнить<div class="compare-num"></div></div>',
head: '<div class="compare-head-title">Список товаров к сравнению</div><div class="compare-line"></div>'

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

/* compare template */
.compare-add {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    opacity: 0.6;
}
.compare-add.compare-get {
    opacity: 1;
}
.compare-add > div {
    width: 74px;
    height: 60px;
    cursor: pointer;
    position: relative;
    background: url(/img/compare-scales.png) no-repeat center;
}
.compare-check {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 25px;
    height: 25px;
    background: #00D240 url(/img/compare-check.png) no-repeat center;
    border-radius: 50%;
}
.compare-in-sidebar {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.compare-in-sidebar > div {
    width: 74px;
    cursor: pointer;
    position: relative;
    background: url(/img/compare-scales.png) no-repeat top center;
    text-align: center;
    padding-top: 62px;
}
.compare-num {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 25px;
    height: 25px;
    background: #00D240;
    border-radius: 50%;
    font-family: Calibri;
    font-weight: bolder;
    font-size: 14px;
    text-align: center;
    line-height: 25px;
    color: #fff;
}
/* end compare template */

Информация о классах:
Цветовая схема:
В стилях встречаются следующие цвета (вы можете указать свои цвета).

Если вы выбрали третий вариант

Третий вариант интерфейса выглядит так:
Перейдите в Панель управления » Файловый менеджер: Папка "js", откройте редактор файла compare.settings.js и найдите в коде объект templates. Содержимое этого объекта сделайте следующим:

compare_yes: '<div class="compare-round-del">К сравнению<div class="compare-check"></div></div>',
compare_no: '<div class="compare-round-set">К сравнению<div class="compare-check"></div></div>',
in_sidebar: '<div class="compare-go">Начать сравнение<div class="compare-num"></div></div>',
head: '<div class="compare-head-title">Список товаров к сравнению</div><div class="compare-line"></div>'

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

/* compare template */
.compare-add {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.compare-add > div {
    width: 120px;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    position: relative;
    background: #41A0C0;
    border-radius: 7px;
}
.compare-add:hover .compare-check {
    opacity: 1;
}
.compare-check {
    position: absolute;
    top: 50%;
    right: 5px;
    margin-top: -13px;
    width: 25px;
    height: 25px;
    background: #fff;
    border-radius: 5px;
    opacity: 0.9;
}
.compare-get .compare-check {
    background: #fff url(/img/compare-check2.png) no-repeat center;
    opacity: 1;
}
.compare-in-sidebar {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.compare-in-sidebar > div {
    width: 100%;
    padding: 8px;
    color: #fff;
    cursor: pointer;
    position: relative;
    background: #41A0C0;
    border-radius: 7px;
}
.compare-num {
    position: absolute;
    top: 50%;
    right: 5px;
    margin-top: -13px;
    width: 25px;
    height: 25px;
    background: #fff;
    border-radius: 5px;
    text-align: center;
    line-height: 25px;
    font-weight: bolder;
    color: #41A0C0;
}
/* end compare template */

Информация о классах:
Цветовая схема:
В стилях встречаются следующие цвета (вы можете указать свои цвета).

Четвертый шаг: установка стилей страницы сравнения

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

/* compare page */
.compare-body {
 overflow: hidden;
 padding-right: 16px;
}
.compare-box {
 position: fixed;
 z-index: 99999;
 opacity: 0;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: rgba(255, 255, 255, 0.87);
 color: #000;
 font-family: calibri;
}
.compare-head {
 padding-top: 30px;
 height: 17%;
 text-align: center;
}
.compare-head-title {
 display: block;
 text-align: center;
 font-size: 35px;
 height: 35px;
 line-height: 35px;
}
.compare-line {
 width: 100%;
 border-bottom: 2px dashed #000;
 margin: 30px auto -16px auto;
}
.compare-menu-button {
 display: inline-block;
 padding: 0 10px;
 margin: 0 10px 5px 10px;
 background: #000;
 color: #fff;
 font-size: 20px;
 line-height: 28px;
 height: 28px;
 cursor: pointer;
 border-radius: 5px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
}
.compare-close {
 padding-right: 32px;
 background: #000 url(/img/compare-close.png) no-repeat;
 background-position: right 5px center;
}
.compare-mode {
 padding-right: 32px;
 background: #000 url(/img/compare-column.png) no-repeat;
 background-position: right 5px center;
}
.compare-mode.compare-checked {
 background: #000 url(/img/compare-list.png) no-repeat;
 background-position: right 5px center;
}
.compare-differ {
 padding-right: 32px;
 background: #000 url(/img/compare-uncheck.png) no-repeat;
 background-position: right 5px center;
}
.compare-differ.compare-checked {
 background: #000 url(/img/compare-check3.png) no-repeat;
 background-position: right 5px center;
}
.compare-clear {
 padding-right: 32px;
 background: #000 url(/img/compare-delete.png) no-repeat;
 background-position: right 5px center;
}
.compare-table {
 margin-top: 10px;
 overflow: scroll;
 height: 75%;
 opacity: 0;
}
.compare-table::-webkit-scrollbar-track {
 border-radius: 10px;
 background-color: transparent;
}

.compare-table::-webkit-scrollbar {
 width: 12px;
 background-color: transparent;
}

.compare-table::-webkit-scrollbar-thumb {
 border-radius: 10px;
 background-color: rgba(0,0,0,.2);
}
.compare-table > div {
 display: table-row;
}
.compare-table > div:hover {
 background: #fff;
}
.compare-table > div > div {
 padding: 10px;
 display: table-cell;
 border-bottom: 1px solid #ededed;
 border-right: 1px solid #ededed;
}
.compare-table > div > div:first-child {
 font-size: 150%;
}
.compare-table > div > div + div {
 text-align: center;
 position: relative;
 display: none;
 opacity: 0;
}
.compare-table.compare-view-column > div > div {
 min-width: 250px;
 max-width: 250px;
}
.compare-table.compare-view-line > div {
 display: table-cell;
}
.compare-table.compare-view-line > div > div:first-child {
 font-size: 150%;
 display: block;
 min-height: 38px;
}
.compare-table.compare-view-line > div > div + div {
 height: 50px;
 overflow: hidden;
 text-align: left;
}
.compare-table.compare-view-line .compare-remov {
 margin-top: 15px;
}
.compare-table.compare-view-line .compare-thumb img {
 margin-top: -15px;
}
.compare-table.compare-view-line .compare-entry_title > div {
 width: 250px;
}
.compare-table.compare-view-line .compare-brief > div + div {
 width: 400px;
}
.compare-table.compare-view-line .compare-to_item > div {
 width: 200px;
}
.compare-table.compare-view-line .compare-stock_total > div {
 width: 100px;
}
.compare-table.compare-view-line .compare-unit > div,
.compare-table.compare-view-line .compare-is_in_discount > div{
 width: 150px;
}
.compare-remov {
 position: absolute;
 right: 0;
 top: 0;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: #000;
 color: #fff;
 text-align: center;
 border: 2px solid #fff;
 cursor: pointer;
}
.compare-remov:hover {
 border: 2px solid #000;
}
.compare-entry_title div + div {
 font-size: 18px;
 font-weight: bolder;
}
.compare-price div + div {
 font-size: 20px;
 font-weight: bolder;
}
.compare-price div + div span {
 display: block;
}
.compare-price div + div s {
 color: #f00;
}
.compare-price div + div s + span {
 color: #00A53B;
}
.compare-to_item div:first-child {
 text-indent: -99999px;
}
.compare-to_item div + div a {
 display: inline-block;
 padding: 0 10px;
 margin: 0 5px 20px 5px;
 background: #000;
 color: #fff;
 font-size: 20px;
 line-height: 28px;
 height: 28px;
 cursor: pointer;
 text-decoration: none;
 border-radius: 5px;
}
.compare-to_item div + div a[data-buy] {
 color: #000;
 width: 10px;
 text-indent: -99999px;
 background: #000 url(/img/compare-cart1.png) no-repeat;
 background-position: center center;
}
.compare-to_item div + div a[data-buy].compare-checked {
 background: #000 url(/img/compare-cart2.png) no-repeat;
 background-position: center center;
}
/* end compare page */

/* compare adaptiv */
@media screen and (max-width: 980px) {
 .compare-head-title {
 font-size: 14px;
 height: 14px;
 line-height: 14px;
 }
 .compare-menu-button {
 padding: 0 10px 0 35px;
 }
}
/* end compare adaptiv */

Информация о классах:
Цветовая схема:
В стилях встречаются следующие цвета (вы можете указать свои цвета)

Страница сравнения разворачивается поверх открытой страницы и занимает все окно браузера. Таким образом интерфейс выглядит одинаково (как на видео), каким бы ни был дизайн вашего магазина. У страницы по умолчанию белый полупрозрачный фон, поэтому будет просматриваться ваш магазин.

Пятый шаг: подробнее про файл настроек скрипта

Перейдите в Панель управления » Файловый менеджер » Папка "js", откройте редактор файла compare.settings.js - это и есть файл настроек скрипта.
Давайте называть вещи своими именами :) Слово compare_settings в начале файла - это название объекта. По этому имени мы можем в файле compare.js обращаться к настройкам. Объекты можно вкладывать друг в друга, поэтому основной объект compare_settings разбит на более мелкие: templates, limits, unique, menu, cells. Давайте отдельно разеберем каждый из этих объектов.

Объект templates

Этот объект хранит шаблоны в HTML формате. Скрипт заранее не знает, сколько товаров будет на странице, поэтому он достает шаблоны из настроек и вставляет в DOM страницы. Если вы знакомы с HTML, вы легко можете использовать свои шаблоны вместо наших. Ознакомьтесь с нашими шабонами и информацией в шаге 3.

Объект limits

Объект содержит настройки следующих ограничений:
clear_time - сколько дней список добавленных товаров хранится в браузере клиента (по умолчанию 7);
max_item - максимальное количество товаров к сравнению (по умолчанию 20). Не злоупотребляйте количеством, лучше не ставить больше 40;
get_interval - задержка в секундах при загрузке товаров в таблицу сравнения (по умолчанию 2). Не ставьте задержку менее двух секунд. При увеличении максимального числа товаров увеличивайте задержку.
speed_animation - скорость анимации в милисекундах (по умолчанию 300). Одна милисекунда - это одна тысячная секунды, поэтому 300 милисекунды = 0.3 секунды. Изменять этот лимит можете на свое усмотрение.

Объект unique

В объекте есть две настройки, подробнее о каждой из них:
id_desc - идентификатор страницы с описанием товара (по умолчанию просто "desc").
Перейдите в Панель управления » Интернет-магазин » SEO-настройки » Вкладка "Подстраницы товара", посмотрите, какой используется идентификатор и перенесите в файл настроек скрипта. Скриншот: no_hide - список полей, которые не нужно скрывать, когда вы нажимаете на кнопку "Показать отличия". Например, у товаров может быть одинаковая ена, но это важное поле, не нужно его скрывать. По умолчанию настройка такая:

no_hide: ["entry_title", "price", "to_item"]

Это значит, что при нажатии на кнопку "Показать отличия" никогда не будут скрыты поля "Название материала", "Цена" и "Купить".

Объект menu

Объект содержит список пунктов главного меню скрипта. Тут нужно указывать уникальные название пункта меню, а также текст, который будет в нем. Как только вы добавите в файле compare.settings.js новый пнукт меню, он отобразитсяя в интерфейсе страницы сравнения, но не будет выполнять никаких функций. Подробнее о том, как оживить созданный пункт меню, читайте в шаге 6.

Объект cells

Объект содержит список полей сравнения. В скрипте нет ограничения на количество полей сравнения. Вы можете добавлять или удалять поля на свое усмотрение. Содержать они могут любую информаций. Про настроку объекта cells читайте в шаге 7.

Шестой шаг: добавление своих пунктов меню

Перейдите в Панель управления » Файловый менеджер » Папка "js", откройте редактор файла compare.settings.js. Объект menu содержит список пунктов меню. Давайте на примере попробуем добавить новый пункт меню "Посчитать":

close: 'Закрыть',
mode: 'Режим',
differ: 'Отличия',
clear: 'Очистить',
calk: 'Посчитать'

Теперь пункт меню появился на странице сравнения, но он ничего не делает:
Чтобы сделать пункт меню рабочим, перейдите в Панель управления » Файловый менеджер » Папка "js", откройте редактор файла compare.js. Объект menu_click содержит функции, которые выполняются при клике по пунктам меню. Имя функции совпадает с именем кнопки. Для кнопки "calk" добавим такую функцию:

calk: function () {
    var num = Object.keys(compare.items_map).length;
    alert(num);
}

Теперь при клике на кнопку "Посчитать" будет возникать окно с количеством товаров к сравнению. Так новая функция будет выглядеть в коде:

Седьмой шаг: настройка полей скрипта

Перейдите в Панель управления » Файловый менеджер » Папка "js", откройте редактор файла compare.settings.js. Объект cells содержит список строчек таблицы. Давайте на примере попробуем добавить в таблицу новую строку "Клубная цена":

thumb: 'Превью',
entry_title: 'Наименование товара',
art_no: 'Артикул',
brief: 'Краткое описание',
price: 'Цена',
club_price: 'Клубная цена',
brand: 'Производитель',
warr: 'Гарантия на товар',
stock: 'Товар в наличии',
stock_total: 'Остаток на складе',
weight: 'Вес',
unit: 'Единица измерения товара',
file_size: 'Размер файла',
entry_type: 'Тип товара',
is_in_discount: 'Товар входит в систему скидок',
other1: 'Дополнительное поле 1',
other2: 'Дополнительное поле 2',
other3: 'Дополнительное поле 3',
other4: 'Дополнительное поле 4',
other5: 'Дополнительное поле 5',
other6: 'Дополнительное поле 6',
other7: 'Дополнительное поле 7',
other8: 'Дополнительное поле 8',
other9: 'Дополнительное поле 9',
rating_num_float: 'Рейтинг',
to_item: ''

Теперь необходимо передать информацию в эту ячейку, иначе она будет пустой. Перейдите в Панель управления » Управление дизайном » Интернет-магазин: Страница товара, найдите элемент с классом "compare-data" и добавьте в него новый атрибут, как показано на примере:

<div class="compare-data" 
data-thumb = '<img src="$THUMB$"><div class="compare-remov" data-remov="$ID$">x</div>'
data-entry_title = '<a href="$DESC_LINK$" target="_blank">$ENTRY_TITLE$</a>'
data-art_no = '$ART_NO$'
data-price = '<?if($PRICE_OLD$)?><s>$PRICE_OLD$</s><?endif?>$PRICE$'
data-club_price = '<?$PRICE_RAW$*0.5?>'
data-brief = '$BRIEF$'
data-brand = '$BRAND$'
data-warr = '$WARR$'
data-stock = '$STOCK$'
data-stock_total = '$STOCK_TOTAL$'
data-weight = '$WEIGHT$'
data-unit = '$UNIT$'
data-file_size = '$FILE_SIZE$'
data-entry_type = '<?if($ENTRY_TYPE$=0?>Материальный товар<?endif?><?if($ENTRY_TYPE$=1?>Файл<?endif?><?if($ENTRY_TYPE$=0?>Электронный товар<?endif?>'
data-is_in_discount = '<?if($IS_IN_DISCOUNT$=0?>Не участвует<?endif?><?if($IS_IN_DISCOUNT$=1?>Участвует<?endif?>'
data-other1 = '$OTHER1$'
data-other2 = '$OTHER2$'
data-other3 = '$OTHER3$'
data-other4 = '$OTHER4$'
data-other5 = '$OTHER5$'
data-other6 = '$OTHER6$'
data-other7 = '$OTHER7$'
data-other8 = '$OTHER8$'
data-other9 = '$OTHER9$'
data-rating_num_float = '$RATING_NUM_FLOAT$'
data-to_item = '<a href="$DESC_LINK$">К товару</a>'
></div>

Зеленым цветом мы выделили уникальное имя ячейки, оно должно совпадать в файле "compare.settings.js" и в шаблоне "Страница товара".
Синим цветом выделены дополнительные поля. На этом шаге рекомендуем переименовать дополнительные поля в скрипте, чтобы они были, как на сайте. Ненужные дополнительные поля удалите из скрипта.

Восьмой шаг: 40 дополнительных полей у товара

В интернет-магазине uScript вы можете приобрести еще один полезный скрипт: Дополнительные поля для интернет-магазина.
Как только вы установите этот скрипт, 40 дополнительных полей появятся в таблице к сравнению. Вы правильно поняли, мы позаботились о том, чтобы такое полезное дополнение работало при сравнении товаров!

Перейдите в Панель управления » Файловый менеджер » Папка "js", откройте редактор файла compare.settings.js. Объект o_field содержит список дополнительных полей:

o_field: {
	o_field_10: 'Дополнительное поле 10',
	o_field_11: 'Дополнительное поле 11',
	o_field_12: 'Дополнительное поле 12',
	o_field_13: 'Дополнительное поле 13',
	o_field_14: 'Дополнительное поле 14',
	o_field_15: 'Дополнительное поле 15',
	o_field_16: 'Дополнительное поле 16',
	o_field_17: 'Дополнительное поле 17',
	o_field_18: 'Дополнительное поле 18',
	o_field_19: 'Дополнительное поле 19',
	o_field_20: 'Дополнительное поле 20',
	o_field_21: 'Дополнительное поле 21',
	o_field_22: 'Дополнительное поле 22',
	o_field_23: 'Дополнительное поле 23',
	o_field_24: 'Дополнительное поле 24',
	o_field_25: 'Дополнительное поле 25',
	o_field_26: 'Дополнительное поле 26',
	o_field_27: 'Дополнительное поле 27',
	o_field_28: 'Дополнительное поле 28',
	o_field_29: 'Дополнительное поле 29',
	o_field_30: 'Дополнительное поле 30',
	o_field_31: 'Дополнительное поле 31',
	o_field_32: 'Дополнительное поле 32',
	o_field_33: 'Дополнительное поле 33',
	o_field_34: 'Дополнительное поле 34',
	o_field_35: 'Дополнительное поле 35',
	o_field_36: 'Дополнительное поле 36',
	o_field_37: 'Дополнительное поле 37',
	o_field_38: 'Дополнительное поле 38',
	o_field_39: 'Дополнительное поле 39',
	o_field_40: 'Дополнительное поле 40'
}

Именно этот список отобразится при сранении товаров. Текст перед двоеточием редактировать не нужно, а текст после двоеточия можете указать любой. Дополнительные поля показываются после основных полей. однако, среди основных полей есть кнопка "Купить". Не хотелось бы, чтобы эта кнопка была в середине столбца. Поэтому мы даем вам возможность выбрать, какие основные поля нужно разместить после дополнительных. Подробнее в этом коде:

o_field_settings: {
	move_to_end: ["rating_num_float", "to_item"]
}

Этот код означает, что рейтинг товара и кнопка "Купить" будут размещены после дополнительных полей. Через запятую вы можете указать и другие поля (которые нужно разместить после списка доп. полей).