Widget Menoo

Ghid de integrare a widget-ului Menoo pentru comenzi online pe site-ul restaurantului

Ce este Widget-ul Menoo?

Widget-ul Menoo este o soluție JavaScript ușor de integrat care vă permite să adăugați funcționalitatea completă de comandă online direct pe site-ul restaurantului dvs. Clienții pot vizualiza meniul, adăuga produse în coș și finaliza comenzile fără să părăsească website-ul dvs.

Caracteristici Principale

Integrare Simplă: Doar câteva linii de cod pentru a adăuga widget-ul
Multi-limbă: Suport pentru română, engleză și rusă
Responsive: Funcționează perfect pe desktop și mobile
Customizabil: Configurare flexibilă pentru nevoile dvs.
Cross-Domain: Funcționează pe orice domeniu, fără restricții

Integrare Rapidă

Adăugați SDK-ul

Adăugați următorul cod în pagina dvs. 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', // Înlocuiți cu ID-ul restaurantului dvs.
        container: '#menoo-widget',
        language: 'ro', // ro, en, sau ru
      });
    </script>
  </body>
</html>

Obțineți ID-ul Restaurantului

ID-ul restaurantului dvs. poate fi găsit în:

Dashboard Partners -> Setări -> Integrări
Sau în URL-ul paginii de administrare

Configurare Avansată

Opțiuni de Inițializare

await MenooSDK.init({
  restaurantId: 'YOUR_RESTAURANT_ID', // Obligatoriu
  container: '#menoo-widget', // Selector CSS sau element HTML
  language: 'ro', // ro, en, ru (implicit: ro)
  stickyOffset: 80, // Offset pentru poziționare sticky (implicit: 0)
});

API-ul Widget-ului

După inițializare, puteți interacționa cu widget-ul:

// Obține informații despre coș
const cart = MenooSDK.getCart();
console.log('Coș:', cart);

// Obține numărul de produse
const itemCount = MenooSDK.getItemCount();
console.log('Produse în coș:', itemCount);

// Obține prețul total
const total = MenooSDK.getTotalPrice();
console.log('Total:', total);

// Obține coșul în format API (pentru trimitere la backend)
const apiCart = MenooSDK.getCartForApi();
console.log('Coș format API:', apiCart);

// Golește coșul
MenooSDK.clearCart();

// Deschide pagina de checkout
MenooSDK.openCheckout();

// Distruge widget-ul
MenooSDK.destroy();

Evenimente

Ascultați evenimentele widget-ului:

// Widget gata
window.addEventListener('menoo:ready', (e) => {
  console.log('Widget gata:', e.detail);
});

// Coș modificat
window.addEventListener('menoo:cart-changed', (e) => {
  console.log('Coș modificat:', e.detail);
});

// Produs adăugat
window.addEventListener('menoo:item-added', (e) => {
  console.log('Produs adăugat:', e.detail);
});

// Checkout inițiat
window.addEventListener('menoo:checkout-started', (e) => {
  console.log('Checkout început:', e.detail);
});

// Eroare
window.addEventListener('menoo:error', (e) => {
  console.error('Eroare widget:', e.detail);
});

Integrare în Framework-uri Populare

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 () => {
      // Cleanup la unmount
      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)

Dacă site-ul dvs. folosește CSP, adăugați:

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

Flux de Comandă

Clientul navighează pe site-ul restaurantului
Widget-ul afișează meniul (produse, prețuri, opțiuni)
Clientul adaugă produse în coș
Click pe "Checkout" -> Redirecționare la menoo.ro/[limba]/embedded/widget/[restaurantId]
Transfer coș prin URL (base64 encoded, doar ID-uri de produse pentru securitate)
Menoo preia și validează coșul (prețurile sunt recalculate pe server)
Autentificare client (dacă nu este autentificat)
Finalizare comandă (adresă livrare, plată)

Securitate

Prețurile nu pot fi manipulate: Widget-ul trimite doar ID-uri de produse
Validare server-side: Toate prețurile sunt recalculate pe serverul Menoo
Transfer securizat: Coșul este encoded în URL (base64)
Cross-domain safe: Funcționează pe orice domeniu fără probleme de securitate

Suport și Documentație

Repository: github.com/crisposoft/menoo-widget
Documentație Completă: README.md
Exemple Live: widget.menoo.ro/examples/
Contact: contact@menoo.ro
Website: menoo.ro

Întrebări Frecvente

Actualizări și Versiuni

Widget-ul este actualizat automat prin CDN. Folosim versioning semantic:

v1/menoo-sdk.js - Versiune majoră 1 (stabilă)
Actualizări minore și patch-uri se aplică automat
Breaking changes vor fi anunțate în avans

Migrare de la Alte Soluții

Dacă aveți deja o soluție de comandă online și doriți să treceți la widget-ul Menoo, contactați-ne la contact@menoo.ro pentru asistență în migrare.

Notă de Plată – Vizualizare și Gestionare

Ghid pentru vizualizarea și gestionarea notei de plată în aplicația Menoo Waiter

API si Integrari

Documentatie tehnica pentru dezvoltatori - autentificare, endpoints si integrari