opencart — верстка шаблона. Opencart верстка шаблона
opencart — верстка шаблона — информационные технологии сибири
верстка шаблона под opencart — ИСТОЧНИК
Примеры и цены правильной работы с OPENCART
Итак у вас есть HTML+CSS шаблон и из него надо сверстать шаблон для CMS OpenCart. Решить эту задачу как я вижу можно двумя путями:
- Взять шаблон default и подгонять его catalog\view\theme\default\stylesheet\stylesheet.css до тех пор, пока он не будет похож на наш HTML+CSS прототип. Далее отключаем/включаем некоторые модули соответственно и передвигаем их, все делаем через настройки админпанели до тех пор, пока все не будет на своих местах, например колонка «категории» слева, баннеры снизу и т.п., вообщем все как на HTML+CSS прототипе.
- Второй путь сложнее, он применим когда наш шаблон не получается «натянуть» на 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, внутри мы увидим:
| <?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?> <div id=«content»><?php echo $content_top; ?> <h2 style=«display: none;»><?php echo $heading_title; ?></h2> <?php echo $content_bottom; ?></div> <div class=«clearthis»> </div> <?php echo $footer; ?> |
Содержимое нам говорит, что первым делом выводиться представление шапки $header, далее файлы представления левой и правой колонки, потом контент сверху/снизу и наконец подвал сайта $footer.
Представление для левой/правой колонки и контент сверху/снизу выводят только модули, если открыть один из них (файл представления), то мы увидим цикл, печатающий содержимое модулей.
| <?php foreach ($modules as $module) { ?> <?php echo $module; ?> <?php } ?> |
Если модули отключены в панели администратора, то данные файлы представления (.tpl) ничего не выводят.
Откроем наш html файл прототипа, посмотрим на него, нам нужно выявить, где начинается и заканчивается шапка сайта и его подвал. Все что между ними это набор модулей, которые нам нужно будет оформить соответственно.
Пример html+css шаблона:
inter54.ru
Верстка шаблона Opencart • Фриланс-проект ≡ Заказчик Иван Волков
К сожалению исполнитель после 2 недель и полной оплаты не выполнил проект, в связи с этим заново ищу исполнителя.
Сделка исключительно через сейф, и никак по другому.
Необходимо доверстать шаблон на Opencart
Что есть:
1. Готовый дизайн сверстанный на 75%. (Остальные 25% надо доверстать из PSD или AI файлов)
2. Исходники дизайна.
Что необходимо:
1. Сверстать шаблон для использования в последней версии Opencart. Шаблон должен быть кроссплатформенным (адаптивная верстка, twitter bootstrap подойдет)
2. Установить шаблон на голую Opencart и отладить работу всех элементов на хостинге заказчика. (Opencart стоит)
3. Подождать 2-3 дня пока сайт наполниться товарами (55 позиций).
4. Если будут найдены недоработки по шаблону, доработать их.
Сверстанные страницы:
http://onuka.org/
http://onuka.org/page2.html
http://onuka.org/page3.html
Чего нет даже в дизайне:
1. Корзина (подойдет стандартная в цветовой схеме и шрифтах сайта)
2. Личный кабинет (то же самое что и корзина)
3. Страницы не с товарами (контакты и/или информационный раздел) - должен быть по типу инфоблока.
Срок- до 3х дней.
Приложения 3
freelancehunt.ru
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотра
Нажми для просмотраfuner.ru
