|
| 1 | +--- |
| 2 | +title: Подключение на сайте |
| 3 | +--- |
| 4 | +# Подключение на сайте |
| 5 | + |
| 6 | +Подробное описание подключения лексикона, стилей и скриптов — в [Быстром старте](quick-start). Ниже — коннектор, кастомизация и чанки. |
| 7 | + |
| 8 | +## Проверка интеграции |
| 9 | + |
| 10 | +Для гостей при пустой БД данные берутся из `localStorage/cookie`. Для авторизованных и гостей (при `guest_db_enabled`) — из БД по `user_id` или `session_id`. |
| 11 | + |
| 12 | +**Чек-лист:** лексикон и `favorites.js` подключены на каждой странице товара; кнопка имеет `data-favorites-toggle` и `data-id`; `ms3favorites.guest_db_enabled` = Да; для авторизованных — пользователь авторизован в контексте **web**. |
| 13 | + |
| 14 | +## Коннектор (AJAX) |
| 15 | + |
| 16 | +**URL:** `assets/components/ms3favorites/connector.php` |
| 17 | + |
| 18 | +**Метод:** POST. |
| 19 | + |
| 20 | +Действия: |
| 21 | + |
| 22 | +- **Вывод списка избранного** — параметры `ids` (обязательно), опционально `limit`, `tpl`, `emptyTpl`, `list`, `resource_type` |
| 23 | +- **sync** — синхронизация списков в БД (JSON). POST `lists` (JSON) или `ids` |
| 24 | +- **create_share** — создание публичной ссылки (JSON). POST `list`. Только авторизованные |
| 25 | +- **get_share** — получение данных по токену (JSON). POST `token` |
| 26 | +- **copy_share** — копирование чужого списка в свой (JSON). POST `token`, `target_list` |
| 27 | +- **update_comment** — обновление заметки к элементу (JSON). POST `product_id`, `list`, `comment`. При `comments_enabled` |
| 28 | +- **add_to_cart** — добавление товаров в корзину (JSON). POST `ids` или `product_id` |
| 29 | +- **get_popularity** — маппинг id→count (JSON). POST `ids`, `resource_type` |
| 30 | +- **clear** — очистка списка (JSON). POST `list`, `resource_type` |
| 31 | + |
| 32 | +**Ответ:** HTML списка; при отсутствии товаров — emptyTpl. Для действий (actions) — JSON. Если заданы `window.MODX_ASSETS_URL` или `window.MODX_BASE_URL`, JS сам формирует URL коннектора. |
| 33 | + |
| 34 | +## Чанки |
| 35 | + |
| 36 | +| Чанк | Назначение | |
| 37 | +|------|------------| |
| 38 | +| `tplFavoritesItem` | Карточка товара в списке «Избранное» | |
| 39 | +| `tplFavoritesEmpty` | Пустое состояние (при отсутствии товаров) | |
| 40 | +| `tplFavoritesPage` | Страница `/wishlist/` (обёртка с табами, кнопками корзины) | |
| 41 | +| `tplFavoritesPageItem` | Элемент для страницы `/wishlist/` (checkbox, заметка, кнопка удаления) | |
| 42 | +| `tplFavoritesPageDemo` | Demo: табы + кнопки Каталог/Очистить/Поделиться, `?list=` | |
| 43 | +| `tplFavoritesListSelector` | Dropdown выбора списка (`default`, `gifts`, `plans`) | |
| 44 | +| `tplFavoritesSharePage` | Страница шаринга (обёртка) | |
| 45 | +| `tplMs3fBtn` | Кнопка добавления/удаления в избранное (сниппет `ms3FavoritesBtn`) | |
| 46 | +| `tplMs3fBtnWishlistBox` | Кнопка под шаблон: `li.wishlist`, `box-icon`, `icon-heart`, `tooltip` | |
| 47 | +| `tplMs3fCounter` | Счётчик избранного (сниппет `ms3FavoritesCounter`) | |
| 48 | +| `tplMs3fListsRow` | Строка списка избранного (сниппет `ms3FavoritesLists`) | |
| 49 | +| `tplMs3fListsWrapper` | Обёртка для списка списков ([[+output]]) | |
| 50 | + |
| 51 | +## data-атрибуты (страница /wishlist/) |
| 52 | + |
| 53 | +| Атрибут | Элемент | Назначение | |
| 54 | +|---------|---------|------------| |
| 55 | +| `data-favorites-add-all` | button | Добавить все товары текущего списка в корзину | |
| 56 | +| `data-favorites-add-selected` | button | Добавить выбранные (по checkbox) в корзину | |
| 57 | +| `data-favorites-cart-checkbox` | input[checkbox] | Отметка товара для «Добавить выбранные» | |
| 58 | +| `data-favorites-select-all` | input[checkbox] | Выбрать/снять все checkbox | |
| 59 | +| `data-favorites-clear` | button | Очистить текущий список | |
| 60 | +| `data-favorites-list-selector` | select | Dropdown выбора списка (чанк tplFavoritesListSelector) | |
| 61 | +| `data-favorites-comment` | textarea | Заметка к элементу (при comments_enabled) | |
| 62 | + |
| 63 | +Чанки можно переопределять своими (Fenom или MODX); параметры `tpl` и `emptyTpl` задаются в сниппете и при вызове `render()` в JS. |
| 64 | + |
| 65 | +## Стили и BEM |
| 66 | + |
| 67 | +Классы с префиксом **ms3f** (BEM): `ms3f__list`, `ms3f__item` и др. Файл стилей: `assets/components/ms3favorites/css/favorites.css`. Карточки по умолчанию используют Bootstrap (`ms3-product-card`, `product-image-wrapper`); для корректного отображения подключите Bootstrap и при необходимости стили каталога. |
| 68 | + |
| 69 | +На мобильных устройствах — горизонтальный скролл списка (`.ms3f__list`). |
| 70 | + |
| 71 | +## CSS-переменные |
| 72 | + |
| 73 | +Переопределяйте в своей теме (`:root` или контейнер блока): |
| 74 | + |
| 75 | +| Переменная | Описание | |
| 76 | +|------------|----------| |
| 77 | +| `--ms3f-bg` | Фон карточки | |
| 78 | +| `--ms3f-border` | Граница | |
| 79 | +| `--ms3f-radius` | Скругление | |
| 80 | +| `--ms3f-color` | Цвет текста | |
| 81 | +| `--ms3f-price-color` | Цвет цены | |
| 82 | +| `--ms3f-button-active` | Цвет активной кнопки (товар в списке) | |
| 83 | +| `--toast-bg` | Фон toast-уведомления | |
| 84 | +| `--toast-color` | Текст toast | |
| 85 | +| `--toast-radius` | Скругление toast | |
| 86 | + |
| 87 | +Пример: |
| 88 | + |
| 89 | +```css |
| 90 | +:root { |
| 91 | + --ms3f-bg: #fff; |
| 92 | + --ms3f-border: #eee; |
| 93 | + --ms3f-radius: 0.5rem; |
| 94 | + --ms3f-color: #333; |
| 95 | + --ms3f-price-color: #e74c3c; |
| 96 | + --ms3f-button-active: #e74c3c; |
| 97 | +} |
| 98 | +``` |
| 99 | + |
| 100 | +## JavaScript API |
| 101 | + |
| 102 | +```javascript |
| 103 | +window.ms3Favorites = { |
| 104 | + getList(name), // Получить ID списка |
| 105 | + getAllLists(), // Все списки {default:[], gifts:[]} |
| 106 | + add(id, list), // Добавить товар в список |
| 107 | + remove(id, list), // Удалить из списка |
| 108 | + switchList(name), // Переключить активный список |
| 109 | + render(selector, options), // options: list, tpl, emptyTpl, limit |
| 110 | + updateCounter(), updateButtonStates(), |
| 111 | + sync(), // Синхронизация (POST lists) |
| 112 | + createShare(list), // Создать share-ссылку → token (только авторизованные) |
| 113 | + copyFromShare(token), // Скопировать чужой список (target_list опционально) |
| 114 | + addToCart(ids), // Добавить товары в корзину MiniShop3 |
| 115 | + addSelectedToCart(), // Добавить выбранные (checkbox) |
| 116 | + updateComment(productId, list, comment), // Сохранить заметку (до 500 символов) |
| 117 | + clear(list) // Очистить список (action=clear) |
| 118 | +}; |
| 119 | +``` |
| 120 | + |
| 121 | +## Интеграция mxQuickView и mFilter |
| 122 | + |
| 123 | +**mxQuickView:** ms3Favorites подписывается на события `mxqv:loaded` и `mxqv:open`. После загрузки контента в модальное окно вызывается `updateButtonStates()` — кнопки избранного работают без дополнительной настройки. |
| 124 | + |
| 125 | +**mFilter:** При наличии контейнера результатов (`[data-mfilter-results]`, `.mfilter-results` или `[data-mfilter-id]`) `ms3Favorites` использует `MutationObserver` и вызывает `updateButtonStates()` при обновлении DOM. Для кастомного селектора задайте `window.ms3fConfig.mfilterContainer` до загрузки `favorites.js`. |
0 commit comments