Evlop comprend un ensemble solide de blocs no-code. Lorsque vous avez besoin de quelque chose de spécifique, vous pouvez ajouter vos propres blocs personnalisés. Choisissez l'approche adaptée à vos compétences et à votre cas d'usage : un bloc React Native qui s'exécute dans l'app, ou un bloc HTML construit avec HTML, CSS, JS, Tailwind et Liquid qui s'affiche dans une WebView.
1) Créer des blocs personnalisés avec React Native
Ce que c'est
Un bloc React Native fait partie de l'app native. Il est idéal pour une UI fluide, les gestes, les animations, le comportement hors ligne et les fonctionnalités de l'appareil.
Ce que vous pouvez utiliser
@evlop/native-componentpour des primitives d'UI cohérentes@evlop/shopifypour accéder aux données de la boutique comme le produit, la collection, le panier, les metafields, les metaobjects, le client- Tous les packages npm listés dans le
package.jsonde l'éditeur de blocs personnalisés peuvent être importés et utilisés
Quand choisir cette option
- Vous avez besoin de hautes performances ou d'interactions complexes
- Vous souhaitez une navigation native et les API de l'appareil
- Vous prévoyez de mettre des données en cache ou de gérer des réseaux instables
Conseils pratiques
- Gardez des réglages de bloc simples et sérialisables
- Choisissez vos dépendances avec soin pour maîtriser la taille du bundle
- Testez sur les écrans accueil, produit et collection
- Validez l'accessibilité, le chargement et les états vides
2) Créer des blocs personnalisés en HTML
De quoi il s'agit
Un bloc HTML s'exécute dans une WebView. Créez avec HTML, CSS, JS, Tailwind et Liquid pour itérer rapidement.
Données et limites
- Utilisez Liquid pour accéder au contexte Shopify, comme le produit actif ou la collection active
- Les informations client ne sont pas disponibles dans ce contexte
Navigation
- Le pont web d'Evlop transforme les liens
<a href>classiques en navigation native lorsqu'un écran d'app correspondant existe
Quand choisir cette option
- Contenus marketing ou éditoriaux qui changent souvent
- Widgets légers affichant des détails produit ou collection
- Équipes préférant Tailwind et un JavaScript simple
Conseils pratiques
- Concevez en mobile first avec les utilitaires Tailwind
- Gardez des scripts légers et évitez les frameworks lourds
- Utilisez des ancres standard pour que le pont web route en natif
- Vérifiez le contraste, l'espacement et le temps de chargement
Pour conclure
Les blocs personnalisés vous permettent d'adapter l'app à votre boutique sans réinventer la roue. Choisissez React Native pour la performance et une intégration poussée, ou HTML pour la rapidité et des widgets axés sur le contenu.