Chatbot React avec Prestashop

		# Crée un nouveau projet Hono dans le dossier 'chatbot-api'
npm create hono@latest chatbot-api
	

		import { Hono } from 'hono';
import { cors } from 'hono/cors';
 
const app = new Hono();
 
// --- Configuration CORS ---
// On autorise le front (localhost en dev, et le vrai site en prod)
// C'est INDISPENSABLE pour que le widget React puisse parler à l'API.
app.use(
	'/*',
	cors({
		// Liste des domaines autorisés à nous contacter
		origin: ['http://localhost:5173', 'https://votre-boutique.com'],
		allowMethods: ['POST', 'GET', 'OPTIONS']
	})
);
 
// Route de test pour voir si le serveur tourne
app.get('/', (c) => c.text('Chatbot API en ligne !'));
 
// Route principale : réception du message
app.post('/message', async (c) => {
	// "c" est le contexte Hono. Il contient la requête (req) et la réponse (res).
 
	// 1. On récupère le JSON envoyé par React
	const { message, context } = await c.req.json();
 
	// 2. Logique métier (simulée ici)
	// Le "context" contient les infos injectées par PrestaShop (panier, nom...)
	console.log(`Message de ${context?.firstName || 'Invité'}: ${message}`);
 
	// Ici, vous connecteriez une IA ou une logique de réponse custom.
 
	// 3. On renvoie la réponse au format JSON
	return c.json({
		reply: `J'ai reçu : "${message}".`
	});
});
 
export default app;
	

		import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
export default defineConfig({
	plugins: [react()],
	build: {
		rollupOptions: {
			output: {
				// On force le nom du fichier de sortie pour qu'il soit toujours le même
				// C'est plus facile à inclure dans le module PrestaShop après.
				entryFileNames: 'assets/chatbot-widget.js',
				assetFileNames: 'assets/chatbot-style.css'
			}
		}
	}
});
	

		import React from 'react';
import ReactDOM from 'react-dom/client';
import ChatWidget from './ChatWidget';
import './index.css';
 
// On cible un ID unique qu'on a défini dans le footer.tpl de PrestaShop
const TARGET_ID = 'kesval-chatbot-root';
const rootElement = document.getElementById(TARGET_ID);
 
// On vérifie si la div existe avant d'essayer d'y mettre React
// (Pour éviter les erreurs si le module est désactivé)
if (rootElement) {
	ReactDOM.createRoot(rootElement).render(
		<React.StrictMode>
			<ChatWidget />
		</React.StrictMode>
	);
}
	

		import { useState } from 'react';
 
export default function ChatWidget() {
	// État pour ouvrir/fermer le chat
	const [isOpen, setIsOpen] = useState(false);
	// État pour stocker l'historique des messages
	const [messages, setMessages] = useState([]);
 
	// --- RÉCUPÉRATION DU CONTEXTE PRESTASHOP ---
	// On lit la variable globale injectée par le module PHP.
	// Si elle n'existe pas (ex: en dev local), on prend un objet vide {}.
	const psContext = window.PRESTASHOP_CONTEXT || {};
 
	const sendMessage = async (e) => {
		// Empêche le rechargement de la page lors de la soumission du formulaire
		e.preventDefault();
 
		// On utilise FormData pour récupérer les valeurs du formulaire facilement
		// C'est souvent plus performant que de lier chaque input à un state (controlled inputs)
		const formData = new FormData(e.target);
		const text = formData.get('message')?.toString().trim();
 
		if (!text) return;
 
		// On vide l'input visuellement
		e.target.reset();
 
		// 1. Optimistic UI : On affiche le message de l'utilisateur tout de suite
		setMessages((prev) => [...prev, { text, sender: 'user' }]);
 
		try {
			// 2. On envoie le message ET le contexte au back
			const res = await fetch('https://api.mon-bot.com/message', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({
					message: text,
					context: psContext // On envoie les infos du client (Nom, Panier...) au bot
				})
			});
 
			const data = await res.json();
 
			// 3. On affiche la réponse du bot
			setMessages((prev) => [...prev, { text: data.reply, sender: 'bot' }]);
		} catch (err) {
			console.error('Erreur bot', err);
			// En vrai projet, affichez un message d'erreur à l'utilisateur ici
		}
	};
 
	return (
		<>
			{/* BOUTON D'OUVERTURE (visible si fermé) */}
			{!isOpen && (
				<button className="chatbot-launcher" onClick={() => setIsOpen(true)}>
					💬 Aide
				</button>
			)}
 
			{/* FENÊTRE DU CHAT (visible si ouvert) */}
			{isOpen && (
				<div className="chatbot-window">
					<div className="header">
						{/* On utilise le prénom venant de PrestaShop */}
						<span>Bonjour {psContext.firstName || 'Visiteur'} 👋</span>
						<button onClick={() => setIsOpen(false)}>X</button>
					</div>
 
					<div className="messages">
						{messages.map((m, i) => (
							<div key={i} className={`msg ${m.sender}`}>
								{m.text}
							</div>
						))}
					</div>
 
					<form className="input-area" onSubmit={sendMessage}>
						<input name="message" placeholder="Une question ?" />
						<button type="submit">Envoyer</button>
					</form>
				</div>
			)}
		</>
	);
}
	

		<?php
// Sécurité : Interdit l'accès direct à ce fichier si on n'est pas dans PrestaShop
if (!defined('_PS_VERSION_')) exit;
 
class KesvalChatbot extends Module
{
    public function __construct()
    {
        $this->name = 'kesvalchatbot';
        $this->tab = 'front_office_features';
        $this->version = '1.0.0';
        $this->author = 'Kesval';
        $this->bootstrap = true; // Utilise les styles Bootstrap dans la config du module
        parent::__construct();
 
        $this->displayName = $this->l('Chatbot React');
        $this->description = $this->l('Intégration d'un chatbot React externe');
    }
 
    // Fonction appelée lors de l'installation du module
    public function install()
    {
        // On enregistre le module et on s'accroche au hook "displayFooter"
        // C'est ce qui permet d'afficher du contenu en bas de page
        return parent::install() && $this->registerHook('displayFooter');
    }
 
    // Fonction exécutée à chaque fois que le footer est affiché
    public function hookDisplayFooter($params)
    {
        // 1. On récupère les infos via le contexte global de PrestaShop
        $customer = $this->context->customer;
        $cart = $this->context->cart;
 
        // 2. On prépare un tableau propre avec seulement les données utiles pour le JS
        $contextData = [
            'isLogged' => $customer->isLogged(),
            'id' => $customer->isLogged() ? $customer->id : null,
            'firstName' => $customer->isLogged() ? $customer->firstname : 'Invité',
            // Calcul du total du panier (si un panier existe)
            'cartTotal' => $cart ? $cart->getOrderTotal(true, Cart::BOTH) : 0
        ];
 
        // 3. On envoie ces données au template Smarty
        // Elles seront accessibles dans le .tpl via la variable $chatbot_json
        $this->context->smarty->assign([
            'chatbot_json' => json_encode($contextData)
        ]);
 
        // 4. On affiche le template footer.tpl
        return $this->display(__FILE__, 'views/templates/hook/footer.tpl');
    }
}
	

		<!-- 1. On définit la variable globale JS avec les données venant du PHP -->
<script>
	   // On crée une variable globale window.PRESTASHOP_CONTEXT
	   // Le 'nofilter' est CRUCIAL pour avoir du JSON valide
	window.PRESTASHOP_CONTEXT = {$chatbot_json nofilter};
</script>
 
<!-- 2. La div cible où React va s'accrocher (Mount Point) -->
<div id="kesval-chatbot-root"></div>
 
<!-- 3. Le script du bot (hébergé ailleurs) -->
<!-- Important : type="module" pour supporter les imports modernes -->
<script type="module" src="https://mon-serveur.com/chatbot-widget.js"></script>
 
<style>
	/* Un peu de CSS pour positionner le widget en bas à droite */
	#kesval-chatbot-root {
		position: fixed;
		bottom: 20px;
		right: 20px;
		z-index: 10000; /* Très élevé pour passer au-dessus de tout */
	}
</style>