как создать интернет магазин

Как создать интернет-магазин с нуля

Как создать интернет-магазин на Drupal с нуля

Нет времени читать?

Доставим статью в ваш почтовый ящик

Прочитать позже

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

Состояние онлайн-ритейла к 2023 году

Весна 2020 года стала неоднозначным испытанием для торговли.

С одной стороны, наблюдалось падение выручки у малого и среднего бизнеса и закрытие некоторых его представителей. Interfax.ru ссылается на информацию от поставщика решений для автоматизации бизнеса «Эвотор»: в период с апреля по ноябрь 2020 года закрылись 20% торгово-сервисных точек из числа тех, которые работали в феврале и марте. Больше всего убытков понесли общепит, фитнес-индустрия, турфирмы и книжные магазины.

С другой стороны, от полного падения бизнес спас онлайн. Отчёты сети «Детский мир» и группы «М.Видео-Эльдорадо» за II квартал прошлого года говорят, что первая увеличила онлайн-продажи на 31,1%, а вторая — на 69,1%. В то же время аудитория сайта Wildberries выросла за прошлый год с 18 до 40 млн человек. Они, в свою очередь, вложились в двукратное по сравнению с 2019 годом увеличение заказов товаров через сайт и в конечном итоге почти двукратный же рост оборота маркетплейса.

Какое будущее предрекают исследования? Российское агентство Data Insight, специализирующееся на рынке электронной коммерции, прогнозирует, что к 2024 году объём онлайн-продаж в России составит 7,2 трлн рублей. По их расчётам, эта цифра могла бы быть на 1,6 трлн меньше, но вмешались самоизоляция и переход на удалёнку.

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

На чём можно создать интернет-магазин бесплатно

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

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

Но переход от небольшого бизнеса к среднему и крупному ставит перед его владельцем новые задачи:

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

В таком случае стоит обратиться к готовым CRM и ecommerce-платформам. Таких платформ много, но мы как студия с глубокими компетенциями в Drupal поговорим о ней.

Drupal для интернет-магазинов

Готовые open source-платформы экономят бюджет тем, кто ставил их на службу своему бизнесу. В кризисное время они стали ещё более привлекательными. И то, что с помощью Drupal можно одновременно управлять и контентом, и продажами, — большая удача для всех видов предпринимателей и заслуга сообщества, разбросанного по всему миру. Есть минимум 11 причин, почему на базе этой CMS можно разработать не только лендинг, сайт десткой клиники или туристическую платформу для поиска гидов, но и отличный интернет-магазин:

1. Таксономия. Модуль Taxonomy организует работу фильтрации и сортировки товаров в каталоге продукции на сайте. Без этого онлайн-магазин невозможен. Какое-то время модуль Taxonomy приходилось скачивать и устанавливать отдельно, но из-за большой востребованности его включили в ядро Drupal.

2. Data-driven подход в электронной коммерции. Чтобы ваши продажи управлялись контентом, нужна глубокая интеграция ecommerce-платформы и CMS друг в друга. Это редко проходит быстро и бесшовно, и здесь обнаруживается один из выгодных плюсов Drupal: Drupal Commerce. Это дополнение к Drupal, играющее роль модуля и фреймворка. Ниже мы расскажем о нём подробнее.

3. Сотни модулей, дистрибутивов и тем. Влияние международного Drupal-сообщества на платформу нельзя переоценить: его участники работают над решениями задач любой сложности, чтобы потом владельцы внедряли их в свои интернет-магазины. Два самых распространённых решения — Drupal Kickstart и Ubercart, о котором мы тоже немного поговорим.

4. Интеграция со сторонними сервисами. Для нормальной работы онлайн-магазин на Drupal нужно обвесить платёжными системами и системами аналитики, интегрировать с соцсетями, настроить чат, автоматизировать маркетинг. Архитектура REST API открывает Drupal доступ к широкому спектру таких инструментов.

5. Mobile first-архитектура. Если хотите помочь освоить те самые 3,5 трлн долларов, который заработают mCommerce-проекты в 2021 году, ваш интернет-магазин должен работать на всех мобильных устройствах. Адаптивный дизайн по умолчанию — вот одно из отличительных свойств Drupal.

6. Мультиязычность. Покупают и продают по всему миру, поэтому любой ecommerce/mcommerce-проект должен уметь говорить с клиентом на любом языке. Drupal знает около ста, в том числе те, текст на которых читается справа налево.

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

8. Учёт ассортимента товаров. Если вы продаёте одежду, у неё есть параметры размера, цвета, пола. Если ваш товар — комиксы, то их можно делить на оригиналы или переводы, для лиц старше 6 или 18 лет, выпущенные тем или иным издательством и т. д. В модуль Drupal Commerce заложено понятие складской учётной единицы (SKU — Stock Keeping Unit). Это идентификатор, который будет своим для каждого товара с разными параметрами. Кроме того, эта возможность помогает контролировать остаток на складе.

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

10. Грамотный UX. Чем быстрее пользователь совершит на сайте покупку, тем выше шанс, что он вернётся за новой, а поисковики будут лучше ранжировать сайт по целевым запросам. Drupal может обеспечить такую скорость, а при следовании принципу Headless ecommerce пользователь будет перемещаться между страницами со скоростью болида.

11. Омниканальность. Чем больше точек касания с покупателями, тем лучше, и Drupal обладает потенциалом для построения целой экосистемы продуктов. Если вслед за сайтом вы захотите разработать мобильное приложение, то работы будет меньше — благодаря тому же принципу Headless ecommerce система управления контентом выступает в качестве базы данных, общей и для сайта, и для приложения.

Drupal Commerce

О Drupal говорят как о платформе, в которой достаточно уметь ставить галочки в нужные чекбоксы и получить первые продажи. Так вот, это преувеличение: начать собирать колючки на этом тернистом пути можно даже во время конфигурации Drupal. Спросите себя: «Раз всё так просто, то чем занимается многочисленное комьюнити Drupal-разработчиков?» и станьте на шаг ближе к созданию красивого, современного, конкурентоспособного, безопасного с точки зрения утечки данных и постоянно обновляемого онлайн-магазина, который нельзя создать без знаний, добываемых годами. Но инструкцию для не-программистов мы всё равно приложим — новое знание поднимет вам самооценку и впоследствии позволит свободнее общаться с командой разработки. После того как вы дочитаете статью, запросите через специальную форму инструкцию, которая поможет вам запустить онлайн-магазин на Drupal без помощи разработчика. 

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

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

В базовый набор сущностей, которые можно создать на Commerce, входят:

  • Product (продукт) — то, что продаётся в магазине;
  • Orders (заказы) — один или несколько единиц продуктов, которые пользователь сайта положил в корзину, а также настройки для каждой единицы продукта, учитываемые на этапе расчёта итоговой стоимости и оплаты (например, скидка на продукт);
  • Line Items (позиции в заказе) — единица продукта с его свойствами (размер, цвет и т. п.), которые будут учтены при формировании заказа;
  • Payment Gateways (платёжные шлюзы) — программное обеспечение, решающее задачу оплаты заказа. Это либо самописные решения, либо готовые, вроде PayPal, Stripe, Braintree, Ubercart, платёжные шлюзы банков.

В довесок к этому члены комьюнити написали для Drupal Commerce полезные модули для всего на свете: расчёта стоимости доставки, учёт остатков, подсчёта сборов и пошлин и многого другого.

Как и всякий open source-продукт, Drupal Commerce можно скачать бесплатно. Но свободно с ним чувствуют себя только Drupal-разработчики, и если вы не один из них, мы не советуем тратить время на то, чтобы понять, как работает этот инструмент. 

На текущий момент существуют две версии Drupal Commerce: Commerce 1 совместима с проектами на Drupal 7, а Commerce 2 — Drupal 8 и 9. Обе можно скачать с сайта Drupal.

Headless ecommerce: один бэкенд, чтобы править всеми каналами продаж

Перед заключением расскажем о тренде в ecommerce-разработке, который не собирается уходить. Headless (или Decoupled) ecommerce — это принцип разработки даже не сайта, а целой экосистемы продуктов, работающих на ваш бизнес. В эту экосистему, помимо сайта, может входить мобильное приложение, онлайн-касса, смарт-терминал, социальные сети, чат-боты и многое другое. В случае соблюдения принципа Headless ecommerce все они берут данные с одного и того же сервера.

Попробуем объяснить архитектуру Headless ecommerce-сайта элементарным языком. Все незримые процессы, обслуживающие простые пользовательские операции вроде добавления продуктов в корзину, оплаты, применения подарочных карт и скидок, называются бизнес-логикой. Её обработка происходит на сервере, который можно в том числе построить на CMS Drupal. За видимые результаты обработки этих операций отвечает клиентская часть, для разработки которой используются такие JavaScript-фреймворки как React, Vue.js или Angular. Между ними встроен прикладной интерфейс, например, Rest API или GraphQL, передающий данные от от сервера к клиенту.

Преимуществами использования такого принципа станут:

  • снижение нагрузки на сервер за счёт только частичной загрузки Drupal,
  • снижение времени на разработку бэкенда сайта,
  • использование возможностей JavaScript-фреймворков при разработке фронтенда вместо тем и шаблонов Drupal,
  • гибкость в выборе фронтенд-разработчиков.

Как создать интернет-магазин самому с нуля

Пошаговая инструкция по созданию интернет-магазина на Drupal

А теперь мы покажем вам, как собрать с помощью Commerce простенький магазин по продаже телефонов. 

1. Скачайте последнюю версию ядра Drupal. Сделать это можно двумя способами:

a. с помощью менеджера пакетов Сomposer. В его консоль нужно отправить команду:

composer create-project drupal-composer/drupal-project:9.x-dev my_dir --no-interaction

b. c официального сайта Drupal.

Модуль Drupal Commerce потребует установки внешних зависимостей, поэтому лучше создать проект с помощью Composer. В качестве альтернативы необходимые пакеты могут быть подключены через модуль Ludwig, но рекомендуем всё равно Composer.

2. Перейдите на адрес сайта в браузере, выберите русский язык при установке.

3. Укажите доступы к базе данных.

доступы к базе данных при разработке магазина на Drupal

Drupal предложит вам выбор из нескольких профилей сайта, которые содержат в себе настройки и контент по умолчанию. Если вам это не нужно, выберите minimal profile. Затем дождитесь окончания установки и заполните реквизиты на странице Configure Site.

страница Configure Site в Drupal

4. Установка модуля Drupal Commerce возможна только с помощью менеджера пакетов composer, либо с использованием модуля Ludwig. Ознакомьтесь с документацией. Пусть вас не волнует, что команды в документации написаны для Drupal 8 — они справедливы и для Drupal 9.

5. Для того чтобы скачать модуль Commerce через Composer, отправьте в консоль команду composer require drupal/commerce.

6. Перейдите во вкладку Extend в верхнем меню администратора и включите необходимые модули.

подключение модулей при разработке магазина на Drupal

Опционально вы можете включить модуль Commerce Tax, необходимый для добавления дополнительных налогов (например, 12% НДС для заказов из России).

добавление и настройка модуля Commerce Tax при разработке магазина на Drupal

Модуль Commerce Promotion служит для создания промоакций, Commerce Number Pattern — для создания шаблона номера ваших продуктов, а Commerce Store пригодится, если вы хотите иметь несколько магазинов, управляемых одной системой.

7. Если вы все сделали правильно, в верхнем меню администратора появится новый пункт меню Commerce.

8. Для начала зададим общие конфигурации магазина, после чего приступим к созданию товаров. Перейдите в пункт меню Commerce -> Configuration.

раздел configuration в админ-панели магазина на Drupal

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

добавление валют в админ-панели магазина на Drupal

10. Перейдите в пункт меню Commerce -> Configuration -> Stores и создайте новый магазин. Заполните необходимые поля.

добавление магазина в админ-панели Drupal

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

добавление нового типа товара в админ-панели магазина на Drupal

12. В пункте меню Commerce -> Product atributes добавьте несколько атрибутов. Например, для телефонов это могут быть камера, размер экрана, объём памяти или цвет.

редактирование атрибутов товара в админ-панели магазина на Drupal

13. На странице «Торговля» -> «Конфигурация» -> «Типы вариаций товара» отредактируйте ваш кастомный тип и убедитесь, что выбраны созданные на прошлом шаге атрибуты.

 

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

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

14. После того, как мы подготовили структуру, время добавить несколько товаров. Для этого перейдите в Commerce -> Products -> Add product.

добавление товаров в админ-панели магазина на Drupal

15. Перейдите во вкладку Add variation. Здесь вы можете задать вариации товара с дополнительными опциями (атрибутами), которые мы создали на шаге 12.

оформление вариации товара в админ-панели магазина на Drupal

16. Сохраните изменения и перейдите на страницу продукта.

страница продукта в магазине на Drupal

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

17. Создадим страницу, которая будет выводить все продукты. Для этого в меню администратора перейдите в Structure -> Views и создайте новое представление. Выберите Show product типа (ваш кастомный тип) и поставьте галочку в чекбоксе Create the page.

добавление страницы для вывода всех продуктов в админ-панели магазина на Drupalстраница информации о заказе в магазине на Drupal

18. Если вы всё сделали правильно, то при переходе на страницу, которую вы сделали на предыдущем шаге, вы увидите все добавленные на сайт товары. Это базовое использование представлений, а перейдя по адресу Structure -> Views и выбрав нужное, вы сможете кастомизировать эту страницу, к примеру настроить вывод или добавить фильтры поиска. С этим вам могут помочь модули Search API и Facets для создания фасетного поиска.

19. Созданные заказы можно просматривать на странице Commerce -> Orders.

страница заказов в админ-панели магазина на Drupal

Мы рассмотрели базовую функциональность платформы Drupal Commerce.

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

Drupal Commerce поддерживает множество популярных платежных систем, таких как Stripe или PayPal. О нашем опыте работы с ними вы узнаете из следующей статьи.

Заключение

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

Андрей Руденко
Андрей Руденко, маркетолог

Автор, редактор, куратор конкурса Russian Drupal Awards

Напишите нам!

Мы регулярно просматриваем не только почту, но и спам. Ваша заявка от нас не ускользнёт.

Напишите нам!

Но сначала правильно заполните обязательные поля.