Меню Рубрики

Установка shopkeeper modx revo

Обзор Shopkeeper 3.0 для MODX Revolution

Shopkeeper — это модуль для создания интернет-магазина на CMS MODX. В этой статье я расскажу что нового в Shopkeeper 3.0, какие новые возможности и какие отличия от предыдущей версии. Но сначала немного истории.

История создания

Первая версия Shopkeeper вышла больше 5 лет назад, в 2009 году. Тогда очень не хватало решения для создания интернет-магазина на MODX. Shopkeeper не был первым, но был довольно не плохо востребован. До сих пор кто-то использует его на MODX Evolution, хотя последняя версия для этой платформы вышла в 2011 году. Затем был выпущен SHK 2.x для MODX Revolution. Для Revo первым был компонент VisionCart, но мне он сразу не понравился запутанным интерфейсом. Его развитие похоже заглохло ещё в 2011 году. Вскоре за Шопкипером вышли ещё достойные компоненты интернет-магазинов и приятно осознавать, что всё это выпущено российскими разработчиками. Теперь пришло время Shopkeeper 3.

Что нового в Shopkeeper 3


Интерфейс создан с использованием Bootstrap и AngularJS. Конечно, скрещивание этих инструментов с ExtJS, который используется в MODX Revo, может показаться излишеством, но уживаются они довольно не плохо. После того как я попробовал AngularJS использовать что-то другое совсем не хотелось. Тем более это лишний раз доказывает универсальность MODX. Думаю вы не будете разочарованы этим решением.

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

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

Есть раздел «Статистика». Пока он только показывает статистику числа заказов по месяцам, но планируется его расширение.

Так выглядит редактирование заказа:

Сниппеты и плагины

Сниппет Shopkeeper в шаблоне сайта теперь нужно вызывать так:

cart_catalog — Имя набора параметров.
Рекомендуется все параметры указывать в наборе параметров, т.к. нужно синхронизировать эти параметры при аякс-запросе.

Можно выводить две и более корзины на одной странице. В настройках системы нужно перечислить все используемые наборы параметров для SHK (параметр «shk3.property_sets»), а в чанке корзины для оберточного элемента добавить атрибут «data-shopcart» с номером набора параметра. По этому номеру будет производиться обновление корзины.

Как и в версии 2.x, чанк состоит из двух частей со специальным разделителем
Первая часть — чанк пустой корзины товаров.
Вторая часть — чанк корзины с товарами.

Уже готовы к использованию опциональные дополнения:
shkOptions — новый сниппет для вывода конфигурации Shopkeeper. Например можно выводить список способов доставки и оплаты.
hk_fihook — хук для FormIt, который используется для отправки писем после оформления заказа.
num_format — сниппет-модификатор для разделения чисел цен на разряды.
shk_curr_rate — сниппет-модификатор для вывода цен по курсу, если в магазине используется мультивалютность.
shk_contextSwitch — плагин для автоматического переключения контекстов.
shk_updateInventory — плагин для учета количества товаров на складе.
shk_multicurrency — плагин для пересчета цен при изменении валюты.
Подробнее в документации, которая всегда идет в комплекте («/core/components/shopkeeper3/docs/readme.txt»).

Переписаны shopkeeper.js и shopkeeper.class.php, но по функционалу отличия не значительные.

Как перейти с Shopkeeper 2.x на 3.0

Примерный список действий по обновлению:

  1. Сделать резервную копию сайта (файлов и БД).
  2. Удалить вручную сниппеты и плагины в категории «Shopkeeper» (от старой версии). Сам компонент удалять не обязательно.
  3. Установить SHK 3 и обновить вызовы сниппета Shopkeeper в шаблонах.
  4. Создать наборы параметров для сниппета. Произвести настройки в соответствии с новой документацией.
  5. Отредактировать чанки корзины, добавить атрибут «data-shopcart».
  6. Настроить новые плагины, если они используются.
  7. Если используется вывод способов доставки, обновить в соответствии с новой документацией (сниппет «shkOptions»).
  8. Если вы создавали свои сниппеты или плагины и использовали обращение в таблицам SHK в БД, нужно изменить имена пакета и объектов в коде.
Читайте также:  Установка билинз в штатные фары

Таблицы в БД не совместимы, поэтому история заказов при переходе со старой версии будет потеряна. Мигратора пока нет.

На данный момент доступна версия Shopkeeper 3.0rc5.

источник

Shopkeeper Интернет-магазин на MODX

Для создания интернет-магазина на MODx Evolution мы воспользуемся готовым решением — Shopkeeper. Это бесплатный программный модуль для создания интернет-магазина, написанный на языке PHP. Хочу сразу предупредить, что данный модуль подойдет лишь для небольшого интернет-магазина, работающего без связки с 1С. На момент написания урока, последней версией модуля была Shopkeeper 1.3.4, а последней версией MODx Evolution 1.0.5.

Наш урок будет состоять из двух частей, в первой части урока мы выберем шаблон для нашего интернет-магазина и интегрируем его в MODx. Здесь мы совершим такие же шаги, как и в предыдущих уроках, только в более сжатом виде. Поэтому, многие из вас могут пропустить первую часть и сразу перейти ко второй части нашего урока, где мы будем интегрировать Shopkeeper в дизайн нашего сайта.

Хочется добавить, что создатели модуля Shopkeeper снабдили нас подробной документацией.

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

Скачайте свежую версию CMS MODx Evolution (1.x.x) и свежую версию Shopkeeper .

В скачанном архиве Shopkeeper в файле shopkeeper_1.3.4/shopkeeper/docs/ru/_rus_doc_install.html вы найдете инструкцию по установке модуля. Существует три варианта установки:

Автоматическая установка Shopkeeper на уже установленный MODx
Установка MODx вместе с Shopkeeper
Ручная установка Shopkeeper на уже установленный MODx

Так как я заранее знаю, что мой сайт будет интернет-магазином, я выбираю второй вариант — установку Shopkeeper вместе с MODx. Локальный сервер XAMPP у нас уже установлен (если нет, то инструкция по установке находится в Уроке 1), поэтому переходим к установке MODx и модуля интернет-магазина.

1. Создаем в папке C:/xampp/htdocs/ папку shop, а в ней папки www и logs

2. В папку www помещаем файлы из папки modx-1.0.5 из скачанного архива MODx.

3. Создаем в PhpMyadmin новую базу shop и пользователя shop с паролем shop. Назначаем полные привелегии пользователю shop.

4. В файл C:/xampp/apache/conf/extra/httpd-vhosts.conf добавляем следующую конструкцию:

5. В файл hosts находящийся в Windows 7 по адресу C:/Windows/Sistem32/drivers/etc/ добавляем:

6. Помещаем папку shopkeeper/ из скачанного архива Shopkeeper в каталог assets/snippets/ .

7. Дополняем содержимое папки assets/ файлами из папки _upload/assets/.

8. Перемещаем из архива Shopkeeper папку install/assets/ в папку install/ в корне сайта.

9. Запускаем установку MODx (http://shop/install/).

Тут будет один важный момент, когда будем вводить префикс таблиц, указываем его как shop_ и запоминаем, нам он потом пригодится. Но если не запомнили, не беда, всегда можно его посмотреть в PhpMyadmin.

На втором шаге в списке компонентов, кроме компонентов MODx, вы увидите устанавливаемые компоненты Shopkeeperа:
Параметры (TV) — Price
Модули — Shopkeeper
Cниппеты — Shopkeeper, catalogView, include.
Завершаем установку, следуя указаниям программы установки.

10. Переименовываем файл ht.access в . htaccess.

11. Заходим в административную панель MODx (http://shop/manager/) и настраиваем Конфигурацию (подробная инструкция в Уроке 2).

Теперь, когда у нас есть установленные MODx Evolution и Shopkeeper, давайте подберем шаблон для нашего будущего сайта.

Если у вас есть свой шаблон, который вы хотите использовать, то можете пропустить этот раздел. Вам необходимо только создать два шаблона Категория и Товар и создать ресурс Каталог, а в нем несколько категорий с шаблоном Категория, а в категориях страницы для товара с шаблоном Товар. Затем в TV-параметрах найти параметр price, который был установлен вместе с Шопкипером и назначить его шаблону Товар.

Мы же воспользуемся готовым бесплатным шаблоном, это будет шаблон Wing the Air, посмотреть его можно по этой ссылке , а скачать по этой . Наш интернет-магазин будет продавать обувь.

Читайте также:  Установка продольной компенсации реактивной мощности

1. Скачанный файл разархивируем и помещаем в папку C:/xampp/htdocs/shop/www/assets/templates/.

2. Открываем файл index.html из папки WingtheAirFree скачанного архива, копируем содержимое и помещаем в шаблон Minimal Template. Меняем пути в тегах link, script, img, добавляя к ним следующий путь:

Меняем название шаблона на Главная.

3. Переименовываем ресурс MODx CMS Install Success в Главная, удаляем все из поля Содержимое ресурса.

4. Создаем в дереве ресурсов еще четыре ресурса Каталог, Доставка, Акции, Контакты. У ресурса Каталог убираем галочку с Показывать в меню.

5. В папке Каталог создаем три дочерних ресурса, к примеру, такие: Мужская обувь, Женская обувь, Детская обувь. В каждом из этих ресурсов создадим еще несколько дочерних ресурсов, назовем их, к примеру, Модель 1, Модель 2 и т.д.

6. Разбиваем шаблон на чанки. Создаем чанк HEAD и добавляем в него специальные теги MODx, не забывая вырезать из шаблона код и вставлять на его месте вызов соответствующего чанка:

Создаем чанк HEADER — шапка нашего сайта:

Создаем чанк SLIDER — слайдер в шапке сайта:

Создаем чанк SEARCH_CART, блок с поиском и корзиной:

Создаем чанк TABS — закладки с категориями товаров:

Теперь создаем три чанка First_Tab_Content, Second_Tab_Content и Third_Tab_Content поместив в них код, находящийся между комментариями с аналогичным текстом. Из-за большого размера кода, приводить его здесь не буду.

Далее, создаем чанк BRANDS с логотипами брендов:

Ну и наконец, последний чанк FOOTER:

После всех изменений, шаблон Главная должен принять следующий вид:

7. Создаем шаблон Внутренняя для страниц меню, помещаем в шаблон следующий код:

Назначаем шаблон ресурсам Доставка, Акции, Контакты, а так же категориям товаров Мужская, Женская и Детская обувь.

8. Создаем главное меню. В чанке HEADER в контейнере с меню, вместо ненумерованного списка помещаем вызов сниппета Wayfinder:

Логотип и ссылку на главную страницу в чанке HEADER вы поправите самостоятельно. Картинку логотипа можно поменять в файле со стилями в 29 строке.

9. Создаем слайдер. Можно пойти несколькими путями, но мы привяжем к каждой категории товаров свою картинку, которую будем выводить в слайдере. Для этого создаем TV-параметр slide с типом ввода Image и привяжем его к шаблону Внутренняя. Теперь добавляем ресурсам Мужская, Женская и Детская обувь картинки слайдов. Для собственного интернет-магазина вам придется создать свои картинки с размером 980х418 пикселей, для урока я буду использовать уже созданные дизайнером слайды. Создадим чанк slide_tpl с шаблоном вывода слайдов:

В чанке SLIDER помещаем вызов сниппета Ditto:

10. Делаем поиск по сайту, сниппет AjaxSearch. Для начала создаем в дереве ресурсов еще один ресурс Результаты поиска, убираем галочку с Показывать в меню, а в настройках страницы убераем галочки с Доступен для поиска, Кэшируемый и Использовать HTML-редактор. Назначаем ресурсу шаблон Внутренняя. Сохраняем, затем открываем и помещаем в Содержимое ресурса вызов сниппета AjaxSearch:

Теперь в чанке SEARCH_CART в контейнере с классом search вместо формы с поиском, помещаем еще один вызов сниппета:

где &landingPage=`27`— ID ресурса Результаты поиска. У вас он может отличаться.

Теперь необходимо отредактировать шаблон формы ввода поискового запроса в соответствии с нашим дизайном.

Это первый сложный момент. Нужно сравнить код из шаблона сайта, с кодом шаблона сниппета и попытаться их объединить. Я добавил необходимые классы и убрал подпись под формой. Но можно поступить и другим путем и сделать все с помощью CSS, что было бы более правильным решением. Но мне хотелось показать вам и такой вариант решения. Недостаток в том, что при обновлении сниппета обновится и шаблон и придется занова решать этот вопрос. Плюс же этого решения — быстрота реализации.

Код шаблона сниппета находится в файле C:/xampp/htdocs/shop/www/assets/snippets/ajaxSearch/templates/input.tpl.html. Я не буду описывать все шаги по правке шаблона, а просто приведу конечный ркезультат. Открываем этот файл в Notepad++ и вместо того, что в нем находится, помещаем следующий код:

Читайте также:  Установка кожаных оплеток на руль

Мы просто убрали лишнее и добавили необходимые нам классы. Но совсем без правки CSS файла не обойтись. Дело в том, что тег отображается браузерами с рамкой. Добавляем в наш css-файл /assets/templates/WingtheAirFree/css/style.css следующую конструкцию:

Заодно из чанка SEARCH_CART удалим код, отвечающий за ссылку на расширенный поиск, так как такого у нас не предполагается, вот этот код:

11. Редактируем чанк TABS. Создаем три чанка, tabs_tpl с шаблоном вывода закладки:

tabs_tpl_active — с шаблоном вывода активной закладки:

и tabs_tpl_red для вывода последней закладки:

Теперь в чанке TABS помещаем вызов сниппета Ditto:

12. Создаем шаблон для страниц с товаром. Копируем код из шаблона Внутренняя и вставляем в новый шаблон Товар. Назначаем этот шаблон всем дочерним документам в папках с категориями Мужская, Женская и Детская обувь.

13. Создаем TV-параметр tovar_img с типом ввода Image и назначаем его шаблону Товар. В этом параметре будут находиться картинки с изображением товара. Добавляем всем страницам с товаром изображения. Размер изображения 136х83 пикселя. Заодно, давайте TV-параметр price тоже назначим шаблону Товар. Этот параметр был создан при установке Shopkeeperа. Он будет содержать стоимость товара. Можно сразу ее проставить.

14. Создаем шаблон для вывода товара. В новый чанк tovar_tpl помещаем следующий код:

К редактированию этого чанка мы еще вернемся, когда будем подключать модуль Shopkeeper.

15. Открываем чанк First_Tab_Content и в нем удаляем все, что находится между тегами и и вместо удаленного кода помещаем вызов сниппета Ditto, где &parents=`6` — ID ресурса Мужская обувь, у вас он может отличаться:

Аналогично поступаем с чанком Second_Tab_Content, только меняем в вызове Ditto id папки на id ресурса Женская обувь:

и с чанком Third_Tab_Content поступаем точно так же, только указываем id ресурса Детская обувь:

16. Для вывода брендов на странице, давайте создадим в дереве ресурсов новый ресурс Бренды, убираем галочку с Показывать в меню, назначаем ему шаблон Внутренняя. Теперь в этой папке создадим еще несколько ресурсов с названием наших брендов. Для этих ресурсов мы создадим новый шаблон Бренды, поместив в него код из шаблона Внутренняя. Затем создадим два TV-параметра brands_foto с типом ввода Image и brands_link с типом ввода URL и назначим их шаблону Бренды. Добавляем в ресурсах с шаблоном Бренды картинки и ссылки на сайты производителей.

Создаем чанк brands_tpl:

В чанке BRANDS помещаем вызов сниппета Ditto, где &parents=`28` — id ресурса Бренды:

17. Остался последний чанк FOOTER. В нем находится меню сайта и копирайт. Сложность в том, что пункты меню разделены вертикальной чертой. Поэтому, сниппет Wayfinder для вывода этого меню нам не подходит, воспользуемся сниппетом Ditto. Для начала создадим два чанка footer_tpl

и footer_tpl_last

Затем в чанке FOOTER помещаем вызов Ditto:

На этом интеграция дизайна в MODx завершена. Чтобы заполнить контентом страницы Доставка, Акции и Контакты, достаточно разместить в окне Содержимое ресурса нужную информацию и отформатировать ее с помощью встроенного редактора.

источник

Добавить комментарий