Адаптация готового дизайна сайта под партнерский магазин
Зачастую перед партнерами встает задача адаптировать под свой партнерский магазин любой, понравившися им дизайн сайта. В этой статье будет рассмотрен практический пример адаптации сайта под шаблона магазина нашей партнерской программы.
Для начала необходимо выбрать понравившийся вам дизайн. Берём любой красивый интернет-магазин или идем на www.templatesmonster.com и в блоке поиска шаблонов выбираем категорию osCommerce Templates (это скины для популярного движка интернет магазина). Выбираем, понравивишийся нам шаблон и кликаем по нему. Мне, например, понравился шаблон №22666, на его примере и разберем технику адаптация шаблонов для магазинов партнерской программы.
По идее, шаблон надо покупать, но можно обойтись и без этого (исходники psd и шрифты мы конечно не получим, но скопировать сам дизайн вполне по силам). templatesmonster.com любезно предоставляет нам возможность увидеть данный шаблон в действии, этим мы и воспользуемся, нажимаем на синюю кнопку "Click here to see LIVE DEMO of this template" и попадаем на страницу http://osc.template-help.com/osc_22666/index.php где работает "живая" osCommerce с установленным шаблоном №22666.
Для дальнейшей работы нам потребются опредленные инструменты, установим их.
Установка необходимых инструментов
Во первых, нам не обойтись без браузера
Firefox. Скачайте и установите его последнюю версию.
Во вторых, к самому браузеру необходимо подключить несколько полезных дополнений:
- Firebug - прекрасный многофункциональный инструмент для отладки html и css.
- Save Complete - патч, позволяющий сохранять веб-страницу целиком, включая все изображения из css.
Плагины можно установить прямо со страниц с их описанием, нажав зеленю кнопку "Добавить в Firefox".
После того, как установлен Firefox и к нему добавлены необходимые дополнения, можно открывать в нем страницу http://osc.template-help.com/osc_22666/index.php с нашим шаблоном.
Сохранение html-файлов
После того как главная страница шаблона открыта в Firefox-е, необходимо сохранить её целиком на жёсткий диск, для этого в меню "Файл" выбираем пункт "Полностью сохранить страницу как..." (добавленный туда дополнением Save Complete). И сохраняем веб-страницу в отдельный, заранее созданный каталог.
После окончания сохранения, в указанном каталоге появится html-файл (названный, скорее всего, index.php.html) и каталог с графикой и css-файлами для этой страницы (скорее всего каталог будет называться index.php_files).
Необходимо убедиться, что сохранение страницы прошло удачно, для этого откроем сохраненный html-файл в браузере и визуально сравним отображение страницы на сайте с сохраненной страницей. Если страница сохранена корректно, можно двигаться дальше, если же она отличается от исходной, перепроверьте что всё сделано в полном соотвествии с инструкцией или же обратитесь в техническую поддержку.
Вот так выглядит у меня сохраненная страница
Название каталога с графикой выглядит несколько некрасиво, поэтому переименуем его в более лаконичное img. Кроме того, в html файле потребуется заменить все пути к исходному каталогу index.php_files на каталог theme/img. Для этого, откроем html-файл в стандартном блокноте и вызовем функцию замены (Правка -> Заменить или просто ctrl+H) и укажем, что необходимо заменить во всём файле строку "index.php_files" (старое название каталога с графикой) на строку "theme/img" (новое название каталога). Жмем кнопку "заменить всё" и сохраняем исправленный html-файл.
Процесс замены старого названия каталога изображений на новое
Превращение html-файла в шаблон
Следующим шагом является преобразование html-файла в файл шаблона. Для того чтобы этот процесс не отразился на вашем интернет-магазине рекомендуется последующие шаги выполнять не на основном интернет-магазине, а на его локальной копии.
Для запуска локального веб-сервера можно воспрользоваться проектом Denwer или установить и настроить Apache и php вручную. А после этого создать локальную копию вашего интерент магазина.
Вслед за тем, как ваш локальный интерент магазин установлен и исправно работает, приступаем к модификации его шаблона. Нам необходимо очистчить папку /theme/ интернет-магазина и создать в ней свой новый шаблон. Для того чтобы не потерять начальный шаблон и иметь всегда возможность в него заглянуть, просто переименуем каталог /theme/ вашего локального партнерского магазина в /theme.bak/ и создайте новый пустой каталог /theme/.
Теперь скопируем наш каталог /img/ в папку /theme локального партнёрского магазина, а файл index.php.html в каталог /theme/ под именем index.tmpl. На этом первая итерация завершена и при обращении к вашему интерент-магазину должен отобразаться выбранный вами дизайн.
Выделение в шаблоне хедера, футера и меню
Каждый шаблон имеет повторяющиеся части, такие как хедер, футер и меню, для упрощения дальнейших действий их необходимо выделить и вынести в отдельные tmpl-файлы.
Хедер (красн.), меню (зел.) и футер (син.)
Для нахождения html-блока отвечающего за хедер, воспользуемся дополнением к Firefox называемым Firebug. Активируем его, нажав на изображение таракана в правой нижней части окна браузера. Снизу окна откроется панель Firebug-а, с отображением html-кода страницы и css-стилей выбранных элементов.
При выделении html-элемента на панели Firebug его отображение на странице будет посвечено синим цветом. Кроме того, при помощи инструмента анализа страницы, можно кликнув по элементу страницы выделить на панели соотвествующий ему html-тэг.
Firebug в действии: подсвечено содержимое выделенного тэга <tr>
и отображена подсказка инструмента анализа страницы
Наша задача: исследуя исходный html код - выявить, какой блок кода отвечает за хедер, какой за меню, футер, а какой за основной контент страницы.
На рисунке выше, мы нашли таблицу (<table>) с классом bg9_main которая содержит 3 элемента <tr> (строки), отвечающие за хедер, меню + основной контент и футер (это видно при выделении отображения содержимого каждого из 3-х элементов <tr> данной таблицы).
Т.е. структура исследуемого шаблона примерно следующая:
...
<body>
...html-обвес для обсепечения центровки, фона, теней и пр. мишуры...
<table ... class="bg9_main">
<tr>
...код хедера...
</tr>
<tr>
...код меню + код основного контента...
</tr>
<tr>
...код футера...
</tr>
</table>
...закрытие html-обвеса для обсепечения центровки, фона, теней и пр. мишуры...
</body>
...
Однако, в идеале, мы хотели бы получить следующую структуру кода:
<body> <TMPL_INCLUDE FILE="header.tmpl"> ... ...html-код содержимого страницы... ... <TMPL_INCLUDE FILE="footer.tmpl"> </body>Т.е. необходимо полностью "отделить мух от котлет", оставив в шаблоне index.tmpl лишь основной контент страницы, а все оформление (мишуру), хедер, футер и меню вынести в отдельные файлы. Поэтому продолжаем исследовать исходный шаблон дальше, до выявления html-блока основного контента.
Код отвечающий за контент страницы найден
В итоге, находим блок содержащий в себе главное содержимое страницы, это таблица с классом content_width_td, внутри которой содержатся 2-е другие таблицы, отвечающие за заголовок (в данном случае "What's New Here?" и блока товаров).
Теперь можно выделить хедер в отдельный файл, открываем index.tmpl в блокноте и выделяем html-текст от окончания тега <body> до тэга <td class="content_width_td"> включительно. "Вырезаем" выделенный фрагмент (Ctrl+X), создаем новый файл header.tmpl и вставляем в него вырезанный фрагмент (Ctrl+V). Вместо вырезанного фрагмента в файле index.tmpl вписываем <TMPL_INCLUDE FILE="header.tmpl">. Все сохраняем и пробуем снова открыть локальную копию магазина в браузере.
Если все было сделано правильно, визуально ничего измениться не должно, однако часть html-кода перекочевала из шаблона index.tmpl в header.tmpl.
Теперь выделим футер, это достаточно легко, если в хедер мы вынесли все с начала html-кода, до тэга начала элемента таблицы td с классом content_width_td (<td class="content_width_td">) включая его, то в футер должен уйти код, начинающийся от соотвествующего закрывающего тэга </td> до конца html-кода.
Найти этот тэг легко, поскольку судя по структуре дерева html-кода в Firebug, после этого тега расположен тэг еще одного элемента таблицы td с классом box_width_td_right. Поэтому просто находим в коде index.tmpl строку "box_width_td_right", которая описывает класс элемента td, смотрим выше и находим ближайший закрывающий тэг </td>, копируем весь html начиная с этого элемента </td> до тэга </body> в файл footer.tmpl, а вместо вырезанного кода вписываем <TMPL_INCLUDE FILE="footer.tmpl">.
Стоит еще раз убедиться, что вынесение футера в отдельный файл не повлияло на внешний вид шаблона, откроем локальную копию магазина в браузере. Если что-то пошло не так ищите ошибку или обратитесь к специалистам технической поддержки.
Выделение товарных блоков
Продолжаем исследовать html-код инструментом анализа страницы для выявления блоков с товарами. Выясняем, что товарный блок находится в элементе <table> с классом tep_draw_prod_top_table.
Товарный блок найден
Как можно видеть, верстка в шаблоне находится, мягко говоря, на не высоком уровне - куча вложенных и запутанных таблиц. Нам же табличная верстка для оформления товаров не подойдет, избавимся от таблиц.
Товарные блоки находятся внутри ячеек другой таблицы, у которых выставлен стиль "width: 33%;". Заменяем эту таблицу на цикл TMPL_LOOP, а ячейки таблицы на div.
Было:
<!-- new_products //-->
<table border="0" width="0" cellspacing="0" cellpadding="0">
<tr>
<td class="tableBox_output_td main"><table border="0" width="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="width:33%;"><table cellpadding="0" cellspacing="0" border="0" class="tep_draw_prod_top_table">
...
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- new_products_eof //-->
Стало:
<!-- new_products //-->
<table border="0" width="0" cellspacing="0" cellpadding="0">
<tr>
<td class="tableBox_output_td main">
<TMPL_LOOP NAME="stab">
<TMPL_IF NAME="bestseller">
<div style="width:32%; float: left; margin-right: 8px; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" class="tep_draw_prod_top_table"><tr><td class="tep_draw_prod_top_td">
.........
</table>
</div>
</TMPL_IF>
</TMPL_LOOP>
</td>
</tr>
</table>
<!-- new_products_eof //-->
В div, обрамляющий товарный table мы добавили стили, для сохранения ширины блока и задания отступов справа и снизу.
Теперь переходим к замене информации о товаре на наши TMPL_VAR. Для этого, необходимо представлять себе структуру XML-файла партнерского интернет-магазина. Имена узлов XML-файла, соответствуют названиям переменных, передаваемых в шаблон. Для главной страницы будем использовать следующие переменные:
- <TMPL_VAR NAME="code"> - Код товара
- <TMPL_VAR NAME="category"> - Название категории товара
- <TMPL_VAR NAME="trademark"> - Название торговой марки
- <TMPL_VAR NAME="model"> - Название модели
- <TMPL_VAR NAME="image"> - Имя файла с маленьким изображением товара
- <TMPL_VAR NAME="description"> - Краткое описание
- <TMPL_VAR NAME="price"> - Цена
...
<TMPL_LOOP NAME="stab">
<TMPL_IF NAME="bestseller">
<div style="width:32%; float: left; margin-right: 8px; margin-bottom: 15px; height: 420px;">
<table cellpadding="0" cellspacing="0" border="0" class="tep_draw_prod_top_table">
<tr>
<td class="tep_draw_prod_top_td">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td class="name2_padd name">
<a href="product.php?product=<TMPL_VAR NAME='code'>"><TMPL_VAR NAME='category'> <TMPL_VAR NAME='trademark'> <TMPL_VAR NAME='model'></a>
</td></tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" class="name2_bl">
<tr><td class="name2_br">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td class="pic2_padd">
<a href="product.php?product=<TMPL_VAR NAME='code'>"><img src="products/img/<TMPL_VAR NAME='image'>" border="0" alt="<TMPL_VAR NAME='category'> <TMPL_VAR NAME='trademark'> <TMPL_VAR NAME='model'>" title="<TMPL_VAR NAME='category'> <TMPL_VAR NAME='trademark'> <TMPL_VAR NAME='model'>" width="100" height="100"></a>
</td></tr>
</table>
<div class="line2_padd">
<div class="desc2_padd desc"><TMPL_VAR NAME='description'></div>
</div>
</td></tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" class="button22_marg">
<tr>
<td class="price2_padd vam"><span class="productSpecialPrice"><TMPL_VAR NAME='price'> руб.</span></td>
<td class="button2_padd button2_marg vam">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td align="left">
<a href="buy.php?product=<TMPL_VAR NAME='code'>">
<img src="theme/img/button_add_to_cart2.gif" border="0" alt="" width="95" height="17">
</a><br />
<a href="product.php?product=<TMPL_VAR NAME='code'>">
<img src="theme/img/button_details.gif" border="0" alt="" width="70" height="17">
</a>
</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</TMPL_IF>
</TMPL_LOOP>
...
Здесь в качестве картинки товара выступает конструкция <img src="products/img/<TMPL_VAR NAME='image'>">,
для ссылки на детальное описание товара используется <a href="product.php?product=<TMPL_VAR NAME='code'>">,
а для добавления товара в корзину <a href="buy.php?product=<TMPL_VAR NAME='code'>"> Так же следует подправить кодировку в заголовке index.tmpl:
<html dir="LTR" lang="ru"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Пробуем открыть наш сайт в браузере, получаем следующую картину:
Главная страница с товарами партнёрки
Теперь наш новый шаблон главной страницы отображает товары партнёрки.