fb
Schedule a Meeting

8 suggerimenti per lo sviluppo di un sito web Shopify migliore

This post is also available in: English (Inglese) Deutsch (Tedesco) Français (Francese)

La solida base di qualsiasi codice sviluppato determina il successo del progetto. Qualsiasi codice si basa a rigide tecniche di ingegneria del software, determinare quanto robusto e portatile un progetto sta per rivelarsi in futuro.

WebBee Global è un partner autorizzato Shopify per shopify sito web, applicazioni e lo sviluppo di temi. La nostra visione è quella di creare le app e i temi Shopify personalizzati per l’azienda.

Sulla base della nostra pura esplorazione delle conoscenze e dell’arricchimento pratico delle esperienze basate sul progetto, vorremmo condividere suggerimenti approfonditi per lo sviluppo di potenti sviluppi di applicazioni e-commerce Shopify e generazione di temi.

Suggerimenti #1: Gestire il lavoro con la gestione del controllo della versione

WebBee archivia il codice in modo organizzato fornendo la cronologia di tutta la base di codice quando necessario, impedendo la perdita di lavoro. I nostri sviluppatori gestiscono le modifiche che si sono verificate tramite l’editor online di Shopify, gestendo temi, funzionalità, filiali e più sviluppatori. Ridurre la complessità del progetto e produrre il lavoro business-specific è l’agenda principale per lo sviluppo personalizzato Shopify.

È necessario praticare la manutenzione del ramo master, solo in seguito unire le funzionalità separate dopo il completamento. Se mai avete bisogno di risolvere alcune caratteristiche incomplete o bug quindi misura tempestiva può essere presa. Di solito lavoriamo sotto un tema inedito per mantenere i cambiamenti nascosti e intatti durante lo sviluppo.

Nel caso in cui siano state apportate modifiche (ad esempio uno sviluppatore di app) all’interno dell’editor dei temi online, assicurati di prendere nota delle modifiche, incorporandole nel rispettivo file dopo l’esecuzione delle modifiche. È obbligatorio controllare e convalidare ogni frammento di codice.

Non farlo non sarà in grado di raggiungere lo scopo, come tali cambiamenti saranno sovrascritti alla fine. Assicurarsi di unire le modifiche nell’ordine corretto, che implica conoscere il commit è necessario unire in. In pratica, ogni modifica del tema viene archiviata nel report prima di andare al negozio. L’idea principale qui è che il report gestisce sempre il codice, non temi.

Suggerimenti #2: Costruire il tema Shopify a livello locale

Poiché Shopify è ospitato nel cloud, non è possibile lavorare localmente, creando un’istanza locale del software. Piuttosto, caricare i file di tema e osservare apportate modifiche su un negozio Shopify online.

I file di monitoraggio e i temi sono l’obiettivo principale per un migliore processo decisionale, da qui la gemma del tema Shopify consente un monitoraggio vigile dove è possibile guardare attivamente una directory e i file caricati automaticamente sul rispettivo tema quando i file vengono salvati. Versione GUI dello stesso esegue anche la stessa cosa. È possibile trovare le istruzioni di installazione, esplorare il kit di temi.

È inoltre consentito utilizzare il proprio editor di testo e gli strumenti di sviluppo correlati per lavorare, come qualsiasi altro progetto. È possibile eseguire ed eseguire tutto lo sviluppo all’interno dell’editor del tema di amministrazione, assicurando non sovrascritto del lavoro precedente.

Per i progetti di piccolo livello quando non sei lo sviluppatore principale per il sito, e le modifiche sono poche, quindi, utilizzando l’editor online è un’opzione migliore. La modifica online implica non avere problemi relativi alla sovrascrittura di un file che non è sincronizzato con le modifiche locali.

Suggerimenti #3: Eseguire la compilazione Sass e JavaScript utilizzando Grunt

Con i grandi progetti, è importante strutturare CSS e JavaScript. Usiamo oggettivamente Sass per compilare tutti i nostri CSS. Shopify dotato del parser Sass, di solito preferiscono eseguire la compilazione locale con Grunt e Compass.

Di seguito è riportato il rapporto sul tema per iniziare.

Sass può essere compilato tramite il numero di modi. Grunt permette di avvolgere tutto il file Sass in una singola directory, suddividendo il file CSS in blocchi di dimensione in byte.

È possibile compilare Sass in diversi modi. Dal momento che stiamo usando Grunt per altre attività, avvolgendo la compilazione Sass qui fa per un passo in meno. A tale scopo, creiamo una cartella all’interno della directory principale del nostro tema chiamato ‘sass’, che contiene una struttura organizzata di cartelle e file. Tieni presente che questa cartella non verrà caricata nel tema del negozio.

Tale approccio per JavaScript quando applicato, riduce la quantità di file JavaScript al caricamento della pagina, mantenendo ogni cosa intatta.

È preferibile assegnare valori Liquid a JavaScript ed eseguire la logica direttamente in JavaScript.

Suggerimenti #4: Tenere presente quando utilizzare JavaScript anziché LiquidTips #4: Be aware when to use JavaScript instead of Liquid

È imperativo prendere nota che Liquid non è stato progettato per essere un linguaggio di programmazione. Il suo obiettivo principale era quello di produrre i dati che si sta attualmente lavorando con, la creazione di markup. Anche se è generalmente preferibile eseguire la logica in Liquid, a volte è chiaro per passare i dati al JavaScript.

Nel caso in cui si ottiene bloccato nei cicli annidati “for”, stringa infinita aggiunge, o vogliono scrivere metodi Liquid, quindi è il momento di prendere in considerazione JavaScript per eseguire ed eseguire il lavoro pesante. Molte volte, è sufficiente scaricare i dati che stai cercando in un oggetto JavaScript e lavorare con esso lì. Ad esempio:

<copione>

Shopify.currentProduct, ovvero il prodotto, ovvero json, è stato fatto;

if (Shopify.currentProduct)

console.log(Shopify.currentProduct.variants);

}

</script>

Ricorda, il codice efficace è sempre gestibile. Quindi evitare un pasticcio di parentesi graffe e lunga codifica. Fidati sul computer JavaScript ed esegui l’esecuzione.

Suggerimento #5: Eseguire l’astrazione ovunque e quando possibile

Ogni volta che i temi per i client vengono compilati, assicurarsi che devono essere gli utenti principali dell’archivio. È necessario astrarre le caratteristiche del sito quando mai e dove mai possibile. Quindi, per evitare le impostazioni del codice hard nel tema. Inoltre, come regola generale tema non dovrebbe memorizzare i dati.

Ad esempio, utilizzare l’editor dei temi (schema), le impostazioni locali, i metacampi o Relatable per controllare il contenuto, ad esempio testo o immagini. Il risultato è che i tuoi clienti possono gestire senza la necessità della modifica del tema per semplici aggiornamenti.

Suggerimento #6: Preoccuparsi dei tempi di caricamento e delle prestazioni

Per le prestazioni rapide del sito dei controlli, utilizza Google
Chrome Developer Tools
per tenere traccia dei colli di bottiglia all’interno dei temi.

JavaScript, Immagini e compressione CSS tendono ad essere il più preferito, anche, l’intenso calcolo Liquido e JavaScript, evitare il rendering del contenuto sulla pagina che è principalmente nascosto.

Suggerimento #7: Fare buon uso di frammenti

Gli snippet liquidi sono uno degli approcci migliori per suddividere la logica in file separati. È meglio assorbire un lungo elenco di file di frammento rispetto al markup. (Poiché questo è difficile da capire.)

I frammenti offrono un approccio per organizzare il contenuto in modo strutturato in modo strutturato, in modo che il markup possa essere facilmente seguito evitando ripetizioni eccessive. Ogni volta che viene riutilizzata una sezione di markup in più file, vengono utilizzati frammenti. Si noti che gli snippet ereditano le variabili dichiarate da dove sono state incluse. I nostri sviluppatori rompono i temi dei file liquidi come segue:

<Html>

<Testa>

content_for_header DI lavoro.

– includere ‘testa’

</testa>

<Corpo>

: includi ‘intestazione’

<id principale: “principale”>

CONTENT_FOR_LAYOUT DI lavoro.

</main>

: includi ‘piè di pagina’

</corpo>

</html (informazioni in lingua inglese)>

Suggerimento #8: Creazione di endpoint JSON personalizzati per i dati dinamici

Il modello viene solitamente utilizzato, ogni volta che, si desidera fare qualcosa di diverso. Ogni modello Liquid può essere suffisso con una vista univoca, utilizzata per uno scopo specifico. Ad esempio, nel caso in cui tu abbia un set di pagine di prodotto, puoi creare un modello come product.unique.liquid, selezionare il rispettivo modello all’interno dell’amministratore di Shopify.

Puoi anche passare il nome del modello nel parametro “view” nell’URL per indicare a Shopify di utilizzare un modello specifico.

Di seguito viene illustrato l’utilizzo della ricerca di completamento automatico come esempio. È possibile creare templates/search.json.liquid come modello e sviluppare la risposta JSON all’interno del file.

– layout nessuno

– impaginare search.results di 50

{

“risultati”: ” search.results ” json

}

– endpagina

Quindi in JavaScript::

.getJSON(‘/ricerca?q’shirt&view’json’, funzione(risposta)

console.log (risposta)

});

Si noti che nel codice specificato sotto la ricerca è stato passato il parametro “view”, che è impostato sul suffisso di modello denominato “JSON” tale tipo di applicabilità apre la porta a molte opportunità per lo sviluppo di funzionalità dinamiche.

Questo metodo viene utilizzato tutto il tempo insieme Relatable per l’utilizzo di JavaScript per potenziare la logica personalizzata all’interno di negozi. Si noti che questo è applicabile in qualsiasi modello, il che implica che è possibile eseguire un approccio simile per i dati dei clienti:Note, this is applicable on any template, which implies you can perform similar approach for the customer data:
 
– layout nessuno

{

“first_name”: “”customer.first_name”,

“last_name”: “”customer.last_name”

“email”: “”customer.email”,

“id”: “customer.id”,

“nome”: “”customer.name””,

“orders_count”: “cliente.orders_count”

}

Questo produce un documento JSON ben formattato:

Conclusione

Speriamo che questi punti saranno un suggerimento di valore aggiunto per lo sviluppo di Shopify, indipendentemente dal fatto che siano programmatori esperti o principianti. Siamo sicuri che questi suggerimenti miglioreranno la codifica flessibile robusta incentrata sul cliente. È fondamentale avere una chiara analisi di ambito del progetto e dei suoi requisiti. Poiché ogni progetto è unico, quindi il suo risultato finale deve essere chiaramente definito e compreso prima di dare una forma attraverso la codifica.

Scroll to top
Schedule a Meeting
close slider