Introduzione

Benvenuto nella documentazione del backend di Shirtly, la piattaforma digitale per la gestione dei capi sartoriali su misura. Questa guida ti aiuterà a navigare e utilizzare le diverse sezioni per gestire la tua attività di camicie su misura.

Tessuti

Questa sezione ti permette di definire e gestire l'elenco dei tessuti che i tuoi clienti potranno selezionare all'interno del configuratore 3D. Ogni tessuto ha diverse proprietà che ne definiscono l'aspetto, il prezzo e le caratteristiche.

Accesso alla Sezione Tessuti

Nel menu di navigazione laterale del backend, cerca l'icona di un pennello e l'etichetta "Tessuti". Il numero accanto indica quanti tessuti hai attualmente configurato nel sistema.

Elenco Tessuti

La tabella principale in questa sezione mostra un riepilogo dei tessuti esistenti. Le colonne includono:

  • Attivo: Indica se il tessuto è visibile e selezionabile dai clienti nel configuratore (ON) o se è nascosto (OFF). Puoi attivare/disattivare rapidamente un tessuto cliccando sull'interruttore.
  • SKU (codice_interno): Un codice interno o identificativo breve per il tessuto. Utile per la ricerca nel backend. Puoi cercare per SKU.
  • Navigazione (Immagine): Una piccola immagine quadrata (100x100px) utilizzata nel configuratore per rappresentare visivamente il tessuto nell'elenco di selezione.
  • Nome: Il nome completo del tessuto mostrato ai clienti. Puoi cercare per nome.
  • Descrizione Breve: Una breve descrizione testuale del tessuto, utile nei riepiloghi. Puoi cercare anche per descrizione breve.
  • Prezzo: Il prezzo base del tessuto, indicato con il simbolo €.

La tabella è ordinata di default in base alla data di creazione (il più recente per primo). Puoi modificare o eliminare i tessuti usando le azioni nella colonna finale.

Aggiungere / Modificare un Tessuto

Cliccando su "Nuovo Tessuto" o selezionando un tessuto esistente per modificarlo, accederai al form di configurazione. Il form è diviso in sezioni:

Dettagli Base e Descrizione

Questa sezione contiene i dati identificativi e descrittivi del tessuto.

  • Nome: Il nome completo del tessuto da mostrare nel configuratore. È obbligatorio.
  • Slug: Un identificativo web univoco e leggibile per il tessuto (es. "cotone-twill-blu"). Viene generato automaticamente dal Nome, ma è obbligatorio e deve essere unico.
    Suggerimento

    Modificando il Nome, lo "Slug" viene generato automaticamente..

  • SKU (codice_interno): Un codice interno opzionale per la tua gestione. Utile per la ricerca.
  • Descrizione Breve: Una breve descrizione (obbligatoria) per il riepilogo.
  • Descrizione: Una descrizione completa del tessuto. Questo campo supporta formattazione Rich Editor (grassetto, corsivo, liste). È obbligatorio.

Prezzo

Configura qui i dettagli economici del tessuto.

  • Prezzo: Il prezzo base obbligatorio del tessuto. Inserisci solo numeri; il simbolo dell'Euro (€) viene aggiunto automaticamente. Accetta valori decimali.
  • Prezzo Scontato: Un campo opzionale per indicare un prezzo scontato per il tessuto. Inserisci solo numeri decimali; il simbolo dell'Euro (€) viene aggiunto automaticamente.

Immagini

Gestisci le risorse visive del tessuto.

  • Texture del tessuto (fabric): Carica il file immagine (obbligatorio) che rappresenta la texture del tessuto in modo che possa essere applicata al modello 3D nel configuratore. Supporta l'Image Editor per semplici modifiche. I file vengono salvati nella cartella 'fabrics'.
    Suggerimento

    Carica una texture che si possa ripetere senza interruzioni per il "Magic Texturing Engine".

  • Immagine di navigazione (image): Carica un file immagine (obbligatorio) da usare nell'elenco dei tessuti nel configuratore. Supporta l'Image Editor. I file vengono salvati nella cartella 'navigation'.

Caratteristiche

Associa il tessuto a diverse categorie o attributi.

  • Armatura (armor_id): Seleziona l'armatura del tessuto (es. Twill, Popeline, Oxford). Questo campo carica i valori da una relazione ('armature') e permette la selezione rapida (preload).
  • Materiale (material_id): Seleziona il materiale principale (es. Cotone, Lino, Seta). Questo campo carica i valori da una relazione ('materiali') e permette la selezione rapida (preload).
  • Brand (brand_id): Seleziona il brand del tessuto. Questo campo carica i valori da una relazione ('brands') e permette la selezione rapida (preload).
  • Colori (colori): Seleziona uno o più colori predominanti del tessuto. Questo campo permette selezioni multiple, carica i valori da una relazione ('colori') e permette la selezione rapida (preload).

Stato

  • Tessuto attivo (attivo): Un interruttore (Toggle) che determina se il tessuto è attivo (spento/acceso). Di default è attivo quando crei un nuovo tessuto. È obbligatorio impostare questo stato.

Caratteristiche dei tessuti

Questa sezione ti permette di gestire le liste di attributi e categorie (come Materiali, Armature, Brands e Colori) che utilizzi per descrivere e classificare i tuoi tessuti nel catalogo. Definire queste caratteristiche qui ti consente di selezionarle facilmente quando crei o modifichi un tessuto.

Tutte queste sezioni si trovano raggruppate sotto la voce "Caratteristiche" nel menu di navigazione laterale del backend, identificate da un'icona comune

Materiali

Qui puoi gestire l'elenco dei materiali (es. Cotone, Lino, Seta, Lana, ecc.) che puoi associare ai tuoi tessuti.

  • Gestione: La tabella mostra una lista dei materiali esistenti con la colonna "Nome". Puoi cercare e ordinare l'elenco per nome.
  • Aggiungere/Modificare: Il form per aggiungere o modificare un materiale è molto semplice e richiede solo l'inserimento del Nome del materiale (campo obbligatorio).
  • Azioni: Puoi modificare o eliminare singoli materiali direttamente dalla tabella. È disponibile anche l'eliminazione di più materiali contemporaneamente.

Armature

Questa sezione ti permette di gestire i tipi di armatura (struttura del tessuto, es. Twill, Popeline, Oxford, Piquet, ecc.) che puoi associare ai tuoi tessuti.

  • Gestione: La tabella mostra una lista delle armature esistenti con la colonna "Nome". Puoi cercare e ordinare l'elenco per nome.
  • Aggiungere/Modificare: Il form per aggiungere o modificare un'armatura è molto semplice e richiede solo l'inserimento del Nome dell'armatura (campo obbligatorio).
  • Azioni: Puoi modificare o eliminare singole armature direttamente dalla tabella. È disponibile anche l'eliminazione di più armature contemporaneamente.

Brands

Utilizza questa sezione per gestire l'elenco dei brand (marchi) a cui appartengono i tessuti o altri materiali che offri.

  • Gestione: La tabella mostra una lista dei brand esistenti con la colonna "Nome". Puoi cercare e ordinare l'elenco per nome.
  • Aggiungere/Modificare: Il form per aggiungere o modificare un brand richiede l'inserimento del Nome del brand (campo obbligatorio, massimo 255 caratteri).
  • Azioni: Puoi modificare o eliminare singoli brand direttamente dalla tabella. È disponibile anche l'eliminazione di più brand contemporaneamente.

Colori

Questa sezione ti permette di definire i colori che potrai associare ai tuoi tessuti per facilitare la ricerca e il filtraggio nel configuratore.

  • Gestione: La tabella mostra una lista dei colori esistenti con la colonna "Nome". Puoi cercare e ordinare l'elenco per nome.
  • Aggiungere/Modificare: Il form per aggiungere o modificare un colore richiede:
    • Nome: Il nome del colore (es. "Rosso", "Blu Navy"). Obbligatorio.
    • Codice: Il codice esadecimale del colore (es. #FF0000 per il rosso). Puoi usare un selettore di colore grafico (Color Picker) per sceglierlo facilmente. Obbligatorio.
  • Azioni: Puoi modificare o eliminare singoli colori direttamente dalla tabella. È disponibile anche l'eliminazione di più colori contemporaneamente.

Personalizzazioni delle camicie

Questa è la sezione dove gestisci tutte le opzioni specifiche che un cliente può personalizzare sulla propria camicia su misura: colletti, polsini, bottoni, ecc. Ogni tipo di personalizzazione ha una sua area dedicata nel backend, tutte raggruppate sotto la voce "Personalizzazioni" nel menu di navigazione laterale.

Sono ordinate nel menu per facilità d'uso:

  • Colletti
  • Maniche
  • Polsini
  • Fronte
  • Dietro
  • Taschini
  • Bottoni
  • Asole

Tutte queste sezioni hanno una struttura di base simile per l'aggiunta e la gestione delle opzioni.

Colletti

Gestisci i diversi stili di colletto disponibili per le tue camicie.

  • Gestione: La tabella elenca i colletti con le colonne: Attivo (interruttore), Immagine (Navigazione), Nome, Descrizione, Prezzo (€). Puoi cercare per Nome o Descrizione.
  • Aggiungere/Modificare: Il form richiede: Nome (obbligatorio), Descrizione (opzionale), un blocco Prezzo con Prezzo (obbligatorio, €) e Prezzo Scontato (opzionale, €), un'Immagine di navigazione (obbligatoria) e l'interruttore Attivo (obbligatorio, preimpostato su ON).

Maniche

Questa sezione gestisce i diversi stili di manica disponibili (es. manica lunga, manica corta).

  • Gestione: La tabella elencherà le opzioni per le maniche.
  • Aggiungere/Modificare: Il form ti permetterà di definire le proprietà di ogni opzione manica.
  • Aggiungere/Modificare: Il form richiede: Nome (obbligatorio), Descrizione (opzionale), un blocco Prezzo con Prezzo (obbligatorio, €) e Prezzo Scontato (opzionale, €), un'Immagine di navigazione (obbligatoria) e l'interruttore Attivo (obbligatorio, preimpostato su ON).

Polsini

Definisci i diversi stili di polsino che i clienti possono scegliere.

  • Gestione: La tabella elenca i polsini con le colonne: Attivo (interruttore), Immagine (Navigazione), Nome, Descrizione, Prezzo (€). Puoi cercare per Nome o Descrizione.
  • Aggiungere/Modificare: Il form richiede: Nome (obbligatorio), Descrizione (opzionale), un blocco Prezzo con Prezzo (obbligatorio, €) e Prezzo Scontato (opzionale, €), un'Immagine di navigazione (obbligatoria) e l'interruttore Attivo (obbligatorio, preimpostato su ON).

Fronte

Gestisci le opzioni relative al fronte della camicia (es. tipo di abbottonatura).

  • Gestione: La tabella elenca le opzioni per il fronte con le colonne: Attivo (interruttore), Immagine (Navigazione), Nome, Descrizione, Prezzo (€). Puoi cercare per Nome o Descrizione.
  • Aggiungere/Modificare: Il form richiede: Nome (obbligatorio), Descrizione (opzionale), un blocco Prezzo con Prezzo (obbligatorio, €) e Prezzo Scontato (opzionale, €), un'Immagine di navigazione (obbligatoria) e l'interruttore Attivo (obbligatorio, preimpostato su ON).

Dietro

Configura le opzioni per il dietro della camicia (es. con/senza pieghe, con/senza cannoncino).

  • Gestione: La tabella elenca le opzioni per il dietro con le colonne: Attivo (interruttore), Immagine (Navigazione), Nome, Descrizione, Prezzo (€). Puoi cercare per Nome o Descrizione.
  • Aggiungere/Modificare: Il form richiede: Nome (obbligatorio), Descrizione (opzionale), un blocco Prezzo con Prezzo (obbligatorio, €) e Prezzo Scontato (opzionale, €), un'Immagine di navigazione (obbligatoria) e l'interruttore Attivo (obbligatorio, preimpostato su ON).

Taschini

Gestisci i tipi di taschino disponibili (es. senza taschino, con taschino applicato).

  • Gestione: La tabella elenca le opzioni per i taschini con le colonne: Attivo (interruttore), Immagine (Navigazione), Nome, Descrizione, Prezzo (€). Puoi cercare per Nome o Descrizione.
  • Aggiungere/Modificare: Il form richiede: Nome (obbligatorio), Descrizione (opzionale), un blocco Prezzo con Prezzo (obbligatorio, €) e Prezzo Scontato (opzionale, €), un'Immagine di navigazione (obbligatoria) e l'interruttore Attivo (obbligatorio, preimpostato su ON).

Bottoni

Configura i diversi materiali o colori di bottoni disponibili.

  • Gestione: La tabella elenca i bottoni con le colonne: Attivo (interruttore), Immagine (Navigazione), Nome, Colore, Descrizione, Prezzo (€). Puoi cercare per Nome, Colore o Descrizione.
  • Aggiungere/Modificare: Il form richiede: Nome (obbligatorio), Descrizione (opzionale), un blocco Prezzo con Prezzo (obbligatorio, €) e Prezzo Scontato (opzionale, €), un'Immagine di navigazione (obbligatoria), un selettore Colore (obbligatorio) e l'interruttore Attivo (obbligatorio, preimpostato su ON).

Asole

Gestisci le opzioni relative al colore o stile delle asole.

  • Gestione: La tabella elenca le opzioni per le asole con le colonne: Attivo (interruttore), Immagine (Navigazione), Nome, Colore, Descrizione, Prezzo (€). Puoi cercare per Nome, Colore o Descrizione.
  • Aggiungere/Modificare: Il form richiede: Nome (obbligatorio), Descrizione (opzionale), un blocco Prezzo con Prezzo (obbligatorio, €) e Prezzo Scontato (opzionale, €), un'Immagine di navigazione (obbligatoria), un selettore Colore (obbligatorio) e l'interruttore Attivo (obbligatorio, preimpostato su ON).
Suggerimento

Per tutte queste sezioni di personalizzazione, puoi aggiungere nuove opzioni cliccando sul tasto "Nuovo [Nome Personalizzazione]" nella rispettiva pagina, e modificare o eliminare le opzioni esistenti direttamente dalla tabella.

Iniziali / Monogrammi

Questa sezione ti permette di gestire le opzioni specifiche che i clienti possono scegliere per personalizzare le camicie con le iniziali ricamate: i colori del ricamo, le posizioni dove possono essere applicate e gli stili dei caratteri disponibili. Queste opzioni sono raggruppate sotto la voce "Iniziali" nel menu di navigazione laterale.

Colori Iniziali

Qui gestisci i colori del filo che i clienti possono selezionare per il ricamo delle iniziali.

  • Gestione: La tabella elenca i colori disponibili con le colonne "Nome" e "Codice". Puoi cercare per nome o codice colore. Vengono mostrate anche le date di creazione e ultimo aggiornamento (nascoste di default, puoi renderle visibili).
  • Aggiungere/Modificare: Il form per aggiungere o modificare un colore iniziale richiede:
    • Nome: Il nome del colore (es. "Blu Ricamo", "Oro"). Obbligatorio.
    • Codice: Il codice esadecimale del colore del filo. Puoi usare un selettore di colore grafico per sceglierlo. Obbligatorio.
  • Azioni: Puoi modificare o eliminare singoli colori direttamente dalla tabella. È disponibile anche l'eliminazione di più colori contemporaneamente.

Posizioni Iniziali

Definisci qui le posizioni sulla camicia dove il cliente può scegliere di ricamare le iniziali (es. Polsino Sinistro, Fronte Sinistro, ecc.).

  • Gestione: La tabella elenca le posizioni disponibili con la colonna "Nome". Puoi cercare per nome. Vengono mostrate anche le date di creazione e ultimo aggiornamento (nascoste di default).
  • Aggiungere/Modificare: Il form per aggiungere o modificare una posizione richiede solo l'inserimento del Nome della posizione (campo obbligatorio, es. "Polsino sinistro (indossato)").
  • Azioni: Puoi modificare o eliminare singole posizioni direttamente dalla tabella. È disponibile anche l'eliminazione di più posizioni contemporaneamente.

Stili Iniziali

Gestisci i diversi stili di carattere (font) disponibili per il ricamo delle iniziali.

  • Gestione: La tabella elenca gli stili disponibili con le colonne "Nome" e "Font Family". Puoi cercare per nome o Font Family. Vengono mostrate anche le date di creazione e ultimo aggiornamento (nascoste di default).
  • Aggiungere/Modificare: Il form per aggiungere o modificare uno stile richiede:
    • Nome: Un nome descrittivo per lo stile (es. "Corsivo Elegante", "Stampatello"). Obbligatorio.
    • Font Family: Il nome tecnico del font utilizzato per questo stile. Obbligatorio (massimo 255 caratteri).
  • Azioni: Puoi modificare o eliminare singoli stili direttamente dalla tabella. È disponibile anche l'eliminazione di più stili contemporaneamente.
Suggerimento

I prezzi per il servizio di iniziali (se applicato per lettera o fisso) si configurano nella sezione Settings > Iniziali, come descritto più avanti. Le opzioni gestite qui definiscono solo cosa il cliente può scegliere in termini di colore, posizione e stile del carattere.

Ordini

Questa è la sezione principale per gestire gli ordini ricevuti. Ogni ordine completato sul tuo sito web tramite Snipcart viene automaticamente sincronizzato e reso visibile qui. Puoi accedervi dal menu di navigazione laterale cercando l'icona del sacchetto della spesa e l'etichetta "Ordini". Il numero accanto all'etichetta nel menu indica quanti ordini totali sono presenti nel sistema.

Elenco Ordini

La tabella principale nella sezione Ordini ti offre una panoramica di tutti gli ordini. Per ogni ordine vengono mostrate le seguenti colonne:

  • ID Ordine Snipcart: L'identificativo univoco dell'ordine proveniente da Snipcart. Puoi cercare gli ordini usando questo ID.
  • Email: L'email del cliente che ha effettuato l'ordine. Puoi cercare gli ordini per email del cliente.
  • Totale: L'importo totale dell'ordine, visualizzato con il prefisso €.
  • Status: Lo stato attuale dell'ordine (es. 'Processed', 'Completed'). Viene visualizzato come un 'badge' colorato per una rapida identificazione.
  • Data Ordine (created_at): La data e l'ora in cui l'ordine è stato creato. Puoi ordinare la tabella per data. Questa colonna è nascosta di default nella visualizzazione iniziale, ma puoi attivarla.
  • Ultimo Aggiornamento (updated_at): La data e l'ora dell'ultimo aggiornamento dell'ordine. Puoi ordinare la tabella per questa data. Anche questa colonna è nascosta di default e puoi attivarla.

Nella colonna finale, per ogni ordine, troverai le Azioni disponibili. Al momento, l'unica azione diretta qui è "Visualizza", che ti porta alla schermata dei dettagli completi dell'ordine.

Puoi anche selezionare più ordini (Bulk Actions) per eseguire azioni di gruppo, come l'eliminazione.

Dettagli Ordine

Cliccando su "Visualizza" per un ordine specifico, accederai a una schermata completa che presenta tutti i dati dell'ordine in modo dettagliato. La maggior parte dei campi in questa schermata sono di sola lettura, poiché riflettono i dati sincronizzati da Snipcart al momento dell'acquisto.

Riepilogo e Dati Cliente

Nella parte superiore della schermata, trovi un riepilogo generale dell'ordine:

  • Ordine ID: L'ID univoco dell'ordine da Snipcart (non modificabile).
  • Status: Lo stato dell'ordine da Snipcart (non modificabile qui).
  • Email: L'email del cliente (non modificabile).
  • Data Ordine: La data in cui l'ordine è stato effettuato (non modificabile).
  • Totale Ordine: Il totale pagato (non modificabile).

Indirizzi

Troverai due sezioni dedicate agli indirizzi, entrambe collapsible (clicca sull'intestazione per espanderle o comprimerle) per una migliore organizzazione:

  • Indirizzo di fatturazione: Contiene i dettagli dell'indirizzo fornito per la fattura (Nome, Indirizzo, Indirizzo (continua), Città, Paese, CAP). Questi dati vengono estratti dai dati originali di Snipcart e visualizzati in campi separati.
  • Indirizzo di spedizione: Contiene i dettagli dell'indirizzo dove spedire la camicia finita (Nome, Indirizzo, Indirizzo (continua), Città, Paese, CAP). Anche questi dati vengono estratti da Snipcart.

Questi campi indirizzo sono di sola lettura.

Articoli Ordinati

Questa sezione è anch'essa collapsible . È qui che trovi i dettagli delle camicie specifiche che sono state configurate e acquistate.

Il contenuto di questa sezione è gestito da una visualizzazione personalizzata (definita separatamente dal codice principale del backend) e conterrà:

  • Un riepilogo per ogni camicia ordinata (Nome, Quantità, Prezzo).
  • L'elenco dettagliato di tutte le personalizzazioni scelte per quella camicia specifica (tessuto, tipo di collo, tipo di polsini, bottoni, iniziali - con testo e posizione, ecc.).
  • Le misure del cliente associate a quella camicia (sia che siano corporee o della camicia, come inserito dal cliente nel configuratore). Qui vedrai i valori numerici esatti.

Questa visualizzazione personalizzata è il punto cruciale dove reperire tutte le istruzioni sartoriali per la realizzazione del capo.

Aggiornamento Manuale dello Stato

Sebbene lo stato principale venga da Snipcart, il backend Shirtly potrebbe offrire (a seconda della configurazione) la possibilità di avere un proprio stato interno dell'ordine per tracciare il progresso nella tua sartoria (es. "In Taglio", "In Confezione", ecc.). Se questa funzionalità è presente, troverai un campo o un'azione dedicata per aggiornare lo stato interno dell'ordine.

Utenti

Questa sezione ti permette di visualizzare e gestire gli account degli utenti che si registrano sulla tua piattaforma Shirtly. Anche se la gestione principale dei clienti avviene tramite gli ordini (specialmente se usano checkout ospite via Snipcart), qui trovi i profili registrati e, cosa importante, un accesso diretto ai loro dati storici (ordini e misure).

Puoi accedere a questa sezione dal menu di navigazione laterale, si trova sotto le Personalizzazioni ed è identificata dall'icona di un utente e l'etichetta "Utenti".

Elenco Utenti

La tabella principale in questa sezione mostra un elenco di tutti gli utenti registrati sulla piattaforma. Le colonne includono:

  • Nome: Il nome dell'utente. Puoi cercare utenti per nome.
  • Email: L'indirizzo email dell'utente. Puoi cercare utenti per email.
  • Data Registrazione (created_at): La data e l'ora in cui l'utente si è registrato. Puoi ordinare la tabella per questa data. Questa colonna è nascosta di default nella visualizzazione iniziale, ma puoi attivarla.
  • Ultimo Aggiornamento (updated_at): La data e l'ora dell'ultimo aggiornamento del profilo utente. Puoi ordinare la tabella per questa data. Anche questa colonna è nascosta di default e puoi attivarla.

Per ogni utente, nella colonna finale delle Azioni, troverai l'opzione "Modifica" per accedere alla sua scheda completa.

Puoi anche selezionare più utenti (Bulk Actions) per eseguire azioni di gruppo, come l'eliminazione.

Aggiungere / Modificare un Utente

Quando crei un nuovo utente o clicchi su "Modifica" per un utente esistente, vedrai un semplice form con i dati base dell'account:

  • Nome: Il nome dell'utente (obbligatorio, max 255 caratteri).
  • Email: L'indirizzo email dell'utente (obbligatorio, deve essere un formato email valido, max 255 caratteri).
  • Password: Il campo password. È obbligatorio quando crei un nuovo utente. Quando modifichi un utente esistente, puoi lasciare questo campo vuoto se non desideri cambiare la password.

Dati Associati al Cliente (Ordini e Misure)

Questa è una funzionalità molto utile. Quando sei nella schermata "Modifica Utente" (anche se i campi utente sono semplici), sotto il form principale, troverai delle sezioni aggiuntive sotto forma di schede o pannelli.

Queste sezioni ti permettono di vedere in modo centralizzato tutti i dati collegati a questo specifico utente:

  • Misure del Cliente: Una tabella che elenca tutte le misure che questo utente ha salvato nel sistema tramite il configuratore (sia misure corporee che altri tipi di misurazione).
  • Ordini del Cliente: Una tabella che elenca tutti gli ordini che questo utente registrato ha effettuato tramite Shirtly/Snipcart. Da qui potresti avere un link rapido per visualizzare i dettagli completi di ciascun ordine (come descritto nella sezione Ordini).

Questa vista consolidata utente-centrica è preziosa per avere un quadro completo di un cliente abituale, vedere le sue misure e lo storico dei suoi acquisti.

Settings

Questa è la pagina centrale per configurare le impostazioni generali della tua sartoria e personalizzare l'esperienza nel configuratore per i tuoi clienti. Trovi questa sezione nel menu di navigazione laterale, identificata dall'icona di una chiave inglese e l'etichetta "Settings". È la prima voce nel menu.

La pagina "Settings" è organizzata in schede (Tabs) per raggruppare le impostazioni per aree tematiche:

Scheda: Generale

Qui inserisci i dati principali della tua attività. Questi potrebbero essere usati per la fatturazione, contatti o visualizzati sul tuo sito.

I campi in questa scheda sono disposti su 2 colonne:

  • Azienda: Il nome della tua attività.
  • Indirizzo: L'indirizzo della tua sede principale.
  • Città: La città della sede.
  • Provincia: La provincia della sede.
  • CAP: Il codice di avviamento postale.
  • Partita IVA: Il tuo numero di Partita IVA o codice fiscale.
  • Telefono: Un numero di contatto.
  • Email: Un indirizzo email di contatto.

Scheda: Branding

Personalizza l'aspetto del configuratore 3D per allinearlo alla tua identità visiva.

  • Logo su sfondo chiaro: Carica il file immagine del tuo logo (es. .png, .jpg) ottimizzato per essere visualizzato su sfondi chiari nel configuratore.
  • Logo su sfondo scuro: Carica il file immagine del tuo logo ottimizzato per essere visualizzato su sfondi scuri nel configuratore.

Scheda: Scripts

Se hai bisogno di integrare servizi esterni (come Google Analytics, Facebook Pixel, ecc.) che richiedono l'inserimento di codice JavaScript, puoi farlo qui.

  • Header: Inserisci script che devono essere caricati nella sezione <head> della pagina del configuratore (es. codici di verifica, script di analisi).
  • Body: Inserisci script che devono essere caricati all'interno della sezione <body>.
  • Footer: Inserisci script che devono essere caricati alla fine della sezione <body>, prima della chiusura del tag.

Scheda: Iniziali

Configura il modello di prezzo per il servizio di personalizzazione con iniziali. I campi sono disposti su 3 colonne.

  • Prezzo iniziali: Inserisci il prezzo fisso se offri il ricamo di iniziali con un costo unico, indipendentemente dal numero di lettere.
  • Prezzo iniziali per lettera: Inserisci il prezzo da applicare per ogni singola lettera ricamata.
  • Tipo prezzo iniziali: Seleziona quale dei due modelli di prezzo vuoi utilizzare ('Prezzo iniziali' per un costo fisso totale, o 'Prezzo iniziali per lettera' per un costo per ogni singola lettera).

Salvataggio delle Impostazioni

Dopo aver apportato qualsiasi modifica in una delle schede, è fondamentale cliccare sul bottone Salva che trovi nella parte inferiore della pagina (o nell'header, a seconda della configurazione specifica del layout Filament). Questo bottone esegue l'azione di salvataggio.

Una volta salvate le impostazioni con successo, comparirà una notifica verde con il messaggio "Salvato!" nell'angolo in alto a destra dello schermo.

Specifiche Tecniche

Questo documento fornisce una panoramica tecnica dell'architettura e dei principali componenti del backend di Shirtly, il configuratore 3D per camicie su misura integrato con Snipcart.

Architettura Generale

L'applicazione Shirtly adotta un'architettura che separa nettamente il backend (amministrazione e gestione dati) dal frontend/configuratore (l'interfaccia utente 3D per la configurazione). La comunicazione per gli ordini avviene principalmente tramite webhook .

  • Backend: Un'applicazione basata su framework per la gestione dei dati, degli ordini, degli utenti e delle impostazioni tramite un pannello di amministrazione.
  • Frontend (Configuratore 3D): Un'applicazione separata, orientata al client, che gestisce la visualizzazione 3D, l'interazione con l'utente per la personalizzazione e l'invio dei dati di configurazione e di ordine.
  • Database: Un database relazionale per la persistenza di tutti i dati gestiti dal backend.
  • Integrazione E-commerce: Basata principalmente sulla comunicazione server-to-server (webhook).

Stack Tecnologico del Backend

  • Framework: Laravel (versioni compatibili con Filament v3+).
  • Pannello di Amministrazione: FilamentPHP (utilizzato per generare le interfacce di gestione dati).
  • Linguaggio: PHP (versione compatibile con Laravel/Filament, v8+).
  • Database: Qualsiasi database supportato da Laravel (es. MySQL, PostgreSQL).
  • ORM: Eloquent (integrato in Laravel).
  • Styling (Backend UI): TailwindCSS (utilizzato da Filament).
  • Linguaggi UI (Backend): Blade Templates (Laravel), Livewire (Filament).

Stack Tecnologico del Frontend (Configuratore)

  • Tecnologia 3D: Libreria model-viewer di Google per il rendering del modello 3D della camicia.
  • Framework JS: Utilizza due framework JavaScript moderni Livewire e AlpineJs e JavaScript puro.
  • Comunicazione Backend (Configuratore): API RESTful per recuperare dati del catalogo (tessuti, opzioni, ecc.) e per inviare i dati finali di configurazione e misurazioni prima del checkout.

Integrazione E-commerce: Snipcart

L'integrazione con Snipcart è un punto chiave dell'applicazione:

  • Checkout: Snipcart gestisce il carrello, il checkout e il processo di pagamento sul frontend. I dati degli articoli nel carrello includono la configurazione specifica della camicia e le misure.
  • Webhook: Dopo un acquisto completato, Snipcart invia i dettagli dell'ordine al backend Shirtly tramite un webhook configurato. Il backend riceve questi dati e li salva nel proprio database.
  • Sincronizzazione Dati: I dati dell'ordine (ID Snipcart, stato, totale, email, indirizzi) sono salvati nell'entità Order del backend. I dettagli degli articoli e le misure sono associati a questo ordine.

Principali Moduli e Componenti del Backend

Il backend è strutturato attorno ai concetti di Laravel e Filament:

  • Modelli (Eloquent Models): Entità PHP che rappresentano le tabelle del database (User, Order, Texture, Material, Armor, Brand, Color, Back, Buttonhole, Button, Collar, Cuff, Front, Pocket, Sleeve, Mcolor, Mposition, Mstyle, Setting, e Measurement.
  • Filament Resources: Definizioni (come quelle analizzate) che creano automaticamente le interfacce CRUD (Create, Read, Update, Delete) nel pannello di amministrazione per i Modelli associati (es. TextureResource per gestire i Tessuti).
  • Filament Pages: Pagine personalizzate non direttamente legate a un singolo Modello CRUD (es. la pagina Settings).
  • Filament Forms & Tables: Componenti riutilizzabili utilizzati all'interno delle Resources e Pages per costruire i layout dei form (campi di input, select, upload, toggle, sezioni, tabs) e delle tabelle (colonne di testo, immagini, toggle, badge).
  • Relazioni tra Modelli: Definizione delle associazioni tra i dati (es. un Utente ha molti Ordini, un Ordine ha molti Articoli, un Articolo è associato a un Tessuto e varie Personalizzazioni, un Utente ha molte Misure). Queste relazioni sono usate anche in Filament (es. Relation Managers in UserResource per mostrare Ordini e Misure associate).
  • Gestione File: Implementata tramite i componenti FileUpload di Filament, che gestiscono l'upload e lo storage dei file (immagini, texture) in directory configurabili (es. 'fabrics', 'navigation', 'customer', 'buttons', 'collars').
  • Configurazioni Globali: Gestite tramite un singolo record nel database (Modello Setting) e accessibili tramite la pagina Settings, che utilizza un form a schede per organizzare i vari parametri (dati aziendali, configuratore, script, prezzi iniziali).
  • Internazionalizzazione (i18n): Implementata utilizzando il trait Translatable in diverse Resources, consentendo di gestire nomi e descrizioni in più lingue.
  • Validazione Dati: I form di Filament includono regole di validazione (es. required, maxLength, unique, email, numeric) per garantire l'integrità dei dati inseriti dagli utenti del backend.

Considerazioni sul Deployment

Il backend richiede un ambiente di hosting standard compatibile con Laravel:

  • Server Web (es. Nginx, Apache).
  • Installazione PHP con estensioni richieste da Laravel e Filament.
  • Accesso a un database supportato.
  • Configurazione per la gestione dei file caricati.
  • Accessibilità via URL per il webhook di Snipcart.