Адаптация готового дизайна сайта под партнерский магазин

Зачастую перед партнерами встает задача адаптировать под свой партнерский магазин любой, понравившися им дизайн сайта. В этой статье будет рассмотрен практический пример адаптации сайта под шаблона магазина нашей партнерской программы.

Для начала необходимо выбрать понравившийся вам дизайн. Берём любой красивый интернет-магазин или идем на 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"> - Цена
Расставляем их соответствующим образом в блоке new_products. Получаем следующее:
...
<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">

Пробуем открыть наш сайт в браузере, получаем следующую картину:


Главная страница с товарами партнёрки

Теперь наш новый шаблон главной страницы отображает товары партнёрки.