Centro conoscenze/Custom blocks/Articolo
Custom blocks

Introduzione ai Blocchi Personalizzati

Aggiornato September 1, 2025

Evlop include un solido set di blocchi no-code. Quando ti serve qualcosa di specifico, puoi aggiungere i tuoi blocchi personalizzati. Scegli l'approccio più adatto alle tue competenze e al tuo caso d'uso: un blocco React Native che gira dentro l'app, oppure un blocco HTML realizzato con HTML, CSS, JS, Tailwind e Liquid che viene visualizzato in una WebView.

1) Creare blocchi personalizzati con React Native

Cos'è
Un blocco React Native fa parte dell'app nativa. È la scelta migliore per UI fluide, gesti, animazioni, comportamento offline e funzionalità del dispositivo.

Cosa puoi usare

  • @evlop/native-component per primitive UI coerenti
  • @evlop/shopify per accedere ai dati dello store come prodotto, collezione, carrello, metafields, metaobjects, cliente
  • Tutti i pacchetti npm elencati nel package.json dell'editor di blocchi personalizzati possono essere importati e utilizzati

Quando scegliere questa opzione

  • Ti servono alte prestazioni o interazioni complesse
  • Vuoi la navigazione nativa e le API del dispositivo
  • Hai in programma di mettere i dati in cache o gestire reti instabili

Consigli pratici

  • Mantieni le impostazioni del blocco semplici e serializzabili
  • Sii selettivo con le dipendenze per gestire la dimensione del bundle
  • Testa su schermate home, prodotto e collezione
  • Convalida accessibilità, caricamento e stati vuoti

2) Creare blocchi personalizzati con HTML

Che cos’è
Un blocco HTML gira dentro una WebView. Costruisci con HTML, CSS, JS, Tailwind e Liquid per iterazioni rapide.

Dati e limiti

  • Usa Liquid per accedere al contesto di Shopify, come il prodotto attivo o la collezione attiva
  • Le informazioni del cliente non sono disponibili in questo contesto

Navigazione

  • Il bridge web di Evlop trasforma i normali link <a href> in navigazione nativa quando esiste una schermata app corrispondente

Quando sceglierlo

  • Contenuti di marketing o editoriali che cambiano spesso
  • Widget leggeri che mostrano dettagli di prodotto o collezione
  • Team che preferiscono Tailwind e JavaScript semplice

Consigli pratici

  • Progetta mobile‑first con le utility di Tailwind
  • Mantieni gli script leggeri ed evita framework pesanti
  • Usa ancore standard così il bridge web può instradarle nativamente
  • Controlla contrasto, spaziatura e tempi di caricamento

Conclusione

I blocchi personalizzati ti permettono di modellare l'app per il tuo negozio senza reinventare la ruota. Scegli React Native per le prestazioni e l'integrazione profonda, o HTML per la velocità e i widget basati sui contenuti.