3 Dec 02:16

Обзор Shop-Script 5

Веб-разработка: Обзор Shop-Script 5

Shop-Script 5 предназначен для создания розничных интернет-магазинов. Для понимания портрета типового интернет-магазина, для работы которого будет полезен Shop-Script 5, следует представить компанию с небольшим штатом, которая находится в крупном российском городе, имеет несколько складов (например, офис, склад и точку продаж), работает с 1С, осуществляет доставку заказов курьером и почтой. Платформа гибкая и может быть применена для работы интернет-магазинов в любой стране, однако наиболее распространенный тип компаний, которые используют Shop-Script 5 сегодня, соответствует именно такому портрету.

Демо Shop-Script 5: витрина, бекенд (введите любые логин и пароль для входа в бекенд)
Скачать: .tar.gz (4.5 МБ) или на GitHub (приватный репозиторий, доступ предоставляем всем разработчикам по заполнению формы)
Сайт продукта: http://www.shop-script.ru/

Установка

Shop-Script 5 — это приложение на основе фреймворка Webasyst. Разработан на основе PHP 5.2+ / MySQL 4.1+ / Smarty / jQuery.

Для установки Shop-Script 5 нужно скачать дистрибутив (4.5 МБ; архив уже включает в себя фреймворк и Shop-Script 5), скопировать все файлы дистрибутива в папку на сервере, затем открыть скрипт установки в браузере и ввести данные доступа к БД.

Веб-разработка: Обзор Shop-Script 5

Веб-разработка: Обзор Shop-Script 5

Веб-разработка: Обзор Shop-Script 5

Подробная инструкция по установке.

Если не хочется ничего устанавливать, то Shop-Script 5 можно попробовать в действии, создав тестовый магазинв веб-сервисе на сайте продукта.

Начало использования

Бекенд (админка):

Веб-разработка: Обзор Shop-Script 5

Фронтенд (витрина):

Веб-разработка: Обзор Shop-Script 5

Товары можно добавить разными способами: по одному через веб-интерфейс или импортировать сразу много товаров из CSV-файла, YML-файла (Яндекс.Маркет), 1С или даже перетащив пачку фотографий в браузер. Возможность импорта из набора фото особенно полезна, когда уже есть много готовых фотографий товаров (магазины DIY, хенд-мейд), и все, что остается — это придумать названия и назначить цены.

Веб-разработка: Обзор Shop-Script 5

Интерфейс

Пропустим скучную часть импорта товаров и сразу посмотрим интерфейс бекенда с демо-контентом:

Веб-разработка: Обзор Shop-Script 5

Веб-разработка: Обзор Shop-Script 5

Веб-разработка: Обзор Shop-Script 5

Веб-разработка: Обзор Shop-Script 5

Веб-разработка: Обзор Shop-Script 5

В качестве WYSIWYG-редактора используется Redactor. Редактор кода — на основе Ace.

Веб-разработка: Обзор Shop-Script 5

Дефолтная тема дизайна магазина с товарами:

Веб-разработка: Обзор Shop-Script 5

Дефолтная тема дизайна сразу «из коробки» поддерживает много полезных фич, таких как микроразметку Schema.org, адаптивный дизайн, автоматическую поддержку @2x-картинок товаров для Ретины.

Бекенд и фронтенд лучше всего посмотреть в демо.

Файловая структура и MVC

Shop-Script 5, как и любое приложение на основе Webasyst, разработан в соответствии с принципом проектирования MVC. Все запросы в бекенд и фронтенд проходят через index.php и далее маршрутизируются согласно правилам роутинга: сначала — по приложениям, затем — по экшенам внутри приложения.

Веб-разработка: Обзор Shop-Script 5

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

Весь код Shop-Script 5 — в папке wa-apps/shop/

Веб-разработка: Обзор Shop-Script 5

Реализация всей основной логики работы Shop-Script 5 — в lib/actions/ (экраны), lib/classes/ (объекты) и lib/model/ (работа с данными).

Структура данных

В базе данных 60 таблиц. Общая ER-диаграмма Shop-Script 5:

Веб-разработка: Обзор Shop-Script 5

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

Основные сущности, на которых строится управление товарами:

Тип товаровСлужат внутренней классификации товаров и независимой организации наборов различных характеристик (свойств) товаров, разделения товаров по витринам (разным сайтам). Пример: Бытовая техника, Автозапчасти, Обувь.ТоварТо, что представлено на витрине как логически единый продукт на отдельной странице интернет-магазина. Товар может принадлежать только одному типу.
Пример: iPhone 5S
АртикулЭто то, что можно положить в корзину и заказать. Каждый товар может иметь много артикулов. Для артикула задается цена, остаток на складе.
Примеры:
iPhone 5S золотой 16 ГБ
, iPhone 5S белый 32 ГБ
Категория товаровВнешняя классификация товаров. Каждая категория товаров имеет свой адрес на витрине и может быть опубликована (или скрыта) на разных витринах интернет-магазина. Категория может быть статической (наборной) или динамической (на основе некоторого правила). Категории могут быть вложены друг в друга.Список товаровПозволяет встраивать отдельные списки товаров в в шаблоны дизайна или на произвольных информационных страницах сайта. Пример: спецпредложения в слайдере на витрине или в боковой колонке.
Самые интересные фичи

Shop-Script 5 предоставляет большое количество фич сразу «из коробки», много возможностей можно добавить с помощью плагинов, и перечислять их все здесь будет бессмысленно. Для полноты обзора упомяну некоторые из ключевых возможностей:

  • Многовитринность: правила маршрутизации задаются в зависимости от домена и позволяют на базе одной установки Shop-Script 5 открыть сразу несколько интернет-магазинов. На каждой витрине будет опубликован свой набор товаров, свой sitemap.xml, своя тема дизайна.
  • Фильтрация товаров: для каждой категории товаров можно задать свой набор характеристик, по которым будет производиться подбор товаров.
    Веб-разработка: Обзор Shop-Script 5
  • Поиск товаров работает на основе индекса, который собирается из разных параметров товаров: наименований, описаний, тегов, значений характеристик и т.д. В настройках магазина можно варьировать приоритет (вес), с которым учитывается каждый параметр.
    Веб-разработка: Обзор Shop-Script 5
  • Изображения товаров «на лету»: из загруженного оригинального изображения товара эскизы создаются автоматически по запросу. Например, если в имени файла (в УРЛе) указать .200x250.jpg, то будет создано изображение именно такого размера.
  • SEO: изначальная поддержка микроразметки Schema.org в базовых темах дизайна, возможность использовать в заголовках страниц информацию о товарах в виде переменных («Купить {$name} в Москве»), автоматическая генерация sitemap.xml и т.д.
  • Учет товаров на нескольких складах с возможностью просмотра журнала движения товаров по каждому складу.
  • Отложенные сообщения покупателям по почте и SMS: например, благодарность за покупку спустя 3 дня после оплаты заказа.
  • Рекомендации товаров: на основании того, что покупали другие клиенты (cross-selling) и на основании подбора товаров со схожими характеристиками (up-selling).

Яндекс.Маркет, обмен данными с «1С: Управление торговлей», поддержка всех основных платежных систем и т.д. — описание всех возможностей лучше посмотреть на сайте продукта.

Темы дизайна: прикручиваем свой дизайн

wa-apps/shop/themes/THEME_FOLDER/ — оригинальные файлы темы дизайна, которые полностью обновляются (перезаписываются) при обновлении темы дизайна.
wa-data/public/shop/themes/THEME_FOLDER/ — измененные пользовательские шаблоны дизайна, которые при обновлениях темы не меняются (по сути форк).

Если есть копия в wa-data/public/, то будет использована она, если нет, то оригинал из папки приложения wa-apps/.

Каждая тема дизайна — это отдельная папка с набором HTML/Smarty-шаблонов, CSS, JS, картинками и файлом описания theme.xml.

Для внедрения своего дизайна проще всего воспользоваться встроенным дизайна-редактором, в котором можно редактировать базовые настройки темы дизайна (они определяется в theme.xml):

Веб-разработка: Обзор Shop-Script 5

И каждый отдельный шаблон темы дизайна (HTML, CSS, JS) непосредственно в браузере:

Веб-разработка: Обзор Shop-Script 5

Одна из самых классных фич тем дизайна — возможность в шаблоне дизайна одного приложения получить данные из другого приложения. Например, в любом приложении можно сделать такой вызов — {$in_the_cart = $wa->shop->cart()} — и получить в переменную {$in_the_cart} массив всех товаров в корзине пользователя. Или же из другого приложения, например, из «Блога»: {$best_posts = $wa->blog->posts(‘/tag/best’)}.

Плагины: расширяем базовую функциональность интернет-магазина

Базовая функциональность Shop-Script 5 расширяется с помощью плагинов, реализация которых находится в подпапке wa-apps/shop/plugins/

Для создания своего плагина запустите в консоли:

php wa.php createPlugin shop brands  

Запуск такой команды создаст в папке Shop-Script 5 необходимую для плагина файловую структуру, которая аналогична структуре самого приложения: img, js, lib, templates. Архитектура плагина практически полностью повторяет архитектуру приложения, все тот же MVC и те же подходы.

Веб-разработка: Обзор Shop-Script 5

Плагины «цепляются» к основному функционалу и встриваются в Shop-Script 5 с помощью событий и хуков. Например:

1. Находим подходящий хук в документации. Допустим, нужно вывести что-то в блоке навигации на витрине магазина — за это отвечает хук frontend_nav.

2. В конфиге приложения lib/config/plugin.php объявляем метод, который слушает событие, связанное с этим хуком:

'handlers' => array( 'frontend_nav' => 'frontendNav', ),

3. Пишем код и выводим HTML непосредственно в PHP (если HTML простой):

<?php    class shopBrandsPlugin extends shopPlugin  {      public function frontendNav()      {          $feature_id = $this->getSettings('feature_id');          $feature_model = new shopFeatureModel();          $feature = $feature_model->getById($feature_id);          if (!$feature) {              return;          }          $values = $feature_model->getFeatureValues($feature);            if (waRequest::param('type_id') && is_array(waRequest::param('type_id'))) {              $types = waRequest::param('type_id');          } else {              $types = array();          }            $existed = $this->getByTypes($feature['id'], $types);            $html = '<ul class="menu-v brands">';          foreach ($values as $v_id => $v) {              if (in_array($v_id, $existed)) {                  $url = wa()->getRouteUrl('shop/frontend/brand', array('brand' => str_replace('%2F', '/', urlencode($v))));                  $html .= '<li'.($v == waRequest::param('brand') ? ' class="selected"' : '').'><a href="'.$url.'">'.htmlspecialchars($v).'</a></li>';              }          }          $html .= '</ul>';          return $html;      }  

Или же передаем данные в шаблон, форматирование определяем в шаблоне:

$this->view->assign('features', $values);

И затем выводим в нем в {foreach $features as $key => $val} … {/foreach}

Посмотрите подробный туториал разработки плагина «Бренды» в документации.

Приложения: расширяем функциональность еще дальше

Если функциональности плагинов не хватает и нужно написать свой Shop-Script 5 сделать что-то более масштабное, можно создать отдельное приложение Webasyst, которое появится в основном меню навигации и будет работать независимо от Shop-Script 5.

Веб-разработка: Обзор Shop-Script 5

Как и плагин, создать свое приложение-пустышку можно также из консоли:

php wa.php createApp mysupercoolapp -name "Мое приложение" -version 0.0.1
В зависимости от специфики запросов ваших клиентов вы сможете создавать приложения с любой логикой работы: закупки, управление проектами, пробки, маршруты, ферму.
<em>Посмотрите подробный </em><a href="http://www.webasyst.ru/developers/docs/guestbook-app-tutorial/"><em>туториал разработки приложения</em></a><em> "Гостевая книга" или готовые приложения для примера.</em>
API

Shop-Script 5 предоставляет 44 API-метода для чтения и записи данных извне.

Авторизация основана на протоколе OAuth 2.0. Форматы обмена данными: JSON и XML.

В зависимости от метода вызов производится через GET или POST. Например, метод чтения данных о товаре: http://demo1-ru.webasyst.com/api.php/shop.product.getInfo?id=65

Внедрения и статистика

Самое крупное внедрение: Enter Связной. Shop-Script 5 используется в инфраструктуре «Enter Связной» в качестве CMS.

На данный момент зарегистрировано уже более 3500 лицензионных установок Shop-Script 5 (бесплатные и пробные установки не считаются). Несмотря на то, что общее количество интернет-магазинов, работающих на основе старых версий продукта, все еще значительно превышает количество пользователей Shop-Script 5 (по данным Ruward на сегодня это 18600 сайтов), динамика перехода на новую версию растет.

Доступ к приватному репозиторию Shop-Script 5 на GitHub получили уже более 700 разработчиков.

Маркет

Магазин Webasyst — маркет, в котором свои решения на основе фреймворка Webasyst может опубликовать любой разработчик. Наша комиссия за представление продукта на сайте Webasyst и в «Инсталлере» (приложение-клиент для установки новых приложений), установку и доставку обновлений до пользователей составляет всего 20%.

На данный момент наши партнеры-разработчики опубликовали в магазине Webasyst 11 приложений, более 150 плагинов и 40 тем дизайна.

Общие продажи разработчиков уже превысили 12 миллионов (!) рублей, и это только за первые девять месяцев работы маркета. Наибольшей популярностью пользуются плагины и темы дизайна Shop-Script 5: более 6 миллионов рублей заработали разработчики плагинов, более 5 миллионов рублей — дизайнеры тем, иоколо полумиллиона рублей — разработчики приложений (хотя потенциал роста у приложений, безусловно, самый большой).

Приглашаем разработчиков и дизайнеров создавать продукты, которые владельцы Shop-Script 5 и пользователи Webasyst будут с удовольствием покупать: www.webasyst.ru/developers/store/

Лицензирование

Shop-Script 5 — это платная CMS. Для открытия работающего интернет-магазина необходимо приобрести лицензию стоимостью 9 999 рублей или воспользоваться веб-сервисом стоимостью 798 рублей в месяц (599 рублей за Shop-Script 5 без доступа к исходному коду + 199 рублей за хостинг: 2 ГБ, SSL, домен и т.д.).

Для разработчиков лицензия предоставляется бесплатно.

Разрабатывая Shop-Script 5, мы рассматривали разные варианты монетизации, в том числе вариант полного перехода на модель распространения open source, но в результате реализовали этот вариант не в конечном решении для интернет-магазинов (не в самом Shop-Script 5), а в его основе и общей платформе, на которой он работает — фреймворке Webasyst — и приложениях-сателлитах, который в данный момент дополняют функциональность Shop-Script 5 (хотя эти приложения сами по себе тоже являются полноценными решениями для своих задач, отношение к ним и их позиционирование пока построены все же вокруг интернет-магазинов — я говорю в первую очередь о приложениях "Сайт", "Блог" и "Фото").

О проекте

Веб-разработка: Обзор Shop-Script 5

Проекту Shop-Script в этом году исполнилось 12 лет. Первая версия Shop-Script 1.0 была выпущена еще в 2002 году, и сегодняшнее поколение является уже пятым по счету. Кому интересно, почитайте историю развития проекта.

Да, мы знаем о том, что устаревшие версии продуктов Shop-Script разработчики, дизайнеры и хабрапользователи не очень любят. Действительно, есть за что. Поэтому Shop-Script 5 и фреймворк Webasyst были разработаны с нуля и унаследовали от старых версий только название и опыт.

Немного о планах развития

Будет скучно говорить о конкретных фичах, которые появятся в следующих обновлениях Shop-Script 5, и лучше сказать об общем направлении развития платформы — это инструменты, которые помогут конечным пользователям управлять не контентом, а развитиембизнеса, лучше оценивать эффективность работы компании и анализировать, как повысить продажи.

Например, уже в ближайших версиях в базовой версии Shop-Script 5 мы реализуем поддержку оценки ликвидности товаров: вместо списка товаров-бестселлеров можно будет работать с более значимым (с точки зрения прибыли) списком самых ликвидных и рентабельных товаров: с учетом и продаж в течение последнего времени, и закупочной стоимости, и стоимости складского хранения — все это в базовой версии CMS без каких-либо дополнительных аналитических приложений. Это позволит владельцам магазинов лучше знать структуру своих продаж: следить не только за тем, какой товар лучше покупают, а за тем, на чем можно более вероятно получить прибыль.

Помимо этого — приложения для CRM, поддержки клиентов, организации дел, коллективной работы и т.д. Постепенно функциональность CMS пополнится функциональностью интранета. В Webasyst есть все для объединения двух этих направлений в едином интерфейсе.

Понравилась публикация? Поделись с друзьями:

0 комментариев

Зарегистрируйтесь или авторизуйтесь для того, чтобы оставлять комментарии.