Створення Інтернет магазину на OpenCart: крок за кроком

1. Вибір версії CMS OpenCart, щоб створити Інтернет-магазин
2. Підготовчий етап для створення Інтернет-магазину на OpenCart
3. Як створити Інтернет-магазину на 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 (це папка, де зберігаються файли сайтів, розміщених на веб-сервері).

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

Тепер потрібно зробити сам сайт на OpenCart.

Для цього створюємо папку з назвою Вашого ресурсу. У моєму випадку це «opencart2».

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

Повертаємося до каталогу з переліком сайтів і вставляємо в папку Вашого магазину скопійовані файли.

Їли Ви зробили все правильно, то в результаті у Вас повинно вийти наступне:

Відмінно! До речі, не забудьте видалити папку з файлами движка і архів, щоб не залишати зайві файли і не плутатися в подальшому.

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

По-перше, перейменуйте файл config-dist.php в config.php. Теж саме потрібно зробити і з файлом в папці «opencart2 \ admin». Це файли, куди при установці движка будуть записуватися його налаштування, без яких він не буде працювати. До того ж, якщо залишити файли неперейменованій, то движок просто не поставиться і буде видавати повідомлення про неможливість запису налаштувань.

По-друге, нам потрібно буде створити базу даних сайту . Якщо не знаєте що це і навіщо це потрібно, пропоную познайомитися з однойменної статті. Для цього ми будемо використовувати програму phpMyAdmin, яка вбудована в OpenServer. Запустити її можна наступним чином:

При кліці на цьому пункт меню у Вас в Інтернет-браузері відкриється вкладка з авторизацією в даній програмі:

Виробляємо вхід в phpMyAdmin, вводячи логін і пароль користувача, який ви вказали при установці OpenServer. Якщо Ви ввели успішно дані, то перед Вами з'явиться вікно програми:

Наступним кроком створення Інтернет-магазину на OpenCart є додавання бази даних сайту. Для цього натискаємо на вкладку «Бази даних» в головному вікні.

Тут потрібно ввести ім'я бази даних і натиснути на «Створити». У моєму випадку база даних називається так само, як і мій сайт - «opencart2».

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

Відкриваємо папку RussianOC2 \ upload і бачимо, що там розташовані файли, розсортовані по каталогам, що повторюють структуру движка:

Тому для установки русифікатора нам потрібно скопіювати їх і вставити в папку з сайтом, переписуючи існуючі файли при збігу.

Але, забігаючи наперед, поспішаю Вас засмутити, що російську мову інтерфейсу можна додати тільки після установки. Інсталяцію доведеться робити англійською. Але в цьому нічого страшного немає, тим більше, що всю необхідну внесену інформацію і куди її вводити я Вам покажу 🙂

На цьому підготовчий етап створення Інтернет-магазину на OpenCart добігає кінця. Далі переходимо до установки самого движка.

Як створити Інтернет-магазину на OpenCart: установка движка

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

Натисніть на пункт пеню «Запустити знову» у вигляді жовтого прапорця.

Після виконаних дій відкрийте будь-який Інтернет-браузер (Chrome, Mozilla, Safari і т.д.) і введіть в адресний рядок назва Вашого магазину.

Якщо Ви не потрапили на екран установки движка і браузер справив пошук по заданому слову в пошуковій системі за умовчанням, то повинно було з'явитися вікно з питанням «Ви мали на увазі перехід на" Найменування Вашого сайту "?».

Натисніть «Так» і якщо всі попередні дії Ви виконали правильно, то перед вами з'явиться таке вікно:

Перед Вами перший крок установки движка, без якого не обходиться створення Інтернет-магазину на OpenCart будь-якого типу - традиційне ліцензійну угоду. Яке традиційно ніхто не читає 🙂

Тому натискаємо «Continue» ( «Продовжити») і рухаємося далі.

На другому кроці відбувається перевірка системи: наскільки вона підготовлена ​​для створення Інтернет-магазину на OpenCart. Як правило, з вимогами до ПО сервера не виникає. Якщо ж десь буде стояти червоний прапорець, потрібно почитати в Інтернеті як оновити версію невідповідною програми на OpenServer або просто при установці самого веб-сервера використовувати найсвіжішу версію продукту. Тоді проблем точно не буде 🙂

PS версія мого OpenServer далеко не свіжа, але вимогам він задовольняє.

У третьому за рахунком блоці (який на екрані установки має чомусь порядковий номер 4 🙂) якраз-таки і з'явилося б попередження, якби ми не перейменували файли config-dist.php.

В останньому блоці (на зображенні він у мене не вліз) відображаються права на доступ до різних тек движка. Тут теж, як правило, все в порядку. Якщо ж є якісь заборони, то вони залежать від прав кореневої папки сайту або .. \ OpenServer \ domains. У такому випадку потрібно для них відкрити загальний доступ.

Якщо ж в порядку, продовжуємо створення Інтернет-магазину на OpenCart натисканням на «Continue».

На третьому за рахунком екрані установки CMS ми вводимо дані для доступу до бази даних (яку ми успішно попередньо створили). І настройки аккаунта адміністратора сайту: його логін і пароль (під якими буде здійснюватися вхід в адміністративну частину), а також e-mail, який можна вказувати на сайті для скарг і техпідтримки клієнтів 🙂

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

Далі натискаємо на кнопку «Continue».

Якщо все пройшло успішно, перед собою ви побачите завершальний екран установки движка з кнопками переходу в адміністративну частину і вітрину магазину. Також тут доступні посилання на деякі модулі з магазину на офіційному порталі движка. Якщо раптом з'являться чорні прямокутники, як у мене на ілюстрації, не переживайте - це всього лише маленька недоробка програмістів. Самі посилання робочі.

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

З власного досвіду скажу, що краще зробити це відразу. Інакше дане попередження буде з'являтися кожного разу, коли захочете увійти в адміністративну частину.

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

На цьому основна частина першого етапу створення Інтернет-магазину на OpenCart завершується. Як результат - можна перейти в вітрину магазину і переконатися, що сайт працює 🙂

Все чудово! 🙂

За одним Маааленький недоліком, що все англійською мовою 🙂

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

Вводимо логін і пароль записи адміністратора, які Ви вказали при установці движка. Натискаємо «Login» ( «Увійти»).

Якщо всі дані введені вірно, перед Вами з'явиться симпатична админка OpenCart, яка особисто мені дуже подобається (на версіях 1.5.xx, з якими я починав роботу, админка було скромніше).

Отже, наступна мета при створенні Інтернет-магазину на OpenCart - додавання російської мови інтерфейсу. Для цього вибираємо пункт бокового меню у вигляді шестерінки:

У меню, вибираємо пункт «Localisation» ( «Локалізація»). А в підменю вибираємо «Languages» ( «Мови»).

На екрані, що натискаємо на кнопку в правому верхньому кутку у вигляді плюсик на синьому тлі для додавання нової мови. Після натискання відкриється екран з його параметрами:

Тут вводимо наступну інформацію:

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

Решта поля залишаємо без змін. Натискаємо кнопку в правому верхньому кутку у вигляді дискети на синьому тлі для збереження мови. Після проведених дій список мов набуде вигляду:

Наступним кроком на шляху до створення Інтернет-магазину на OpenCart потрібно включити мову на сайті. Для цього в бічному меню адмінки знову вебіраем шестереночку і натискаємо на пункт «Settings» ( «Налаштування»).

На що з'явилося екрані зі списком сайтів (OpenCart дозволяє створювати на базі движка кілька магазинів і управляти ними з однієї адмінки) відкриваємо налаштування нашого сайту.

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

На екрані, що налаштувань вибираємо вкладку «Local» ( «Локалізація»):

Тут вибираємо країну і регіон розташування магазину (враховуватиметься при розрахунках вартості доставки), мова вітрини і адміністративної частини.

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

Після введення значень також не забуваємо зберегти зміни, натиснувши на кнопку з дискеткою.

І ось перед нами русифікована админка магазину! 🙂 Перевіряємо вітрину (клієнтську частину):

А тут якось не дуже 🙂 Але зате в самому верху зліва з'явилося меню, що випадає з вибором мов, якого за замовчуванням не було. Вибираємо Російська мова.

Вуаля, все працює! 🙂

Але при русифікації мову змінився тільки на елементах управління. Назви категорій, товарів і їх опису залишилися на рідному англійською мовою (я спеціально привів екран кошика магазину, де велика кількість елементів управління, і ви переконалися в роботі наших змін).

Але тут теж немає нічого страшного, тому що при створенні Інтернет-магазину на OpenCart Ви все одно будете змінювати дефолтні (встановлені за замовчуванням) категорії, товари та описи на свої, якими ви будете торгувати.

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

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

Нагадаю, що ми розгортали магазин на локальному веб-сервері.

При установці движка відразу на віддаленому сервері порядок дій такий самий: копіюємо інсталятор на сервер, створюємо папку проекту, копіюємо файли і запускаємо процес установки. В даному випадку етап перенесення магазину на хостинг, естевственно, буде пропущений 🙂

На цьому вступна стаття, що описує створення Інтернет-магазину на OpenCart, підходить до свого логічного завершення 🙂 Попереду Вас чекає докладний опис наступних етапів розгортання магазину, а також я більш детально розповім про збірки OpenCart, які, як уже згадувалося, мають ряд переваг в порівнянні з «чистим» продуктом.

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

Також з нетерпінням чекаю ваших відгуків і побажань в коментарях.

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

Всім удачі! 🙂

PS: якщо вам потрібен сайт або необхідно внести правки на існуючий, але для цього немає часу і бажання, можу запропонувати свої послуги.

Більше 5 років досвіду професійної розробки сайтів. Робота з PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular і іншими технологіями web-розробки.

Досвід розробки проектів різного рівня: Лендінзі, корпоративні сайти, Інтернет-магазини, CRM, портали. У тому числі підтримка і розробка HighLoad проектів. Надсилайте ваші заявки на email [email protected] .

І з друзями не забудьте поділитися 😉