<h1>🛒 stAn Shop – Advanced NUI Shopping System</h1>
Un système de boutique moderne pour FiveM avec interface React NUI, conçu pour offrir une expérience immersive et fluide aux joueurs.
https://www.youtube.com/watch?v=Mf0Ni1wolIM
Compatible ESX, QBCore et Standalone, stAn Shop propose une interface élégante, des dialogues interactifs avec les PNJ et une gestion dynamique des produits.
<hr />
<h1>✨ Aperçu</h1>
stAn Shop transforme les boutiques classiques en expérience immersive et interactive.
Les joueurs peuvent :
<ul>
<li>
Interagir avec un PNJ marchand
</li>
<li>
Discuter via un dialogue style iMessage
</li>
<li>
Parcourir les catégories de produits
</li>
<li>
Ajouter des produits dans un panier
</li>
<li>
Valider leurs achats directement en jeu
</li>
</ul>
Le tout avec une interface moderne et fluide.
<hr />
<h1>🎨 Interface NUI Moderne</h1>
Interface entièrement développée en React + Vite + TypeScript.
<h3>Caractéristiques UI</h3>
✔ Design Glassmorphism moderne 
✔ Animations fluides et naturelles 
✔ Interface rapide et optimisée 
✔ Navigation simple par catégories 
✔ Panier d'achat dynamique
<hr />
<h1>💬 Dialogue interactif avec les PNJ</h1>
Le système inclut un dialogue conversationnel immersif.
Fonctionnalités :
<ul>
<li>
Messages style iMessage
</li>
<li>
Animation "le marchand écrit..."
</li>
<li>
Réponses interactives
</li>
<li>
Messages personnalisables
</li>
<li>
Système activable ou désactivable
</li>
</ul>
Exemple :
<pre><code>Marchand :
Bonjour ! Que cherchez-vous aujourd'hui ?

[ Oui, montrez-moi ]
[ Non merci ]
</code></pre>
<hr />
<h1>🏪 Système multi-boutiques</h1>
Vous pouvez créer autant de boutiques que vous voulez :
Exemples :
<ul>
<li>
Superette
</li>
<li>
Pharmacie
</li>
<li>
Armurerie
</li>
<li>
IKEA
</li>
<li>
Magasin personnalisé
</li>
</ul>
Chaque boutique possède :
<ul>
<li>
sa position
</li>
<li>
son PNJ
</li>
<li>
ses produits
</li>
<li>
ses catégories
</li>
</ul>
<hr />
<h1>📦 Produits dynamiques</h1>
Le script peut charger les produits depuis :
<h3>1️⃣ Aya Shop</h3>
Compatible avec :
<pre><code>aya_shop/shared/config.lua
</code></pre>
<h3>2️⃣ Configuration personnalisée</h3>
Vous pouvez définir vos produits directement dans le script.
<hr />
<h1>📂 Catégories personnalisables</h1>
Les catégories peuvent être entièrement modifiées :
Exemples :
<ul>
<li>
Nourriture
</li>
<li>
Médical
</li>
<li>
Armes
</li>
<li>
Divers
</li>
</ul>
Chaque catégorie peut avoir :
<ul>
<li>
un nom personnalisé
</li>
<li>
une icône personnalisée
</li>
</ul>
<hr />
<h1>⚙️ Compatibilité Framework</h1>
Détection automatique du framework :
✔ ESX 
✔ QBCore 
✔ Standalone
Gestion de l'argent :
ESX
<ul>
<li>
money
</li>
<li>
bank
</li>
<li>
black_money
</li>
</ul>
QBCore
<ul>
<li>
cash
</li>
<li>
bank
</li>
</ul>
<hr />
<h1>🚀 Performance optimisée</h1>
Script conçu pour ne pas impacter les performances du serveur.
Consommation :
Idle
<pre><code>~0.01ms
</code></pre>
UI ouverte
<pre><code>~0.03 – 0.05ms
</code></pre>
Optimisations :
<ul>
<li>
markers dynamiques
</li>
<li>
threads optimisés
</li>
<li>
NUI désactivée automatiquement
</li>
<li>
prompt affiché uniquement à proximité
</li>
</ul>
<hr />
<h1>🎮 Utilisation en jeu</h1>
1️⃣ Approchez-vous d'une boutique 
 2️⃣ Un prompt apparaît au-dessus du PNJ 
3️⃣ Appuyez sur E pour interagir 
 4️⃣ Suivez le dialogue avec le marchand 
 5️⃣ Ajoutez des produits au panier 
 6️⃣ Validez votre achat
<hr />
<h1>⌨️ Commandes</h1>
<pre><code>/stnshop
</code></pre>
Ouvre la boutique la plus proche.
(activable dans la configuration)
<hr />
<h1>🔧 Installation</h1>
1️⃣ Placez le dossier dans :
<pre><code>resources/
</code></pre>
2️⃣ Ajoutez dans votre <code>server.cfg</code>
<pre><code>ensure stn_shop
</code></pre>
3️⃣ Configurez vos boutiques dans :
<pre><code>config.lua
</code></pre>
4️⃣ Redémarrez votre serveur
<hr />
<h1>📁 Structure</h1>
<pre><code>stn_shop
│
├ fxmanifest.lua
├ config.lua
├ client.lua
├ server.lua
│
└ reactapp
 └ client
 ├ src
 ├ public
 └ dist
</code></pre>
<hr />
<h1>🎨 Personnalisation</h1>
Vous pouvez modifier :
<ul>
<li>
couleurs de l'interface
</li>
<li>
PNJ
</li>
<li>
catégories
</li>
<li>
icônes
</li>
<li>
dialogue
</li>
<li>
produits
</li>
<li>
types de boutiques
</li>
</ul>
Le script est 100% modifiable.
<hr />
<h1>🧠 Développé par</h1>
stAn Dev
Interface réalisée avec :
<ul>
<li>
React
</li>
<li>
Vite
</li>
<li>
TypeScript
</li>
<li>
NUI FiveM
</li>
</ul>
<hr />
✅ Script léger 
✅ Interface moderne 
✅ Facile à configurer 
✅ Compatible tous frameworks
<hr />
💬 Support disponible pour l'installation et la configuration.
<hr />

Description

🛒 stAn Shop – Advanced NUI Shopping System

Un système de boutique moderne pour FiveM avec interface React NUI, conçu pour offrir une expérience immersive et fluide aux joueurs.

https://www.youtube.com/watch?v=Mf0Ni1wolIM

Compatible ESX, QBCore et Standalone, stAn Shop propose une interface élégante, des dialogues interactifs avec les PNJ et une gestion dynamique des produits.

✨ Aperçu

stAn Shop transforme les boutiques classiques en expérience immersive et interactive.

Les joueurs peuvent :

Interagir avec un PNJ marchand
Discuter via un dialogue style iMessage
Parcourir les catégories de produits
Ajouter des produits dans un panier
Valider leurs achats directement en jeu

Le tout avec une interface moderne et fluide.

🎨 Interface NUI Moderne

Interface entièrement développée en React + Vite + TypeScript.

Caractéristiques UI

✔ Design Glassmorphism moderne
✔ Animations fluides et naturelles
✔ Interface rapide et optimisée
✔ Navigation simple par catégories
✔ Panier d'achat dynamique

💬 Dialogue interactif avec les PNJ

Le système inclut un dialogue conversationnel immersif.

Fonctionnalités :

Messages style iMessage
Animation "le marchand écrit..."
Réponses interactives
Messages personnalisables
Système activable ou désactivable

Exemple :

Marchand :
Bonjour ! Que cherchez-vous aujourd'hui ?

[ Oui, montrez-moi ]
[ Non merci ]

🏪 Système multi-boutiques

Vous pouvez créer autant de boutiques que vous voulez :

Exemples :

Superette
Pharmacie
Armurerie
IKEA
Magasin personnalisé

Chaque boutique possède :

sa position
son PNJ
ses produits
ses catégories

📦 Produits dynamiques

Le script peut charger les produits depuis :

1️⃣ Aya Shop

Compatible avec :

aya_shop/shared/config.lua

2️⃣ Configuration personnalisée

Vous pouvez définir vos produits directement dans le script.

📂 Catégories personnalisables

Les catégories peuvent être entièrement modifiées :

Exemples :

Nourriture
Médical
Armes
Divers

Chaque catégorie peut avoir :

un nom personnalisé
une icône personnalisée

⚙️ Compatibilité Framework

Détection automatique du framework :

✔ ESX
✔ QBCore
✔ Standalone

Gestion de l'argent :

ESX

money
bank
black_money

QBCore

cash
bank

🚀 Performance optimisée

Script conçu pour ne pas impacter les performances du serveur.

Consommation :

Idle

~0.01ms

UI ouverte

~0.03 – 0.05ms

Optimisations :

markers dynamiques
threads optimisés
NUI désactivée automatiquement
prompt affiché uniquement à proximité

🎮 Utilisation en jeu

1️⃣ Approchez-vous d'une boutique
2️⃣ Un prompt apparaît au-dessus du PNJ
3️⃣ Appuyez sur E pour interagir
4️⃣ Suivez le dialogue avec le marchand
5️⃣ Ajoutez des produits au panier
6️⃣ Validez votre achat

⌨️ Commandes

/stnshop

Ouvre la boutique la plus proche.

(activable dans la configuration)

🔧 Installation

1️⃣ Placez le dossier dans :

resources/

2️⃣ Ajoutez dans votre server.cfg

ensure stn_shop

3️⃣ Configurez vos boutiques dans :

config.lua

4️⃣ Redémarrez votre serveur

📁 Structure

stn_shop
│
├ fxmanifest.lua
├ config.lua
├ client.lua
├ server.lua
│
└ reactapp
    └ client
        ├ src
        ├ public
        └ dist

🎨 Personnalisation

Vous pouvez modifier :

couleurs de l'interface
PNJ
catégories
icônes
dialogue
produits
types de boutiques

Le script est 100% modifiable.

🧠 Développé par

stAn Dev

Interface réalisée avec :

React
Vite
TypeScript
NUI FiveM

✅ Script léger
✅ Interface moderne
✅ Facile à configurer
✅ Compatible tous frameworks

💬 Support disponible pour l'installation et la configuration.