Перші кроки в створенні магазину на OpenСart

 

Привіт, друзі!

Ну що, я вирішила йти цим тернистим шляхом сама😂

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

 

Нагадаю хто я

 

Катерина, шию сукні, бренд називається SVOЯ (Сильна, вільна, особлива Я)

Ручна робота, невеликі партії, ніякого масмаркету. 

ТОМУ КАТАЛОГ БУДЕ НЕВЕЛИКИЙ

Продаю через Instagram і Etsy, 

Вирішила створити сайт щоб диверсифікувати канали продажу та спробувати, як сама буде працювати ця модель продажів.

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

Проблема одна: я не технарка від слова зовсім. HTML, PHP (так я мала уявлення що це), але всі інші розумні слова типу twig — до недавнього це були просто якісь літери підряд 😂
 

До речі, чому взагалі OpenCart, а не Shopify

 

Я багато гуглила, спілкувалась із ШІ, бо розуміла, що opencart це дуже багато незрозумілої для мене роботи, і мозок відмовлявся туди йти.

Чому не Shopify - це, звісно, круто, все красиво, зручно, тисячі готових тем. Але коли почала копати глибше — з'ясувалось, що з прийомом оплат в Україні там усе не так просто: локальні способи оплати підключити або взагалі не можна, або треба городити купу костилів через сторонні сервіси й посередників. А мені важливо, щоб дівчатка могла просто оплатити карткою чи накладеним платежем без зайвих танців з бубном.

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

 

І чому взагалі сама, а не замовила у студії

 

Чесно, думка "а може, простіше замовити" гуляла в  мене в голову  не раз, особливо коли сиділа над тим самим dopmenu.twig о першій ночі. Тому вирішила прицінитись, скільки б це коштувало у веб-студії.

Різниця в ціні виявилась досить різна: прості шаблонні магазини на OpenCart в Україні коштують від приблизно 500 дол. США, а нормальний магазин під ключ з індивідуальним дизайном (те, що я, по суті, і роблю) у веб-студій йде десь від 900 -1500 дол. США  і вище, залежно від складності й кількості інтеграцій. Якщо додати ще SEO-пакет, мобільну адаптацію, якісь особливі інтеграції — цифра легко йде за кілька тисяч доларів. І колежанки по бізнес моделі взагалі називали мені цифри від 3000 дол.США  вони вкидували в розробку сайту. Я м'яко кажучи прифігіла.

Тобто орієнтовно я зараз "економлю" щось у районі 1000 дол.США  (а могло бути й більше, зважаючи на кастомний дизайн під бренд, а не готовий шаблон). Звісно, це не зовсім чесне порівняння — я плачу власним часом і нервами замість грошей, і без сумніву роблю купу помилок, яких досвідчений розробник просто б не допустив. Але для мене на старті бізнесу, коли кожна гривня йде або на тканину, або на сайт, це відчутна різниця. Плюс — я тепер сама розумію, як влаштований мій сайт, і зможу далі щось підправляти сама, не бігаючи щоразу до когось за  20 дол.США “поправити один рядочок”

Жаба дуже сильно сіла  мені на шию тому я борюсь САМА

 

Як усе почалось (спойлер: з гугла і сліз)

 

Почала звичним способом - гуглила "як встановити ocStore", дивилась відео, читала форуми (і, до речі, оцей форум, писала розробникам із ким підтримую особистий зв’язок). У парі з ChatGPT власноруч поставила ocStore на хостинг. Кожен крок перепитувала в нього. Все було зрозуміло на цьому етапі, бо я і з файловими менеджерами мала справу і трохи, і знаю трохи адмінку.

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

І знаєте що? Спочатку все йшло навіть добре! Сайт відкрився, адмінка запрацювала - я вже почувалась трохи хакеркою.🤔

 

 

А потім я вирішила поставити шаблон. І ось тут почалось справжнє кіно.

Обрала платний Chameleon 1.8 від @29aleksey (дякую тобі)- виглядав гарно, гнучко, саме під той мінімалізм, який я хотіла. І буквально одразу -помилки, помилки, помилки. Я в ChatGPT, він мені гіпотезу, я перевіряю - не працює, повертаюсь, він мені нову гіпотезу, знову не працює. По колу, як білка в колесі, тільки замість горіха -робочий сайт, який усе ще не робочий.

Стало ясно: просто копіювати команди з чату і вставляти вручну - це не мій темп і точно не мій рівень терпіння.

Тут в гру вступає агент

 

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

На цьому етапі я змінила GPT на Claude, і вже він повів мене щляхом на агента (Claude Code), який працює прямо у Visual Studio Code — не просто підказує команди в чаті, а сам лізе у файли проєкту, читає їх, править і одразу показує результат. Тобто я більше не гралась у "зіпсований телефон" з копіюванням команд та безкінечною кількістю скрінів - туди-сюди. Я просто кажу, що хочу, а воно саме йде і робить.

Головне це навчитись ставити задачі, не можу сказати, що це прям складно але треба читнути та подумати перед стартом.

Перша серйозна битва - класична, судячи з форуму, помилка Chameleon:

Could not load template

catalog/view/theme/default/template/common/dopmenu.twig

 

Я вже подумки попрощалась із проєктом. Виявилось, OpenCart 3 має такий собі вбудований "план Б": якщо файл не знайдено в активній темі - тихенько йде шукати в default (я не розумна, я знаю тепер такі слова завдяки ШІ😂), і якщо там теж пусто - тільки тоді показує помилку саме з шляхом до default. Тобто я марно шукала проблему в кеші й правах (почала написувати Алексею, але ж розробники пташки нічні, тому розібралась сама), а насправді модуль "додаткового меню" Chameleon просто не був встановлений окремо. Я думала, досить залити один загальний архів модифікацій, а виявилось ні.

 

 

 

Структура для агента та мій промт

 

До речі, покажу структуру, яку я використала для першого "знайомства" з агентом — можливо, комусь стане в пригоді, бо саме чіткість тут врятувала мене від хаосу. Замість "допоможи мені з сайтом" я оформила окремий файл-журнал із такими блоками:

● Мета - що саме треба зробити (одним реченням)

● Поточне середовище - версія ocStore, шаблон, хостинг, домен

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

● Поточна помилка - точний текст помилки, як є, без переказу своїми словами

● Уже перевірено - окремо, щоб не витрачати час на повторну перевірку

● Найімовірніші причини -  мої власні здогадки (навіть якщо неправильні)

● Наступна перевірка - що я плюс планувала перевірити

● Завдання для агента - конкретно сформульоване прохання в кінці

Ти мій асистент з розробки сайту для бренду одягу SVOЯ.

 

**Роль:** ти сервісний інженер та розробник OpenCart з 15-річним 

досвідом, оперативно вирішуєш питання з роботоздатністю сайту.

 

**Проєкт:** https://www.instagram.com/svoya.prostir/

 

**Про бізнес:**

Виробництво сучасного жіночого одягу, лімітовані колекції власного 

дизайну, виключно натуральні тканини, ручна обробка, елементи 

вишивки. Сфера діяльності - легка промисловість і торгівля.

Досвід під ТМ SVOЯ - 3 роки (з 2022 року). Починали вдвох, зараз 

5 офіційно працевлаштованих працівників та 2 на аутсорсі.

 

**Технічний стек:** ocStore на базі шаблону OpenCart.

 

**Формат роботи:** задачі ставлю по черзі, одну за одною.

 

**Обов'язкова перевірка:** усі зміни перевіряй через Puppeteer 

та Node.js перед тим, як звітувати про виконання.

я прописала для агента доступи до адм tools та адмінки окстор

 

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

 

 

Що я зрозуміла по дорозі (шишки, набиті власним лобом)

 

Одна задача - один файл. Спочатку я казала агенту щось типу "зроби гарний дизайн" — і він кидався правити десяток файлів одразу і щось обов'язково ламав. Коли почала казати чітко: "працюємо тільки над header.twig, ось кольори, ось шрифти, це не чіпай" - усе стало в рази стабільніше.

Скріншот рулить. Замість пояснювати словами "щось не так з хедером" - просто кидаю скріншот. І собі для роздумів, і в чат агенту. Економить купу нервів і часу.

Дизайн -  не з голови навмання. Я не дизайнерка, тому кольори й шрифти не вигадувала з нуля. Взяла все прямо з мого власного логотипу - у мене вже були готові бірки з фірмовим зеленим і тоненьким шрифтом. І сайт одразу почав виглядати "своїм", а не як випадковий набір трендів з Pinterest.

Мало товару - це не соромно. У мене всього десь 30 моделей суконь. Спочатку намагалась зробити структуру як у великих магазинів - купа категорій, підкатегорій, фільтрів по сезону,  і сайт виглядав, чесно, як покинуте село. Порожньо і сумно. Виявилось, для невеликого асортименту працює навпаки: одна категорія "Сукні", великі фото, менше товару в ряд - усе виглядає цілісно й навіть багато.

 

Де я зараз

 

Хедер майже готовий: логотип, коротке меню (Сукні, Новинки, Sale), трішки фірмового зеленого в деталях. Демо-товари з коробки OpenCart (той самий MacBook і iPhone, який, підозрюю, бачив кожен, хто хоч раз встановлював цю CMS) - прибираю, бо скільки можна вже їх продавати. Далі - банер на головній, картка товару, сторінка товару, футер. І тільки в самому кінці, коли весь каркас готовий, буду заводити реальні 30 суконь, щоб не переробляти все двічі.

А ось із модулями я поки що взагалі не розбиралась свідомо. Спершу хочу довести до ладу структуру сайту й каталог: щоб усе виглядало і працювало як треба, без жодного модуля зверху. А вже коли ця база буде стояти рівно, тоді піду розбиратись, які модулі реально потрібні (доставка, оплата, ще щось корисне). 

 

Що б я сказала собі місяць тому

 

Не бійся, що "нічого не розумієш у коді" - головне вміти чітко сформулювати, чого хочеш, а не боятись здатись "нетехнічною". Перевіряй базу (яка тема реально активна, чи не сипляться помилки) ДО того, як почнеш фантазувати про дизайн, інакше все ляже криво на кривий фундамент. І референси бери з реальних сайтів у своїй ніші, а не вигадуй з голови, це реально економить нерви.

Цікаво, чи є рішення простіше за моє. І взагалі, якщо в когось є поради чи запитання - welcome в коментарі, буду рада!

 

Коротка роудмапа для таких же новачків, як я

 

Щоб не загубитись у всій цій історії, зібрала для себе (і для вас) короткий чек-лист, куди дійшла на цей момент:

1. Погуглити базу : як взагалі ставиться ocStore, почитати форуми, подивитись відео. Без паніки, просто орієнтація на місцевості.

2. Купити домен + хостинг (бажано в одному місці, собі ж легше).

3. Встановити ocStore власноруч, у парі з ChatGPT ,по кроках, не соромлячись перепитувати одне й те саме кілька разів.

4. Обрати CMS свідомо, а не "бо всі так роблять" , у мене це був вибір OpenCart замість Shopify через оплату в Україні.

5. Встановити шаблон , і тут, скоріш за все, у вас теж посиплються помилки, це нормально.

6. Перейти на роботу через AI-агента, якщо чат туди-сюди вручну вже виснажує - це змінило все.

7. Зібрати візуальну базу бренду до старту дизайну: кольори з логотипу, шрифти, референси з вашої ніші.

8. Продумати структуру каталогу під РЕАЛЬНУ кількість товару, а не під те, як роблять великі магазини.

9. Верстка по блоках: хедер → банер → картка товару → сторінка товару → футер 

Далі в планах: банер, картка товару, а потім модулі, у яких поки взагалі не розбираюсь. Буде цікаво, тож стежте за наступними статтями, розповім як воно піде!

 

 

https://www.svoyaprostir.com/

 

згодом перенесу на інший домен, якщо @29aleksey мене нах…р не пошле 😂 БО Я ЙОГО ДЕРГАЛА багато разів

 

Буду рада читати ваші коментарі як хороші так і гівняні, бо без них у нас ніяк😂