Редактирование главной страницы opencart
У меня такой вопрос, как можно изменить вид главной страницы opencart? На главной странице выводится описание и список популярных товаров, нужно к цене товаров добавить единицы измерения(сейчас цена 300 руб., а нужно сделать 300 руб./шт.), эта информация находится в бд. В исходниках главной страницы, в папке common, я ничего не нашел, т.е. там даже нет работы с бд(с моделью). Как это понять, и как на страницу выводятся товары, повторюсь, в исходниках такого я не нашел. Помогите.
На главной странице, в OC, все выводится с помощью модулей. В админке сайта можно нужный модуль «повесить» на схему, например «Главная». По этому, смотреть Вам нужно именно нужный модуль. В вашем случае, я полагаю, надо смотреть модуль «Рекомендуемые» (featured) или «Последние товары» (latest) или «Акция» (special) или «Лидеры продаж» (bestseller). Логика здесь такая: контроллеры расположены в директории catalog/controller/extension/module/ (или без extension, в зависимости от версии), «вьюхи» — внешний вид: catalog/view/theme/название_вашего_шаблона/template/extension/module/ вот их и надо править. Только вот ваши
Пошаговое руководство по верстке на опенкарт. Глава первая: введение и главная страница
В этой главе мы поговорим об опенкарт и научимся изменять шаблон, а также сверстаем главную страницу.
Несмотря на то, что OpenCart является довольно распространенной CMS, полного, подробного и актуального мануала по верстке для новичков для OpenCart в сети нет. Даже у меня на блоге пока только отдельные уловки по работе с данной системой. Давайте попробуем восполнить этот пробел и на конкретном примере научимся верстать под OpenCart 1.5.
Стоит отметить, что верстка под любую КМС остается версткой – мы просто располагаем элементы соответственно макету от дизайнера. Просто в каждом случае необходимо узнать, какие именно файлы менять и не забывать об их взаимосвязи. В этом плане опенкарт имеет некоторые отличия от интеграции верстки в вордпресс, к примеру.
Итак, начнем с создания шаблона. В опенкарт шаблон – это набор файлов с расширением tpl. По сути дела это обычный php файл – в нем можно писать php код, заключенный в соответствующие теги, а также html разметку. Мы не будем делать новый шаблон, а начнем править уже имеющийся. В моем случае это обуславливалось тем, что интернет магазин уже имел на страницах практически все необходимые элементы (точнее, блоки элементов), мне надо было только изменить их внешний вид. Справедливости ради, весьма кардинально.
Итак, выберите любую тему (они находятся по адресу catalog\view\theme) скопируйте её и начинайте менять. Начнем с главной страницы — catalog\view\theme\tea\template\common\home.tpl. Тема у нас называется tea, у вас, скорее всего будет так: catalog\view\theme\default\template\common\home.tpl
Посмотрим на главную страницу:
Она весьма отличается от остальных, поэтому можно смело удалить все из файла home.tpl и начать верстать с нуля. Здесь нет ни футера, ни хедера, только логотип, меню и еще картинка. То есть начало у нас такое:
Далее стили. Убираем отступы у боди и задаем размер шрифта по умолчанию для документа:
Теперь подключаем парочку стилей, которые нам понадобятся
Сама верстка чрезвычайно проста: обертка (wrapper) – в ней картинка, затем див, в котором сверху вниз див с парочкой спанов и меню под ними. А также еще сбоку картинка.
Если вы не знаете ваш код меню, то ищите его в той же папке (common) в файле header.tpl. А мы наше меню немного облагородим. Заставим выезжать и сделаем подложку при наведении:
Вроде бы теперь главная страница у нас соответствует макету. Однако, мы делаем сразу же адаптированный сайт, хорошо отображающийся и на различных мобильных устройствах. Поэтому смотрим макет адаптивки:
Что мы видим? Как только ширина экрана будет меньше 750px, мы все центрируем, добавляем отступы, а меню делаем столбиком. Насчет меню – не самое стандартное решение в данном случае, на других страницах будет обычное адаптивное. Но, что делать – такой дизайн – я всего лишь верстальщик. Итак, стили:
Также необходимо изменить логику выезда подменю: не по наведению, а по клику и убрать ссылку с первого пункта.
Теперь проверяем, мобайл френдли ли наш сайт по мнению основных поисковых систем?
Все отлично! У вас может возникнуть вопрос: а чем тогда отличается данная верстка от обычной, без натяжки на кмс опенкарт? В данном случае – только кодом меню. Но я и предупреждал, что ничего сложного нет.
В следующих главах мы научимся натягивать верстку опенкарт и для других страниц.
Автор этого материала — я — Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML — то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
заметки, верстка, opencart, opencart
Где лежит каркас страницы index на движке Opencart?
Я сначала пытался объяснить, как устроен Opencart, чтобы вам было легко потом находить, какие шаблоны используются на конкретной странице, но получается, что это будет слишком объёмно. Поэтому я представлю ситуацию, когда используется стандартная установка Opencart.
Заголовочная часть HTML-кода, шапка страницы, плюс выпадающее меню категорий, плюс уведомления — <корень сайта>/catalog/view/theme/<название шаблона>/template/common/header.tpl
Футер — <корень сайта>/catalog/view/theme/<название шаблона>/template/common/footer.tpl
Контент — зависит от текущего пути. Например, если текущий путь — product/product (страница товара), то шаблон можно найти в <корень сайта>/catalog/view/theme/<название шаблона>/template/product/product.tpl. Если корневая страница сайта (вы её назвали index), то её шаблон лежит в <корень сайта>/catalog/view/theme/<название шаблона>/template/common/home.tpl.
Левая колонка — <корень сайта>/catalog/view/theme/<название шаблона>/template/common/column_left.tpl
Правая колонка — <корень сайта>/catalog/view/theme/<название шаблона>/template/common/column_right.tpl
Служебная часть перед контентом — <корень сайта>/catalog/view/theme/<название шаблона>/template/common/content_top.tpl
Служебная часть после контента — <корень сайта>/catalog/view/theme/<название шаблона>/template/common/content_bottom.tpl
<название шаблона> можно узнать на странице настройки магазина в админке: Админка → Меню «Система» → пункт «Настройки» → ссылка «Изменить» напротив текущей конфигурации → вкладка «Магазин» → пункт «Шаблон».
Всё содержимое обычно компонуется из этих кусков.
Правая и левая колонки, а так же служебные части перед и после контента обычно заполняются модулями — в зависимости от настроек модулей. Эти четыре шаблона лучше не трогать, если вы не уверены до конца, что делаете.
Настройка отображения страницы
OpenCart версии 3.* позволяет редактировать визуальное отображение страницы и отдельных ее элементов через административную панель.
В базовой версии OpenCart для каждого типа страницы задается свой тип макета. В установленной версии уже имеется свой набор таких макетов. Вы можете использовать х. Однако в ситуации, когда требуется незначительные изменения вы можете как отредактировать их, так и создать новый. А затем использовать новый макет на сайте. Для этого необходимо зайти в раздел меню Дизайн – выбрать подраздел Макеты. Если вам необходимо отредактировать существующий макет – необходимо нажать синюю кнопку редактирования.
Форма редактирования содержит следующие настройки:
Название модуля – название модуля который вы используете
Магазин – название магазина отсеется по умолчанию (за исключением случаев, когда вы работаете с мультимагазинами – в данном случае необходимо выбрать нужный магазин из выпадающего списка).
Путь – это url который используется для страниц с данным типом макетов.
Расположение модулей – выбираете место расположения модуля, который вы хотите использовать на данном типе страниц: левая или правая колонка, верх или низ страницы. В зависимости от сделанного вами выбора модуль в клиентской части на данном типе будет располагаться согласно вашего выбора.
Редактор шаблона. В данном подразделе можно редактировать шаблоны. Для того чтобы попасть в него вам необходимо выбрать раздел Меню Дизайн – Редактор шаблона.
Если вы не разбираетесь в коде, оставляйте все по умолчанию, не внося изменений. Обратитесь к профессионалам, если вам необходимо внести изменения.
Редактор языка. Позволяет редактировать языковые переменные на сайте: названия языка для пользователей. Не работает без установленного языкового пакета. Чтобы осуществить редактирование необходимо зайти в раздел меню Дизайн – Редактор языка. А затем внести необходимые изменения. Редактировать существующие данные или добавить новые путем нажатия синей кнопки плюс.
Для добавления баннеров на сайт необходимо зайти в раздел меню Дизайн – Баннеры. Нажать на синюю кнопку плюс – добавить. Откроется форма:
Название баннера – как называется ваш баннер.
Статус – определят включен или выключен баннер.
Заголовок – название изображения, которое будет использоваться в баннере.
Ссылка – ссылка которая ведет на страницу сайта. Это может быть статья, категория, производитель, продукт.
Изображение – непосредственно изображение баннера.
Порядок сортировки — порядок показа баннера.
После внесенных изменения необходимо их сохранить.
В одном баннере может быть использовано несколько изображений.
Для того, чтобы прописать ЧПУ не только для стандартных, но и служебных страниц – типа акканута или подобных в OpenCart 3 версии есть раздел меню SEO url. Зайти в него можно из Меню – Дизайн – SEO url.
Для добавления нажимаем кнопку добавить и заполняем открывшуюся форму
Запрос – адрес страницы, для которой прописываем ЧПУ
Ключ – непосредственно сам ЧПУ
Магазин – выбираем нужный магазин, как правило это магазин по умолчанию (за исключением случая мультимагазина)
Язык – в случае использования нескольких языков на сайте для каждой языковой версии страницы есть возможность создания своего уникальной ЧПУ.