Opencart шаблоны как сделать

Закрыть ... [X]

opencart шаблоны как сделать  

6

 

Итак у вас есть 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, внутри мы увидим:

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

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

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

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

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

 

18_

 

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

 

17_

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

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

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

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

В файле 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» и в самом низу в условие

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

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

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

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

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

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

на

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

(если тэг <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, заменяя статичные данные на печать соответствующих переменных. Этот этап будет самым трудоемким.

 

Читайте вторую часть методики верстки

 

Вам будет интересно:


Буду признателен если вы поделитесь данным постом


Источник: http://s-engineer.ru/metodika-verstki-shablona-pod-opencart/


Поделись с друзьями



Рекомендуем посмотреть ещё:



Помогите - Как самому из psd сделать шаблон для OpenCart wMasteru Замена масла в акпп на тойота своими руками


Opencart шаблоны как сделать Opencart шаблоны как сделать Opencart шаблоны как сделать Opencart шаблоны как сделать Opencart шаблоны как сделать Opencart шаблоны как сделать Opencart шаблоны как сделать

ШОКИРУЮЩИЕ НОВОСТИ