Создание Интернет магазина на OpenCart: руководство для начинающих

Автор: | 29.11.2015

sozdanie-internet-magazina-na-opencartПриветствую вас, читатели cccp-blog.com! :-)

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

Для начала освежим наши знания по поводу CMS (движок). Вкратце, это готовый сайт, который каждый владелец подстраивает под себя, добавляя новый функционал и элементы интерфейса, а также модифицирует существующий или вовсе удаляет избыточные, по его мнению, элементы.

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

Итак, вернёмся к теме статьи :-) Мы рассматриваем разработку Интернет-магазина на OpenCart, т.к. этот движок входит в число лучших CMS для Интернет-магазина среди бесплатных продуктов. Причём это не моё субъективное мнение. Во всех рейтингах Рунета он не опускается ниже 5-й позиции.

Напомню, что к его преимуществам относится простота установки и управления магазином, а также мощный для бесплатных продуктов функционал. В нём доступны все необходимые возможности: карточка товара с его описанием, кабинет пользователя, корзина, ведение аналитики покупателей и продаж, а также многое другое. Более подробно о его преимуществах и недостатках читайте в упомянутой статье. И, самое главное,- это бесплатный продукт! :-)

Конечно же, это не совсем верное утверждение, т.к., как известно, бесплатный сыр бывает только в мышеловке :-)

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

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

Итак, поговорим о создании Интернет-магазина на OpenCart более подробно.

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

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

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

Выбор версии CMS OpenCart, чтобы создать Интернет-магазин

На данный момент самой актуальной версией является 2.1.0.1. Её релиз состоялся 6 октября 2015 года.

Ввиду того, что это было совсем недавно, русифицирована только предыдущая версия OpenCart 2.0.3.1, которой мы и будем пользоваться.

Нужно сказать, что такое положение дел говорит, к сожалению, не о самой качественной официальной поддержке продукта, т.к. с момента выхода версии 2.0.3.1. прошло уже пол-года (релиз 29 мая 2015 года). В Интернете я уже натыкался на русифицированные варианты самой свежей версии OpenCart, но они являются сборками, т.е. частично переработанными версиями движка.

  • Их плюсами по сравнению с «чистым» движком является их дополнение очень нужными и интересными функциями (встроенные русские платёжные системы, способы доставки, фильтры с различными критериями и т.д.).
  • К минусам же относится то, что они не всегда бесплатные, и в случае возникновения вопросов по магазину на официальную поддержку можно не рассчитывать, а запасаться терпением для поиска ответа на форуме сборки :-)

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

Подготовительный этап для создания Интернет-магазина на OpenCart

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

Перед тем, как установить что-то, его нужно скачать.

У OpenCart есть сайт официального русскоязычного представительства. Оттуда мы и будем брать инсталлятор движка — http://opencart.ws/download.html. Для этого скачиваем скачиваем самый свежий из доступных файлов — с версией 2.0.3.1 (перенаправляет на официальный англоязычный сайт).

Вот у Вас на руках есть сам движок. Что же делать дальше?

Следующим этапом создания Интернет-магазина на CMS OpenCart будет его установка на локальный веб-сервер. Для того, кто не знает, что это, рекомендую ознакомиться со статьёй «Программы для создания сайтов».

Как в ней и написано, лично я пользуюсь веб-сервером OpenServer, что и вам рекомендую. После того, как вы его установите, заходите в папку ..\OpenServer\domains (это папка, где хранятся файлы сайтов, размещённых на веб-сервере).

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

sozdanie-internet-magazina-na-opencart-shag-1
Теперь нужно сделать сам сайт на OpenCart.

Для этого создаём папку с названием Вашего ресурса. В моём случае это «opencart2».

Далее переносим файлы движка на сайт. Для этого заходим в папку ..\OpenServer\domains\opencart-2.0.3.1\opencart-2.0.3.1\upload и копируем все файл, которые находятся в ней. Если кто-то подзабыл, для этого используется комбинация клавиш Ctrl+A.

sozdanie-internet-magazina-na-opencart-shag-2
Возвращаемся к каталогу с перечнем сайтов и вставляем в папку Вашего магазина скопированные файлы.

Ели Вы сделали всё правильно, то в результате у Вас должно получится следующее:

sozdanie-internet-magazina-na-opencart-shag-3
Отлично! Кстати, не забудьте удалить папку с файлами движка и архив, чтобы не оставлять лишние файлы и не путаться в дальнейшем.

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

Во-первых, переименуйте файл config-dist.php в config.php. Тоже самое нужно сделать и с файлом в папке «opencart2\admin». Это файлы, куда при установке движка будут записываться его настройки, без которых он не будет работать. К тому же, если оставить файлы непереименованными, то движок просто не поставится и будет выдавать сообщение о невозможности записи настроек.

Во-вторых, нам нужно будет создать базу данных сайта. Если не знаете что это и зачем это нужно, предлагаю познакомиться с одноимённой статьёй. Для этого мы будем использовать программу phpMyAdmin, которая встроена в OpenServer. Запустить её можно следующим образом:

sozdanie-internet-magazina-na-opencart-phpmyadmin-openserver
При клике на этом пункт меню у Вас в Интернет-браузере откроется вкладка с авторизацией в данной программе:

sozdanie-internet-magazina-na-opencart-phpmyadmin-login
Производим вход в phpMyAdmin, вводя логин и пароль пользователя, который вы указали при установке OpenServer. Если Вы ввели успешно данные, то перед Вами появится окно программы:

sozdanie-internet-magazina-na-opencart-phpmyadmin-bazy-dannyh
Следующим шагом создания Интернет-магазина на OpenCart является добавление базы данных сайта. Для этого нажимаем на вкладку «Базы данных» в главном окне.

sozdanie-internet-magazina-na-opencart-phpmyadmin-sozdanie-bazy-dannyh
Здесь нужно ввести имя базы данных и нажать на «Создать». В моём случае база данных называется так же, как и мой сайт – «opencart2».

Поскольку мы скачали официальную англоязычную версию, то для полноценного создания магазина на OpenCart нам также нужно будет скачать русификатор. Он доступен на странице http://opencart.ws/download.html по ссылке «Русский язык для Opencart 2.0.0.0 — 2.0.3.1». Далее действуем по той же схеме – копируем архив с русификатором в папку ..\OpenServer\domains и распаковываем его:

sozdanie-internet-magazina-na-opencart-shag-4
Открываем папку RussianOC2\upload и видим, что там расположены файлы, рассортированные по каталогам, повторяющими структуру движка:

sozdanie-internet-magazina-na-opencart-shag-5
Поэтому для установки русификатора нам нужно скопировать их и вставить в папку с сайтом, перезаписывая существующие файлы при совпадении.

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

На этом подготовительный этап создания Интернет-магазина на OpenCart подходит к концу. Далее переходим к установке самого движка.

Как создать Интернет-магазина на OpenCart: установка движка

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

Нажмите на пункт пеню «Перезапустить» в виде жёлтого флажка.

После проделанных действий откройте любой Интернет-браузер (Chrome, Mozilla, Safari и т.д.) и введите в адресную строку название Вашего магазина.

Если Вы не попали на экран установки движка и браузер произвёл поиск по заданному слову в поисковой системе по умолчанию, то должно было появиться окно с вопросом «Вы имели ввиду переход на “Наименование Вашего сайта”?».

Нажмите «Да» и если все предыдущие действия Вы выполнили правильно, то перед вами появится следующий экран:

sozdanie-internet-magazina-na-opencart-ustanovka-shag-1Перед Вами первый шаг установки движка, без которого не обходится создание Интернет-магазина на OpenCart любого типа – традиционное лицензионное соглашение. Которое традиционно никто не читает :-)

Поэтому нажимаем «Continue» («Продолжить») и двигаемся дальше.

sozdanie-internet-magazina-na-opencart-ustanovka-shag-2На втором шаге происходит проверка системы: насколько она подготовлена для создания Интернет-магазина на OpenCart. Как правило, с требованиями к ПО сервера не возникает. Если же где-то будет стоять красный флажок, нужно почитать в Интернете как обновить версию неподходящей программы на OpenServer либо просто при установке самого веб-сервера использовать самую свежую версию продукта. Тогда проблем точно не будет :-)

P.S. версия моего OpenServer далеко не свежая, но требованиям он удовлетворяет.

В третьем по счёту блоке (который на экране установки имеет почему-то порядковый номер 4 :-) ) как раз-таки и появилось бы предупреждение, если бы мы не переименовали файлы config-dist.php.

В последнем блоке (на картинке он у меня не влез) отображаются права на доступ к различным директориям движка. Тут тоже, как правило, всё в порядке. Если же имеются какие-то запреты, то они зависят от прав корневой папки сайта или ..\OpenServer\domains. В таком случае нужно для них открыть общий доступ.

Если же в порядке, продолжаем создание Интернет-магазина на OpenCart нажатием на «Continue».

sozdanie-internet-magazina-na-opencart-ustanovka-shag-3На третьем по счёту экране установки CMS мы вводим данные для доступа к базе данных (которую мы успешно предварительно создали). И настройки аккаунта администратора сайта: его логин и пароль (под которыми будет осуществляться вход в административную часть), а также e-mail, который можно указывать на сайте для жалоб и техподдержки клиентов :-)

В настройках подключения к БД вводим незаполненные поля: логин и пароль учётной записи в phpMyAdmin и имя самой БД. Все остальные поля можно оставить без изменений.

Далее нажимаем на кнопку «Continue».

sozdanie-internet-magazina-na-opencart-ustanovka-shag-4Если всё прошло успешно, перед собой вы увидите завершающий экран установки движка с кнопками перехода в административную часть и витрину магазина. Также тут доступны ссылки на некоторые модули из магазина на официальном портале движка. Если вдруг появятся чёрные прямоугольники, как у меня на иллюстрации, не переживайте – это всего лишь маленькая недоработка программистов. Сами ссылки рабочие.

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

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

Для удаления инсталлятора переходите в папку сайта и удаляете директорию «install». Нам она больше не потребуется.

На этом основная часть первого этапа создания Интернет-магазина на OpenCart завершается. Как результат — можно перейти в витрину магазина и убедиться, что сайт работает :-)

sozdanie-internet-magazina-na-opencart-vitrinaВсё замечательно! :-)

За одним маааленьким недостатком, что всё на английском языке :-)

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

sozdanie-internet-magazina-na-opencart-adminka-loginВводим логин и пароль записи администратора, которые Вы указали при установке движка. Нажимаем «Login» («Войти»).

sozdanie-internet-magazina-na-opencart-adminkaЕсли все данные введены верно, перед Вами появится симпатичная админка OpenCart, которая лично мне очень нравится (на версиях 1.5.x.x, с которыми я начинал работу, админка было поскромнее).

Итак, следующая цель при создании Интернет-магазина на OpenCart – добавление русского языка интерфейса. Для этого выбираем пункт бокового меню в виде шестеренки:

sozdanie-internet-magazina-na-opencart-rusifikaciya-shag-1В открывшемся меню выбираем пункт «Localisation» («Локализация»). А в открывшемся подменю выбираем «Languages» («Языки»).

На открывшемся экране нажимаем на кнопку в правом верхнем углу в виде плюсика на синем фоне для добавления нового языка. После нажатия откроется экран с его параметрами:

sozdanie-internet-magazina-na-opencart-rusifikaciya-shag-2Здесь вводим следующую информацию:

  • Language Name («Наименование языка»): Русский
  • Code («Код языка»): ru
  • Locale («Локализация»): ru_RU.UTF-8,ru_RU,russian
  • Image («Изображение»): ru.png
  • Directory («Папка»): russian

Остальные поля оставляем без изменений. Нажимаем кнопку в правом верхнем углу в виде дискеты на синем фоне для сохранения языка. После произведённых действий список языков примет вид:

sozdanie-internet-magazina-na-opencart-rusifikaciya-shag-3Следующим шагом на пути к созданию Интернет-магазина на OpenCart нужно включить язык на сайте. Для этого в боковом меню админки снова вебираем шестереночку и нажимаем на пункт «Settings» («Настройки»).

sozdanie-internet-magazina-na-opencart-rusifikaciya-shag-4На появившемся экране со списком сайтов (OpenCart позволяет создавать на базе движка несколько магазинов и управлять ними из одной админки) открываем настройки нашего сайта.

Это производится путём нажатия на кнопку в виде карандаша на синем фоне, находящемся в одной строке с адресом Вашего сайта и надписью «Your Store» («Ваш магазин»).

На открывшемся экране настроек выбираем вкладку «Local» («Локализация»):

sozdanie-internet-magazina-na-opencart-rusifikaciya-shag-5Здесь выбираем страну и регион расположения магазина (будет учитываться при расчётах стоимости доставки), язык витрины и административной части.

Также доступны валюты (в дальнейшем можно будет без проблем редактировать данный перечень) и единицы измерений (используются при указании атрибутов товаров).

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

sozdanie-internet-magazina-na-opencart-russkaya-adminkaИ вот перед нами русифицированная админка магазина! :-) Проверяем витрину (клиентскую часть):

sozdanie-internet-magazina-na-opencart-russkaya-vitrina-1А тут как-то не очень :-) Но зато в самом верху слева появилось выпадающее меню с выбором языков, которого по умолчанию не было. Выбираем Русский язык.

sozdanie-internet-magazina-na-opencart-russkaya-vitrina-2Вуаля, всё работает! :-)

Но при русификации язык поменялся только на элементах управления. Названия категорий, товаров и их описания остались на родном английском языке (я специально привёл экран корзины магазина, где большое количество элементов управления, и вы убедились в работе наших изменений).

Но здесь тоже нет ничего страшного, т.к. при создании Интернет-магазина на OpenCart Вы всё равно будете менять дефолтные (установленные по умолчанию) категории, товары и описания на свои, которыми вы будете торговать.

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

Также я скажу пару слов о перенесении готового магазина на хостинг.

Напомню, что мы разворачивали магазин на локальном веб-сервере.

При установке движка сразу на удалённом сервере порядок действий точно такой же: копируем инсталлятор на сервер, создаём папку проекта, копируем файлы и запускаем процесс установки. В данном случае этап переноса магазина на хостинг, естевственно, будет пропущен :-)

На этом вводная статья, описывающая создание Интернет-магазина на OpenCart, подходит к своему логическому завершению :-) Впереди Вас ждёт подробное описание следующих этапов развёртывания магазина, а также я более подробно расскажу о сборках OpenCart, которые, как уже упоминалось, обладают рядом преимуществ по сравнению с «чистым» продуктом.

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

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

Если у кого-то что-то не получилось или возникли вопросы по поводу установки OpenCart, спрашивайте, не стесняйтесь! Я буду рад помочь и ответить всем желающим!

Всем удачи! :-)

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
12 голосов, в среднем: 5 из 5

8 комментариев к статье "Создание Интернет магазина на OpenCart: руководство для начинающих"

  1. Verinda

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

    1. Pashaster Автор

      Полностью с Вами согласен. Именно поэтому к выбору графического шаблона для сайта нужно подходить более, чем ответственно. Т.к. от этого будет зависеть его привлекательность и удобство для пользователя, что поможет увеличить ваш доход. Как правильно выбрать шаблон OpenCart, откуда его лучше всего скачать и как установить читайте здесь — http://cccp-blog.com/opencart/ustanovka-shablona-opencart

    2. Иван

      Opencart основные плюсы:
      1. Система исключительно магазинная, международная, с бесплатной открытой лицензией;
      2. По сравнению с конкурирующими движками, Openсart обладает более высокой производительностью, магазин с 20-30 тыс. товаров сможет работать даже на дешевом хостинге;
      3. Качественная MVC архитектура и код. Благодаря MVC обеспечивается быстрый и удобный способ работы с кодом.
      Разработчик уделяет огромное внимание читабельности кода, постоянно в репозитории появляются комментарии по переименованию переменных, исправление отступов и т.д.;
      4. Сейчас очень популярна в СНГ.
      К примеру, дочерняя компания Wikimart —компания Littlegentrys, выбрала именно Opencart.
      Топовый ритейл в Беларуси — «Евроопт» для запуска своего электронного гиппера «Техно плюс«, так же выбрала Opencart.

      Opencart — уже в 2013 году компания была признана ведущей в области программных решений для интернет коммерции Китая, а это самый высоконкурентный рынок электронной коммерции в мире.

      1. Pashaster Автор

        Спасибо Вам большое за полезную информацию :-) Думаю, остальным читателям она будет также интересна.

  2. Vova

    «Во-первых, переименуйте файл config-dist.php в config.dist. Тоже самое нужно сделать и с файлом в папке «opencart2\admin».»
    Файл надо переименовать в config.php. у меня по другому пункт 4 не проходил
    «В третьем по счёту блоке (который на экране установки имеет почему-то порядковый номер 4 :-)
    Я качал уже русификатор RussianOC22101.zip и в нём почему-то две папки: upload и __MACOSX.
    __MACOSX изменён на 8 месяцев позже.
    их обе надо перемещать с заменой файлов?
    Я загрузил только upload, русского пока нет(( ищу.

    1. Vova

      Всё получилось.
      Заливать надо одну папку upload.
      RussianOC22101.zip\upload\admin\language и от сюда папку russian переносим в папку admin\language, что в корне лежат!
      а то у меня в папке admin появилась папка admin\admin\language и ни чё не работало.
      Автору, СПАСИБО!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *