Обзор Shop-Script 5

в 8:46, , рубрики: cms, shop-script 5, webasyst, Блог компании Webasyst, движок интернет-магазина, обзор

Привет! Я руковожу развитием Shop-Script. В течение года я собирал вопросы, которые возникают у пользователей и разработчиков, начинающих работать с Shop-Script 5 (последней версией продукта), и в этом посте оформил их в виде отдельной обзорной статьи. Промо-сайт промо-сайтом, документация тоже иногда полезна, но всегда проще познакомиться с продуктом, прочитав или проскроллив всего одну статью. Под катом — подробной обзор Shop-Script 5 с описанием ключевых возможностей и того, как работает движок, 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

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

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

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

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

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

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

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

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

Спасибо за внимание!

Приглашаем разработчиков

Приглашаем разработчиков к совместной работе над новыми приложениями: регистрируйтесь в программе для разработчиков и создавайте свои полезные инструменты. Интересные проекты мы с удовольствием прорекламируем на главной странице магазина Webasyst (маркета) и в нашем блоге.

Автор: vofka

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js