Opencart — система управления контентом для интернет-магазинов, популярная в России и за рубежом. Основными преимуществами CMS является простота установки и администрирования, маленький вес базы, надежность и хорошая скорость работы даже на сравнительно больших проектах. По сравнению со многими другими системами для opencart не так уж и много шаблонов, поэтому часто пользователи, пытаясь сделать шаблон самостоятельно, сталкиваются с трудностями в поисках ответов на вопросы — как сделать шаблон для Opencart, как его редактировать или изменить. В этой статье рассмотрим создание простого шаблона для Opencart, а в конце статьи у вас будет возможность скачать готовый бесплатный шаблон и использовать его для своих проектов.
Итак, имеем установленный Opencart версии 1.5.4, на данном этапе используется стандартный шаблон Default. Новый шаблон будем делать на базе стандартного, так как в нем есть все необходимые файлы структуры, а также можно будет использовать объявленные в нем стили. Вот так выглядит главная страница сайта сейчас:
Установка бесплатного шаблона в Опенкарт 3 на примере шаблона «Moytop» (тема mt)
Такая одноколоночная структура используется не очень часто, поэтому сначала приведем главную страницу сайта к более привычному виду. Зайдем в админку сайта, дописав к адресу /admin. Включим отображение категорий товаров на главной странице в левой колонке. Для этого перейдем в пункт Дополнения → Модули.
В открывшемся списке модулей выберем модуль Категории и нажмем Изменить. На странице редактирования модуля задается его расположение на сайте.
Для каждой страницы расположение можно задать свое (подробнее об этом можно прочитать в статье Схемы в Opencart. Различная структура сайта для отдельных страниц), но мы пока установим его только для главной страницы: щелкнем Добавить модуль, в появившейся строке выберем страницу Home, Расположение — левая колонка, Статус — Включено, отображение количества товаров и сортировка задаются по желанию.
Нажмем Сохранить и вернемся на страницу списка модулей. Зайдем в настройки Слайдшоу (кнопкой Изменить), изменим размеры слайдера на 740х230, не забудем сохранить изменения. Теперь можно перейти на главную страницу сайта и оценить внесенные изменения — структура сайта стала двухколоночной с соответствующей шириной слайдера. Для всех остальных страниц можно настроить другое расположение модулей и другую структуру.
Шаблоны Opencart располагаются по следующему пути: Корень сайта/catalog/view/theme. Приступим к созданию простого шаблона на базе стандартного. Для начала сделаем копию папки шаблона Default. Копию стандартного шаблона назовем Space-cart и в последствии будем работать только с ним.
Как выбрать и установить шаблон на OpenCart | HOSTiQ
Для того, чтобы активировать шаблон в административной части сайта, выберем его — Система → Настройки → Мой магазин(по умолчанию)[Изменить] → Витрина. На странице Витрина возле метки Шаблон магазина: выберем шаблон Space-cart из выпадающего списка и нажмем Сохранить. Пока новый шаблон не отличается от стандартного, но это первые шаги к созданию своего шаблона для Opencart. Теперь подойдем к редактированию шаблона Opencart поэтапно:
1. Работа с шапкой шаблона Opencart. Что будем делать? Увеличим высоту шапки, установим задний фон шапки, поменяем логотип, изменим вид ссылок и прочие небольшие изменения.
В первую очередь укажем путь к таблицам стилей css, так как все пути остались старые от стандартного шаблона default. Редактирование файла шапки осуществляется по пути space-cart/template/common/header.tpl. Находим в этом файле строку 19 и меняем в ней имя шаблона default на наш space-cart, не забываем сохранить:
— Меняем высоту шапки Opencart. Высоту можно поменять в файле stylesheet.css, который находится по следующему пути: space-cart/stylesheet/stylesheet.css. Находим строку 93 #header и меняем значение height на 270px.
— Установим некликабельный задний фон шапки сайта. Для этого будем использовать заранее подготовленное изображение shining_space. jpg размером 980х270px, которое положим в папку space-cart/image.
Пропишем путь к файлу с изображением:
— Теперь надо поработать с логотипом. Для этого будем использовать картинку space-logo.png. Картинка логотипа меняется в админке сайта: Система → Настройки → Мой магазин(по умолчанию)[Изменить] → Изображения. На странице Изображения нам будет предложено загрузить логотип для сайта. Загрузим наш логотип и нажмем Сохранить.
Скачать изображение для логотипа можно здесь — Скачать логотип.
Сейчас логотип расположен наверху шапки, не совсем по центру, что не очень красиво. Разместим его пониже, изменив 102 строку:
(Сейчас и далее в статье вносимые изменения будут выделены полужирным шрифтом)
#header #logo position: absolute;
top: 35px;
left: 15px;
>
— Подвинем переключатель языков немного вправо, чтобы он не наползал на логотип и изменим цвет заголовка на белый. Редактируем строку 108:
#language position: absolute;
top: 15px;
left: 350px;
width: 80px;
color: #fff;
line-height: 17px;
>
— Изменим внешний вид Корзины, для начала уберем задний белый фон и установим закругленные края для неактивной корзины. Внимательно вносим следующие изменения на строке 145:
#header #cart .heading float: right;
margin-right: 172px;
margin-top: 15px;
padding: 5px 10px 10px 10px;
border: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
position: relative;
z-index: 1;
>
— В строке 158 установим цвет заголовка корзины белый, наклонный шрифт, уберем полужирность:
#header #cart .heading h4 color: #fff;
font-size: 15px;
font-weight: normal;
font-style: italic;
margin-top: 0px;
margin-bottom: 3px;
>
— Уберем белый фон у количества товаров неактивной корзины, редактируем строку 170 следующим образом, удаляем #FFFFFF:
#header #cart .heading a span background: url(‘../image/arrow-down.png’) 100% 50% no-repeat;
padding-right: 15px;
>
— Не забываем отредактировать стиль на строке 194 для активной корзины:
#header #cart.active .heading margin-top: 15px;
padding-top: 5px;
padding-bottom: 6px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
>
— Редактируем поиск. Поиск нужно сделать короче, расположить его по центру между краем шапки и корзиной, убрать лишнюю тень. Правим строку 266:
#header #search position: absolute;
top: 15px;
right: 0px;
width: 278px;
z-index: 15;
>
и строку 278, удаляем там строки box-shadow и меняем ширину width:
#header #search input background: #FFF;
padding: 1px 1px 1px 33px;
width: 202px;
height: 21px;
border: 1px solid #CCCCCC;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
>
— Перенесем строчку Войти или зарегистрироваться ближе к середине шапки:
Строка 289:
#header #welcome position: absolute;
bottom: 80px;
right: 300px;
z-index: 5;
width: 298px;
text-align: right;
color: #fff;
>
— Отредактируем расположение и стиль меню ссылок в шапке, начиная со строки 298:
#header .links position: absolute;
right: 30px;
bottom: 15px;
font-size: 10px;
padding-right: 10px;
>
#header .links a float: left;
display: block;
padding: 5px 7px 5px 7px;
color: #ffffff;
font-weight: bold;
text-decoration: none;
font-size: 12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background: #A52A2A;
>
#header .links a + a margin-left: 8px;
>
— Изменим цвет ссылок и заголовка настройки валюты на строке 117:
#currency width: 75px;
position: absolute;
top: 15px;
left: 425px;
color: #fff;
line-height: 17px;
>
#currency a display: inline-block;
padding: 2px 4px;
border: 1px solid #CCC;
color: #fff;
text-decoration: none;
margin-right: 2px;
margin-bottom: 2px;
>
— В заключение настройки шапки установим ей отступ от верхнего края, рамку и закругленные углы в строке 92:
#header height: 270px;
margin-bottom: 7px;
margin-top: 10px;
position: relative;
z-index: 99;
background: url(‘../image/shining_space.jpg’) no-repeat;
border: 1px solid #000;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
>
С шапкой можно сделать еще очень много всего интересного, но это явно не уложится в одну статью, поэтому на этот раз хватит изменений.
Шапка в данный момент выглядит так:
2. Этот этап совсем небольшой, но тоже очень важный — изменим задний фон всего сайта, редактируя тег body на строке 6 нашего файла стилей:
body background: url(‘../image/main-background.png’);
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
>
Задний фон сайта качаем тут — Скачать
3. Меняем внешний вид Главного горизонтального меню сайта. Редактируем строку 328 (удаляем строки box-shadow, меняем border-bottom на общий border, меняем цвет фона):
#menu background: #3c0749;
border: 1px solid #000000;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
padding: 0px 5px;
>
4. Редактируем стиль боксов (блоков). Изменим фон и цвет текста, а также цвет рамки у заголовков блоков:
Строка 660:
.box .box-heading -webkit-border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-khtml-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;
border: 1px solid #000;
background: #A52A2A;
padding: 8px 10px 7px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 14px;
color: #fff;
>
Поменяем цвет рамки на черный для тела блока на строке 674:
.box .box-content background: #FFFFFF;
-webkit-border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-khtml-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
padding: 10px;
>
5. Изменяем футер: сделаем его темным, закруглим края и изменим цвет текста на белый. Редактируем, начиная со строки 1593:
#footer clear: both;
overflow: auto;
min-height: 100px;
padding: 20px;
border: 1px solid #000;
background: #111;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
>
#footer h3 color: #fff;
font-size: 14px;
margin-top: 0px;
margin-bottom: 8px;
>
#footer .column a text-decoration: none;
color: #fff;
>
6. Сейчас может показаться, что шаблон практически готов, но перейдем на страницу товара или категории и увидим, что у правой колонки нет фона. Это нельзя оставить просто так, поэтому надо добавить стиль, описывающий главный блок контента. Он называется #content, и добавим мы его под строку 770. Придерживаясь нашего основного дизайна, опишем закругленные углы и черную рамку:
#content background: #fff;
padding: 20px;
border: 1px solid #000;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
>
7. Установим другой цвет для кнопок сайта. Для неактивных — строка 572:
a.button, input.button cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background: #3c0749;
-webkit-border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-khtml-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
>
Для активной кнопки строка 596:
a.button:hover, input.button:hover background: #A52A2A;
>
Результат проделанной работы:
Наш простой шаблон для Opencart готов. Его можно еще очень долго изменять, редактировать и преобразовывать до неузнаваемости, но целью статьи было ознакомление с основами создания шаблонов для Opencart, и, думаю, общее представление вы получили. Скачать готовый бесплатный шаблон для Opencart 1.5.4 можно нажав на ссылку:
Возможно, вам также будут интересны статьи:
- Эффекты слайдера Owl Carousel в Opencart и OcStore 2.1.0.2. Что делать, если слайдер не работает?
- Настройка эффектов слайдера и карусели в Opencart 1.5
- Добавляем адрес и телефон в шапку сайта на Opencart 1.5.x
- Схемы в Opencart. Различная структура сайта для отдельных страниц
- Добавляем новую позицию для модулей Opencart 1.5.x
- Интернет-магазин на Opencart. Обзор движка, инструкция по установке, плюсы и минусы
Источник: asterial.ru
Установка шаблона OpenCart
Введение Что находится в шаблоне и для чего его можно использовать
Наверняка многие слышали о таком ресурсе как templatemonster.com. Там имеется куча готовых шаблонов под разные движки, в том числе и под OpenCart. При разработке собственного шаблона я и взял за основу один из демонстрационных шаблонов с этого ресурса, а в блог решил закинуть их инструкцию по установке этих самых шаблонов. Так что не сочтите за плагиат, честно указал откуда она взята, чтобы вам не искать.
Итак, данная документация состоит из нескольких частей и охватывает весь процесс установки и настройки веб-сайта OpenCart c нуля. Руководство достаточно понятное и удобное в использовании.
Что представляет собой OpenCart?
OpenCart — это бесплатная платформа электронной коммерции с открытым исходным кодом для Интернет-предпринимателей. OpenCart позволяет создать профессиональную и надежную основу для построения успешного онлайн магазина. Сообщество Opencart включает множество пользователей, начиная с опытных веб-разработчиков, ищущих удобный интерфейс, и заканчивая владельцами магазинов, впервые запускающими онлайн-бизнес. OpenCart предоставляет огромное количество функций, позволяющих полностью контролировать магазин. С инструментами OpenCart вы легко раскроете потенциал магазина.
Структура файлов
Шаблон состоит из следующих компонентов:
- documentation— содержит детальное руководство по установке шаблона и движка; index_ru.html — основной файл документации. Вы его сейчас читаете
- screenshots— содержит скриншоты темы;
- sources— исходный файл шаблона для Adobe Photoshop(.psd);
- themeXXX— включает:
- themeXXX(full).zip— архив с движком OpenCart, шаблоном и демо-данными темы (предназначен для установки с нуля);
- themeXXX(update).zip— архив с шаблоном без демо-данных (для установки поверх существующего магазина);
- unzip.php— файл, используемый для разархивации .zip после загрузки на хостинг сервер;
Послесловие куда обращаться за помощью, поддержкой и дополнительной информацией
OpenCart — это многофункциональное, быстрое и понятное пользователю решение для электронной коммерции с привлекательным дизайном. Это идеальное решение для онлайн магазина. Стандартный пакет содержит все необходимые модуля и расширения для успешной торговли. Открытый исходный код предоставляет поистине выдающиеся возможности для ваших клиентов.
Не удается загрузить Google Fonts:
- Откройте ‘siteindex-*.html’ или ‘sitecssstyle.css’ файлы
- Найдите строку:
//fonts.googleapis.com/css?family=
Замените её следующим:
//fonts.useso.com/css?family=
Подписывайтесь на канал и узнавайте первыми о новых материалах, опубликованных на сайте.
Если считаете статью полезной,не ленитесь ставить лайки и делиться с друзьями.
Избранные jQuery галереи и слайдеры Невозможно загрузить класс reCaptchaЛучшие слайдеры (слайдшоу) на jQueryGoogle Chrome и Firefox прощаются с Flash и переходят на HTML 5Сброс пароля администратора в MODX EvolutionСкругление углов CSS3
Активация терминального сервера Windows Server 2003/2008/2008 R2 453978
Настройка D-link DIR-300 в режиме Wi-Fi повторителя 467613
Активация CorelDRAW X6, X7 155279
Установка Windows XP с флешки. Простой способ создания установочной флешки WinXP. 377122
Установка Windows 7 с флешки на компьютер с USB 3.0 66398
Проверка б/у iPhone перед покупкой. Как узнать практически всё о телефоне по IMEI 271903
Это не шутка. Списание денег и скрытая отправка смс на номер +447786205094 на iPhone
Осторожно! DriverPack Solution не так прост, как кажется… 30664
Терминальный сервер на Windows Server 2012 в рабочей группе 233694
Как сбросить или изменить забытый пароль на Маке 30196
Админ в маленьком городе, 2019 Время: 0.0713 | SQL: 15 | Память: 2.66MB
Подготовка Что нужно сделать перед началом работы
Прежде, чем перейти к установке веб-сайта OpenCart, нужно полностью подготовиться.
Программное обеспечение
Для полноценной работы с шаблоном Opencart мы рекомендуем скачать все требуемые приложения. Список необходимого программного обеспечения находится на странице предпросмотра шаблона. Требования для различных шаблонов могут меняться, поэтому мы перечислим лишь основные:
- Вам может понадобиться программа Adobe Photoshop. Она используется для редактирования исходных файлов .PSD и необходима, если требуется изменить графический дизайн и изображения шаблона.
- Для редактирования исходного кода файлов шаблона нужно использовать редактор кода, например Adobe Dreamweaver, Notepad++, Sublime Text и т.п.
- Чтобы загрузить файлы на хостинг сервер, потребуется FTP менеджер, например Total Commander, FileZilla, CuteFTP и т.д.
Хостинг
Поскольку OpenCart базируется на приложениях PHP/MySQL, необходимо подготовить хостинг сервер.
При наличии активного сервера, нужно проверить его на соответствие системным требованиям и на способность обслуживать веб-сайты OpenCart.
Также можно установить OpenCart на персональном компьютере при помощи локального сервера. Для создания локального хостинг сервера необходимо использовать программное обеспечение WAMP, AppServ, MAMP и т.п. Любое из них устанавливается как обычная программа и поддерживает OpenCart.
Вы можете воспользоваться следующими туториалами для настройки локального сервера:
- Как установить среду веб-разработки AppServ
- Как установить среду веб-разработки WAMP
- Как установить среду веб-разработки XAMP.
Источник: business-notepad.ru
Установка дополнений в Opencart 2 и 3: пошаговая инструкция
Установка дополнений в Opencart 2 и 3 может быть произведена легко и быстро, при помощи использования двух простых инструкций, описанных ниже.
- Через встроенный инструмент;
- Через FTP.
Видеоинструкция
Для ее устранения понадобится скачать файл.
https://www.opencart.com/index.php?route=marketplace/extension/infohttps://seopulses.ru/ustanovka-dopolneniy-v-opencart-2-i-3/» target=»_blank»]seopulses.ru[/mask_link]