Посты по тэгу: Opencart

Вёрстка сайта для Opencart

14 октября, 2018

Стандартная тема по умолчанию, которая предлагается при установке OpenCart 2.x является базой для ваших новых идей. В ней заложен стандартный дизайн, основанный на популярном CSS фреймворке Bootstrap.
Если Вы желаете изменить стандартную тему, Вам необходимо иметь базовые знания CSS и HTML. Но для некоторых частей дизайна вам понадобятся знания php и javascript.

Структура папок темы по умолчанию (Default)

Перед тем как приступить к созданию или изменение темы, изучите структуру папок и назначение файлов.

Тема по умолчанию (а так же другие темы) разработаны с использованием паттерна MVC (это необходимо помнить т.к ни одна переменная в шаблоне, не может быть выведена просто так, если она не объявлена в текущем контроллере).

Файлы представления, таблицы стилей и изображения для шаблона, расположены по пути catalog/view/theme/default

Папкаdefault содержит следующие папки:
template — папка с «шаблонами» (представлениями)
stylesheet — папка с таблицами стилей
image — папка с изображениями для шаблона (фоны, указатели,итд)

Папка template содержит файлы шаблона c расширением tpl. Данные файлы не используют какой либо сторонний шаблонизатор, а шаблонизация производится с помощью php.

Давайте рассмотрим назначение файлов, в директориях указанных ниже.

common/
header.tpl
 — шаблон для верхней части страницы (в.т.ч. подключение стилей и скриптов)
footer.tpl — шаблон нижней части страницы (ссылки информация, служка поддержки итд)
home.tpl — шаблон главной страницы (структура и расположение header.tpl, footer.tpl, column_left, column_right.tpl, content_bottom.tpl, content_top.tpl )
column_left.tpl – левая колонка страницы
column_right.tpl – правая колонка страницы
content_bottom.tpl – нижняя часть области контента
content_top.tpl – верхняя часть области контента
currency.tpl – вывод шаблона модуля для переключения валют магазина
language.tpl – вывод шаблона модуля для переключения языков магазина
search.tpl – шаблон модуля поиска (выводится в header.tpl как переменная $search)
buttons.tpl – шаблон кнопок для модуля PayPal Экспресс-платежи
cart.tpl — шаблон модуля корзины в шапке
maintenance.tpl – шаблон страницы при переключении магазина в режим обслуживания
success.tpl – страница о успешном результате выполнения операции (пример, оформление заказа)

product/
product.tpl
 – шаблон для карточки товара (основная страница товара)
category.tpl – страница списка товаров в категории
manufacturer_info.tpl – информация о производителе
manufacturer_list.tpl – страница список производителя
compare.tpl – страница сравнения товаров
review.tpl – отзывы о товаре в product.tpl (загружается Jquery через load() )
search.tpl – шаблон страницы поиска и вывода результатов
special.tpl – шаблон страницы Акции

information/
contact.tpl
 – шаблон для станицы контактов (страница Связаться с нами)
information.tpl – шаблон для вывода статей
sitemap.tpl – станица Карта сайта

extension/module/ — шаблоны для модулей
category.tpl – модуль Категории
filter.tpl — Фильтр
html.tpl — HTML контент
information.tpl — Информация
slideshow.tpl — Слайдшоу
banner.tpl — Баннер
carousel.tpl — Карусель
bestseller.tpl – Хит продаж
featured.tpl — Рекомендуемые
latest.tpl — Последние
special.tpl — Акция
store.tpl – шаблон модуля Магазин (выбора магазина при мультимагазине)
account.tpl – модуль Личный кабинет
affiliate.tpl – Модуль партнерская программа
google_hangouts.tpl – Модуль Google Hangouts
pp_layout.tpl — PayPal Экспресс-платежи
amazon_checkout_layout.tpl – не используется в РФ

checkout/ — шаблоны страниц Оформления заказа и Корзины покупок
cart.tpl – страница Корзины покупок
login.tpl – страница Авторизации
register.tpl – страница Регистрации
checkout.tpl – общий шаблон станицы оформления заказа
guest.tpl – шаг, оформление без регистрации
guest_shipping.tpl – шаг, ввод данных доставки (при оформлении без регистрации)
payment_address.tpl – шаг, ввод личных данных адреса плательщика
shipping_address.tpl – шаг, ввод данных нового адреса доставки
payment_method.tpl – шаг, выбор способа оплаты
shipping_method.tpl – шаг, выбор способа доставки
confirm.tpl – шаблон шага подтверждения заказа

account/ — шаблоны страниц Личного кабинета
account.tpl – шаблон главной страницы Личного кабинета
login.tpl – страница авторизации
register.tpl – страница регистрации
address_form.tpl – страница формы редактирования адреса
address_list.tpl – страница Мои адреса
edit.tpl – страница редактирования контактной информации
password.tpl – изменение пароля
forgotten.tpl – восстановление пароля
download.tpl – страница Файлы для скачивания
newsletter.tpl – подписка на новости
order_info.tpl – информация о заказе
order_list.tpl — список заказов
recurring_info.tpl – информация о периодическом платеже
recurring_list.tpl – список периодических платежей
return_form.tpl – форма возврата товара
return_info.tpl – информация о возврате
return_list.tpl – список возвратов
transaction.tpl – страница транзакций
reward.tpl – страница бонусных баллов
voucher.tpl – подарочные сертификаты
wishlist.tpl — закладки

affiliate/ — шаблоны страниц Партнерская программа
account.tpl — шаблон главной страницы Личного кабинета
login.tpl — страница авторизации
register.tpl – страница регистрации
edit.tpl – страница редактирования контактной информации
password.tpl – изменение пароля
forgotten.tpl – восстановление пароля
payment.tpl — страница платежных реквизитов
tracking.tpl – страница Реферальный код
transaction.tpl – страница транзакций

error/
not_found.tpl
 — страница «Запрашиваемая страница не найдена!»

mail/
order.tpl
 – шаблон для письма (html) о новом заказе
voucher.tpl – шаблон письма о Подарочном сертификате

extension/payment/ — шаблоны модулей способов доставки
bank_transfer.tpl – Банковский перевод
cheque.tpl – Оплата наличными
cod.tpl – Оплата при доставке
free_checkout.tpl – Бесплатный заказ
liqpay.tpl — LiqPay
moneybookers.tpl — Moneybookers
pp_express.tpl — PayPal Экспресс-платежи
pp_express_confirm.tpl страница подтверждения для модуля PayPal Экспресс-платежи
pp_pro.tpl – PayPal Pro
pp_standard.tpl — PayPal Standart

extension/total/
shipping.tpl – шаблон предварительного расчета доставки
coupon.tpl – шаблон модуля купонов (вывод происходит в на странице корзины)
voucher.tpl — шаблон модуля сертификатов (вывод происходит в на странице корзины)
reward.tpl — шаблон модуля бонусных баллов (вывод происходит в на странице корзины)

(* ниже указанные шаблоны модулей не используемые в РФ amazon_checkout_address.tpl, amazon_checkout_cart.tpl, amazon_checkout_confirm.tpl, amazon_checkout_failure.tpl, amazon_checkout_payment.tpl, amazon_checkout_success.tpl, authorizenet_aim.tpl, authorizenet_sim.tpl, klarna_account.tpl, klarna_invoice.tpl, nochex.tpl, paymate.tpl, paypoint.tpl, paypoint_failure.tpl, paypoint_success.tpl, payza.tpl, perpetual_payments.tpl, pp_pro_iframe.tpl, pp_pro_iframe_body.tpl, pp_payflow.tpl, pp_payflow_iframe.tpl, pp_payflow_iframe_return.tpl, realex.tpl, realex_remote.tpl, realex_response.tpl, sagepay.tpl, sagepay_direct.tpl, sagepay_us.tpl, web_payment_software.tpl, worldpay.tpl, worldpay_failure.tpl, worldpay_success.tpl, twocheckout.tpl)

Создание своего шаблона

Для создания своего шаблона Opencart, вам достаточно создать в директории catalog\view\theme\
папку с названием своего шаблона (например, mystore) и в ней разместить 3 папки template, stylesheet, image

Далее, создадим минимальный каркас для нового шаблона, а именно:

1. в директорию stylesheet, скопируем файл stylesheet.css из шаблона по умолчанию catalog\view\theme\default\stylesheet

2. в директории template, создадим папку common и скопируем туда файл header.tpl из шаблона по умолчанию catalog\view\theme\default\template\common\

3. Откроем файл header.tpl и изменим путь к файлу стилей на свои

<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">

заменим на

<link href="catalog/view/theme/mystore/stylesheet/stylesheet.css" rel="stylesheet">

4. Заходим в панель администрирования:
Меню -> Модули -> Темы -> [изменить] -> поле, Директория темы
и выбираем новый шаблон.

На этом этап создания каркаса нового шаблона завершен.
Далее вы можете изменять стили в файле стилей, подключать дополнительные стили или скрипты, прописывая пути в файле header.tpl. А если Вам необходимо изменить верстку одного из модулей или частей шаблона (например footer.tpl), то достаточно создать соответствующую директорию в вашем новом шаблоне и скопировать нужный файл из шаблона по умолчанию.

Хочу обратить внимание, что рекомендуется при создании нового шаблона, не копировать все файлы шаблона по умолчанию, а копировать лишь файлы которые изменяются. Данный метод поможет избежать многих проблем при обновлении версии OpenCart 2.х на более новые версии.

Если у вас есть установленные модификаторы !!!
Перед внесением изменений в тему, посмотрите, есть ли в кеше модификатора ваши файлы, которые вы собираетесь изменить. И если они там присутствуют, вам необходимо после внесения изменений, очищать кеш модификатора в папке \system\modification или очищать нажатием кнопки Обновить в Панели управления Меню — Модули — Модификаторы
Если этого не сделать, то произведенные изменения в файлах темы вы не увидите.

 

 

 

Создание сайта на Opencart

14 октября, 2018

Из этой статьи вы узнаете, как создать интернет-магазин на CMS OpenCart.

Почему стоит работать с OpenCart

Покупателям все равно, какой движок вы используете. Они хотят быстро найти подходящий продукт, убедиться в приемлемости цены и надежности продавца, оформить заказ, оплатить его удобным способом и побыстрее получить. С помощью CMS OpenCart эти потребности аудитории можно удовлетворить.

Вам не все равно, какой движок использовать. CMS интернет-магазина должна соответствовать следующим характеристикам:

Перечисленным характеристикам соответствует CMS OpenCart. Ниже вы найдете инструкцию по созданию интернет-магазина на этом движке.

Шаг 1: устанавливаем OpenCart

Установить OpenCart можно после регистрации домена и оплаты услуг хостинг-провайдера. Если выбрали хостинг с поддержкой автоустановки движков, действуйте так.

В панели управления в списке доступных установок выберите актуальную версию OpenCart. Например, в cPanel установить CMS можно с помощью Softaculos. Запустите автоматическую установку.

Укажите необходимые данные: протокол соединения, URL, название и описание сайта.

Укажите необходимые данные: протокол соединения, URL, название и описание сайта.

Укажите данные доступа к административной панели.

Укажите данные доступа к административной панели.

Указываем данные доступа в админку

Указываем данные доступа в админку

Запустите автоустановщик.

Если выбрали хостинг без поддержки автоустановки CMS, действуйте так:

Ознакомьтесь с пошаговой инструкцией по установке на сервер CMS WordPress. Она поможет понять принцип работы с кабинетом для управления хостингом.

Если все сделано верно, сайт будет доступен по выбранному URL. Административная панель доступна по адресу vash-site.ru/admin/.

CMS OpenCart установлена

CMS OpenCart установлена
Мы делаем сайты, которые оптимизированы под поисковики и приносят продажи. Обращайтесь!Подробнее

Шаг 2: настраиваем CMS OpenCart

Настройка OpenCart включает установку шаблона и указание оптимальных общих параметров. Начните с выбора внешнего вида магазина.

Как выбрать и установить шаблон OpenCart

Выбрать подходящий шаблон можно в официальном каталоге, а также на сайтах разработчиков и сторонних ресурсах. Для поиска по англоязычным ресурсам воспользуйтесь запросом «opencart themes». При необходимости добавьте характеристики нужной вам темы: adaptive, free, responsive.

В официальном каталоге OpenCart есть фильтры. Например, можно найти бесплатную тему с высоким пользовательским рейтингом.

Выбираем бесплатную тему с подходящей расчетной валютой

Выбираем бесплатную тему с подходящей расчетной валютой

Выбирайте тему с адаптивной версткой. Это решает проблему адаптации ресурса к мобильному трафику. В англоязычных каталогах такие темы обычно помечены тегами responsive, adaptive, mobile-friendly.

Чтобы установить тему, скачайте архив с дистрибутивом на компьютер. Разархивируйте дистрибутив и загрузите его на сервер с помощью FTP-клиента, например, FileZilla. Папку с файлами темы загрузите в корневой каталог сайта на сервере.

Загружаем шаблон на сервер

Загружаем шаблон на сервер

Войдите в меню System – Settings. Нажмите иконку редактирования рядом с названием магазина.

Входим в меню редактирования магазина

Входим в меню редактирования магазина

В настройках в поле Theme с помощью выпадающего меню выберите загруженный шаблон.

Выбираем нужный шаблон

Выбираем нужный шаблон

С помощью иконки с изображением дискеты сохраните изменения. Убедитесь, что тема магазина поменялась.

Сохраняем изменения

Сохраняем изменения

Перейдите из административной панели на сайт, чтобы проверить установку тему.

Также тему можно установить через административную панель в меню «Модули и расширения – Установка расширений».

Как правильно заказать сайт: пошаговое руководство для чайников

Как русифицировать CMS OpenCart

Есть два способа русификации OpenCart. Можно русифицировать международную сборку или сразу установить русскую сборку. Второй вариант более простой, поэтому рекомендую использовать его. Но с первым вариантом тоже нужно уметь работать. Разобраться поможет предложенная ниже инструкция.

Чтобы русифицировать сайт, скачайте пакет русификации из официального каталога OpenCart. Разархивируйте русификатор. С помощью FTP-клиента загрузите папки русификации на сервер. Поместите пакет из папки Admin – Language – Russian в папку Admin – Language на сервере. Папку Catalog – Language – Russian поместите в папку Catalog – Language на сервере.

Загружаем русификатор на сервер

Загружаем русификатор на сервер

В административной консоли выберите меню System – Localization – Languages. Нажмите иконку со знаком «+».

Входим в меню редактирования языков

Входим в меню редактирования языков

В выпадающем меню выберите русский язык. В поле Locale укажите значение ru_ru.UTF-8,ru_ru,ru-ru,russian. Сохраните изменения.

Включаем русский язык

Включаем русский язык

В настройках интернет-магазина выберите вкладку Local. С помощью выпадающего меню выберите язык сайта и административной панели. Сохраните изменения.

Выбираем языковые настройки интернет-магазина

Выбираем языковые настройки интернет-магазина

Если все сделано верно, язык административной панели изменится на русский. А на сайте появится меню выбора языков.

Пользователи получили возможность выбирать язык сайта

Пользователи получили возможность выбирать язык сайта

Более удобный способ русификации OpenCart – установка русской сборки. В ней учтены требования российского законодательства об использовании персональных данных, адаптированы географические настройки, способы платежей и доставки.

Если вы работаете только в рунете, логично сразу установить русифицированную сборку OpenCart

Если вы работаете только в рунете, логично сразу установить русифицированную сборку OpenCart

Как выбрать оптимальные базовые настройки CMS OpenCart

Войдите в режим редактирования интернет-магазина. Для этого в админке выберите меню «Система – настройки», после этого войдите в меню редактирования магазина. На вкладке «Основное» укажите Title, Description, по желанию Keywords.

Указываем метаданные

Указываем метаданные

На вкладке «Магазин» укажите сведения о магазине: название, собственника, физический и электронный адрес. На вкладке «Локализация» выберите страну и регион, валюту расчетов, единицы измерения. Оставьте включенной опцию ежедневного обновления курса валют, если посетители могут рассчитываться в нескольких валютах.

На вкладке «Локализация» укажите географические данные. Другие настройки не меняйте, если выбрали русскую сборку OpenCart. Измените настройки на подходящие, если работаете с международной сборкой.

Выберите подходящие настройки на вкладке «Опции». Обратите внимание на следующие пункты:

Остальные настройки можно не менять.

На вкладке «Изображения» измените логотип по умолчанию. Нажмите на ссылку «Просмотр файлов» и воспользуйтесь опцией «Загрузить». Загрузите ваш логотип. Замените значок сайта (favicone). Сохраните дефолтные размеры отображения фото. Их можно поменять позднее.

Меняем логотип и favicone

Меняем логотип и favicone

Проверьте, приходят ли уведомления на электронный адрес администратора. Для этого напишите себе письмо через форму обратной связи, которая доступна на странице «Контакты». Если уведомления приходят, оставьте на вкладке «Почта» значения по умолчанию. Если уведомления не приходят, поменяйте протокол на SMTP. Данные о SMTP-сервере уточните у провайдера электронной почты.

Письма доходят без изменения протокола

Письма доходят без изменения протокола

На вкладке «Сервер» включите ЧПУ. Для этого сначала переименуйте на сервере файл htaccess.txt в .htaccess. С помощью FileZilla найдите файл в корневом каталоге сайта и измените название.

Меняем название файла

Меняем название файла

Отметьте галочкой соответствующий пункт в административной панели.

Включаем ЧПУ

Включаем ЧПУ

Сохраните изменения. Проверьте, поменялось ли отображение URL. По умолчанию они выглядят так (см. иллюстрацию).

Недружественные к пользователям и поисковым системам URL

Недружественные к пользователям и поисковым системам URL

Если все сделано верно, URL будет выглядеть так (см. иллюстрацию).

ЧПУ и SEO-дружественный URL

ЧПУ и SEO-дружественный URL

На вкладке «Сервер» также включите поддержку SSL-сертификата и GZIP-сжатие. Другие настройки можно не менять.

Чтобы добавить нового пользователя или группу пользователей, воспользуйтесь меню «Система – Пользователи». Например, чтобы назначить пользователя администратором, нажмите кнопку «Добавить».

Входим в меню «Система - Пользователи» и добавляем нового пользователя

Входим в меню «Система — Пользователи» и добавляем нового пользователя

На открывшейся странице укажите регистрационные данные. С помощью выпадающего меню выберите группу пользователей Administrator. Отметьте статус «Включено» и сохраните изменения.

Назначаем администратора

Назначаем администратора

После выбора базовых настроек уделите внимание модулям OpenCart.

Шаг 3: расширяем функциональность CMS OpenCart с помощью модулей

Модули OpenCart объединяются в две группы: базовые и дополнительные. Первые обеспечивают базовую функциональность движка, а вторые помогают кастомизировать сайт и решать дополнительные задачи.

Как работать с базовыми модулями OpenCart

В админке выберите меню «Модули — Расширения». На открывшейся странице вы увидите список установленных и доступных для установки в русской сборке OpenCart модулей.

В качестве примера обратите внимание на модуль «Аккаунт». Он отвечает за отображение меню личного кабинета пользователя.

В качестве примера обратите внимание на модуль «Аккаунт». Он отвечает за отображение меню личного кабинета пользователя.

Страница авторизации пользователей

Страница авторизации пользователей

По умолчанию модуль «Аккаунт» включен. Чтобы научиться работать с модулями, добавьте блок «Аккаунт» на страницу поиска.

Делаем страницу поиска более функциональной

Делаем страницу поиска более функциональной

Перейдите в раздел админки «Дизайн – Макеты». Выберите макет Search и войдите в меню редактирования. Нажмите кнопку «+», чтобы добавить модуль в макет.

Добавляем модуль в макет

Добавляем модуль в макет

С помощью выпадающего меню выберите модуль «Аккаунт». Сохраните изменения. Обновите страницу результатов поиска. Теперь на ней отображается новый модуль.

Добавили модуль на страницу

Добавили модуль на страницу

Чтобы настроить модуль, войдите в меню редактирования соответствующего блока.

Редактируем модуль карусель

Редактируем модуль карусель

Выберите желаемые настройки. Например, в карусели на главной странице можно вместо продуктов производителя HP показывать ссылки на всех производителей, товары которых представлены в магазине.

В карусели на главной отображаются продукты HP

В карусели на главной отображаются продукты HP

На странице настройки модуля с помощью выпадающего меню выберите подходящий вариант отображения. В данном случае подходит опция Manufactures. Сохраните изменения. Проверьте, изменился ли модуль «Карусель».

Теперь в карусели отображаются производители, представленные в магазине

Теперь в карусели отображаются производители, представленные в магазине

Аналогичным способом можно настроить отображение остальных модулей, которые входят в русскую сборку OpenCart.

После настройки базовых модулей установите дополнительные расширения.

Как расширить функциональность OpenCart с помощью дополнительных модулей

С помощью дополнительных модулей можно обеспечить соответствие ресурса требованиям поисковых систем, а также безопасность пользователей и сайта.

Начните с установки SEO-модуля. Обратите внимание на платные комплексные решения, например, SeoProSEO Mega Kit PlusAll in One SEO for OpenCart и другие. Если пока не готовы платить за комплексные модули, найдите бесплатные расширения. В отличие от коммерческих продуктов, они обычно решают одну задачу.

Вот несколько бесплатных SEO-модулей:

Чтобы установить модуль, скачайте архив с дистрибутивом на жесткий диск компьютера. Установите пакет на сайт в разделе админки «Модули – Установка расширений».

Устанавливаем модуль для реализации протокола Open Graph

Устанавливаем модуль для реализации протокола Open Graph

Перейдите в раздел админки «Модули – Модификаторы», нажмите кнопку «Обновить».

Обновляем кэш модификаторов

Обновляем кэш модификаторов

Проверьте отображение ссылок на сайт в социальных сетях. До реализации протокола Open Graph они выглядят так (см. иллюстрацию).

Сниппет без фото не привлекает внимание

Сниппет без фото не привлекает внимание

После подключения модуля сниппет становится визуально привлекательным.

Сниппет с фото выглядит лучше

Сниппет с фото выглядит лучше

После установки платного комплексного SEO-модуля или нескольких бесплатных решений найдите расширение для автоматического резервного копирования сайта. Самые интересные решения распространяются на коммерческой основе. Обратите внимание на следующие платные модули:

Также можно пользоваться штатным инструментом резервного копирования CMS OpenCart и создавать резервные копии вручную. Войдите в меню «Система – Обслуживание — Бэкап». Нажмите кнопку «Бэкап». Система создаст и загрузит на жесткий диск компьютера резервную копию.

Создаем резервную копию сайта штатными средствами вручную

Создаем резервную копию сайта штатными средствами вручную

Чтобы защитить административную панель от взлома, воспользуйтесь одним из перечисленных модулей:

Позаботьтесь об удобных и безопасных способах расчетов. Большинство платежных модулей платные. Обратите внимание на такие:

Установите бесплатный модуль безопасности, например, OpenCart Total Security. Надстройка защищает сайт от действий злоумышленников.

Как подключить сайт к системам аналитики и мониторинга

Чтобы подключить Google Analytics, активируйте встроенный модуль. Для этого перейдите в меню админки «Модули – Расширения», с помощью выпадающего меню выберите вариант «Аналитика» и нажмите кнопку «Добавить» напротив опции Google Analytics.

Активируем модуль Google Analytics

Активируем модуль Google Analytics

В меню редактирования модуля добавьте код аналитики и измените статус на «Включено».

Добавляем код и включаем модуль

Добавляем код и включаем модуль

Подождите несколько минут и проверьте, поступают ли данные в Google Analytics.

Данные поступают, Google Analytics подключили

Данные поступают, Google Analytics подключили

Чтобы подключить систему аналитики «Яндекс.Метрика», добавьте код отслеживание в поле модуля Google Analytics.

«Метрику» подключаем через модуль Google Analytics

«Метрику» подключаем через модуль Google Analytics

Подключите сайт к сервисам Google Search Console и «Яндекс.Вебмастер». Для этого зарегистрируйте ресурс в системах и выберите способ подтверждения прав на управление. Например, с помощью FTP-клиента загрузите HTML-файл на сайт.

Загружаем HTML-файл на компьютер

Загружаем HTML-файл на компьютер

Файл поместите в корневой каталог ресурса.

Загружаем файл на сервер с помощью FTP-клиента

Загружаем файл на сервер с помощью FTP-клиента

Перейдите по ссылке, предложенной на странице верификации в «Вебмастере».

Файл загружен на сервер

Файл загружен на сервер

Для завершения верификации нажмите кнопку «Проверить».

Права на управление сайтом подтверждены

Права на управление сайтом подтверждены

Аналогичным способом подтвердите права на сайт в Search Console.

Шаг 4: редактируем контент сайта

На первом этапе создайте иерархию сайта и отредактируйте меню. Затем публикуйте карточки товара и статьи в блоге.

Как создать иерархию сайта и отредактировать меню

Чтобы расположить категории в иерархическом порядке, создайте родительские категории. Включите для них опцию отображения в главном меню. После этого создайте дочерние категории.

В административной панели выберите меню «Каталог – Категории». Выберите категорию, которую хотите отредактировать. Перейдите по ссылке «Изменить».

Редактируем категорию

Редактируем категорию

На открывшейся странице укажите или измените название категории. Добавьте мета-теги description и keywords. С помощью текстового редактора добавьте описание категории.

Добавляем описание и мета-теги

Добавляем описание и мета-теги

Дефолтный редактор OpenCart позволяет форматировать текст в визуальном режиме, добавлять изображения и видео.

На вкладке «Данные» отметьте опцию «Показывать в главном меню» и укажите порядок сортировки. От него зависит позиция категории в меню. При необходимости замените изображение категории. На вкладке SEO можно менять URL категории. На вкладке дизайн можно выбрать макет страницы. После выбора нужных опций сохраните изменения.

Чтобы создать подкатегорию, достаточно во время создания или редактирования раздела указать родительскую категорию.

Указываем родительскую категорию

Указываем родительскую категорию

Чтобы создать подкатегорию второго уровня, введите название родительской подкатегории первого уровня и воспользуйтесь всплывающей подсказкой.

С помощью подсказки выбираем родительскую подкатегорию

С помощью подсказки выбираем родительскую подкатегорию

Как публиковать заметки и заполнять карточки товаров

В русской сборке OpenCart есть функция публикации статей. Чтобы создать публикацию, войдите в раздел админки «Каталог – Статьи» и нажмите кнопку «Добавить».

Создаем публикацию

Создаем публикацию

С помощью визуального редактора оформите и опубликуйте статью. Ссылка на публикацию будет отображаться в футере в разделе «Информация».

Публикация создана с помощью встроенной функции «Статьи»

Публикация создана с помощью встроенной функции «Статьи»

С помощью дополнительных модулей можно создать полноценный блог. Обратите внимания на такие решения:

Установите и активируйте модуль Blog function lite. В админке появится новый раздел «CMS – Blog». Войдите в него и нажмите кнопку «Добавить».

Создаем публикацию в блоге

Создаем публикацию в блоге

С помощью стандартного визуального редактора добавьте и опубликуйте запись.

Записи в блоге создаются с помощью стандартного редактора

Записи в блоге создаются с помощью стандартного редактора

После публикации первой статьи в футере появится ссылка на раздел «Блог». На странице блога отображаются превью статей с фото и коротким описанием.

Так выглядит страница блога

Так выглядит страница блога

Чтобы заполнить карточку товара, в административной панели выберите меню «Каталог – Товары». Нажмите кнопку «Добавить» в правом верхнем углу экрана.

Создаем карточку товара

Создаем карточку товара

На вкладке «Основное» страницы редактирования карточки товара укажите название, описание и ключевые слова. Добавьте контент.

Добавляем основную информацию о товаре

Добавляем основную информацию о товаре

На вкладке «Данные» укажите информацию о товаре. На вкладке «Связи» укажите данные о производителе. Отметьте категории, в которых хотите опубликовать карточку товара. При необходимости укажите рекомендуемые товары.

На вкладке «Атрибут» укажите важные характеристики продукта. Это может быть диагональ экрана, объем оперативной памяти и т.п. Если у вас есть продукты, отличающиеся только цветом, размером, текстурой поверхности и т.п., отметьте это на вкладке «Опции».

При необходимости введите специальные условия продажи. На вкладке «Скидка» укажите группу пользователей, которые могут воспользоваться предложением, льготную цену и период действия специальных условий. Вы также можете предложить клиентам льготные условия покупки, заполнив данные на вкладке «Акции».

Указываем условия скидки

Указываем условия скидки

На вкладке «Изображения» можно добавить дополнительные фото продукта. На вкладке «Бонусные баллы» укажите количество баллов, которые получает покупатель продукта. Используйте эту опцию, если внедрили в магазине систему бонусов. На вкладке «Дизайн» при необходимости измените шаблон страницы. Сохраните изменения.

Карточка товара опубликована

Карточка товара опубликована

Шаг 5: отслеживаем продажи

Эффективность интернет-магазина удобно отслеживать с помощью инструментов Google Analytics и «Яндекс.Метрики». Некоторые параметры можно учитывать и анализировать с помощью штатных средств мониторинга CMS OpenCart.

После входа в админку открывается раздел «Панель состояния». Здесь есть краткая сводка о количестве заказов, сумме продаж, количестве покупателей и посетителей на сайте. На графике отображается количество покупателей и заказов. Также на странице обзор представлена карта заказов и информация о последних заказах.

Обзорная информация о продажах доступна на панели состояния в админке

Обзорная информация о продажах доступна на панели состояния в админке

Чтобы просмотреть данные по заказам, выберите меню «Продажи – Заказы». Выберите интересующий вас заказ и воспользуйтесь опцией «Просмотреть».

Просматриваем данные по заказам

Просматриваем данные по заказам

На открывшейся странице вы увидите доступную информацию о сделке, включая имя покупателя, выбранный способ оплаты, сведения о купленном товаре. С помощью кнопки «Просмотреть счет» можно вывести на экран и распечатать счет.

Изучаем информацию о сделке и печатаем счет

Изучаем информацию о сделке и печатаем счет

В меню «Клиенты – Клиенты» можно просматривать данные о клиентах. А меню «Клиенты – Группы клиентов» позволяет создавать и редактировать группы пользователей. Например, вы можете объединять в группы пользователей, купивших товары определенного производителя, воспользовавшихся акционным предложением или купивших несколько товаров за определенный период.

В меню «Отчеты» можно просматривать отчеты о продажах. Здесь отображаются сводки по заказам, налогам, возвратам, доставке и использованным купонам. Нужную группу отчетов выбирайте с помощью выпадающего меню.

В меню «Отчеты – Клиенты онлайн» отображаются данные о пользователях онлайн и их действиях. В меню «Отчеты – Статистика» смотрите статистическую сводку.

В меню «Отчеты – Клиенты онлайн» отображаются данные о пользователях онлайн и их действиях. В меню «Отчеты – Статистика» смотрите статистическую сводку.

Статистическая сводка

Статистическая сводка

Создание интернет-магазина на CMS OpenCart: стоит ли игра свеч

Стоит. Хотя бы потому, что с помощью OpenCart вы можете запустить интернет-магазин буквально в течение часа. Но приготовьтесь потратить не один час на адаптацию функциональности движка к потребностям вашего проекта.

OpenCart заслуживает внимание благодаря ряду важных преимуществ:

Есть ли подводные камни? Обязательно. Вот главный: CMS OpenCart бесплатный только условно. Движок действительно можно использовать свободно. А вот за модули для расширения функциональности и кастомизации сайта приготовьтесь платить.

Конечно, вы можете пользоваться бесплатными расширениями. Но они не всегда решают актуальные задачи. Вот пример: для CMS WordPress существует бесплатный SEO-плагин All in One SEO Pack. Он решает практически все задачи, связанные с адаптацией движка к требованиям поисковиков. Для OpenCart также существуют комплексные SEO-плагины уровня All in One SEO Pack. Но они платные.

Придется выбирать: купить один комплексный модуль или установить с десяток бесплатных, каждый из которых решает одну задачу. Кстати, аналогичная ситуация с дизайн-шаблонами: большинство хороших тем для OpenCart продаются.

В комментариях поделитесь опытом работы с OpenCart. Сравните его с другими CMS для интернет-магазинов, с которыми работали. Также вы можете задавать вопросы, оставлять замечания и предложения.

Источник: https://texterra.ru/blog/kak-sozdat-internet-magazin-na-opencart-poshagovaya-instruktsiya.html