Отображение страницы конкретного товара

И так задача - создание полнофункционального магазина на базе diafan CMS 4.2.4. Если мы зайдем на страницу конкретного товара в конкретной категории, то увидим такую картинку:



В принципе так все можно и оставить, но как то хотелось бы по красивее. Для этого нам потребуется немного "подпилить " движок.

Шаг 1
Открываем скрипт modules/shop/shop.view.php и находим в нем фукцию:
...
public function show_id_module($row)
{
echo '
<div class="shop-id">'
//рейтинг товара
.$row["show-rating"]

//форма оценки товара
.$row["add-rating"]

.(!empty($row["price"])?'<div class="shop-price">'._LANG_PRICE.': <span class="shop-price-value">'.$row["price"].'</span></div>':'');
self::show_form_module($row["id"],$row["depend"],$row["do_load"]);
if(!empty($row["param"]))
{
foreach($row["param"] as $k=>$v)
{
echo '
<div class="shop-param">'.$k.($v?': <span class="shop-param-value">'.$v.'</span>':'')."</div>\n";
}
}
echo '
<div class="shop-text">'.$row["text"].'</div>
<div class="shop-all-img">'.$row["img"].'</div>'
.(!empty($row["tags"])?$row["tags"]:'').'
</div>';
echo (!empty($row["comments"])?$row["comments"]:'');

}
...

Именно она отвечает за вывод конкретного товара в конкретной категории и меняем его следующим образом:

...
public function show_id_module($row)
{
echo '
<div class="shop-id">'

//рейтинг товара
.$row["show-rating"]

//форма оценки товара
.$row["add-rating"]

.'<div class="shop-all-img">'.$row["img"].'</div>'

.(!empty($row["price"])?'<div class="shop-price">'._LANG_PRICE.': <span class="shop-price-value">'.$row["price"].'</span></div>':'');
self::show_form_module($row["id"],$row["depend"],$row["do_load"]);

if(!empty($row["param"]))
{
foreach($row["param"] as $k=>$v)
{
echo '
<div class="shop-param">'.$k.($v?': <span class="shop-param-value">'.$v.'</span>':'')."</div>\n";
}
}
echo '<div class="shop-text2">'.'<table width="100%" border="0"><tr><td>'.$row["text"].'</td></tr></table>'.'</div>';
echo '
<div class="shop-text">'.'</div>'
.(!empty($row["tags"])?$row["tags"]:'').'
</div>';
echo (!empty($row["comments"])?$row["comments"]:'');

}
...

Шаг 2
Правим таблицу стилей. Тут надо сделать оговорку - поскольку данный стиль написан под мой конкретный шаблон, то возможно потребуется подправить некоторые числовые значения особенно если число выводимых дополнительных характеристик будет отлично от 3.
Открываем таблицу стилей и находим в ней класс .shop-text и вписываем следующий стиль:
/*******************************************************/
.shop-text{
text-align: left;
vertical-align: middle;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 5px;}
.shop-text2{
width: 72%;
height: auto;
border: none;
background: url(img/hr.gif) repeat-x top left;
margin-left: 27%;
margin-top: -17.9em;
margin-bottom: 0.5em;
}
.shop-text2 ul li, .shop-text2 ol li{
list-style: none;
}
/*************характеристики товара*******************/
.tie{
width: 100%;
}
.tie table {
width: 100%;
background-color: transparent;
border: #F4F6FC 1px solid;
border-collapse: collapse;
}
.tie th {
border: 1px outset #F4F6FC;
background-color: orange;
height: 20px;
color: white;
text-align: center;
}
.tie tr {
background-color: #F4F6FC;
margin: 1px;
}
.tie tr.striped {
background-color: #fff;
}
.tie td {
padding: 1px 8px;
}
/*****************************************************/

Шаг 3
Заходим в админку сайта. Выбираем конкретный товар (в моем случае Страницы сайта > Магазин > Компьютеры > Настольные РС > Коршун). В текстовом редакторе нажимаем "Источник" и вставляем таблицу следующего содержания:

****************************************
<div class="tie">
<table>
<tbody>
<tr>
<th>
наименование</th>
<th>
показатели</th>
</tr>
<tr>
<td>
Производитель процессора</td>
<td>
Intel</td>
</tr>
<tr>
<td>
Тип процессора</td>
<td>
Core i3</td>
</tr>
<tr>
<td>
Частота процессора</td>
<td>
3,06ГГц</td>
</tr>
<tr>
<td>
Набор микросхем</td>
<td>
Intel&reg; P55 + Intel&reg; ICH10R</td>
</tr>
<tr>
<td>
Оперативная память</td>
<td>
2048 Мб</td>
</tr>
<tr>
<td>
Тип оперативной памяти</td>
<td>
DDR3</td>
</tr>
<tr>
<td>
Частота шины</td>
<td>
1333 МГц</td>
</tr>
<tr>
<td>
Объем жесткого диска</td>
<td>
1000 Гб</td>
</tr>
<tr>
<td>
Интерфейс жесткого диска</td>
<td>
SATAII</td>
</tr>
<tr>
<td>
Скорость вращения жесткого диска</td>
<td>
7200 pm</td>
</tr>
<tr>
<td>
Дисковод</td>
<td>
3.5</td>
</tr>
<tr>
<td>
Оптический привод</td>
<td>
DVD&plusmn;R/RW-CD-R/RW</td>
</tr>
<tr>
<td>
Видео</td>
<td>
PCI-E 768Mb NVIDIA&reg;GeForse&trade; GTX460</td>
</tr>
<tr>
<td>
Аудио</td>
<td>
8-Channel High Definition Audio кодек</td>
</tr>
<tr>
<td>
Сетевой адаптер</td>
<td>
Интегрирован 10/100/1000</td>
</tr>
<tr>
<td>
Мощность блока питания</td>
<td>
460 Вт</td>
</tr>
<tr>
<td>
Разъемы на лицевой панели</td>
<td>
USB 2.0 - 2шт / Audio out / Mic in</td>
</tr>
<tr>
<td>
Картридер</td>
<td>
да</td>
</tr>
<tr>
<td>
Высота</td>
<td>
421 мм</td>
</tr>
<tr>
<td>
Ширина</td>
<td>
191 мм</td>
</tr>
<tr>
<td>
Длина</td>
<td>
484 мм</td>
</tr>
<tr>
<td>
Код товара</td>
<td>
40045682</td>
</tr>
</tbody>
</table>
</div>
****************************************
Для вывода таблицы характеристик мы используем JQuery. Можно скачать либо из прикрепленного файла, либо здесь http://jquery.com/. Создадим скрипт shop-tables.js следующего содержания:

// технические характеристики
$(function() {
$("table tr:nth-child(even)").addClass("striped");
});
и поместим ее в каталог со скриптами js/scripts, собственно туда помещаем и саму библиотеку JQuery. Подключение скриптов осуществляется следующим образом:

<script type="text/javascript" src="<insert name="path">js/scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<insert name="path">js/scripts/shop-tables.js"></script>

В итоге получаем такую вот картинку:



Очень рекомендую проверить данный метод сначала на локальной машине, ну или хотябы выполнить резервное копирование скрипта shop.view.php и style.css
Вот и все

Спасибо, полезно :)