База знаний

1. Управление категориями каталога

Для создания полноценного каталога товаров перейдите в раздел «Магазин» на боковой панели и выберите вкладку «Категории». Категории позволяют структурировать товары и упрощают навигацию для покупателей.

• Создание категории: Нажмите «Добавить категорию», укажите понятное название. Система автоматически сгенерирует URL-слаг (например, smartfony для «Смартфоны»). При желании слаг можно изменить вручную.
• Вложенность (Иерархия): Поддерживается иерархическая структура каталога глубиной до 3 уровней. Вы можете создавать подкатегории (например: Электроника → Смартфоны → Apple).
• Drag-and-Drop сортировка: Вы можете менять порядок вывода категорий и их вложенность простым перетаскиванием мыши в интерфейсе списка. Изменения сохраняются автоматически в реальном времени.

2. Схемы характеристик (Кастомные свойства)

Вкладка «Свойства товаров» позволяет создавать шаблоны характеристик, которые затем заполняются в карточках товаров. Это незаменимо для фильтрации и сравнения.

• Группы свойств: Объединяйте характеристики в логические блоки (например, «Экран» или «Процессор»).
• Типы полей:
  • Текст: Любое текстовое значение (например, «Бренд: Xiaomi»).
  • Число: Только числовые параметры (например, «Объем памяти: 256» или «Вес: 180»). Подходит для фильтрации по диапазону.
  • Список: Фиксированный набор значений (например, «Тип матрицы: AMOLED, IPS, OLED»).
  • Флажок (Логическое): Да/Нет переключатели (например, «Влагозащита: Да», «Поддержка eSIM: Нет»).

3. Добавление и оформление товаров

Вкладка «Товары» — основное рабочее пространство контент-менеджера. Для добавления товара нажмите «Добавить товар».

Основные параметры карточки товара:

1. Название и Слаг: Уникальное имя товара (автоматически формирует красивый URL).
2. Артикул (SKU): Уникальный идентификатор товарной позиции для склада и поиска.
3. Цена и Старая цена: Текущая стоимость продажи. Если заполнено поле «Старая цена», система автоматически рассчитает скидку и выведет бейдж «Скидка» на фронтенде.
4. Остатки на складе (Stock): Количество доступного товара. При каждом заказе остатки автоматически уменьшаются. Если остаток равен 0, товар помечается как «Нет в наличии» и кнопка покупки блокируется.
5. Медиагалерея: Возможность загрузки до 10 качественных фотографий. Система поддерживает перетаскивание картинок для изменения их порядка отображения. Картинки сжимаются и конвертируются в веб-форматы.

4. Управление заказами и CRM

Все оформленные на сайте заказы моментально попадают во встроенную CRM-систему (раздел «Магазин» → вкладка «Заказы»).

• Канбан-доска: Процесс обработки заказов разделен по колонкам-статусам:
  • Новые: Только что поступившие заказы. Подсвечиваются ярким индикатором и требуют подтверждения менеджера.
  • В обработке: Сборка, упаковка или доставка товара клиенту.
  • Выполненные: Успешно закрытые сделки. Данные из этой колонки попадают в графики аналитики.
  • Отмененные: Возвраты или спам-заказы.
• Карточка заказа: При клике по карточке открывается детальная информация: список заказанных товаров (с указанием артикула, цены и выбранных покупателем вариантов/размеров), общая стоимость, контактные данные (ФИО, телефон, email, адрес) и комментарий.

5. Подключение Telegram-уведомлений

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

1. В Telegram найдите бота @meloddyCMS_bot и нажмите «Запустить» (/start).
2. Запросите код авторизации для сайта (бот пришлет вам секретный код).
3. В настройках вашего проекта перейдите во вкладку «SEO & Интеграции» и в поле «Уведомления в Telegram» введите полученный код.
4. Нажмите «Подключить». Бот пришлет подтверждение привязки.
5. Теперь о каждом новом заказе или заполненной форме бот будет моментально сообщать вам в чат, присылая детальный список товаров и контакты покупателя.

6. Публичный REST API для разработчиков

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

Получение списка категорий

GET /api/commerce/:siteId/public/categories

Возвращает плоский массив категорий с иерархическими связями (родительский ID в поле parentId).

Получение списка товаров (с фильтрацией)

GET /api/commerce/:siteId/public/products?category=smartfony&limit=12&page=1

Поддерживаемые query-параметры:

• category (строка): Слаг, имя или ID категории для фильтрации.
• search (строка): Полнотекстовый поиск по названию или SKU.
• minPrice / maxPrice (числа): Фильтрация по диапазону цен.
• page (число): Номер страницы (по умолчанию 1).
• limit (число): Количество товаров на страницу (по умолчанию 20).

Получение детальной информации о товаре

GET /api/commerce/:siteId/public/products/:idOrSlug

Возвращает объект товара, включая его характеристики (массив properties), остатки, галерею картинок, а также массив relatedProductsData (до 8 связанных товаров, настроенных в панели).

7. Интеграция корзины с помощью client-cart.js

Чтобы не писать логику хранения товаров в LocalStorage, мелочевки подсчетов и отправки заказов вручную, подключите нашу официальную JS-библиотеку:

<script src="/js/client-cart.js"></script>

После подключения на объекте window становится доступен глобальный класс MeloddyCart, инкапсулирующий все необходимые методы:

• MeloddyCart.getItems(): Возвращает массив элементов корзины. Каждый элемент содержит:

  {
    productId: "ID_товара",
    name: "Название товара",
    price: 1500,
    quantity: 2,
    image: "/img/photo.png",
    selectedVariants: { "Цвет": "Черный", "Размер": "L" }
  }

• MeloddyCart.addItem(item): Добавляет товар в корзину. Аргумент должен содержать поля: id, name, price, quantity, image, и опционально selectedVariants. Если товар с таким ID и опциями уже есть в корзине, его количество увеличивается.
• MeloddyCart.removeItem(productId, selectedVariants): Удаляет товар из корзины. Если товар имеет выбранные варианты, необходимо передать их вторым аргументом для точного сопоставления.
• MeloddyCart.updateQuantity(productId, quantity, selectedVariants): Обновляет количество товара до указанного значения.
• MeloddyCart.clear(): Полностью очищает корзину.
• MeloddyCart.getTotalCount(): Возвращает общее число товаров в корзине (сумма всех quantity).
• MeloddyCart.getTotalPrice(): Возвращает суммарную стоимость товаров.
• MeloddyCart.submitOrder(orderData): Отправляет заказ на сервер в CRM. Метод возвращает Promise.

  Формат объекта orderData:

  {
    name: "Иван Иванов",
    phone: "+7 (999) 123-45-67",
    email: "ivan@example.com",
    comment: "Доставка до двери"
  }

8. Работа с опциями и вариантами товаров

Часто один и тот же товар продается в разных вариациях (например, футболка размера S, M, L или телефон с 128ГБ и 256ГБ памяти). meloddyCMS и библиотека корзины полностью поддерживают кастомные свойства при оформлении заказа.

Как передать выбранные опции в корзину:

При клике на кнопку «В корзину» соберите выбранные пользователем значения из выпадающих списков или радио-кнопок и передайте их в свойстве selectedVariants:

const productToBuy = {
    id: "tshirt_01",
    name: "Фирменная футболка",
    price: 1990,
    image: "/site/shop/tshirt.jpg",
    quantity: 1,
    selectedVariants: {
        "Размер": "L",
        "Цвет": "Синий"
    }
};

// Добавляем в корзину
MeloddyCart.addItem(productToBuy);

В CRM в карточке заказа эти данные отобразятся в структурированном виде: Фирменная футболка (Размер: L, Цвет: Синий), что позволит менеджеру не ошибиться при комплектации.

9. Полный пример верстки интернет-магазина

Ниже приведен готовый пример фронтенд-кода каталога товаров, корзины и формы оформления заказа, который вы можете скопировать и внедрить на свой сайт:

<!-- Подключаем библиотеку корзины -->
<script src="/js/client-cart.js"></script>

<!-- Контейнер каталога товаров -->
<div id="catalog-container" class="products-grid"></div>

<!-- Контейнер корзины -->
<div class="cart-section">
    <h3>Корзина (<span id="cart-count">0</span> шт.)</h3>
    <div id="cart-items"></div>
    <div class="cart-total">Итого: <strong id="cart-total-price">0</strong> ₽</div>
    
    <!-- Форма оформления -->
    <form id="checkout-form" onsubmit="submitOrder(event)" style="margin-top: 15px;">
        <input type="text" id="order-name" placeholder="Ваше Имя" required style="display:block; margin-bottom:8px;">
        <input type="tel" id="order-phone" placeholder="Телефон" required style="display:block; margin-bottom:8px;">
        <button type="submit">Оформить заказ</button>
    </form>
</div>

<script>
    window.meloddySiteId = window.location.pathname.split('/')[2] || 'my-shop-id';

    async function initCatalog() {
        const response = await fetch(`/api/commerce/\${window.meloddySiteId}/public/products?limit=6`);
        if (response.ok) {
            const data = await response.json();
            const container = document.getElementById('catalog-container');
            container.innerHTML = data.products.map(p => `
                <div class="product-card">
                    <img src="\${p.images[0] || '/img/no-photo.png'}" alt="\${p.name}" width="150">
                    <h4>\${p.name}</h4>
                    <p>Цена: \${p.price} ₽</p>
                    <button onclick="buyProduct('\${p.id}', '\${p.name}', \${p.price}, '\${p.images[0] || ''}')">Купить</button>
                </div>
            `).join('');
        }
    }

    function buyProduct(id, name, price, image) {
        MeloddyCart.addItem({ id, name, price, image, quantity: 1 });
    }

    function renderCart() {
        const items = MeloddyCart.getItems();
        const itemsContainer = document.getElementById('cart-items');
        const countContainer = document.getElementById('cart-count');
        const totalContainer = document.getElementById('cart-total-price');

        countContainer.textContent = MeloddyCart.getTotalCount();
        totalContainer.textContent = MeloddyCart.getTotalPrice();

        if (items.length === 0) {
            itemsContainer.innerHTML = '<p>Корзина пуста</p>';
            return;
        }

        itemsContainer.innerHTML = items.map(item => `
            <div class="cart-item" style="display:flex; justify-content:space-between; margin-bottom:8px;">
                <div>\${item.name} (\${item.quantity} x \${item.price} ₽)</div>
                <button onclick="MeloddyCart.removeItem('\${item.productId}', \${JSON.stringify(item.selectedVariants)})">Удалить</button>
            </div>
        `).join('');
    }

    window.addEventListener('meloddy-cart-updated', renderCart);

    async function submitOrder(e) {
        e.preventDefault();
        const orderData = {
            name: document.getElementById('order-name').value,
            phone: document.getElementById('order-phone').value,
            comment: 'Заказ оформлен через кастомную корзину'
        };

        try {
            const res = await MeloddyCart.submitOrder(orderData);
            alert(\`Заказ оформлен! Номер заказа: \${res.orderId}\`);
            MeloddyCart.clear();
            document.getElementById('checkout-form').reset();
        } catch(err) {
            alert(\`Ошибка оформления: \${err.message}\`);
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        initCatalog();
        renderCart();
    });
</script>

1. Концепция модуля Новости (Блог)

Модуль «Блог (Новости)» в meloddyCMS позволяет организовать полноценную новостную ленту, ведение блога или публикацию статей. В отличие от статического подхода, статьи хранятся в структурированном виде, а управление публикациями осуществляется через удобный интерфейс администратора.

Основные возможности модуля:

• Панель администрирования: Создание, редактирование, удаление статей, гибкая пагинация и полнотекстовый поиск по заголовку и тексту.
• Управление статусами: Публикация статей в реальном времени или сохранение в формате «Черновик» для отложенного редактирования.
• Загрузка обложек: Встроенный загрузчик изображений позволяет загружать обложки статей непосредственно на сервер.
• Автоматическая генерация URL-адресов: Уникальный транслитерированный URL-слаг формируется на основе заголовка статьи с возможностью ручной корректировки.

2. Включение модуля на сайте

Для активации модуля выполните следующие действия:

1. Перейдите в настройки вашего сайта в панели управления meloddyCMS.
2. В разделе «Модули и Валюта» найдите переключатель «Блог (Новости и статьи)» и переведите его в активное состояние.
3. Нажмите кнопку «Сохранить настройки» внизу страницы.
4. После сохранения на вкладке проекта появится раздел «Блог», предоставляющий полноценный интерфейс для управления публикациями.

3. Интеграция публикаций на сайт с помощью JS SDK

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

Шаг 1. Подключение SDK на страницы сайта

Добавьте тег подключения скрипта перед закрывающим тегом </body>:

<script src="/js/client-blog.js"></script>

Шаг 2. Инициализация и автоматический рендеринг

Задайте глобальный идентификатор вашего сайта и вызовите методы рендеринга ленты или статьи:

<div id="blog-feed-container"></div>

<script>
    // Укажите ID вашего сайта (мелодии)
    window.meloddySiteId = "ваш-site-id";

    // Автоматический рендеринг ленты статей в контейнер с ID 'blog-feed-container'
    MeloddyBlog.renderFeed('blog-feed-container', {
        limit: 6 // Ограничение на количество выводимых статей (по умолчанию 10)
    });
</script>

Шаг 3. Детальный просмотр статьи

Для вывода конкретной статьи по слагу (например, при переходе по ссылке вида ?post=slug) SDK поддерживает простой рендеринг полной публикации:

<div id="blog-post-container"></div>

<script>
    window.meloddySiteId = "ваш-site-id";

    const urlParams = new URLSearchParams(window.location.search);
    const postSlug = urlParams.get('post');

    if (postSlug) {
        // Рендерим полную статью в контейнер с ID 'blog-post-container'
        MeloddyBlog.renderPost('blog-post-container', postSlug);
    } else {
        // Если слаг не передан, выводим общую ленту статей
        MeloddyBlog.renderFeed('blog-feed-container');
    }
</script>

4. Кастомизация шаблонов вывода

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

Пример кастомного шаблона для превью статьи в ленте:

MeloddyBlog.renderFeed('blog-feed-container', {
    limit: 5,
    templateFn: function(post, siteId) {
        const date = new Date(post.date).toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', year: 'numeric' });
        const coverSrc = post.image ? `/real-site/${post.image}` : '/img/default-cover.jpg';
        
        return `
            <div class="custom-post-card">
                <img src="${coverSrc}" alt="${post.title}" class="card-img">
                <div class="card-body">
                    <span class="card-date">${date}</span>
                    <h3><a href="?post=${post.slug}">${post.title}</a></h3>
                    <p>${post.summary || ''}</p>
                    <a href="?post=${post.slug}" class="read-more-btn">Подробнее</a>
                </div>
            </div>
        `;
    }
});

5. Дополнительные поля и привязка блоков шаблона

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

Как это работает:

1. При создании или редактировании статьи в панели Блога нажмите кнопку **«+ Добавить поле»** в секции «Дополнительные поля шаблона».
2. Введите уникальный латинский идентификатор (ключ) поля (например, author_quote или promo_banner).
3. Выберите тип поля (Текст или Картинка) и заполните его значение (для картинок можно загрузить изображение прямо с ПК).
4. Разработчик на детальной странице статьи или в шаблоне верстки вешает на соответствующие HTML-элементы атрибуты:
   • data-blog-field="ключ" — для текстовых блоков (элементы div, p, span, h3 и др.).
   • data-blog-img="ключ" — для изображений (элементы img).
5. При загрузке страницы JS SDK meloddyCMS автоматически найдет эти элементы и вставит в них соответствующие значения!

Пример разметки шаблона детальной страницы статьи:

<div class="post-layout">
    <!-- Основной контент, выводимый SDK -->
    <div id="blog-content"></div>
    
    <!-- Дополнительный независимый блок цитаты автора -->
    <blockquote class="author-block">
        <p data-blog-field="author_quote"></p>
    </blockquote>
    
    <!-- Дополнительное промо-изображение в верстке -->
    <img data-blog-img="promo_banner" src="" alt="Промо" class="promo-img" style="display: none;">
</div>