Сайт справки

Методика верстки шаблона под OpenCart

Итак у вас есть HTML+CSS шаблон и из него надо сверстать шаблон для CMS OpenCart. Решить эту задачу как я вижу можно двумя путями:

  1. Взять шаблон default и подгонять его catalog\view\theme\default\stylesheet\stylesheet.css до тех пор, пока он не будет похож на наш  HTML+CSS прототип. Далее отключаем/включаем некоторые модули соответственно и передвигаем их, все делаем через настройки админпанели до тех пор, пока все не будет на своих местах, например колонка «категории» слева, баннеры снизу и т.п., вообщем все как на HTML+CSS прототипе.
  2. Второй путь сложнее, он применим когда наш шаблон не получается «натянуть» на default. Решение заключается в верстки HTML+CSS шаблона под OpenCart с нуля (или почти с нуля). Берется наш HTML+CSS прототип, делиться на части, каждую часть помещаем в определенный .tpl шаблон, далее в каждом шаблоне прописываем необходимые переменные, после чего занимаемся подгоном css стилей отвечающий за вывод содержимого контента сайта, за корзину, за вывод модулей, подгоняем таким образом пока не будет достигнута единый стиль сайта.

С первым способом решения думаю проблем быть не должно, поэтому, в данном посте, я буду описывать второй путь, итак начнем …

1. Готовим базу

Для начала надо подготовить базу для нашего будущего шаблона, за базу будем брать default шаблон. Создадим папку «MyTempl» в директории catalog\view\theme, где «MyTempl» это имя нашего шаблона. Скопируем все содержимое default вновосозданную папку.

Кратко по директориям  MyTempl, что мы будем делать с содержимым каждой из них:

  • Содержимое директории image менять не будем, все изображения звездочек, стрелочек, кнопочек будут отображаться в контенте сайта, менять их будем в самом конце верстки шаблона, если они уж  совсем будут выбиваться из стиля, а так, пока не трогаем их;
  • В директории «stylesheet» на основе файла stylesheet.css мы будем создавать свой «style.css»;
  • Директория template содержит .tpl файлы представления, мы их будем активно править.

Все база создана, начнем править .tpl шаблоны.

2.  Создаем скелет шаблона

Перейдем в директорию «catalog\view\theme\MyTempl\template\», здесь сосредоточены файлы представления нашего нового шаблона MyTempl. Они отвечают за то, каким образом будут выводиться страницы и что на них будет отображено. За «откуда брать информацию» отвечают так называемые контроллеры, которые располагаются в директории catalog\controller, редактировать контроллеры будем по острой необходимости, про которую я расскажу позже.

Для начала я приведу по данной ссылке список, какие бывают файлы представления, где они находиться и за что отвечают, это даст цельную картину.

Редактировать мы будем лишь следующие файлы tpl

  • column_left.tpl (левая колонка вашего шаблона)
  • column_right.tpl (правая колонка вашего шаблона)
  • content_bottom.tpl (низ средней колонки вашего шаблона)
  • content_top.tpl (верх средней колонки вашего шаблона)
  • footer.tpl (низ-подвал вашего шаблона)
  • header.tpl (верх- шапка вашего шаблона)
  • home.tlp (домашняя страница)

Итак откроем home.tlp, внутри мы увидим:

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content"><?php echo $content_top; ?>
<h1 style="display: none;"><?php echo $heading_title; ?></h1>
<?php echo $content_bottom; ?></div>
<div class="clearthis">&nbsp;</div>
<?php echo $footer; ?>

Содержимое нам говорит, что первым делом выводиться представление шапки $header, далее файлы представления левой и правой колонки, потом контент сверху/снизу и наконец подвал сайта $footer.

Представление для левой/правой колонки и контент сверху/снизу выводят только модули, если открыть один из них (файл представления), то мы увидим цикл, печатающий содержимое модулей.

<?php foreach ($modules as $module) { ?>
   <?php echo $module; ?>
<?php } ?>

Если модули отключены в панели администратора, то данные файлы представления (.tpl) ничего не выводят.

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

Пример html+css шаблона:

18

Обозначим, шапку красным цветом, а подвал зеленым.

17_

Открываем «header.tpl» и копируем туда html код шапки сайта. Обычно это код с <!DOCTYPE> до  блока <div id=”container”> (не включительно). Аналогично с шаблоном «footer.tpl», вставляем код подвала сайта, как пример это код с <div id=”footer”> до тэга </html>.

Вернемся к «home.tlp», в него нужно разместить все остальное что осталось, но только каркас без содержимого.

Например есть html шаблон со кодом

 

<!DOCTYPE> 
<html>
<head>
   Код html, много чего…
</head>
<body>
   <div id="header">
	   Код html, много чего…
   </div>
   <div id="container">											
      <div id="center" class="column">
          <a href="#" class="banner">
             <img src="/images/bigbanner.jpg" alt="" 
              width="572" height="236" />
          </a><br />
          <div id="content">
	          Код html, много чего…
          </div>
      </div>
      <div id="left" class="column">
          Код html, много чего…
      </div>
      <div id="right" class="column">
          Код html, много чего…
      </div>
   <div id="footer">
      Код html, много чего…
   </div>
</body>
</html>

Тогда home.tpl  должен выглядеть вот так:

<?php echo $header; ?>
<div id="container">
    <div id="center" class="column">
        <a href="#" class="banner">
              <img src="/image/bigbanner.jpg" alt="" 
              width="572" height="236">
        </a><br>
        <div id="content">
            <?php echo $content_top; ?>
            <?php echo $content_bottom; ?>
        </div>
     </div>		
	<?php echo $column_left; ?>
	<?php echo $column_right; ?>
</div>	
<?php echo $footer; ?>

В файле header.tplизменим путь к файлу css, на «catalog/view/theme/MyTempl/stylesheet/style.css» и скопируем папку «images» нашего html+css шаблона в директорию «catalog\view\theme\MyTempl».

Откроем наш style.css и произведем автоматическую замену с «images» на «../images», это позволит нашему шаблону увидеть изображения. В OpenCart результирующая html страница расположена немного по-другому относительно папки images (не в одной директории), поэтому необходимо делать такие изменения.

Основной костяк шаблонов готов, но если в html коде прототипа есть тэг <img> с явным указанием на изображение (с помощью атрибута src), то переходим к следующему этапу, если нет – пропускаем его.

Подводный камень. Возможна ситуация, когда в html+css шаблоне, в качестве горизонтального меню распологается горизонтальное меню категорий товара, например как в шаблоне default (малиновая рамка).

32_

Тогда часть шаблона header.tpl нам нужно заполнить содержимым модуля «Категории» и контроллер header.php аналогично как контроллер этого же модуля.

3. Боремся с тегом <img>

Настало время, когда необходимо подправить контроллер, возникла это необходимость, потому что я не обнаружил какая переменная в CMS OpenCart отвечает за вывод имени шаблона. Откроем контролер файла представления -header.tpl, т.е. «catalog\controller\common\header.php» и в самом низу в условие

 

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/common/header.tpl')) {

перед else добавим следующие

 

$this->data['template'] = $this->config->get('config_template');

В результате должно получиться следующее:

 

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/common/header.tpl')) {
	$this->template = $this->config->get('config_template') . '/template/common/header.tpl';
	$this->data['template'] = $this->config->get('config_template');
} else {
	$this->template = 'default/template/common/header.tpl';
}

Теперь заменим статичный адрес изображения в тэге <img> на динамично формирующийся, с помощью переменной $template. Например src некого тега <img> имел статичную ссылку

 

images/flag2.gif

а мы заменяем ее на следующую

 

catalog/view/theme/<?php echo $template ?>/images/flag2.gif

 

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

Лучше этот процесс автоматизировать и произвести везде автозамену с

 

images/

на

 

catalog/view/theme/<?php echo $template ?>/images/

 

Замену производим везде, но кроме логотипа (что в шапке), он должен быть настраиваемым через панель администратора.

(если тэг <img> с явным указанием путей к изображениям есть и в home.tpl, footer.tpl, то делаем все по аналогии, открываем их контроллер(ы), добавляем переменную template, далее в шаблонах производит автозамену).

 4. Наполняем сайт динамичным содержимым

Итак мы отредактировали шаблоны и контролеры, в результате система OpenCart должна выводить страницу со всеми изображениями, но без контента:

42_

Место логотипа у нас пока без изображения.

Следующее что мы должны сделать, это наполнить наш сайт динамичным содержимым, который формирует для нас CMS OpenCart. Открываем шаблоны header.tpl, footer.tpl и шаблон default в качестве образца, также нам в помощь статья список переменных OpenCart. Далее заменяем статичные данные на печать соответствующих переменных. Приведу  пример, тэг <title>E-Shop</title> у нас содержит текст «E-Shop», если смотреть по образцу шаблона default, то он должен формироваться с помощью вывода переменной <?php echo $title; ?>, прописываем в свой шаблон вместо E-Shop следующее: <?php echo $title; ?>. Еще пример, находим тэг img отвечающий за вывод логотипа, он может быть следующим: <img src=”images/logo.jpg” … >, заменяем путь images/logo.jpg, на печать переменной <?php echo $logo; ?>. Теперь логотип можно настроить через панель администратора.

Далее, проходим весь header.tpl и footer.tpl, заменяя статичные данные на печать соответствующих переменных. Этот этап будет самым трудоемким.

 

Далее проходим по всем шаблону header.tpl и footer.tpl, заменяя статичные данные на печать соответствующих переменных. Этот этап будет самым трудоемким. Здесь может возникнуть много проблем, я постараюсь описать те проблемы которые наичаще встречаются.

Подводный камень №1. Иногда вам придется заменять целые div блоки на печать переменных, например блочок с выбором языка

5

вам придется заменить на  <?php echo $language; ?>.  И тогда вид его измениться на:

6

Для того что бы, его внешний вид соответствовал изначальному, нам нужно подправить файл представления отвечающий за вывод данного блочка. Смотрим статью переменные OpenCart, находим к какому представления относиться $language. По тексту в статье, он относиться к представлению модуля «module/language», открываем данный файл и заменяем его div блок на наш div, сохраняя логику работы (т.е. если список языков формируется через цикл, то он и у нас должен формироваться тем же циклом).

(Если при печати переменных в представлениях вызывается ошибка «Undefined variable: …», т.е. переменная не определена, тогда заходим в контроллер данного представления и добавляем ее по образцу. Например, переменная $template будет доступна только в представлениях – header.tpl и footer.tpl, добавляем по образцу).

Подводный камень №2. В шаблоне default ссылки на отдельные страницы можно логически разделить на три группы. Желтой рамкой – это переменные $home, $wishlist, $account, $shopping_cart, $checkout содержащие ссылки на соответствующие шаблоны, все эти переменные по умолчанию (без правки контролера) доступны в heder.tpl. Зеленым цветом – это массив $informations, содержащий ссылки на шаблон information/information с выводом статей (в админпанели «Каталог->Статьи»). Ссылки выводятся  через цикл, все что есть. Данный массив по умолчанию доступен в footer.tpl 

<ul>
    <?php foreach ($informations as $information) { ?>
         <li><a href="/<?php echo $information['href']; ?>">
         <?php echo $information['title']; ?></a></li>
    <?php } ?>
</ul>

И наконец красной рамкой обозначенные переменные ссылки на соответствующие шаблоны, они ни чем принципиальным не отличаются от тех что в желтой рамке, различия их только в видимости. Данные переменные по умолчанию видны в footer.tpl.

72_

Так вот, может возникнуть ситуация, когда наш html+css шаблон будет требовать от нас совсем другое расположение ссылок, например как тут:

81_

Решением будет заключаться, в правке контролера header.php и шаблона. Надо быть готовым к таким трудностям и не забывать, что есть «переменные ссылки на шаблон», а есть «статьи» выводящиеся через цикл и не забывать про видимости переменных.

Подводный камень №3. Может возникнуть ситуация, когда нужно указать ссылку на шаблон с выводом определенного модуля, например как тут

91_

В зеленом квадрате обозначены ссылка на «Новую продукцию». По сути, за вывод последней поступившей продукции у нас отвечает модуль «Последние». Нам нужно создать новую страницу-шаблон (.tpl) для «Новой продукции», далее в панели администратора активировать модуль «Последние» для данной страницы.. После всего, в контролере header.php добавить строку.

$this->data['имя_переменной_с_сылкой'] = $this->url->link('директория_шаблона/имя_файла', '', 'SSL');

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

Подробнее как создать страницу в OpenCart я описал в статье по ссылке.

Подводный камень №4. Когда вы все сверстали, у вас может оказаться, что все равно где-то окажется картинка со статичной ссылкой на изображение или статичный текст. Причем эту картинку или текст нельзя отнести к модулю. Пример картинки в красном квадрате:

101_

Это рекламный баннер, впихивать его в модуль «Баннер» можно, но, если владелец интернет-магазина захочет разместить список баннеров внизу. Мы не должны занимать целый модуль под такие мелочи. Выход тут один, дополнить панель администратора новой опцией – выбор изображения. Как расширить настройки панели администратора, я рассказал в этой статье.

 5. Обязательные стили

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

111_

Вход в личный кабинет выглядит как-то так:

121_

Если включить модули, то с ними будет тот же эффект.

Вся проблема заключается в том, что за оформление контента (за вывод содержимого сайта, корзины, поиска по товарам и модулей) отвечает некое количество стилей, а т.к. мы не подключаем «stylesheet.css» шаблона default и следовательно у нас этих стилей нет, поэтому и выводиться все не так как должно. Поэтому стили мы брать будем из catalog\view\theme\default\stylesheet\stylesheet.css и вставлять в наш css файл. 

Возможно, возникнет вопрос, а почему бы нам просто не подключить файл  целиком«stylesheet.css»? Ответ: если мы его подключим, у нас могут совпасть селекторы с нашим html+css прототипом и как результат стили потруться стилями stylesheet.css, что вызовет к неправильному отображению сайта. Поэтому будем работать по «чистому», возьмем именно те стили которые нам нужны.

Рекомендую работать в Nootepad++ или другом аналогичном средстве, выделяем нужное слово и копируем себе все строки с подсветкой.

Обязательно понадобяться следующий стили (скопировать в наш css файл)

  1. Первые делом, скопируем стили, отвечающие за отображение кнопок, т.е. все что относиться к «.button» и «.buttons».
  2. Все стили что относиться к «.cart-info», «.cart-total», «.cart-module», «#cart», «.mini-cart-info», «.mini-cart-total» в общем все где есть слово cart, отвечают за отображение «Корзины», копируем себе.
  3. Все стили что относиться к «box-heading», «.box-content», «.box-product» и «.box-category», в общем где есть «box» отвечает за отображение модулей.
  4. Все стили что относиться к «.content».
  5. Все стили что относится к «.category-info», «.category-list».
  6. Все стили что относятся к «.manufacturer-list», «.manufacturer-heading» и «.manufacturer-content»
  7. Все стили что относятся к «.product-filter», «.product-compare», «.product-list», «.product-grid», «.product-info» отвечают за оформление страницы при просмотре отдельного продукта.
  8. Все стили по «мелочовкам», все что под продуктами, это «.review-list», «.attribute», «.compare-info», «.wishlist-info»,
  9. Все стили что относятся к «.login-content».
  10. Все стили что относятся к «.order-list», «.order-detail».
  11. Все стили что относятся к «.return-list», «.return-product», «.return-name», «.return-model»,  «.return-quantity», «.return-detail», «.return-reason», «.return-opened», «.return-captcha».
  12. Все стили что относятся к «.download-list».
  13. Все стили что относятся к «.checkout», «.checkout-heading», «.checkout-content», где есть слово «checkout», все они отвечают за правильное отображение «Оформление заказа».
  14. Все что относиться к «.htabs», «tab-description», «tab-attribute», «tab-review» отвечают за таблицу «Описание/Характеристика/Отзывы» что внизу при выборе товара
  15. Все что относиться к «.warning», везде где есть слово «warning», отвечает за вывод предупреждений, например при слишком коротком отзыве к товару.

6. Подгоняем оформление контента и модулей под дизайн html+css макета

Здесь дать конкретных рекомендаций, что и как сделать я не смогу. Смотрим, какой стиль, за что отвечает и если есть необходимость редактируем его, до тех пора, пока не будет достигнута схожесть с прототипом. Или как другой вариант наполняем модули, html кодом нужных нам фрагментов из прототипа.

Как пример, рассмотрим реальную ситуацию, в html+css прототипе допустим есть колонка с категориями и приглашение в личный кабинет (отмечено красной рамкой)

131_

Модуль «Категории» нужно оформить как колонку «CATEGORIES».

Модуль выводящий приглашение в личный кабинет по умолчание в OpenCart отсутствует, ищем в Интернете что-то похожее, далее устанавливаем и редактируем, пока не будет сходство.

Представление модулей располагается в директории «catalog\view\theme\имя_темы\template\module»

На этом описание методики верстки можно остановить, данные 6 шагов, достаточны для того что бы на начальном этапе понимания OpenCart создать свой собственный шаблон. Со временем, конечно же у вас набьется рука и вы выработаете свои принципы, данный материал не стоит рассматривать как идеальный и не оспоримый. Удачи!

 

Наверх

© Сайт справки 2024