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

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

 

 

Верстка шаблона под OpenCart

 

 

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> имел статичную ссылку

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

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

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

на

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

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

 

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

 




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

Комментарии
  1. купить диван пишет:

    Спасибо за статейку, щас буду пробывать на своем сайте

  2. admin пишет:

    Всегда пожалуйста =)

  3. Валерия пишет:

    Здравствуйте!
    Вопрос такой, у меня есть меню: 1.Новости
    1.1.О нас
    2.Каталог товаров
    2.1.Категории товаров
    2.1.1.Подкатегории
    3.Прайс-лист
    3.1.Система скидок
    4.Контакты
    4.1.Вакансии
    То есть, меню выпадающее+в каталоге товаров должны отображаться актуальные категории. Как можно это реализовать?
    И еще вопрос, буду ставить плагин интеграции 1С. То есть поменяются категории товаров в 1С, они соответственно поменяются и тут. Будет ли модуль категории автоматически обновляться?

  4. admin пишет:

    Добрый день Валерия.

    Я в данный момент не могу вам корректно ответить, нужен CMS под рукой. В ближайшие дни, я дам ответ.

    Насчет плагина сказать не могу, все зависит от его автора, как он его реализовал. Попробуйте посмотреть php файлы плагина, обычно в шапке указывается e-mail адрес разработчика.

  5. admin пишет:

    Как я понял, на данный момент у ваc в «категории товаров» нет категорий с подкатегориями?

    Если нет, возможно у вас не написан соответствующий PHP код в шаблоне шапки, т.е. в «www\catalog\view\theme\имя_темы\template\common\header.tpl». Посмотрите в данном файле, есть ли у вас цикл «foreach ($categories as $category)» ?

  6. Валерия пишет:

    Буду благодарна за ответ)

  7. Валерия пишет:

    Здравствуйте!
    Такой существует, значит проблема была в этом скрипте?

  8. admin пишет:

    Хм… проблема думаю в php скрипте, в настройках OpenCart не припоминаю что-то, что могло бы отключить вывод каталогов.

    Валерия, еще раз, на данный момент у вас в меню в категории товаров пусто?
    А в самой CMS OpenCart каталоги и подкаталоги созданы?

  9. lexy пишет:

    Скажите пожалуйста, все сделал как написано, на денвере, и сайт получился 1 в 1, но после того как отключил интернет, все пропало, включая сетку (расположение модулей), при этом при процессах копирования, я оставил все ссылки на сайт-пример по которому делал шаблон, что картинки и css ссылались на оригинальный сайт, но как их скачать и где прописывать пути? Спасибо!!

  10. admin пишет:

    Добрый день Алексей, картинки и файлы css желательно должны быть у вас на хосте.

    Итак, где должны быть картинки и css файлы в OpenCart?
    Картинки для вашей темы должны располагаться в директории «\www\catalog\view\theme\имя_темы\image»
    Файлы CSS для вашей темы должны располагаться в директории «\www\catalog\view\theme\имя_темы\stylesheet».
    Если вы делали как в посте, то имя темы у вас «MyTempl».

    Далее, как скачать картинки и css файлы с вашего сайта примера?
    Скачать картинки с вашего сайта-примера вы можете с помощью правой кнопкой мышки, «сохранить картинку как».
    Для того что бы скачать css файлы, нужно посмотреть html код страницы (для Chrome, правая кнопка мышки «просмотр кода страницы») и найти там тег . В «href» данного тега указывается ссылка на css файл. Наводите курсор мышки на ссылку и нажимаете правую кнопку мышки, выбираете «сохранить ссылку как» (для Chrome).

    После того, как вы скачаете картинки и css файлы в директории «image» и «stylesheet», вам нужно прописать путь до них. Путь прописывается в tpl файлах, находите тег img интересующей вас картинки и в src заменяете старый путь на «catalog/view/theme/имя_темы/images/имя_картинки». Тоже самое для css.

    Если все получиться, можете попробовать сделать как в разделе «3. Боремся с тегом » данного поста. Данный прием, освобождает нас от зависимости от имени темы.

  11. lexy пишет:

    да я вроде так и сделал, но видно что ява скрипты — .js и css не работают, весь текст категори прилип к левой строне экрана, все не на своих местах, ну и картинок нет. Пробую щас прописывать путь в header.tpl картинку с лого и stylesheet.css, путь до картинки вроде удалось «угадать» еще пробывал применять переменую $logo в нем, но она все равно не тех размеров и не на своем месте, а вот css так походу не удалось. Я когда делал тему из html-примера, копировал полностью по частям, header, footet, home, как у Вас написано тут, но сосвсе остальным, путями итп… Был рад как ребенок когда заработало сначало :))

  12. admin пишет:

    Если все не своих размеров и не в том месте, значит не подключились стили, т.е. css файлы.

    В целом говоря, первая преграда, с которой сталкиваешься когда адаптируешь html-макет под шаблон OpenCart — не подключаются картинки, css и js файлы. Надо их сохранить в соответствующие папки OpenCart и аккуратно прописать пути в tpl.

    Удачи!

  13. lexy пишет:

    Ну вот вроде все пути прописал, два часа делал, разберался с директориями чтобы сайт подгружал их а не «оригинальный сайт» из интернета, откллючил интернет и начал пробывать, вроде все получилось, и целый час разбирался как подвинуть у горизонтальной менюшки «категорию», сравнивая с оригиналом….ну никак не мог вьехать…моя больше чем у оригинала и все тут. Включаю интернет и тут вдруг все нормально! Оказывается нашел у оригинала(уже не помню где) вот такие строки:

    скрин: http://cs616025.vk.me/v616025383/13715/HgFDLmgfLyo.jpg
    Я так понимаю менюшка эта использовала гугловские шрифты. поэтому не умещалась у меня.
    И в вертикальном левом меню, некоторые категории перенеслись на новую строку (названия из двух слов). Надеюсь это из за этих гугл шрифтов..а то уже башку «сломал») По размерам, если выделить «О нас» разные с «сайтом-примером», но до тех пор пока не включишь интернет.
    Спасибо за материал, Респект! 🙂

  14. admin пишет:

    =)
    Не всегда все можно сделать в один присест, отдохните … и пробуйте с новыми силами. В дальнейшем вы набьете руку.

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

    Спасибо что читаете мой блог

  15. lexy пишет:

    Блог отличный! Рад что нашел. Вот только как теперь быть с главным меню (о нас, доставка..), и категориями в левой колонке 🙂 Их нет в админ панели, а на главной есть.

  16. admin пишет:

    Вы наверно еще не дошли до «Методика верстки шаблона под OpenCart ч.2» раздел «6. Подгоняем оформление контента и модулей под дизайн html+css макета».

    Столбец «категории» это уже не просто html-текст шаблона, это уже динамическое содержимое. В понятие CMS OpenCart столбец «категории» это модуль «категории». В системе он уже есть и готов к работе, от вас требуется править tpl шаблон модуля «категории» пока не будет достигнуто сходства с вашим столбцом «категории».

  17. Сюзанна пишет:

    Спасибо за статью, очень помогло, но у меня не получается 3 пункт, сделала всё как Вы написали, но путь картинок всё равно не корректен , выдает такое —
    Заранее спасибо

  18. admin пишет:

    Сюзанна, попробуйте еще раз отправить комментарий. Не понятно что за ошибка.

  19. Яна пишет:

    Спасибо, полезная статьи попробую сверстать.

  20. Ольга пишет:

    Добрый день! А подскажите пожалуйста: на мониторе компьютера сайт выглядит более менее нормально, а вот когда заходишь с телефона, все слетает. Логотип наезжает на поиск, баннер выезжает за пределы сайта ну и т.д. В чем проблема? Где нужно поменять что-то, чтобы все встало на свои места? Спасибо!

  21. admin пишет:

    Добрый день Ольга!

    Компоненты сайта могут сдвигаться, при неграмотной верстке ИЛИ от некачественного браузера на телефоне.
    Решить эту проблему в одно действие вряд ли получится, надо смотреть, оценивать.

  22. Митрий пишет:

    Как зделать меню в виде рулетки?автомата однорукого бандита.

  23. admin пишет:

    Добрый день Митрий!

    Для данной задачи нужно писать код, на словах не расскажешь. Если интересует, дайте мне знать и мы обговорим стоимость по email.

  24. Дмитрий пишет:

    Я не хочу из сайта сделать рулетку.просто хочется меню сделать необычное интересное.

  25. admin пишет:

    Дмитрий, если интересует, мы можем обговорить подробности и стоимость работы по email.

  26. Вячеслав пишет:

    admin, добрый день. Напишите, пожалуйста, на email, есть несколько вопросов по поводу заказа дополнительного функционала.

  27. admin пишет:

    Я ответил по email.

  28. Дмитрий пишет:

    8******@mail.ru.Дмитрий.

  29. admin пишет:

    Я ответил по email.

  30. Ирина пишет:

    Пожалуйста помогите отредактировать шаблон надо сдвинуть в низ модули ставлю и виджеты вывожу все это друг на друга налезает помогите пожалуйста удлинить шаблон

  31. admin пишет:

    Ирина, я выслал вам по email свой номер аськи.

  32. Людмила пишет:

    Здравствуйте. Сайт на мониторе больше 12 дюймов и в опере, мозиле, хроме съезжает. В частности не корректно отображается шапка. Опенкарт 1.5.6 на шаблоне пав. Хотелось бы поправить недоработки. Готова обсудить более детально подробности и стоимость работы.

  33. admin пишет:

    Добрый день Людмила, готов обсудить, я написал вам на почту.



Ваш комментарий


Ответ в цифрах

 
© s-engineer.ru, 2012-2017 | Все права защищены