Виджет Menoo

Руководство по интеграции виджета Menoo для онлайн-заказов на сайте ресторана

Что такое виджет Menoo?

Виджет Menoo — это легко интегрируемое JavaScript-решение, которое позволяет добавить полноценный функционал онлайн-заказов прямо на сайт вашего ресторана. Клиенты могут просматривать меню, добавлять блюда в корзину и оформлять заказы, не покидая ваш сайт.

Основные возможности

Простая интеграция: Всего несколько строк кода для подключения виджета
Мультиязычность: Поддержка румынского, английского и русского языков
Адаптивность: Идеально работает на десктопе и мобильных устройствах
Гибкая настройка: Конфигурация под ваши потребности
Кросс-доменность: Работает на любом домене без ограничений

Быстрая интеграция

Добавьте SDK

Добавьте следующий код на вашу HTML-страницу:

<!DOCTYPE html>
<html>
  <head>
    <title>Restaurant - Meniu Online</title>
  </head>
  <body>
    <!-- Container pentru widget -->
    <div id="menoo-widget"></div>

    <!-- Inițializare widget -->
    <script type="module">
      import MenooSDK from 'https://widget.menoo.ro/v1/menoo-sdk.js';

      await MenooSDK.init({
        restaurantId: 'YOUR_RESTAURANT_ID', // Замените на ID вашего ресторана
        container: '#menoo-widget',
        language: 'ro', // ro, en или ru
      });
    </script>
  </body>
</html>

Получите ID ресторана

ID вашего ресторана можно найти в:

Dashboard Partners -> Настройки -> Интеграции
Или в URL-адресе панели управления

Расширенная настройка

Параметры инициализации

await MenooSDK.init({
  restaurantId: 'YOUR_RESTAURANT_ID', // Обязательно
  container: '#menoo-widget', // CSS-селектор или HTML-элемент
  language: 'ro', // ro, en, ru (по умолчанию: ro)
  stickyOffset: 80, // Отступ для sticky-позиционирования (по умолчанию: 0)
});

API виджета

После инициализации вы можете взаимодействовать с виджетом:

// Получить информацию о корзине
const cart = MenooSDK.getCart();
console.log('Корзина:', cart);

// Получить количество товаров
const itemCount = MenooSDK.getItemCount();
console.log('Товаров в корзине:', itemCount);

// Получить общую сумму
const total = MenooSDK.getTotalPrice();
console.log('Итого:', total);

// Получить корзину в формате API (для отправки на сервер)
const apiCart = MenooSDK.getCartForApi();
console.log('Корзина в формате API:', apiCart);

// Очистить корзину
MenooSDK.clearCart();

// Открыть страницу оформления заказа
MenooSDK.openCheckout();

// Уничтожить виджет
MenooSDK.destroy();

События

Подписка на события виджета:

// Виджет готов
window.addEventListener('menoo:ready', (e) => {
  console.log('Виджет готов:', e.detail);
});

// Корзина изменена
window.addEventListener('menoo:cart-changed', (e) => {
  console.log('Корзина изменена:', e.detail);
});

// Товар добавлен
window.addEventListener('menoo:item-added', (e) => {
  console.log('Товар добавлен:', e.detail);
});

// Оформление заказа начато
window.addEventListener('menoo:checkout-started', (e) => {
  console.log('Оформление начато:', e.detail);
});

// Ошибка
window.addEventListener('menoo:error', (e) => {
  console.error('Ошибка виджета:', e.detail);
});

Интеграция с популярными фреймворками

import { useEffect } from 'react';

function MenuWidget() {
  useEffect(() => {
    import('https://widget.menoo.ro/v1/menoo-sdk.js').then(async (module) => {
      const MenooSDK = module.default;

      await MenooSDK.init({
        restaurantId: 'YOUR_RESTAURANT_ID',
        container: '#menoo-widget',
        language: 'ro',
      });
    });

    return () => {
      // Очистка при размонтировании
      import('https://widget.menoo.ro/v1/menoo-sdk.js').then((module) => {
        module.default.destroy();
      });
    };
  }, []);

  return <div id="menoo-widget" />;
}

<template>
  <div id="menoo-widget"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';

onMounted(async () => {
  const module = await import('https://widget.menoo.ro/v1/menoo-sdk.js');
  const MenooSDK = module.default;

  await MenooSDK.init({
    restaurantId: 'YOUR_RESTAURANT_ID',
    container: '#menoo-widget',
    language: 'ro',
  });
});

onUnmounted(async () => {
  const module = await import('https://widget.menoo.ro/v1/menoo-sdk.js');
  module.default.destroy();
});
</script>

'use client';

import { useEffect } from 'react';

export default function MenuWidget() {
  useEffect(() => {
    import('https://widget.menoo.ro/v1/menoo-sdk.js').then(async (module) => {
      const MenooSDK = module.default;

      await MenooSDK.init({
        restaurantId: 'YOUR_RESTAURANT_ID',
        container: '#menoo-widget',
        language: 'ro',
      });
    });
  }, []);

  return <div id="menoo-widget" />;
}

<div id="menoo-widget"></div>

<script type="module">
  import('https://widget.menoo.ro/v1/menoo-sdk.js').then(async (module) => {
    const MenooSDK = module.default;

    await MenooSDK.init({
      restaurantId: '<?php echo get_option('menoo_restaurant_id'); ?>',
      container: '#menoo-widget',
      language: 'ro',
    });
  });
</script>

Content Security Policy (CSP)

Если ваш сайт использует CSP, добавьте:

<meta
  http-equiv="Content-Security-Policy"
  content="script-src 'self' https://widget.menoo.ro; img-src 'self' https://widget.menoo.ro;"
/>

Процесс оформления заказа

Клиент заходит на сайт ресторана
Виджет отображает меню (блюда, цены, опции)
Клиент добавляет товары в корзину
Нажимает «Оформить заказ» -> Перенаправление на menoo.ro/[язык]/embedded/widget/[restaurantId]
Передача корзины через URL (base64-кодирование, только ID товаров для безопасности)
Menoo получает и валидирует корзину (цены пересчитываются на сервере)
Аутентификация клиента (если не авторизован)
Завершение заказа (адрес доставки, оплата)

Безопасность

Цены невозможно подделать: Виджет передаёт только ID товаров
Серверная валидация: Все цены пересчитываются на сервере Menoo
Безопасная передача: Корзина кодируется в URL (base64)
Кросс-доменная безопасность: Работает на любом домене без проблем с безопасностью

Поддержка и документация

Репозиторий: github.com/crisposoft/menoo-widget
Полная документация: README.md
Живые примеры: widget.menoo.ro/examples/
Контакты: contact@menoo.ro
Сайт: menoo.ro

Часто задаваемые вопросы

Обновления и версии

Виджет обновляется автоматически через CDN. Мы используем семантическое версионирование:

v1/menoo-sdk.js — стабильная мажорная версия 1
Минорные обновления и патчи применяются автоматически
О критических изменениях будет объявлено заранее

Миграция с других решений

Если у вас уже есть система онлайн-заказов и вы хотите перейти на виджет Menoo, свяжитесь с нами по адресу contact@menoo.ro для помощи в миграции.

Счёт — просмотр и управление

Руководство по просмотру и управлению счётом в приложении Menoo Waiter

API и интеграции

Техническая документация для разработчиков — аутентификация, эндпоинты и интеграции