Как создать интернет-магазин за 1 день — самое понятное руководство по OpenCart

Здравствуйте! Сегодня пойдет речь о том, как можно сэкономить не только деньги, но и время. Кстати, с этим руководством экономить можно разными способами.

Давайте уже конкретнее!

Чем эта статья полезна вам:

  • вы сумеете запустить полноценный интернет-магазин за один день, не нанимая разработчиков ‒ чем не экономия?
  • если даже некогда создавать все самому, то прочитав статью, вы будете знать все нюансы разработки. Это поможет правильно нанять разработчиков и грамотно повести с ними сотрудничество ‒ тут экономия времени и нервов. Вы ведь помните, что время ‒ деньги?

Что получаем мы:

  • профессиональный рост ‒ когда обучаешь других, сам многое узнаешь. Как в том анекдоте про учителя: “Десять раз им объяснял, уже сам все понял, а они ‒ никак…”
  • уверены, руководство поможет многим, а это нам только плюс в карму ‒ ради такого стоит постараться.

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

Содержание

Предисловие

Все чаще мы получаем заказы на разработку интернет магазинов. Это и не удивительно, ведь покупать в интернете стало очень удобно, быстро и, часто дешевле чем в магазине.

Стремительное развитие электронной коммерции не позволяет сидеть на месте. Нужно идти в ногу, а лучше ‒ опережать на пару шагов!

Предприниматели это прекрасно понимают и стараются как можно выгоднее представить свой товар в сети. Безусловно, серьезный подход к интернет-торговле подразумевает разработку качественного сайта. Это объясняет рост спроса на создание интернет-магазинов.

Но что же делать тем продавцам, у кого бюджет небольшой, кто не может позволить себе заказать разработку интернет-магазина?

Выход есть и он достаточно прост!

С помощью этого руководства, всего за один день вы сумеете создать интернет-магазин под управлением CMS OpenCart.

Давайте познакомимся с этой системой поближе

Что такое CMS OpenCart и почему стоит выбрать именно её?

CMS Content Management System ‒ система управления содержимым веб-ресурса, то есть сайта.

OpenCart ‒ это одна из популярнейших CMS ориентирована на создание и администрирование интернет-магазинов. В 2014 году она стала самой популярной для E-коммерции в Китае. А уже в 2015 OpenCart стала третьей в мире по популярности, отставая только от Woocommerce и Magento.

Вот только Magento ‒ платная и её активно рекламируют. А OpenCart бесплатна и остается третьей в мире, не платя ни цента за рекламу. Чувствуете разницу?

В движке OpenCart есть все необходимое для запуска продаж. А если использовать дополнительные модули, то можно настроить работу системы на “Отлично!” без особых усилий.

К тому же это CMS, которая постоянно обновляется. В интернете есть много крутых форумов, где вам помогут в работе с ним.

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

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

Конечно, есть и недостатки, но о них мы поговорим позже.

Какую версию OpenCart выбрать?

Недавно вышла свежая версия OpenCart 3.0.0.0. До её появления всеми активно использовался релиз OpenCart 2.3.0.2. Вот как раз его мы и будем устанавливать.

Почему не последнюю версию? Потому, что каждый новый продукт сыроват. Его еще будут тестировать, допиливать и совершенствовать. К тому же под новую версию адаптировано еще не так много модулей.

Также я НЕ предлагаю вам работать с версией OpenCart 1.5.0 и ниже, потому что она действительно устарела как морально, так и функционально.

Релиз OpenCart 2.3.0.2 на сегодняшний день самый стабильный! Не вижу более весомых доказательств!

OpenCart vs OcStore

OpenCart ‒ официальная англоязычная версия движка, разрабатываемая OpenCart Team.

OcStore ‒ разрабатывается русским сообществом программистов и имеет полную локализацию под русскоязычный рынок. Если расшифровать название, то получаем: Oc ‒ OpenCart, store ‒ магазин.

Как видите, это один и тот же движок. При выборе той или иной версии вам еще важно будет знать, что с OpenCart перейти на OcStore гораздо проще, чем наоборот. Большинство модулей и шаблонов подходят к обеим версиям движка.

Основные различия между OcStore и OpenCart:

  1. Русская локализация OcStore и адаптация под русскоязычный рынок.
  2. Система OcStore имеет существенное дополнение в плане SEO-оптимизации магазина.
  3. В OcStore расширен функционал в административной части интернет-магазина.
  4. Добавлены модули оплаты сбербанка и QIWI.
  5. Модуль для создания рассылки через сервис Unisender
  6. Есть возможность настроить sms-уведомления.

Повторюсь, что это один и тот же движок. Версия OcStore адаптирована под русскоязычное население, поэтому её мы будем использовать.

Далее в руководстве я буду называть движок по разному: то OcStore, то OpenCart. Но суть от этого не поменяется.

Установка OcStore на хостинг

Любую CMS, в том числе и OcStore можно установить как на виртуальный хостинг, так и на локальный.

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

Мы рассмотрим установку CMS OcStore на виртуальный хостинг, чтобы наглядно показать весь путь запуска интернет-магазина. Установка движка на локальный сервер ничем не отличается, поэтому руководство будет полезно всем заинтересованным.

В обоих случаях для работы сайта нам понадобится база данных. Вот с неё то мы и начнем.

Создание базы данных сайта

В базе данных (БД) будет храниться весь его контент: информация о магазине, товарах, категориях, контактные данные, данные для входа в систему, о зарегистрированных пользователях, покупателях и т.д. Это своего рода память сайта.

Создать базу данных можно в админке хостинга в разделе “Базы данных”. Найдите раздел “Базы данных” и нажмите “Создать”.

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

Создание новой базы данных
Создание новой базы данных

братите внимание, что имя БД и пароль должны отличаться от данных для входа в панель управления хостинга. Это позволит защитить сайт от взлома.Замена префикса БД тоже усложнит задачу злоумышленникам.

Не забудьте записать имя и пароль. Они нам скоро пригодятся!

Установка CMS OpenCart через панель управления хостинга

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

Все, что вам нужно ‒ это выбрать желаемую CMS в админ-панели хостинг провайдера, привязать к ней базу данных и дождаться установки. Не буду на этом останавливаться, так как у большинства хостинг провайдеров админки разные и нет смысла показывать пример какой-то одной.

Настройка FTP соединения с сервером

Чтобы установить движок на хостинг, необходимо файлы движка загрузить на виртуальный сервер. Это лучше делать через FTP соединение.

Рекомендую для загрузки файлов на сервер использовать FTP-клиент Filezilla. Это небольшая компьютерная программа, с помощью которой можно быстро и без трудностей загружать или скачивать с сервера любые файлы сайта хоть по 1000 раз на день.

  1. Скачайте программу с официального сайта filezilla.ru
  2. Установите её на своем компьютере и запустите
  3. Откройте менеджер сайтов.

    ФТП менеджер сайтов
    ФТП менеджер сайтов
  4. Нажмите “Новый сайт” и назовите его. Называйте одноименно, чтобы в будущем не путать, когда у вас в программе будет несколько сайтов.

    ФТП новый сайт
    ФТП новый сайт
  5. Теперь, следуя шагам на скриншоте, введите сервер вашего хостинга, имя учетной записи FTP и пароль к ней. Всю эту информацию вы найдете у своего хостинг провайдера в разделе “FTP соединение” или типа того.
  6. Нажмите “Ок”, чтобы сохранить введенные данные.
  7. Раскройте меню менеджера сайтов и выберете только что созданный. Программа установить соединение с вашим сайтом. Можно пользоваться!
ФТП соединение установлено
ФТП соединение установлено

Если все правильно, то получите сообщение “Список каталогов извлечен”, что означает успешное подключение к серверу.

Список каталогов извлечен
Список каталогов извлечен

Поздравляю! FTP соединение успешно настроено. Теперь можно непосредственно переходить к установке движка.

Установка OcStore на виртуальный хостинг

  1. Загружаем архив с движком на хостинг. Это можно сделать простым перетаскиванием архива с папки на компьютере в окно программы Filezilla
  2. В панели управления хостинга находим раздел “Файловый менеджер” или “Менеджер файлов” и открываем его. Там должна быть папка с названием “www”, а в ней папка с названием вашего домена. На многих хостингах сайты хранятся в папке “public”. В одной из таких папок лежит наш архив. Его необходимо распаковать.
  3. После извлечения (распаковки) архива, его можно удалить с сервера. Он там больше не понадобится. А все содержимое папки “upload” необходимо вырезать и вставить в папку с названием вашего домена, то есть перенести на уровень выше. Папка “upload” останется пустой и её тоже можно удалить.
  4. Теперь открываем любимый браузер и вводим адрес нашего сайта (домен). Если все сделано правильно, то должна загрузиться страница установки CMS OcStore. Первый этап непосредственной установки движка. Здесь вы можете выбрать язык, ознакомиться с лицензионным соглашением и “Продолжить”.

    Первый шаг установки Opencart
    Первый шаг установки Opencart
  5. На втором этапе в 4 пункте мы видим отсутствие двух файлов.
    Правка фалов движка
    Правка фалов движка

    Чтобы это исправить, необходимо вернуться в FTP-клиент и переименовать там файлы “config-dist.php” в ’config.php”. Один из них находится в корне сайта, а второй ‒ в папке “admin”. Переименуйте их и нажмите в браузере “Продолжить”

    Правка файлов движка через ФТП клиент
    Правка файлов движка через ФТП клиент
  6. Помните я предупреждал вас, чтобы вы записали доступы к базе данных? Так вот сейчас они нам пригодятся! На третьем этапе установки CMS OcStore нужно связать воедино сайт с базой данных. Заполните все поля соответствующими данными. Кстати, не забудьте указать свой префикс, если меняли его при создании БД. Обратите внимание на скриншот, чтобы понять, какие поля оставить без изменений. Также, на этом этапе необходимо придумать имя и пароль для администратора сайта.
Привязка базы данных к OpenCart
Привязка базы данных к OpenCart

Поздравляю! Установка завершена. Четвертый этап напоминает нам удалить папку “install” с хостинга. Удаляем!

CMS OcStore установлена на хостинг и готова к работе. Теперь необходимо произвести базовую настройку интернет-магазина.

Стандартный вид сайта на OpenCart
Стандартный вид сайта на OpenCart

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

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

Такие настройки выполняются в разделе “Система ‒ Настройки”. Нажимаем карандаш для редактирования настроек и выставляем их на свое усмотрение.

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

Внесу небольшую ясность по категориям настроек, о том, что и где можно поменять:

  • общие ‒ вносим МЕТА данные сайта для правильной поисковой оптимизации в сети
  • витрина ‒ все, что касается названия магазина, его владельца, адреса, время работы, контактные данные и логотип для страницы обратной связи
  • локализация ‒ о том, где находится магазин, его язык, валюта, меры измерения
  • опции ‒ разрешить или запретить отзывы под товарами, включить в их стоимость налогообложение, настроить подарочные сертификаты и многое другое (в этот раздел вы еще не раз заглянете)
  • изображения ‒ выбираем логотип и favicon для сайта
  • FTP ‒ настройки соединения с сайтом. У нас такое соединение уже есть, поэтому ничего здесь не настраиваем
  • почта ‒ название говорит само за себя. Обычно используют только поле “Дополнительные адреса”
  • сервер ‒ в этой категории настроек можно и нужно включить SEO URL и другие опции
  • sms ‒ есть возможность настроить sms-оповещение владельца магазина и клиента о покупках.

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

Лайфхак: Если вы планируете использовать магазин только на одном языке, то имеет смысл отключить другие языки. иначе вам везде придется заполнять поля как на русском, так и на английском.

Открываем закладку “Система” и выбираем раздел “Локализация” ‒ “Языки”. В открывшемся списке языков оставляем только нужный. Остальные удаляем, отметив их галочкой.

Сохранение настроек движка
Сохранение настроек движка

Выбор и установка шаблона для OpenCart

Профессиональные разработчики не делают этого! У них есть дизайн-макет сайта, над которым плодотворно работал дизайнер. Программист верстает свой шаблон сайта на основе этого макета.

Но это руководство написано не для профессионалов, а для новичков! Поэтому “умный в гору не пойдет, умный гору обойдет!” Чтобы сэкономить на услугах дизайнера и программиста, но при этом иметь привлекательный сайт, мы подберем для него шаблон.

Еще один дополнительный плюс в пользу шаблона! Многие из них устанавливаются вместе со всеми необходимыми модулями. Это тоже упрощает подготовку сайта к запуску.

Критерии выбора шаблона магазина

Если ввести в поиск запрос “шаблоны для опенкарт”, то можно получить массу предложений как платных, так и бесплатных шаблонов. Я не буду советовать вам какой-либо определенный сайт с шаблонами. Сами выбирайте:)

Нет! Все таки намекну, что скачивать шаблоны где попало не стоит, во избежание заражения сайта вредоносными файлами. Из популярных и проверенных временем ресурсов могу выделить несколько:

  • TemplateMonster
  • OpenCart forum
  • Официальный каталог OpenCart
  • Официальный сайт русского представительства OpenCart
  • LiveOpenCart
  • Магазин OpenCart Russia

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

  1. определитесь, чего не хватает в стандартном шаблоне. Может не стоит и заморачиваться?
  2. выбранный шаблон должен быть адаптирован под вашу версию установленной OpenCart
  3. обязательно просматривайте демоверсии шаблонов и их админок
  4. прочтите комментарии тех, кто уже воспользовался этим продуктом. они подскажут корректно ли он работает, есть ли ошибки и т.д.
  5. уточните из тех же отзывов как работает поддержка шаблона, устраняют ли ошибки, выходят на связь, как часто выходят обновления
  6. шаблон должен быть адаптивным ‒ сегодня без этого никуда! Люди часто покупают с мобильного
  7. помните, что бесплатный шаблон часто нуждается в доработках уже на сайте или в помощи по его настройке. Это дополнительные затраты, которые могут обойтись дороже, чем покупка платного.

Думаю, этих рекомендаций достаточно. чтобы сделать правильный выбор. Вы нашли и скачали крутой шаблон. Теперь не терпится посмотреть его в деле. Приступим!

Установка шаблона на OpenCart

  1. Распаковываем архив с шаблоном и ищем файловую структуру похожую на структуру Opencart. Должны быть папки admin, catalog, image, system. Наличие папки “catalog” в архиве обязательно, остальные ‒ по необходимости!
  2. Все эти папки загружаем в корневой каталог сайта, соглашаясь на замену похожих файлов. 

    Загрузка шаблона OpenCart через ФТП
    Загрузка шаблона OpenCart через ФТП
  3. Вот и все. Установка шаблона выполнена. Осталось только включить его в админке и применить к использованию. Для этого в админке магазина проходим в раздел  “Дополнения ‒ Дополнения”. Сверху в выпадающем списке выбираем “Шаблоны” 

    Замена шаблона OpenCart
    Замена шаблона OpenCart
  4. В открывшемся списке видим только один шаблон “Default”. Заходим в его настройки, нажав синий карандаш справа от названия шаблона.

    Активация шаблона OpenCart
    Активация шаблона OpenCart
  5. В поле “Папка шаблона” вместо “default” выбираем название установленного вами шаблона. В моем случае это “simplica” и нажимаем на синюю дискетку в верхнем правом углу, чтобы сохранить изменения.
Выбор шаблона OpenCart по умолчанию
Выбор шаблона OpenCart по умолчанию

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

Просмотр сайта
Просмотр сайта

Расширение функционала ‒ встроенные и сторонние модули для CMS OpenCart

В целом наш магазин ‒ уже готовая площадка для торговли. Можете сразу переходить к наполнению сайта контентом и запускать продажи, если у вас небольшое количество товаров с краткими описаниями и минимумом атрибутов типа размер, вес, цвет и т.д.

Для более масштабных магазинов (от 100-200 товаров) будет полезно познакомиться с модулями для CMS OpenCart, которые позволяют облегчить администрирование магазина и многие процессы сводят к минимуму. Благодаря им мы можем экономить время, а значит и деньги.

ТОПовые модули для OpenCart

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

  • расширили возможность заполнения МЕТА тегов, что способствует правильному SEO продвижению сайта
  • модуль оплаты Сбербанк России
  • модуль оплаты Qiwi
  • модуль доставки ‒ доставка в зависимости от суммы заказа
  • модуль создания рассылок
  • модуль sms оповещений

Кроме них рекомендую к использованию следующие дополнения:

  • Экспорт/импорт ‒ позволяет экспортировать все существующие товары магазина в понятную Excel таблицу. Модуль хорош тем, что позволяет ускорять процесс обработки тысяч товаров ‒ менять цены, описания, параметры, привязку к категориям и др. При этом не нужно открывать и закрывать каждый товар/категорию на редактирование. все можно сделать в таблице и импортировать на сайт одним кликом. Особенно пригодится тем, кто умеет работать с таблицами.

Лайфхак для тех, у кого магазин еще пуст! Создаете один товар через админку сайта, привязываете к нужным категориям, заполняете все необходимые поля и добавляете изображение. Затем экспортируете товары и получаете Excel таблицу с одним товаром. По примеру этого товара добавляете остальные и импортируете на сайт. Готово! Времени сэкономлено в 3-5 раз. Повнимательнее с ID Product ‒ они не должны повторяться!

  • Автозаполнение SEO URL ‒ после заполнения названия товара или категории, модуль автоматически заполняет поле SEO URL. Ссылки на ваши категории и их товары будут понятны не только людям, но и поисковикам
  • Умный фильтр ‒ то, без чего не обходится ни один магазин. Модуль фильтрует товары по цене, по категориям, по размерам, весу, цвету и т.д.
  • Умный поиск ‒ при вводе поискового запроса подсвечивает варианты товаров
  • Купить в один клик ‒ модуль который не нуждается в объяснении
  • Уточнить наличие, уточнить цену ‒ два похожих модуля, которые собирают номера телефонов заинтересованных. Можно создать рассылку акций, распродаж и т.д.
  • Быстрый заказ ‒ стандартная форма заказа OpenCart слишком длинная  с множеством полей для заполнения. Этот модуль позволяет администратору упростить регистрацию покупателя или оформить заказ без регистрации
  • Быстрый просмотр товара ‒ позволяет изучить товар не перезагружая страницу
  • Автокалькулятор цен ‒ автоматически пересчитывает цену товара, если она зависит от количества, размера, цвета, материала и т.д.
  • Видео продукта ‒ в редактирование товара добавляет поле для видео
  • Зум изображений ‒ увеличивает фото товара при наведении
  • Плюс/минус ‒ позволяет добавлять или уменьшать количество товаров к заказу
  • Стикеры ‒ позволяет добавить к определенным товарам наклейки с акцией или скидкой
  • Модуль быстрого редактирования ‒ полезное дополнение для магазинов с большим количеством товаров
  • Оценка магазина ‒ разрешает покупателям оставлять отзывы и оценки не только товару, но и магазину в целом. Эти оценки можно вывести на любую страницу сайта, привлекая доверие новых посетителей
  • Модуль подписки ‒ добавляет в подвал сайта форму для подписки
  • Поп Ап ‒ модуль всплывающего окна, в котором можно рассказать об акциях, распродажах, программах лояльности, бонусах и т.д.

Большинство этих модулей платны. Их стоимость варьируется в рамках 3-10$. Согласитесь, это небольшие деньги за большие возможности!

Установка модулей на OpenCart

А теперь научимся  устанавливать эти самые модули на наш движок. Существует два варианта их установки. Первый выполняется через панель управления сайтом, а второй ‒ посредством загрузки файлов модуля в корень сайта через FTP соединение.

Второй вариант ‒ загрузка модуля в корень сайта, ничем не отличается от загрузки файлов шаблона, о которой я рассказал выше. Поэтому не буду на нем останавливаться. Давайте рассмотрим установку через ПУ.

Я специально утаил от вас еще один жизненно необходимый модуль. Так сказать, оставил на закуску.

Модификация “LocalCopyOCMOD” ‒ позволяет правильно устанавливать модули, а также решает ошибку «FTP должен быть включен в настройках» при установке модификаций в админке Opencart 2.x QuickFix для Opencart 2.0, 2.1, 2.2, 2.3.

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

  1. В разделе “Дополнения ‒ установка дополнений” нажимаем кнопку “Загрузить”, находим заранее скачанный модуль у себя на компьютере, кликаем Ок и дожидаемся окончания установки (1-3 сек).

    Установка модуля Opencart
    Установка модуля Opencart
  2. Переходим в раздел “Менеджер дополнений” и сбрасываем кеш дополнений нажатием на кнопку “Обновить”. Этот шаг обязателен для обоих вариантов установки модулей!
Сброс кеша дополнений
Сброс кеша дополнений

Как видите, чем дальше, тем проще. Всего в два этапа мы установили модуль на OpenCart.

Обязан уточнить, что модули часто хранятся в архивах с расширением *.zip. Но иногда встречаются одним файлом с расширением *.ocmod.xml. Оба варианта файлов устанавливаются через панель управления сайтом.

Логика наполнения интернет-магазина контентом

Пора нам заняться наполнением магазина товарами и другой необходимой информацией. Честно говоря, этот процесс прост как Microsoft Word. Поэтому не буду сильно углубляться. Лучше постараюсь раскрыть несколько лайфхаков исходя из личного опыта.

Формирование категорий товаров

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

Вся работа с контентом в OpenCart происходит во вкладке “Каталог”. Названия её разделов говорят сами за себя ‒ не заблудитесь.

Чтобы создать новую категория, заходим в “Каталог ‒ Категории” и нажимаем синий плюсик в верхнем правом углу.

Создание категорий OpenCart
Создание категорий OpenCart

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

Настройка категорий OpenCart
Настройка категорий OpenCart

Наполнение магазина товарами. Опции и атрибуты

Работа с товарами в интернет-магазине ‒ это самая кропотливая задача. Наибольше времени занимает первое наполнение магазина товарами. Дальнейшее их редактирование уже гораздо проще.

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

Важно понимать, что все характеристики товара можно указать с помощью атрибутов. В карточке товара они будут отображаться во вкладке “Характеристики” в виде таблицы. Если цена товара зависит от каких-то его параметров (размер, вес, цвет, состав), то их надо указывать в опциях.

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

Исходные данные ‒ магазин по продаже церковной утвари и вышитых изделий. Товар ‒ “Архиерейское облачение”. Предлагаю посмотреть готовую карточку товара, чтобы иметь представление о том, что хотим создать.

Карточка товара OpenCart
Карточка товара OpenCart

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

Рассмотрим подробнее работу с ними. Например, для товара “Смартфон” можно было бы создать такие группы как общие характеристики, дислей, SIM карты, память, батарея, навигация, процессор и т.д.

Проектируя карточку товара для Архиерейского облачения, я решил, что для такого атрибута, как “Узор” можно создать общую группу. Назвал её “Техника изготовления”, так как считаю это название самым подходящим. Кроме неё создал группу “Материалы”. В эти группы войдут все соответствующие атрибуты и будут доступны для любого товара.

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

  1. Во вкладке “Каталог” открываем “Атрибуты ‒ Группы атрибутов”. Нажатием на плюсик создаем новую группу и называем её.

    Создание атрибутов Opencart
    Создание атрибутов Opencart
  2. В этой же вкладке переходим в “Атрибуты ‒ Атрибуты”. Тем же способом создаем новый, называем его и выбираем, к какой группе он относится.
Группа атрибутов Opencart
Группа атрибутов Opencart

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

Опции несколько отличаются от атрибутов и  в первую очередь тем, что напрямую могут влиять на стоимость товара. Например, все то же архиерейское облачение вышитое на разной ткани отличается в цене примерно на 20%.

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

  • список ‒ выпадающий список со значениями опции
  • переключатель ‒ можно выбрать только одно значение из нескольких
  • флажок ‒ можно выбрать сразу несколько значений
  • текст ‒ поле для ввода краткой информации (название материала, цвет товара и т.д.)
  • текстовая область ‒ область для комментария или краткого сообщения
  • файл ‒ можно загрузить файл
  • дата ‒ пользователь может выбрать дату (удобно для бронирования или предзаказа)
  • время ‒ пользователь может выбрать точное время (удобно для бронирования или предзаказа)
  • дата и время ‒ пользователь может выбрать дату и время (удобно для бронирования или предзаказа)

Для каждого значения опции необходимо указать её название, можно добавить изображение и выставить порядок сортировки. Допустим, если вы создаете опцию “Размер”, то к ней разумно будет задать все значения размеров, которые будут использоваться на сайте. Если предусмотрены женские, мужские и детские размеры, то это соответственно разные опции со своими значениями.

В нашем случае товар может быть изготовлен из двух разных материалов ‒ габардин и бархат. Выбрать можно только один. Поэтому мы создаем опции с названием “Материал”, тип “переключатель” и добавляем к ней два значения с названиями: габардин и бархат. Поля “изображение” и “порядок сортировки” необязательны, заполняются по желанию.

Опции в OpenCart
Опции в OpenCart

Количество опций не ограничено. Но не переусердствуйте, чтобы не заставлять посетителя полчаса выбирать их в карточке товара. Достаточно одной-трех на один товар.

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

Приступим же к созданию самого товара, чтобы наглядно увидеть, как это все взаимодействует. Во вкладке “Каталог” открываем категорию “Товары”, создаем новый и приступаем к его редактированию.

    1. Вкладка “Общие” ‒ вводим название товара, его описание и МЕТА данные
    2. “Данные” ‒ заполняем поля по необходимости. Цену рекомендую ставить самую низкую, в том случае, если она будет изменяться опцией. Поле “модель” ‒ это артикул товара для удобного поиска по базе.
    3. “Связи”
      — производитель ‒ актуально, если на сайте продаются товары разных производителей. Они создаются во вкладке “Каталог” ‒ “Производители”
      — главная категория ‒ выберите категорию к которой относится товар (в нашем случае это “Облачения”)
      — показывать в категориях ‒ похожие категории, где можно тоже показать этот товар
      — сопутствующие товары ‒ можно добавить сопутствующие товары (из уже ранее созданных). Они часто сопровождаются заголовком “С этим товаром покупают:”
    4. “Атрибуты” ‒ нажимаем плюсик, в поле “атрибут” вводим нужное название ‒ “Ткань”, а в поле текст описываем параметры ткани или например так как сделал я (см. скриншот). Такой призыв заставит покупателя поискать способ выбора ткани, что приведет его к опциям.

      Настройка атрибутов товара
      Настройка атрибутов товара
    5. “Опции”
      — в единственном поле вводим название ранее созданной опции и выбираем её
      — плюсиком добавляем опцию к товару и выбираем нужное значение. Можно добавить сразу две и выбрать для каждой значения Габардин и Бархат соответственно.
      — поле количество обязательно к заполнению, чтобы опция отображалась в карточке товара. Если само количество не важно, то в графе “Вычитать со склада” выбираем “нет”
      — цена ‒ вводим дополнительную стоимость товара. Вспомните, что я рекомендовал указывать самую низкую цену товара. У нашего товара низкую цену имеет облачение из габардина. А бархатное стоит на 7750 грн дороже. Именно это значение мы поставим в графе “+” для опци со значением Бархат.

      Настройка опций товара
      Настройка опций товара
    6. Изображения ‒ вкладка в которой к товару прикрепляются его фотографии

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

Редактирование статьи в интернет-магазине на OpenCart

Статьями в OpenCart является ни что иное, как страницы “О нас”, “Информация о доставке”, “Политика безопасности” и другие. Они все находятся в разделе “Каталог ‒ Статьи”.

Редактируются статьи как в простом текстовом редакторе, который поддерживает html-теги. Обязательные поля ‒ заголовок статьи и описание. Если хотите показать её в подвале сайта, то отметьте соответствующую галочку во вкладке “Данные”

Редактирование статьи в OpenCart
Редактирование статьи в OpenCart

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

Подключение Google Analytics и Яндекс Метрики к интернет-магазину

Шаг за шагом мы приближаемся к завершению создания интернет-магазина. Наш сайт установлен на хостинг, продумана его структура, он наполнен товарами и статьями. Казалось бы, все готово к запуску. И да и нет!

Чтобы купить у вас, люди должны как-то попасть на ваш сайт. То есть, нужно привлечение трафика ‒ потока заинтересованных посетителей. Этот трафик может идти с поисковых систем и социальных сетей по рекламе, с ваших сообществ в социальных сетях или по прямой ссылке, если ею кто-то из предыдущих покупателей поделился со своими друзьями.

Важно отследить источник трафика, чтобы понимать, откуда пришли посетители. Определив самый сильный, вы сможете выделить на него больше средств для привлечения еще большего количества посетителей.

Для этого существуют различные сервисы аналитики. Основными и самыми прогрессивными не сегодняшний день являются Google Analytics и Яндекс Метрика. Чтобы они могли отслеживать трафик, нужно правильно подключить их к сайту.

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

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

Подключение аналитики в панели управления

Такой способ для новичков самый легкий. он не требует лишних действий. Достаточно просто скопировать код аналитики и вставить в нужное поле. Чтобы получить этот код, необходимо быть зарегистрированным в обоих сервисах. Начнем с Google Analytics.

  1. Идем по ссылке: https://analytics.google.com/, проходим регистрацию нажав кнопку “Регистрация”.

    регистрация в Google Analytics
    Регистрация в Google Analytics
  2. Далее выбираем “Веб-сайт”, вводим его название, ссылку, отрасль и часовой пояс. Настройки совместного использования данных оставьте без изменений. В конце страницы жмем “Получить идентификатор отслеживания” и принимаем “Соглашение об условиях использования…”

    Регистрация сайта в Google Analytics
    Регистрация сайта в Google Analytics
  3. Если все правильно, то вы попадете на страницу с кодом отслеживания. Это как раз то, что нам нужно. Копируем код и переходим в панель управления нашего сайта.

    Код отслеживания Google Analytics
    Код отслеживания Google Analytics
  4. Далее находим известный нам раздел “Дополнения” в одноименной вкладке, в списке выбираем “Статистика”. Нажатием на зеленый плюсик добавляем аналитику и открываем её настройки кликом по карандашу.

    Статистика OpenCart
    Статистика OpenCart
  5. Вставляем скопированный код, выбираем статус “Включено” и не забываем сохранить изменения.
Установка кода Google Analytics
Установка кода Google Analytics
Установка кода Google Analytics в OpenCart
Установка кода Google Analytics в OpenCart

С этой минуты Google Analytics начинает собирать статистику посещений вашего сайта. О том, какие самые важные метрики интернет-маркетинга, читайте в нашем блоге.

Подключение Яндекс Метрики в OpenCart

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

Как и в случае с Аналитикой, нам необходимо иметь аккаунт в Яндексе или зарегистрировать его. После чего перейти в сервис Яндекс Метрика и создать там новый счетчик. Для каждого сайта создается свой счетчик Метрики. Итак, приступим:

  1. Нажимаем на кнопку “Добавить счетчик”

    Регистрация в Яндекс Метрике
    Регистрация в Яндекс Метрике
  2. Заполняем необходимые поля. Включаем опцию “Принимать данные только с указанных адресов”, чтобы ваша статистика была более точной. Также настоятельно рекомендую включить вебвизор для отслеживания поведения посетителей на вашем сайте. Вы сможете видеть, какие страницы они посещали, куда кликали, что выбирали и в чем запутались. После всех настроек нажмите кнопку “Создать счетчик”

    Создание счетчика в Метрике
    Создание счетчика в Метрике
  3. На следующей странице нам уже дают код отслеживания. Необходимо скопировать его и нажать кнопку “Начать пользоваться”
    Код отслеживания Метрики
    Код отслеживания Метрики

    Полученный код надо вставить так, чтобы он работал на всех страницах сайта. То есть, его надо внедрить в ту часть кода, которая остается неизменной на всех страницах. В большинстве случаев ‒ это шапка сайта и подвал. Рекомендуется ставить код поближе к началу страницы. Значит, внедряем в шапку. Для этого:

  4. Устанавливаем FTP соединение с сайтом в программе Filezilla и движемся по следующему пути: catalog/view/theme/название_вашего_шаблона/template/common/ Там находим файл-шаблон шапки сайта под названием “header.tpl’ и скачиваем его на компьютер.

    Редактирование шапки OpenCart
    Редактирование шапки OpenCart
  5. Откройте скачанный файл в текстовом редакторе. Рекомендуем использовать редактор Notepad++ или SublimeText. В коде шапки найдите тег </head> и непосредственно перед ним вставьте код счетчика метрики. После этого верните файл “header.tpl” назад на хостинг, заменив существующий.

    Внедрение кода Метрики в header
    Внедрение кода Метрики в header
  6. После каких-либо манипуляций с кодом сайта обязательно обновляйте кеш модификаторов! В менеджере дополнений нажмите кнопку “Обновить”.
Обновление кеша модификаторов
Обновление кеша модификаторов

Теперь на сайте подключены аналитика и метрика. Можно достаточно подробно отслеживать трафик и анализировать его качество.

Подключение аналитики и метрики в Google Tag Manager

Во всем этом великолепии меня смущает то, что два кода отслеживания подключены разными способами. как бы они не начали конфликтовать и терять статистику…

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

Мы подключим к сайту Диспетчер тегов Google, а через него внедрим коды отслеживания. Поехали!

  1. Идем по ссылке: https://www.google.com/intl/ru/tagmanager/ и регистрируемся там.

    Регистрация в Google Tag Manager
    Регистрация в Google Tag Manager
  2. Добавляем новый аккаунт ‒ заполняем поля, нажимаем “Создать и принимаем “Соглашение…” на русском.

    Новый аккаунт в Google Tag Manager
    Новый аккаунт в Google Tag Manager
  3. После успешного создания нового аккаунта, вы получите код, который необходимо внедрить в сайт по тому же принципу и в тот же файл, как чуть раньше мы внедряли код Метрики. Единственное отличие в том, что код Диспетчера тегов состоит из двух частей, которые ставятся в разных местах. Просто следуйте инструкции. Должно получится так как на скриншоте ниже.

    Внедрение кода Google Tag Manager в OpenCart
    Внедрение кода Google Tag Manager в OpenCart
  4. Чтобы проверить правильность подключения диспетчера, включите в нем “Предварительный просмотр” и обновите страницу. Если все Ок, то внизу страницы откроется панель диспетчера тегов.
    Проверка работы Google Tag Manager
    Проверка работы Google Tag Manager

    Теперь внедрим коды отслеживания аналитики и метрики в Диспетчер

  5. Создаем новый тег с именем Google Analytics.

    Создание тегов в Google Tag Manager
    Создание тегов в Google Tag Manager
  6. Кликаем в области “Триггеры” и выбираем “All Pages”

    Триггеры Google Tag Manager
    Триггеры Google Tag Manager
  7. Кликаем в блоке “Конфигурация тега и справа выбираем “Пользовательский HTML”
  8. В поле HTML вставляем код отслеживания аналитики и сохраняем.

    Установка кода отслеживания в Google Tag Manager
    Установка кода отслеживания в Google Tag Manager
  9. Точно так же способом внедряем код Яндекс метрики.

Отслеживание продаж в интернет-магазине

Мы уже внедрили сервисы для отслеживания трафика на сайте. Теперь самое время научиться правильно их использовать. Кроме количества посещений, времени проведенном на сайте, источника трафика и др можно также отследить количество оформленных заказов.

Как только вы попадаете в панель управления интернет-магазином, вам предоставляется краткая информация о заказах, посетителях и покупателях. Более подробную информацию смотрите во вкладке “Продажи” ‒ “Заказы”.

Отслеживание заказов в OpenCart
Отслеживание заказов в OpenCart

Нажав на “глазик” вы увидите подробную информацию о заказе: имя покупателя, способ оплаты и доставки, адрес, контактные данные, сумму заказа и др.

Информация о заказах в OpenCart
Информация о заказах в OpenCart

В разделе “Покупатели ‒ Покупатели” можно посмотреть всех, кто купил у вас на сайте. А в разделе “Покупатели ‒ Группы покупателей” можно объединить купивших по определенным признакам, например: купили по акции, купили товар определенного производителя, купили на сумму больше 100 000, сделали три покупки в месяц и т.д. Для таких групп можно назначать какие-то бонусные скидки, программы лояльности и т.д.

В разделе “Отчеты” вы можете изучить отчеты о продажах, клиентах, в том числе находящихся на сайте “онлайн”, а также статистические маркетинговые отчеты.

А надо ли создавать магазин на OpenCart

Вопрос, скорее, риторический, потому что ответ на него ‒ положительный! Безусловно, OpenCart ‒ это один из лучших движков для создания и запуска интернет-магазина. С его помощью вы сможете запустить торговлю всего за один день и того меньше.

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

Из плюсов OpenCart можно выделить следующие:

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

О недостатках системы я тоже обязан предупредить:

  • для расширения возможностей магазина придется использовать платные дополнения, что делает движок “условно бесплатным”. Но есть много и бесплатных. “Кто ищет, тот всегда найдет!”
  • слишком сложный процесс оформления заказа. Можно упростить до одного-двух кликов с помощью установки соответствующего модуля
  • встречаются проблемы с SEO-оптимизацией. Их лучше решать с помощью платных модулей.
  • большинство хороших шаблонов оформления платные.

В итоге вам решать, быть или не быть. И помните, что вы всегда можете обратиться за помощью к опытным специалистам!

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


Как создать интернет-магазин за 1 день — самое понятное руководство по OpenCart
Рейтинг: 5 Оценок: 1
comments powered by HyperComments
Иван Медведев

Автор: Иван Медведев

Основатель веб-студии "MEDIOL". Все началось в далеком 2008 году с увлечения сайтами. Довольно быстро это увлечение переросло в хобби. Сегодня профессионально разрабатываю и продвигаю сайты любой сложности. Я занимаюсь любимым делом и делаю это с удовольствием!