От автора: если вы дошли до этой статьи, то вы уже должны уметь находить шаблон макета домашней страницы. Быстрый обзор всех вариантов и папки 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 часов видео | исходники для каждого урока
Получить курс сейчас!
Назначение модуля через back end
Авторизуйтесь в back end и перейдите в «Extensions > Modules». Здесь перечислены все модули системы. Кликните edit на модуле slideshow. Откроется интерфейс назначения модуля.
На этом экране очень мало настроек. Нам нужна колонка layout и position. Судя по значениям, модуль slideshow будет отображаться в content top макета home.
Здесь можно назначить slideshow на любой макет в любую позицию с помощью кнопки add module. Разберем другой пример. На странице списка модулей кликните на ссылку edit модуля featured.
Значения layout и position совпадают со значениями модуля slideshow. Теперь вы знаете, как модули отображаются на домашней странице. Вы могли заметить кнопку remove. С ее помощью можно снять назначение модуля с определенного макета. Откройте настройки модуля carousel сами!
Исправление макета домашней страницы
Поскольку вы теперь знаете, как назначать и снимать модули с определенных страниц и позиций, мы выполним эти операции для макета домашней страницы. Зайдите в панель администратора и перейдите в «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. В этой секции мы добавим немного статичного контента в home.tpl. Если вам нужно добавить статичный текст в шаблон, не вставляйте его прямо в шаблон. Вместо этого выполните стандартный процесс для OpenCart. Давайте сделаем это.
Вы не будете напрямую редактировать файл home.tpl темы default, давайте перепишем его в пользовательской теме! Откройте catalog/language/english/english.php. В конец файла добавьте следующую строку перед ?>.
Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC
В курсе 39 уроков | 15 часов видео | исходники для каждого урока
Получить курс сейчас!
$_[‘text_welcome’] = «Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.»; |
Теперь откройте catalog/controller/common/home.php. В этот файл контроллера мы добавим переменную языка из файла English.php, чтобы она стала доступна для отображения в home.tpl. В файле home.php перед следующей строкой
$this—>response—>setOutput($this—>render()); |
Вставьте эту
$this—>data[‘welcome_text’] = $this—>language—>get(‘text_welcome’); |
Так переменная $welcome_text будет доступна в файле шаблона макета точно так же, как и другие переменные. Теперь осталось подключить $welcome_text в home.tpl. Файл home.tpl должен выглядеть так:
<?php echo $header; ?> <?php echo $column_left; ?> <?php echo $column_right; ?> <div id=«content»> <?php echo $content_top; ?> <h1><?php echo $heading_title; ?></h1> <div><?php echo $welcome_text; ?></div> <?php echo $content_bottom; ?> </div> <?php echo $footer; ?> |
Я внес пару изменений в этот файл. Добавил переменную $welcome_text в тег div. Также удалил display:none у тега h1, теперь заголовок отображается. Ну и для лучшей читаемости отформатировал код. Конечный скриншот!
Необходимо отметить несколько важных моментов. Мы редактировали файлы English.php и home.php, делать это строго не рекомендуется. Мы сделали это, чтобы не усложнять пример. По-хорошему, нужно было использовать расширение OpenCart vQmod для редактирования файлов ядра.
Это был очень простой пример демонстрации модификаций макета домашней страницы. Мы добавили простой статичный текст, однако вы можете вытягивать более динамичную информацию из базы данных и отображать ее так же в шаблоне!
Конечно, это требует более глубоких знаний принципов работы модели OpenCart. Назначьте пару модулей на различные позиции, чтобы увидеть, как все работает.
Заключение
Надеюсь, эта серия уроков помогла понять, что такое тема в OpenCart, а также как настроить стандартную тему под себя.
Автор: Sajal Soni
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC
В курсе 39 уроков | 15 часов видео | исходники для каждого урока
Получить курс сейчас!
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видео
В этой статье описаны пути к файлам, которые нужно изменять для редактирования шаблона сайта OpenCart
Логотип и favicon(иконка)
Изменение логотипа и фавикона не требует от Вас специальных знаний, так как доступно редактирование с админки.
1. Dойдите в панель администратора Opencart.
2. Перейдите Система -> Настройки -> Изменить -> Вкладка «Изображения»
3. В появившейся вкладке жмем кнопку «Очистить» -> затем «Обзор» для загрузки нужного логотипа/фавикона соответственно.
В этой же вкладке можно задать желаемый размер для картинки товара на разных страницах интернет-магазина.
Шрифт и Цветовая гамма & Фон
Для удачного изменения шрифта или цвета отдельных элементов шаблона вы должны быть знакомы с азами html/css.
1. Подключитесь к FTP для редактирования файлов
2. Войдите в корневую папку вашего сайта с файлами Opencart (обычно www или public_html)
3. Перейдите catalog -> view -> theme-> ваша_тема(стандартная default)-> stylesheet -> stylesheet.css
4. Откройте css-файл stylesheet.css для редактирования
5. Задайте требуемый шрифт/цвет элементу шаблона
6. Сохраните изменения и обновите главную страничку сайта в браузере
Фон — Изменить цвет фона можно посредством редактирования значения «background-color» тэга «body».
Шапка (Верхняя часть сайта) & Подвал
1. Подключаемся к FTP используя фтп-менеджер для редактирования файлов
2. Перейдите в корневую папку интернет-магазина с файлами Opencart (обычно это www или public_html)
3. Перейдите catalog -> view -> theme-> ваша_тема(стандартная default)-> template -> common -> header.tpl
4. Откройте header.tpl для редактирования
5. Редактируем код под свои нужды используя html
6. Не забываем о сохранении изменений
Редактируем Подвал (Нижняя часть) — перейдите catalog -> view -> theme-> ваша_тема -> template -> common -> footer.tpl
Редактируем и сохраняем изменения.
Изменение внешнего вида модуля
Редактирование модуля не особо отличается от редактирования шапки, все отличие в размещение нужных файлов.
1.Перейдите в папку catalog -> view -> theme-> ваша_тема -> template -> module
2. Выбираем нужный нам модуль и жмем на редактировать
Для того, чтобы Вы знали какой файл править, приведу соответствие между англоязычным названием модуля(в фтп менеджере) и русскоязычным (в админке)
cart -> корзина
currency -> валюты
slideshow -> слайдшоу
carousel -> карусель
featured -> популярные
bestseller -> самые продаваемые
latest -> последние добавленные
3. Редактируем и сохраняем изменения.
Приветствую вас, уважаемые читатели cccp-blog.com! 🙂
Данной статьёй мы продолжаем цикл публикаций, посвящённый самостоятельному созданию Интернет-магазинов на базе OpenCart.
В качестве общей информации лишь напомню, что данный продукт входит в топ-10 бесплатных движков для создания Интернет-магазинов и является одним из лучших решений для быстрого старта небольших ресурсов, не требуя от создателей каких-то специальных навыков и знаний.
Итак, в своей предыдущей статье я помог вам преодолеть первый этап при создании сайта на базе CMS – установку движка. В итоге у вас уже есть готовый Интернет-магазин, который осталось настроить, чтобы ресурс был более полноценным и привлекательным для клиентов.
И первый шаг на этом пути, который мы с вами преодолеем, — это установка шаблона OpenCart.
Шаблонов сегодня существует огромное множество – как платных, так и бесплатных. В этой ситуации, как водится, есть свои плюсы и минусы 🙂 С одной стороны, есть из чего выбрать, а с другой – глаза разбегаются.
К сложностям выбора добавляется ещё и тот факт, что шаблон (он же «тема») желательно выбрать один, т.к. ввиду особенностей установки шаблона OpenCart удалить его потом из магазина будет проблематично. А при установке множества тем они могут приводить к вылезающим ошибкам в витрине магазина и конфликтам в его работе.
Как же не запутаться в этом многообразии и выбрать действительно подходящий?
Для ответа на этот вопрос я решил составить небольшой список критериев, который поможет вам в выборе.
А во второй части публикации мы с вами поговорим о том, как установить шаблон OpenCart и активировать его.
Поехали!
- Выбор ресурса для установки шаблона OpenCart — 5 вариантов
- 7 критериев выбора шаблона OpenCart
- Как установить шаблон OpenCart: пошаговый процесс
Перед тем, как рассматривать критерии выбора шаблона для Опенкарт, хочу сказать несколько слов о том, как стоит правильно подбирать ресурс, с которого предполагается загрузка.
К выбору ресурса для скачивания нужно подходить не менее ответственно, чем при выборе самого шаблона, т.к. на некоторых из них вы можете скачать зараженные вирусом файлы или в коде продуктов могут быть внесены фрагменты, позволяющие их разработчикам взломать или навредить вашему ресурсу.
Данные ситуации при установке тем OpenCart, модулей и прочих расширений, к сожалению, не редкость и особо часто встречаются в случае бесплатных продуктов.
Поэтому поиск в Интернете обязательно производите с включенным антивирусом, который поможет вам отсеять потенциально опасные ресурсы. При скачивании файлов обратите внимание на размер и расширение.
Если размер подозрительно мал (несколько байт) или имеет нестандартное расширение, то лучше от такого файла отказаться и подыскать что-то похожее в другом месте. Сами модули в большинстве случаев файлы запакованы в rar или zip-архивы, так что всё остальное — .exe, .xyz, .какаятокракозябра — это потенциальное вирусное ПО, которое необходимо сразу же удалить.
Ну, и просканировать антивирусом скачанные файлы также не будет лишним.
Однако, даже данные меры не помогут защититься от вредоносных файлов на 100%. Иногда нечаянные или преднамеренные ошибки в коде самих модулей могут стать причиной весьма серьёзных последствий — вплоть до потери информации и контроля над ресурсом. Такого рода опасности антивирус не распознаёт.
Однако, от этого тоже можно оградиться, скачивая шаблоны OpenCart с ресурсов, где файлы проходят ручную модерацию. При этом, дополнения могут быть даже бесплатными 🙂
И в завершение, чтобы облегчить ваши поиски, хочу поделиться с вами перечнем ресурсов, на которых вы сможете найти качественные шаблоны для Опенкарт, как платные, так и бесплатные.
Данные ресурсы проверены мною лично, т.к. я активно пользовался и продолжаю их использовать, скачивая и загружая на них свои разработки, поэтому можете смело ими пользоваться 🙂
1. TemplateMonster — ресурс, известный, пожалуй, всем веб-разработчикам. Содержит огромную базу шаблонов для различных CMS, здесь также возможно заказать индивидуальный вариант. Удобные способы оплаты, оперативная русскоязычная техподдержка и гарантии от лучших разработчиков тем.
2. ThemeForest — второй в мире ресурс по величине, где вы сможете приобрести премиум шаблоны для различных CMS, в том числе и для OpenCart. Немного проигрывает TemplateMonster в плане удобности сервиса и качества обслуживания, но зато цены на некоторые позиции здесь ниже.
3. OpenCart forum — все шаблоны и модули на данном сайте проходят модерацию администрацией, благодаря которой отсеивается вредоносное и некачественное ПО. Разработчикам по результатам проверки выдаются советы по улучшению своих продуктов. Так было и со мной 🙂 С моими работами можете ознакомиться здесь.
4. Официальный каталог OpenCart – об уровне модерации, думаю, говорить не стоит. Равно как и о гарантиях возврата денег и наказаниях соответствующих разработчиков при предоставлении некачественных продуктов.
Внимание! Владельцам магазинов на базе сборок OpenCart не рекомендуется использование шаблонов и модулей, в описании которых данная сборка не значится. Можете рискнуть обратиться к разработчику, но вряд ли он даст вам утвердительный ответ. Если же вы всё-таки установите себе такой продукт, очень мало шансов, что он будет работать корректно. К тому же, при неправильной работе рассчитывать на техподдержку или вернуть деньги у вас, скорее всего, не получится. В случае использования сборок рекомендуются специализированные ресурсы, где есть продукты, разработанные специально под них, с учётом всех особенностей.
5. Официальный сайт русского представительства OpenCart — выбор здесь не так велик, но зато есть большой плюс – все продукты бесплатны и промодерированы 🙂
6. LiveOpenCart — ресурс с преобладающим количеством платных разработок. Из плюсов – есть много вариантов для различных сборок (ocStore, ocShop, MaxyStore).
7. Магазин OpenCart Russia — ещё один сайт, где вы сможете скачать отечественные разработки (с русскоязычным интерфейсом) и соответствующими ценами (расценки достаточно скромные, в рублях), которые также проходят серьёзную модерацию. Поэтому на качество разработок, безопасность и техподдержку можете рассчитывать на 100%.
По поводу моих личных рекомендаций — с уверенностью могу посоветовать TemplateMonster и OpenCart forum, которыми пользуюсь по сей день.
Первый ресурс поражает своим выбором товаров, а также массой дополнительных возможностей (индивидуальная настройка шаблона и даже его разработка под заказ) и большим выбором способов оплаты. Второй — только тем, что отечественный 🙂 Но по разнообразию ассортимента и качеству техподдержки до TemplateMonster ему ооочень далеко.
Итак, переходим к критериям по выбору шаблона Opencart.
7 критериев выбора шаблона OpenCart
1. Прежде всего, вам нужно определиться с тем, что в стандартном графическом шаблоне OpenCart вас не устраивает.
В первую очередь, нужно обращать внимание на форму основных элементов управления и общую структуру витрины магазина.
Их цвет так же важен, но не нужно сильно зацикливаться на цветовом решении, т.к. продукт может иметь список графических схем, из которых всегда можно будет выбрать после установки шаблона OpenCart или, в крайнем случае, поменять самому через код, что не составит большого труда даже неопытному пользователю.
2. Допустим, с предыдущим моментом вы разобрались и уже нашли более-менее подходящий вариант в Интернете. Самое время изучить его подробнее.
И один из основных моментов, на который нужно обратить внимание, — это версия движка, на базе которого разработан Интернет-магазин. Она, как правило, всегда указывается разработчиками либо в описании, либо в инструкции по установке темы OpenCart.
Данный момент очень важен, т.к. если шаблон не предназначен по версии для вашего магазина, то все его плюсы сразу обесцениваются, как бы ни был он хорош. И нет никакого смысла проверять ваш выбор по следующим критериям.
3. Итак, продукт предназначен для вашей версии OpenCart. Следующий момент, на который нужно обратить внимание, — это наличие демо-версии, чтобы наглядно оценить все преимущества и недостатки ещё до установки шаблона OpenCart на свой магазин.
Если вам приглянулся платный вариант, то наличие демки у него обязательно, чтобы не покупать кота в мешке. В случае бесплатного продукта её наличие не так критично.
Если же демо-версии нет, то должны быть, как минимум, несколько скриншотов. В противном случае лучше подыскать другой вариант, ибо устанавливать шаблон вслепую, руководствуясь лишь текстовым описанием, по меньшей мере, глупо.
4. Вы оценили шаблон по демке или скриншотам, и теперь самое время обратить внимание на комментарии и отзывы пользователей, которые воспользовались данным продуктом до вас.
Если в отзывах будут жалобы по поводу некрасивого цвета или неправильным формам, то не стоит воспринимать их всерьёз, т.к. данные мнения исключительно субъективны 🙂
Если же вы встретите сообщения о проблемах при установке шаблона OpenCart либо о некорректной работе и ошибках в работе магазина, лучше прислушаться и поискать другой вариант, т.к. решать данные задачи вам ни к чему, это проблемы разработчиков.
5. Также вам стоит обратить внимание на оценки и рейтинг приглянувшегося вам модуля на ресурсе, если он там есть.
Т.к. нажать на кнопочку с высшим балом проще, чем писать хвалебный отзыв в комментариях. Равно как и в случае негативных моментов, связанных с установкой шаблона OpenCart.
Но данный пункт, как и наличие комментариев, не является обязательным, т.к. шаблон может быть новым и попросту не иметь сторонних мнений. В данном случае не нужно бояться его использовать. А при удачном опыте, как и при негативном, не лениться оставлять отзывы, помогая тем самым других людям 🙂
6. Ещё один немаловажный момент, который приобрёл вес в последнее время, — это адаптивность шаблона.
Ни для кого не секрет, что в современном мире огромное количество людей для выхода в Интернет пользуются мобильными устройствами, т.к. они всегда под рукой и позволяют производить требуемые операции в любом месте, без привязки к стационарному компьютеру.
Поскольку вы не знаете наверняка, с какого устройства ваш потенциальный покупатель зайдёт на ваш сайт, лучше, чтобы подбираемый вами графический шаблон был адаптивным. Это повышает привлекательность сайта и вероятность того, что пользователь задержится на нём, выше.
Поэтому всегда внимательно читайте описания продуктов, а при наличии демо-версий не забывайте запускать их с мобильного устройства, чтобы быть уверенным в своём приобретении наверняка.
7. И на самом заключительном и важном этапе вам нужно определиться, обладаете ли вы достаточным багажом знаний в области HTML и CSS.
От этого будет зависеть, заплатите ли вы за свой шаблон или можно будет довольствоваться бесплатным решением.
Да, хоть сам OpenCart и является бесплатным движком, среди модулей и шаблонов под него немало платных продуктов, т.к. они разрабатываются не только командой OpenCart и альтруистами по всему миру, но и людьми, которые хотят получать за свой труд деньги 🙂
Как правило, платные варианты разительно отличаются от бесплатных, т.к. если их разработчики требуют за свои труды деньги, то их продукт должен быть действительно стоящим, чтобы люди его покупали.
К числу отличий относится обширный спектр цветовых схем, возможность вручную указывать через админку цвета отдельных элементов и размеры шрифтов. В некоторых можно как самостоятельно рисовать, так и загружать свои варианты кнопок, менюшек и т.д. По-настоящему качественные платные шаблоны могут изменить ваш магазин до неузнаваемости, меняя как витрину магазина, так и админку.
В качестве подтверждения своих слов хочу вам продемонстрировать платный шаблон «BigDesign — Fashion», который был установлен на магазине у одного из моих клиентов. Предлагаю Вашему вниманию витрину магазина после установки шаблона OpenCart:
Поэтому на данном этапе мои рекомендации будут следующими: если вы не обладаете специальными знаниями и навыками, а найденный вами шаблон удовлетворяет вашим требованиям на 100%, лучше не скупиться и приобрести понравившийся продукт.
Т.к., во-первых, это сохранит ваши силы. Ведь после установки шаблона OpenCart вам предстоит его настроить, а в случае бесплатных шаблонов самостоятельно это будет сделать затруднительно.
Как правило, бесплатные продукты очень редко имеют интерфейс для настройки, который характерен для платных решений. Поэтому для доведения их до нужных кондиций вам потребуются либо соответствующие знания, либо придётся прибегать к услугам профессионалов, которые, как не сложно догадаться, стоят денег.
И что самое интересное, иногда доработка бесплатного шаблона может вам обойтись дороже приобретения готового платного. Поэтому не нужно об этом забывать!
Для примера приведу экран настройки упомянутого мною шаблона «BigDesign — Fashion» :
Как видите, настройка продумана до мелочей: есть варианты цветовых схем, можно выбирать из готовых вариантов фонового рисунка и загружать свой, задавать параметры шрифта, цвета заголовков, кнопок и многое другое.
Именно поэтому, во-вторых, при установке шаблона OpenCart, который является платным, вы сэкономите время, которое вы потратите на дальнейший поиск бесплатного аналога и его «допиливание».
Поэтому если найденный вами шаблон удовлетворяет всем указанным ранее критериям, но является платным, то приобретение его может быть целесообразным даже для знающих и квалифицированных людей. Тем более, что при приобретении платных решений вы всегда можете рассчитывать на техподдержку разработчика, а не выискивать советы на форумах, надеясь на их правильность.
На этом мои рекомендации подходят к концу. Я надеюсь, что они помогли вам найти требуемый шаблон. И теперь мы переходим непосредственно к установке шаблона OpenCart.
Как установить шаблон OpenCart: пошаговый процесс
Первым делом, для того, чтобы произвести установку шаблона OpenCart, его нужно скачать. О моментах, которые должны вызывать подозрение на данном этапе, мы уже говорили раньше, поэтому во время скачивания перечитайте их ещё раз.
Итак, в вашем распоряжении архив с файлами шаблона. Распаковываем его и ищем каталог с файлами, которые будут повторять файловую структуру OpenCart: должны быть папки admin, catalog, image, system.
В данном перечне критично наличие только папки catalog, т.к. установка шаблона на OpenCart подразумевает изменения интерфейса именно витрины магазина, если каких-то остальных не будет,- не страшно 🙂
Далее, чтобы установить шаблон на Опенкарт в ваш, магазин копируем все папки и переносим их в корневую директорию сайта, подтверждая замену существующих файлов при совпадении. Абсолютно не важно, где находится ваш ресурс, — на хостинге или на локальном сервере. На порядок действий это не повлияет.
Лично у меня магазин находится на локальном сервере. О том, каким ПО я пользуюсь, можно прочитать в данной статье. Версия движка в данном руководстве – чистый OpenCart 2.0.3.1., как последняя официально русифицированная версия.
У владельцев магазинов на предыдущих версиях OpenCart и его сборках может сейчас возникнуть вопрос «Насколько справедливы дальнейшие действия в моём случае?». Но спешу всех успокоить: последующие версии универсальны для всех, независимо от версии движка. Различия будут только в наименовании пунктов меню админки, но эта проблема решаема путём обращения к документации OpenCart.
Поскольку моей целью является показать, как установить шаблон на OpenCart 2, а не сделать привлекательный дизайн для реального магазина, для данного руководства я использовал бесплатный шаблон «Rhea».
Итак, продолжаем. Самое интересное, что установку шаблона OpenCart мы уже произвели 🙂
Остаётся лишь применить его и убедиться в работоспособности. Но перед этим хочу сказать несколько слов о шаблонах, которые используют технологию vqMod.
В дистрибутиве vqMod-базированных продуктов (это касается не только шаблонов, но и модулей) обязательно должен присутствовать каталог «vqmod/xml», в котором будут расположен xml-файлы. Порядок действий в данном случае ничем отличаться не будет от предыдущего варианта установки шаблона OpenCart – вам нужно будет скопировать каталоги в корень магазина с подтверждением перезаписи файлов.
Единственный нюанс, который нужно соблюсти, — это предварительно установленный vqMod в вашем магазине. Данной технологии и способах её установки будет посвящена одна из следующих статей, здесь же мы не будем тратить на это время и двигаемся дальше.
Итак, установку шаблона OpenCart мы произвели, осталось только включить его. Для этого переходим в административную часть магазина по пути «доменное_имя_сайта/admin» и вводим логии и пароль администратора:
Далее в главном меню админки передвигаемся по пути «Система — Настройки» (в OpenCart версии 2+ пункт «Система» оформлен в виде шестерёночки):
Перед нами открывается экран, на котором представлен список всех магазинов, управление которыми осуществляется из данной админки (напомню, что в OpenCart такая возможность есть):
Нажимаем на кнопку в виде карандашика напротив требуемого ресурса для редактирования его параметров. В открывшемся окне переходим на вкладку «Магазин»:
Здесь нас интересует поле «Шаблон», которое оформлено в виде выпадающего списка всех имеющихся в магазине шаблонов. После установки шаблона OpenCart «Rhea» в списке появилась строчка с соответствующим названиям.
Выбираем его и сохраняем изменения путям нажатия на кнопку «Сохранить» в виде дискетки на синем фоне в правом верхнем углу экрана.
После произведённых действий шаблон был активирован и теперь можно смело переходить в витрину магазина и наслаждаться результатами:
Как видите, в итоге получилась интересная альтернатива стандартному дизайну:
Установленный мною в качестве примера шаблон является довольно простым, как и все бесплатные. Для окончательного варианта интерфейса он слабо подходит, т.к. в нём всего одна цветовая схема, к тому же довольно тускловатая.
К тому же у него абсолютно нет возможности ручной настройки шаблона OpenCart из админки.
Поэтому для его доработки потребуются некоторые усилия со стороны разработчиков и финансовые затраты со стороны владельцев магазина, о чём я уже говорил ранее. Так что отнеситесь к выбору шаблона ответственно и ещё раз тщательно проверьте его по критериям, которые я привёл в начале статьи.
Вот и всё, что я хотел вам сказать.
В ходе данной статьи нами был произведён обзор критериев для выбора шаблонов, а также ресурсов, где их лучше всего искать. Также нами была произведена непосредственно установка шаблона OpenCart, которая, думаю, никаких затруднений у вас не вызвала.
Надеюсь, информация была для вас полезной, и вы нашли ответ на вопрос «Как установить шаблон на OpenCart?». Если это так, делитесь записью с друзьями в социальных сетях и привлекайте их к обсуждению.
Жду ваши мнения и пожелания в комментариях. Также не забывайте подписываться на обновления сайта, чтобы быть в курсе всех выходящих статей.
Всем удачи! 🙂
P.S.: если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.
Более 5 лет опыта профессиональной разработки сайтов. Работа с PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular и другими технологиями web-разработки.
Опыт разработки проектов различного уровня: лендинги, корпоративные сайты, Интернет-магазины, CRM, порталы. В том числе поддержка и разработка HighLoad проектов. Присылайте ваши заявки на email cccpblogcom@gmail.com.
И с друзьями не забудьте поделиться 😉
Обновлено: 16.04.2020
Опубликовано: 08.02.2020
Используемые термины: CMS, OpenCart.
Загрузка CMS на хостинг
Начальная настройка
Установка русификации
Установка шаблона
Используя модуль установки расширений
Вручную
Скачивание файлов и загрузка на хостинг
Для начала необходимо скачать дистрибутив с официального сайта https://www.opencart.com/
Распаковываем скачанный архив — переносим содержимое папки upload на хостинг, например, по FTP:
* если вы хотите осуществить загрузку файлов на хостинг через браузер — после загрузки не забудьте переместить файлы из паки upload в корень.
На сервере переименовать два файла:
- config-dist.php в config.php
- admin/config-dist.php в admin/config.php
Теперь переходим к установке OpenCart.
Стартовая настройка сайта
Отрываем браузер и вводим адрес нашего будущего магазина. Откроется мастер установки OpenCart — инсталляция проходит в 4 шага.
1) на первом шаге принимаем лицензионное соглашение (кнопка Continue):
2) на следующей странице установщик проверит, соответствует ли хостинг требованиям CMS. Если нет предупреждений и ошибок, нажимаем далее (Continue). Если есть ошибки — устраняем их.
3) на третьем шаге настраиваем подключение к базе данных:
* где:
- DB Driver — программный драйвер, с помощью которого происходит взаимодействие с СУБД. Желательно, использовать MySQLi.
- Hostname — имя сервера баз данных. Для хостингов, как правило, это тот же сервер (то есть localhost).
- Username — имя пользователя для подключения к базе данных. Выдается хостингом.
- Password — пароль для подключения к базе данных. Выдается хостингом.
- Database — имя базы данных. Выдается хостингом.
- Port — порт, на котором слушает MySQL. Как правило, 3306.
- Prefix — префикс, который будет добавлен в название каждой из таблиц.
… и создаем пароль и email для администратора:
4) на четвертом шаге установщик сообщит об успешном завершении установки и напомнит о необходимости удаления директории с установочными файлами:
Для удаления установочных файлов просто удаляем с сервера папку install:
Переходим в панель администратора OpenCart — http://<адрес сайта>/admin/ — вводим логин admin и пароль, который нами был создан во время установки.
При первом входе выйдет рекомендация создать директорию хранения данных отдельно от web директории. Выбираем директорию и нажимаем кнопку Move:
Появиться сообщение об успешном создании папки. Закрываем окно сообщения.
Локализация Opencart
По умолчанию Opencart скачанный с официального сайта имеет только английский язык. Все остальные надо добавлять отдельно.
Для установки русской версии необходимо зайти на сайта http://opencart-russia.ru и из центра загрузок скачать нужную версию дистрибутива:
Подробнее, дальнейший процесс описан с данной инструкции.
Установка нового шаблона
Есть несколько разных вариантов установки индивидуального шаблона — рассмотрим два варианта.
Через установку расширений
Скачиваем/покупаем шаблон для Opencart.
Разархивируем его на своем компьютере.
В корневую директорию сайта копируем каталоги шаблона: catalog, image.
Переходим в административную панель сайта. Открываем пункт меню Модули / Расширения, далее подменю Модули / Расширения:
В выпадающем списке выбрать темы:
Нажать на кнопку редактировать тему:
В поле директория темы выбираем свой шаблон вместо шаблона default из выпадающего списка и нажимаем на кнопку сохранить в правом верхнем углу.
Переходим в панель состояния, в правом верхнем углу нажимаем на кнопку с изображением шестеренки.
В появившемся окне обновить кэш темы нажатием кнопки обновления напротив компонента тема.
Все готово. Ваша тема установлена.
Вручную
Скачиваем/покупаем шаблон для Opencart.
Разархивируем его на своем компьютере.
В корневую директорию сайта копируем каталоги шаблона, обычно они лежат в паке upload, в данном случае это: admin, catalog, system.
Переходим в административную панель сайта. Открываем пункт меню Модули / Расширения, далее подменю Модули / Расширения:
В выпадающем списке выбрать темы:
Нажать на кнопку активировать тему:
Нажать на кнопку редактировать тему:
В поле Статус выбираем Включено и нажимаем на кнопку сохранить в правом верхнем углу.
Переходим в раздел Система > Настройки, нажать на кнопку редактировать, рядом с вашим магазином.
Во вкладке Основное > Тема выберите шаблон свой шаблон и нажмите на кнопку сохранить.
Далее необходимо предоставить права шаблону на внесение изменений в систему. Для этого переходим в раздел Система > Пользователи > Группа пользователей, нажать на кнопку редактировать, в поле Administrator.
Далее в разделах Разрешить просмотр и Разрешить редактировать нажмите кнопки Выделить все и сохраните изменения.
Все готово. Ваша тема установлена. Далее можно переходить в раздел Модули / Расширения > Модули / Расширения и приступить к дальнейшей настройке.
-
Romans
Administrator
Команда форума- Сообщения:
- 1.396
- Симпатии:
- 747
Стандартная тема по умолчанию, которая предустановлена на OpenCart 3, является базой для ваших новых идей, тем и шаблонов. По простому, это стандартный дизайн, основанный на популярном CSS фреймворке Bootstrap и создан специально для OpenCart.
Если Вы желаете изменить стандартную тему, Вам необходимо иметь базовые знания CSS и HTML. А для некоторых частей дизайна вам понадобятся знания twig, javascript и php. -
Romans
Administrator
Команда форума- Сообщения:
- 1.396
- Симпатии:
- 747
Структура папок темы по умолчанию (Default)
Перед тем как приступить к созданию или изменению темы, необходимо изучите структуру директорий и назначение файлов.
Тема по умолчанию (а так же другие темы) разработаны с использованием паттерна MVC (это необходимо помнить т.к ни одна переменная в шаблоне, не может быть выведена просто так, если она не объявлена в текущем контроллере).
Файлы представления, таблицы стилей и изображения для шаблона, расположены
по пути catalog/view/theme/defaultДиректория default содержит следующие папки:
template — папка с «шаблонами» (представлениями)
stylesheet — папка с таблицами стилей
image — папка с изображениями для шаблона (фоны, указатели,итд)Папка template содержит файлы шаблона c расширением twig. Данные файлы используют шаблонизатор TWIG.
Давайте рассмотрим назначение файлов, в директориях указанных ниже.
common/
header.twig— шаблон для верхней части страницы (в.т.ч. подключение стилей и скриптов)
footer.twig— шаблон нижней части страницы (ссылки информация, служка поддержки итд)
home.twig— шаблон главной страницы (структура и расположение header.twig, footer.twig, column_twig, column_right.twig, content_bottom.twig, content_top.twig)
column_left.twig– левая колонка страницы
column_right.twig– правая колонка страницы
content_bottom.twig– нижняя часть области контента
content_top.twig– верхняя часть области контента
currency.twig– вывод шаблона модуля для переключения валют магазина
language.twig– вывод шаблона модуля для переключения языков магазина
search.twig– шаблон модуля поиска (выводится в header.twig как переменная search)
menu.twig — шаблон основного горизонтального меню
cart.twig— шаблон модуля корзины в шапке
maintenance.twig – шаблон страницы при переключении магазина в режим обслуживания
success.twig – страница о успешном результате выполнения операции (пример, оформление заказа)product/
product.twig – шаблон для карточки товара (основная страница товара)
category.twig – страница списка товаров в категории
manufacturer_info.twig – информация о производителе
manufacturer_list.twig – страница список производителя
compare.twig – страница сравнения товаров
review.twig – отзывы о товаре в product.tpl (загружается Jquery через load() )
search.twig – шаблон страницы поиска и вывода результатов
special.twig – шаблон страницы Акцииinformation/
contact.twig – шаблон для станицы контактов (страница Связаться с нами)
information.twig – шаблон для вывода статей
sitemap.twig – станица Карта сайтаextension/module/ — шаблоны для модулей
category.twig – модуль Категории
filter.twig — Фильтр
html.twig — HTML контент
information.twig — Информация
slideshow.twig — Слайдшоу
banner.twig — Баннер
carousel.twig — Карусель
bestseller.twig – Хит продаж
featured.twig — Рекомендуемые
latest.twig — Последние
special.twig — Акция
store.twig – шаблон модуля Магазин (выбора магазина при мультимагазине)
account.twig – модуль Личный кабинет
google_hangouts.twig – Модуль Google Hangouts
pp_layout.twig — PayPal Экспресс-платежиcheckout/ — шаблоны страниц Оформления заказа и Корзины покупок
cart.twig – страница Корзины покупок
login.twig – страница Авторизации
register.twig – страница Регистрации
checkout.twig – общий шаблон станицы оформления заказа
guest.twig – шаг, оформление без регистрации
guest_shipping.twig – шаг, ввод данных доставки (при оформлении без регистрации)
payment_address.twig – шаг, ввод личных данных адреса плательщика
shipping_address.twig – шаг, ввод данных нового адреса доставки
payment_method.twig – шаг, выбор способа оплаты
shipping_method.twig – шаг, выбор способа доставки
confirm.twig – шаблон шага подтверждения заказаaccount/ — шаблоны страниц Личного кабинета
account.twig – шаблон главной страницы Личного кабинета
login.twig – страница авторизации
register.twig – страница регистрации
address_form.twig – страница формы редактирования адреса
address_list.twig – страница Мои адреса
edit.twig – страница редактирования контактной информации
password.twig – изменение пароля
forgotten.twig – восстановление пароля
download.twig – страница Файлы для скачивания
newsletter.twig – подписка на новости
order_info.twig – информация о заказе
order_list.twig — список заказов
recurring_info.twig – информация о периодическом платеже
recurring_list.twig – список периодических платежей
return_form.twig – форма возврата товара
return_info.twig – информация о возврате
return_list.twig – список возвратов
transaction.twig – страница транзакций
reward.twig – страница бонусных баллов
voucher.twig – подарочные сертификаты
wishlist.twig — закладкиaffiliate/ — шаблоны страниц Партнерская программа
login.twig — страница авторизации
register.twig – страница регистрацииerror/
not_found.twig — страница «Запрашиваемая страница не найдена!»mail/
order_add.twig — шаблон для письма (html) о новом заказе
order_alert.twig — шаблон письма для Администратора
order_edit.twig — шаблон письма о изменении заказа
voucher.twig – шаблон письма о Подарочном сертификате
affiliate.twig — шаблон письма партнеру
affiliate_alert.twig — письмо оповещения администратору о партнере
forgotten.twig — письмо о восстановлении пароля
register.twig — шаблон письма о регистрации нового клиента
register_alert.twig — письмо новому клиенту.
transaction.twig — шаблон письма о транзакцияхextension/payment/ — шаблоны модулей способов доставки
bank_transfer.twig – Банковский перевод
cheque.twig – Оплата наличными
cod.twig – Оплата при доставке
free_checkout.twig – Бесплатный заказ
liqpay.twig — LiqPay
moneybookers.twig — Moneybookers
pp_express.twig — PayPal Экспресс-платежи
pp_express_confirm.twig страница подтверждения для модуля PayPal Экспресс-платежи
pp_pro.twig – PayPal Pro
pp_standard.twig — PayPal Standartextension/total/
shipping.twig – шаблон предварительного расчета доставки
coupon.twig – шаблон модуля купонов (вывод происходит в на странице корзины)
voucher.twig — шаблон модуля сертификатов (вывод происходит в на странице корзины)
reward.twig — шаблон модуля бонусных баллов (вывод происходит в на странице корзины)
extension/captcha/
— шаблоны для модулей из группы Защита от роботов
basic.twig — шаблон стандартной капчи
google.twig — шаблон модуля гугл капчи -
Romans
Administrator
Команда форума- Сообщения:
- 1.396
- Симпатии:
- 747
Создание своего шаблона
Для создания своего шаблона для Opencart 3, вам необходимо создать в директории catalogviewtheme
папку с названием своего шаблона (например, mystore) и в ней разместить 3 папки template, stylesheet, imageДалее, создадим минимальный каркас для нового шаблона, а именно:
1. в директорию stylesheet, скопируем файл stylesheet.css из шаблона по умолчанию catalogviewthemedefaultstylesheet
2. в директории template, создадим папку common и скопируем туда файл header.twig из шаблона по умолчанию catalogviewthemedefaulttemplatecommon
3. Откроем файл header.twig и изменим путь к файлу стилей на свои
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
заменим на
<link href="catalog/view/theme/mystore/stylesheet/stylesheet.css" rel="stylesheet">
4. Заходим в панель администрирования:
Меню -> Модули / Расширения -> (тип расширения ) Темы -> [изменить] -> поле, Директория темы
и выбираем новый шаблон.На этом этап создания каркаса нового шаблона завершен.
Далее вы можете изменять стили в файле стилей, подключать дополнительные стили или скрипты, прописывая пути к файлам в файле header.twig. А если Вам необходимо изменить верстку одного из модулей или частей шаблона (например footer.twig), то достаточно создать соответствующую директорию в вашем новом шаблоне и скопировать нужный файл из шаблона по умолчанию.Хочу обратить внимание, что рекомендуется при создании нового шаблона, не копировать все файлы шаблона по умолчанию, а копировать лишь файлы которые изменяются. Данный метод поможет избежать многих проблем при обновлении версии OpenCart 3.х на более новые версии.
Так же существует более продвинутый способ создания шаблона и является более приоритетным, так как предыдущий способ с выбором директории оставлен лишь для совместимости.
От предыдущего варианта он отличается тем, что дополнительно создается расширение для управления вашей темой. Т.е в разделе расширения «Темы» у вас помимо темы «Стандартная тема», появится еще и ваша. Для создания расширения управления темой нужна соответствующая квалификация программиста для OpenCart 3.Редактирование файлов шаблона !!
На данный момент рекомендуется производить редактирование файлов шаблона через ФТП (FTP) используя фтп менеджеры, например FileZilla. Это избавит вас от неоднозначности, при обслуживании магазина. В качестве редактора файлов, лучше использовать редактор Notepad++
Не стоит забывать, если вы внесли изменения в шаблон через административную панель, то перед работой с файлами через ФТП, вам необходимо в разделе редактирования шаблона удалить изменения, нажатием кнопки в истории изменений шаблона.При изменении файлов стилей или редактировании js скриптов, не забывайте про Кеш браузера. Кеш (обычно кешируются стили и скрипты) очищается нажатием комбинации клавиш CTRL + F5
Если у вас есть установленные модификаторы !!!
Перед внесением изменений в тему, посмотрите, есть ли в кеше модификатора ваши файлы, которые вы собираетесь изменить. И если они там присутствуют, вам необходимо после внесения изменений, очищать кеш модификатора в папке storagemodification или очищать нажатием кнопки Обновить
в Панели управления Меню — Модули / Расширения — Модификаторы
Если этого не сделать, то произведенные изменения в файлах темы вы не увидите.
Внимание! Директория storage может быть вынесена за пределы сайта. Не забывайте этот факт. Если не знаете точного расположения, то можете посмотреть в файле config.phpЕсли изменяете шаблон, модификаторов нет, а изменений не видно?
Тогда причина во включенном кеше TWIG. Для временного отключения вам необходимо его отключить в «Настройках разработчика». Более подробно о кеше твиг написано в разделе для администратора.Последнее редактирование: 5 апр 2019
-
Romans
Administrator
Команда форума- Сообщения:
- 1.396
- Симпатии:
- 747