Se dovessi, da sviluppatore, dare una nota di demerito a Shopify, questa sarebbe un'interfaccia di sviluppo per il lavoro in team poco avanzata.
In breve, Shopify non ha uno strumento dedicato per unire le modifiche o per un versioning avanzato. Quando due sviluppatori lavorano sullo stesso file, si cancellano reciprocamente le modifiche senza che Shopify avvisi che questo sta succedendo.
Ecco perché ho deciso di darti alcuni consigli su come evitarlo.
Shopify offre una vasta gamma di temi per un negozio, che sono le cosiddette "versioni" del tuo codice. Ognuno di essi può essere modificato indipendentemente.
Poiché l'elaborazione del codice avviene esclusivamente lato Shopify, gli sviluppatori utilizzano un editor di testo posizionato sul server per modificare il codice. Assomiglia un po' a Sublime Text.
Un tema pubblico (che è quello che visualizzano gli utenti), può essere uno solo.
Gli altri sono accessibili nel pannello di amministrazione, da cui è anche possibile avviare l'anteprima dei temi non pubblici. Il tema avviato viene registrato in una sessione e quindi mostrato come predefinito, fino a quando la sessione non è scaduta.
Risolve parzialmente il problema dello sviluppo collaborativo, ma allo stesso tempo si apre un altro problema, ovvero l'unione delle modifiche da diversi temi.
Esistono app che consentono di modificare il codice template di Shopify localmente. Questo ci consente di utilizzare qualsiasi CVS (noi utilizziamo VisualStudio) per unire le modifiche. Ecco alcune di queste app:
- Editor temi desktop - Discussione sui desktop theme editor
- Kit tematico: https://github.com/csaunders/themekit
Le modifiche archiviate in una cartella con un tema scaricato vengono tracciate in modalità in tempo reale e, dopo il salvataggio, vengono distribuite su un server. Ma, ovviamente, queste app non risolvono ancora il problema dell'elaborazione del codice lato server.
Che codice utilizzano i temi di Shopify?
Un tema è costituito da file modello con estensione ".liquid" e ognuno di essi ha il proprio scopo, ad esempio "collection.liquid" viene utilizzato per visualizzare raccolte di prodotti, mentre "product.liquid" serve a leggere le informazioni relative a un particolare prodotto. Ogni tema di Shopify contiene anche il file "settings_schema.json", che è un modulo per la personalizzazione dell'aspetto del tema.
Liquid è uno speciale linguaggio di template open source, basato su Ruby e creato appositamente per lo sviluppo di Shopify. Viene utilizzato per il caricamento di contenuti dinamici nel front-end. Il liquido è la base dei temi di Shopify, ecco perché tutti i modelli hanno l'estensione .liquid.
Theme Kit: un esempio pratico
L'abbiamo scelto per via della sua multipiattaforma, poiché Desktop Theme Editor è disponibile solo per Mac OS X 10.7+. Puoi trovare la guida all'installazione di Theme Kit qui: https://shopify.github.io/themekit/
La prossima cosa che devi fare è creare una cartella con un file di configurazione config.yml:
Per ottenere il "theme_id" è necessario accedere come amministratore, e successivamente andare su:
Negozio online -> Temi -> Personalizza tema
Per ottenere il token di accesso devi andare su:
App -> App private -> Crea app privata
Quindi apri l'app e copia il parametro della password.
Quindi è necessario scaricare un tema. Avvia il terminale nella cartella in cui si trova il file di configurazione ed eseguire "theme download". Al termine, dovrebbero apparire i file del tema.
Per scaricare un tema specifico come argomento, è possibile specificare un percorso per il file su un server, ad esempio: "theme download templates/404.liquid".
Ora puoi avviare il processo di modifica, ma per assicurarti che tutte le modifiche vengano automaticamente inviate a un server dopo il salvataggio, è necessario eseguire un "Theme watch".
Per impostazione predefinita, ci sono due lavoratori che monitorano le modifiche. Questo valore può essere modificato nel file di configurazione con l'aiuto della proprietà "Concurrency".
Se si desidera controllare le modifiche e inviarle manualmente a un server, è possibile utilizzare "Upload Theme".
La differenza dal "Theme Download" è che chiamare questo comando senza arguments non fa nulla, invece di caricare tutti i file su un server. Per caricare completamente il tema modificato, è necessario utilizzare "theme upload * / *".
Ma anche in questo caso il problema delle modifiche alla sovrascrittura non verrà risolto, anche se può essere evitato in due modi:
- Usare due temi
- Regolare il processo di lavoro in modo che gli sviluppatori non siano in grado di modificare il file contemporaneamente
Conclusione
Ora sai come modificare il codice localmente tramite il Theme Kit. L'applicazione si è rivelata comoda grazie alla sua natura multipiattaforma e all'intuitiva UX. Se hai domande relative allo sviluppo di Shopify che non abbiamo incluso in questo articolo puoi sempre scriverci un commento qui sotto.
Enrico Capitanio
Shopify Expert | E-commerce Architect Mi piace lavorare sotto pressione e il teamwork necessario per completare i progetti. Adoro i capannoni. Sono fermamente convinto che l'universo non abbia alcun senso e che bisogna riderci su.