Где в опенкарт файл главной страницы
В этой главе мы поговорим об опенкарт и научимся изменять шаблон, а также сверстаем главную страницу.
Несмотря на то, что OpenCart является довольно распространенной CMS, полного, подробного и актуального мануала по верстке для новичков для OpenCart в сети нет. Даже у меня на блоге пока только отдельные уловки по работе с данной системой. Давайте попробуем восполнить этот пробел и на конкретном примере научимся верстать под OpenCart 1.5.
Стоит отметить, что верстка под любую КМС остается версткой – мы просто располагаем элементы соответственно макету от дизайнера. Просто в каждом случае необходимо узнать, какие именно файлы менять и не забывать об их взаимосвязи. В этом плане опенкарт имеет некоторые отличия от интеграции верстки в вордпресс, к примеру.
Итак, выберите любую тему (они находятся по адресу 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, мы все центрируем, добавляем отступы, а меню делаем столбиком. Насчет меню – не самое стандартное решение в данном случае, на других страницах будет обычное адаптивное. Но, что делать – такой дизайн – я всего лишь верстальщик. Итак, стили:
Также необходимо изменить логику выезда подменю: не по наведению, а по клику и убрать ссылку с первого пункта.
Теперь проверяем, мобайл френдли ли наш сайт по мнению основных поисковых систем?
Все отлично! У вас может возникнуть вопрос: а чем тогда отличается данная верстка от обычной, без натяжки на кмс опенкарт? В данном случае – только кодом меню. Но я и предупреждал, что ничего сложного нет.
В следующих главах мы научимся натягивать верстку опенкарт и для других страниц.
Где можно найти раздел "Статьи" и его содержимое в файловом доступе системы управления. Т.е., к примеру, я хочу изменить данные страницы не через графический интерфейс, а непосредственно через файл, или, к примеру, узнать имя переменной этой статьи, чтобы вставить ссылку этой статьи в код какой-либо из страниц. В footer.tpl я вижу только цикл, который берет каждую из статей и выводит на экран, но понять, откуда он их берет, я не могу)
Вот, к примеру, откуда он достает href, title. Заранее спасибо!)
Данные самой статьи хранятся в БД, а не в файлах. Вы можете изменить их с помощью файлов, надо создать скрипт, для подключения к БД, выборке статей и выборки нужной статьи, ее вывода и ее редактирования, а после записи.
Теперь понятно) А можно как-то вывести отдельную статью, зная ее индекс, как этот скрипт будет выглядеть?
У вас куча мешанины в голове сейчас судя по вопросу. И вы пытаетесь придумать решение какой-то задачи плохо понимаю, как в принципе работает Opencart.
1. Лучше задайте вопрос не по вашему решению задачи, а по тому как вашу задачу лучше решать.
2. Почитайте как в принципе устроен Opencart. Что такое База данных, Модель, Контроллер, Шаблон. Если вы планируете решать свои задачи самостоятельно, лучше для начала разобраться с основами.
Теперь по содержимому вопроса:
Т.е., к примеру, я хочу изменить данные страницы не через графический интерфейс, а непосредственно через файл
В footer.tpl я вижу только цикл, который берет каждую из статей и выводит на экран, но понять, откуда он их берет, я не могу)
Да, спасибо, уже понемногу разбираюсь. А задачу свою решил вставив элемент из массива $informations (в моем случае), указав индекс элемента, а дальше вытащил значение по ключу, который был нужен. С php и Opencart, впринципе, только первый день начинаю работать:)
От автора: если вы дошли до этой статьи, то вы уже должны уметь находить шаблон макета домашней страницы. Быстрый обзор всех вариантов и папки default должны подсказать вам, что он находится в default/template/common/home.tpl. Сегодня мы научимся делать в OpenCart изменение шаблона.
Как вы могли заметить, route домашней страницы содержит значение common/home. Как мы уже говорили ранее, вы всегда можете по роуту найти подходящий файл шаблона макета.
Если взглянуть на файл home.tpl, можно понять, что большая часть контента генерируется элементами типа $header, $footer и т.д. Вы уже знаете, что контент переменных $header и $footer хранится в файлах header.tpl и footer.tpl в папке template/common.
В стандартной теме OpenCart на домашней странице нет модулей в позициях column left и column right. То есть переменные $column_left и $column_right ничего не делают. Большая часть контента, помимо хедера и футера, находятся в $content_top или $content_bottom. Модули slideshow и featured присвоены позиции content top, а модуль carousel присвоен позиции content bottom макета home. Давайте более подробно разберем, как эти модули прикрепляются к макету страницы home.
Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC
В курсе 39 уроков | 15 часов видео | исходники для каждого урока
Каталоги дистрибутива
Работая с магазином OpenCart, не часто, но приходиться, обращаться к содержанию движка. Без опыта, разобраться, где что искать в каталогах движка не просто и требует пояснений.
Чтобы понять структуру OpenCart, нужно понимать, что построен движок по принципу MVC (ModelVewController).
- Файлы Controller отвечают за обработку запросов пользователя и вызов ресурсов по этому запросу. Файл контроллера — это место, где вы можете загружать языковые файлы для преобразования текста в переменные, которые будут использоваться в файле шаблона;
- Файлы View хранят шаблоны данных того, что будет видеть пользователь;
- Файлы раздела Model хранят процедуры обращения к базе данных.
Все компоненты конструкционного шаблона MVC работают во взаимодействии.
Теперь смотрим дистрибутив OpenCart. Он состоит из двух частей: фронтэнд для пользователей и бэкэнд для администратора. Вся административная часть лежит в каталоге admin. Часть для пользователя лежит в каталоге catalog. Обе части движка имеют одинаковую структуру и используют одну базу данных.
- В папке images собираются все картинки сайта магазина.
- В папке system лежат все системные файлы магазина.
Открыв каталоги admin и catalog, вы увидите, что они состоят из каталогов со знакомыми названиями Model, Vew, Controller.
Кроме этих конструкционных каталогов присутствует каталог с файлами перевода language. Адреса каталогов перевода: /language, admin/language, catalog/language.
Кэш OpenCart 3, если он включен, собирается в каталогах image/cache и system/storage/cache.
Примечание: На OpenCart 3 очистку кэша НЕ нужно проводить вручную, авторы добавили кнопки очистки кеша темы и конструктора на панель администратора. Кеш легко очисть на вкладке Панель состояния>>> Настройки разработчика (значок шестерёнка справа вверху). Там же кэш можно отключить.
Тему (шаблон) сайта магазина вы найдете в каталоге catalog/view/theme. Тема по умолчанию называется default.
Назначение модуля через back end
На этом экране очень мало настроек. Нам нужна колонка layout и position. Судя по значениям, модуль slideshow будет отображаться в content top макета home.
Здесь можно назначить slideshow на любой макет в любую позицию с помощью кнопки add module. Разберем другой пример. На странице списка модулей кликните на ссылку edit модуля featured.
Значения layout и position совпадают со значениями модуля slideshow. Теперь вы знаете, как модули отображаются на домашней странице. Вы могли заметить кнопку remove. С ее помощью можно снять назначение модуля с определенного макета. Откройте настройки модуля carousel сами!
5 файлов
htaccess.txt. Это классический файл для управления поведением веб-сервера apache на вашем хостинге. Используется для включения ЧПУ OpenCart и для указания основного каталога установки OpenCart.
Файл config-dist.php. Основной файл системы с её параметрами. Для включения файла в работу его нужно переименовать в файл config.php . Аналогичное переименование нужно сделать для аналогичного файла в каталоге admin. По умолчанию этот файл пустой. После установки OpenCart в этом файле указаны данные базы данных и данные администратора.
Php.ini. Этот файл для задания параметров серверам php и mysql .
Файл robots.txt. Классический файл для управления работой поисковых систем. Авторы этой сборки составили неплохой файл robots.txt и менять его, на первых порах, нет смысла.
В английской версии дистрибутива файла robots.txt нет и его создавать и добавлять в корень сайта нужно самостоятельно.
Рекомендую на время оформления магазина, использовать файл robots.txt со следующим содержанием:
Такой файл robots.txt полностью закроет содержание сайта магазина от поисковых ботов.
Файл index.php является запускающим и обязателен для любой сборки.
Заключение
В этой статье я показал, в общих чертах, как устроен дистрибутив OpenCart. Это информация позволит вам найти нужный файл системы в случае надобности.
Настройки контроллера
Давайте попробуем понять роль контроллера в OpenCart. Контроллер — это первый элемент, который будет выполняться при запросе любой страницы. Прежде всего, он отвечает за настройку переменных, которые будут позже использоваться в представлении для отображения. Помимо этого в контроллере происходит множество других вещей:
Загружаются языковые файлы, чтобы можно было использовать языковые переменные для отображения статического текста.
Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC
В курсе 39 уроков | 15 часов видео | исходники для каждого урока
Загружаются файлы модели, чтобы была возможность использовать методы, определенные в этих моделях для извлечения данных из базы данных back-end.
Определяется файл шаблона, который будет использоваться представлением.
Настраиваются пользовательские переменные с назначенным им контентом, который будет использоваться в файле шаблона.
Объявляются дочерние шаблоны, которые могут отображаться как часть основного шаблона. Простейшим примером этого являются шаблоны хедера и футера, которые вы хотите отобразить в своем основном шаблоне.
И наконец, устанавливаются значения для материала, такого как название документа, мета-описание и т. д.
Думаю, теории достаточно. Посмотрим, как выглядит наш пользовательский контроллер. Создаём новый каталог custompage в папке catalog/controller. Создаём новый файл mycustompage.php в catalog/controller/custompage. Вставляем в созданный файл контроллера «mycustompage.php» следующий код.
При своём изучении CMS OpenCart я допустил принципиальную ошибку и начал изучение с установки и настройке системы. Впоследствии, это привело к сложностям тонких настроек магазина и потребовало вернуться к изучению самого дистрибутива OpenCart и принципов его работы.
Исправление макета домашней страницы
Поскольку вы теперь знаете, как назначать и снимать модули с определенных страниц и позиций, мы выполним эти операции для макета домашней страницы. Зайдите в панель администратора и перейдите в «Extension > Modules». Откроется список модулей.
Сейчас мы удалим все модули, назначенные на домашнюю страницу. Кликните на ссылку edit модуля slideshow. Нажмите на remove, чтобы снять назначение модуля с макета home. Далее кликните save для сохранения изменений. Повторите процедуру для модулей carousel и featured.
Если теперь открыть домашнюю страницу, она должна быть почти пустой, за исключением хедера и футера. Не беспокойтесь, мы на правильном пути! Далее мы назначим ряд модулей в column left и column right домашней страницы. Давайте вернемся на страницу со списком модулей.
Кликните на ссылку edit модуля category. В правом нижнем углу страницы появится кнопка add module, по клику на которую в список добавится новая строка. В этой строке в колонке layout выберите home, position выберите column left. Теперь кликните на save для сохранения изменений.
Кликните на ссылку edit модуля account. Чтобы добавить новую строку, кликните на add module. В новой строке в колонке layout выберите home, position выберите column right. Сохраните изменения кликом по save. Давайте теперь откроем домашнюю страницу:
Назначение модуля через back end
На этом экране очень мало настроек. Нам нужна колонка layout и position. Судя по значениям, модуль slideshow будет отображаться в content top макета home.
Здесь можно назначить slideshow на любой макет в любую позицию с помощью кнопки add module. Разберем другой пример. На странице списка модулей кликните на ссылку edit модуля featured.
Значения layout и position совпадают со значениями модуля slideshow. Теперь вы знаете, как модули отображаются на домашней странице. Вы могли заметить кнопку remove. С ее помощью можно снять назначение модуля с определенного макета. Откройте настройки модуля carousel сами!
Изменения файлов макета
На данный момент мы внесли все коррективы в макет через back end. В этой секции мы добавим немного статичного контента в home.tpl. Если вам нужно добавить статичный текст в шаблон, не вставляйте его прямо в шаблон. Вместо этого выполните стандартный процесс для OpenCart. Давайте сделаем это.
Вы не будете напрямую редактировать файл home.tpl темы default, давайте перепишем его в пользовательской теме! Откройте catalog/language/english/english.php. В конец файла добавьте следующую строку перед ?>.
Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC
От автора: прежде чем приступить к работе, обратите внимание, что мы специально запланировали сразу ввести вас в статью. Поэтому предполагается, что у вас уже есть рабочая версия OpenCart создание страницы в которой вас интересует, и вы готовы работать.
Содержание дистрибутива – где что искать
Обратите внимание: Если вы берёте англоязычную версию дистрибутива на сайте тут или на GitHub автора тут, то загружать в корень своего сайта нужно только содержание каталога upload.
В состав дистрибутива (каталога upload) входят:
5 папок
Admin. Это административная часть магазина или его backend. По сути это сайт для администратора.
Catalog. Это витрина магазина доступная для посетителей. П сути это сайт для пользователей или frontend магазина.
Images. В этой папке все картинки магазина, включая каталог, картинки системы, а также картинки шаблонов. Кроме этого здесь есть папка cache для кеша сайта магазина.
System. Здесь системные файлы магазина, в том числе еще одна папка кеш: storage/cache.
Основной рабочий процесс
OpenCart построен с использованием популярного шаблона программирования MVC.
В этот шаблон добавлен еще один элемент под названием «L» — языковая часть, поэтому в OpenCart он называется шаблоном MVC-L. Я не буду вдаваться в детали MVC, поскольку это очень популярный и знакомый шаблон дизайна, и мы подробно рассмотрели его в других уроках. Тем не менее, нам все равно нужно увидеть, как проходит рабочий процесс при использовании этого шаблона.
Контроллер действует как точка входа для любой страницы, на которой вы определите большую часть логики приложения. Модель имеет дело с back-end базой данных, а представление отвечает за подготовку содержимого, которое будет передано конечному пользователю. В контексте OpenCart потребуется реализовать контроллер и представление, чтобы создать новую настраиваемую страницу.
Читайте также: