Кейс - создание интернет-магазина с минимум затрат

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

И так начнем.

Мне понадобилось почти 100 часов, wordpress, woocommerce и несколько платных плагинов. Стоимость готового сайта для клиента сложилась из моих потраченных часов, стоимости плагинов, и стоимость дизайнера и программиста. Но как я уже писал выше программиста и дизайнера не будем учитывать, так как не всем нужна та или иная функциональность.

Чем интересен этот кейс?

Тем что я создал новый интернет-магазин на основе старого. Т.е. если у вас уже есть готовый, наполненный магазин, то при минимум затрат и времени его можно доработать. Старый сайт по доставке пиццы был сделан в 2013 году тоже на основе woocommerce. Но для функциональности на нем было куча «костылей» прям в коде woocommerce, из-за которых не могли провести очередное обновления плагинов. Поэтому при переделке сайта, а точнее сказать создании. Правок напрямую в коде плагинов не производилось. Только хуки и дополнительные функции созданные через сниппеты.

Какие основные плагины я использовал?

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

  • Advanced Custom Fields
  • Max Mega Menu
  • Code Snippets
  • WooCommerce
  • Ajax add to cart for WooCommerce
  • Saphali Woocommerce Russian
  • Variation Swatches for WooCommerce
  • YITH WooCommerce Quick View
  • Оплата банковской картой (от Сбербанка)

И платные плагины:

  • Oxygen
  • Oxygen Elements for WooCommerce
  • Extra Variation
  • WP All Export Pro
  • WP All Import Pro
  • WP All Import - ACF Add-On
  • WP All Import - WooCommerce Add-On Pro

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

И теперь кратко о плагинах и для чего они нужны.

Oxygen

Это бильдер, он заменяет тему в wordpress. В нем собраны все шаблоны. Эти шаблоны можно легко экспортировать и импортировать на другой сайт через стандартный Экспорт-Импорт WordPress.

Oxygen Elements for WooCommerce

Это дополнение для Oxygen, установка этого плагина добавляет блоки от woocommerce/

Extra Variation

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

WP All Export Pro и WP All Import Pro

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

Advanced Custom Fields

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

Max Mega Menu

Это меню для сайта, использую его, потому что оно мне нравится. Можно использовать и другой. Но в этом можно настроить красивое мобильное меню. А главное при минимуме затрат. А так же у него есть функция экспорта-импорта. Что сокращает время настройки при переносе его на другой проект.

Code Snippets

Это плагин сниппетов, заменяет стандартный файл functions.php в теме. Можно создавать свои функции и через хуки менять woocommerce и всё это правится прям в админке. Без этого плагина работа с Oxygen очень затруднительна.

WooCommerce

Это собственно плагин самого интернет-магазина, о нем уж столько расписано, что нет смысла говорит какую функцию он выполняет.

Ajax add to cart for WooCommerce

Это плагин добавления товара в корзину с карточки товара без перезагрузки страницы.

Saphali Woocommerce Russian

Это плагин для редактирования полей при оформлении заказов. Вместо него можно использовать Checkout Manager for WooCommerce мне он даже нравится больше, но в данном проекте стоял уже Saphali.

Variation Swatches for WooCommerce

Это плагин который переключения вариаций превращает в кнопки вместо выпадашек.

YITH WooCommerce Quick View

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

Оплата банковской картой (от Сбербанка)

Это плагин от сбербанка, платежный шлюз. Через который осуществляются он-лайн платежи на сайте.

Переделка сайт с минимальными затратами

Изначально планировалось, просто уйти от «костылей» в коде. Чтобы WP и все плагины работали как есть от разработчика, и обновление не затрагивало функциональности, а сайт работал без перебоев в работе. Для этого была сделана копия сайта, обновил WP и плагины, установили Oxygen, чтобы дизайн собирать в нем. Но когда клиент увидел скорость работы нового сайта, он захотел сразу вложить в него больше денег и переделать дизайн.

Для себя я выбрал такой подход, что все изменения я делал в шаблонах Oxygen и все новые функции прописывал в сниппетах. Чтобы потом, просто обновить старый сайт и через экспорт-импорт перенести шаблоны и сниппеты. Но от этого в последствии отказались, просто заменили местами сайты. Хотя из-за этого подхода я теперь могу для другого проекта перенести все свои наработки на другой сайт и потратить на него в пределах 10-20 часов рабочего времени и иметь готовый интернет-магазин доработанный, чтобы было удобно покупателям.

К таким удобствам относятся:

  • Все категории на одной странице.
  • Стандартное меню через jquery библиотеку преобразуется в якоря (не нужно меню делать вручную)
  • Быстрый просмотр товара через модальное окно.
  • Быстрое редактирование шаблонов через Oxygen.
  • Набор собственных шорткодов для массового редактирования контактных данных.
  • Дополнения к товарам.
  • Корзина и оформление заказа на одной странице.
  • Удобная навигация.

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

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

envelope linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram