fb
Schedule a Meeting

8 conseils pour le développement d’un site Web Better Shopify

This post is also available in: English (Anglais) Deutsch (Allemand) Italiano (Italien)

La base solide de tout code développé détermine le succès du projet. N’importe quel code construit adhérant à des techniques strictes d’ingénierie logicielle, déterminer comment robuste et portable un projet va tourner à l’avenir.

WebBee Global est un partenaire shopify autorisé pour le site Web Shopify, les applications et le développement de thèmes. Notre vision est de construire les applications et thèmes Shopify personnalisés spécifiques à l’entreprise.

Sur la base de notre exploration pure des connaissances et d’enrichir les expériences basées sur des projets dans la pratique, nous aimerions partager des conseils profonds pour développer le développement d’applications eCommerce puissant Shopify et la génération de thèmes.

Conseils #1 : Gérer votre travail avec la gestion du contrôle de version

WebBee stocke le code de manière organisée en fournissant l’historique de toute la base de code chaque fois que nécessaire, empêchant le travail perdu. Nos développeurs gèrent les changements qui se sont produits par l’éditeur en ligne de Shopify, la gestion des thèmes, des fonctionnalités, des succursales et de plusieurs développeurs. Réduire la complexité du projet et produire le travail spécifique à l’entreprise est l’ordre du jour principal pour le développement personnalisé Shopify.

Il faut s’exercer à garder la branche principale prête, seulement ensuite fusionner les entités séparées après son achèvement. Si jamais vous avez besoin de corriger certaines fonctionnalités incomplètes ou des bugs, puis la mesure en temps opportun peut être prise. Nous travaillons habituellement sous un thème inédit pour garder les changements cachés et intacts pendant le développement.

Dans le cas où des modifications sont apportées (par exemple un développeur d’application) au sein de l’éditeur de thème en ligne, assurez-vous de prendre note des modifications, en les incorporant dans votre fichier respectif après les modifications ont été exécutées. Il est obligatoire de vérifier et de valider chaque morceau de code.

Ne pas le faire ne sera pas en mesure d’atteindre l’objectif, que ces changements seront remplacés éventuellement. Assurez-vous de fusionner les modifications de l’ordre correct, ce qui implique de savoir dans quel engagement vous devez fusionner. Pratiquement, toutes les modifications de thème sont vérifiées dans le rapport avant d’aller au magasin. L’idée principale ici est que votre rapport gère toujours votre code, pas les thèmes.

Conseils #2: Building Shopify Thème localement

Comme Shopify est hébergé dans le cloud, vous ne pouvez tout simplement pas travailler localement, la création d’une instance locale du logiciel. Téléchargez plutôt des fichiers thématiques et observez les modifications apportées sur un magasin Shopify en ligne.

La surveillance des fichiers et des thèmes est au centre de la prise de décision, d’où le thème Shopify gemme permet une surveillance vigilante où vous pouvez regarder activement un répertoire et automatiquement téléchargé des fichiers sur le thème respectif que les fichiers sont enregistrés. Gui version de la même effectue également la même chose. Vous pouvez trouver les instructions de configuration, explorer le kit de thème.

Vous êtes également autorisé à utiliser votre propre éditeur de texte et les outils de développement connexes pour travailler, comme tout autre projet. Vous pouvez exécuter et effectuer tout votre développement au sein de l’éditeur de thème d’administrateur, en veillant à ce qu’aucune exécution des travaux précédents ne soit remplacée.

Pour les projets de petit niveau lorsque vous n’êtes pas le développeur principal pour le site, et les changements sont peu nombreux, alors, en utilisant l’éditeur en ligne est une meilleure option. La modification en ligne implique de ne pas avoir de problèmes concernant la surécriture d’un fichier qui n’est pas synchronisé avec vos modifications locales.

Conseils #3 : Effectuer la compilation Sass et JavaScript à l’aide de Grunt

Avec de grands projets, il est important de structurer CSS et JavaScript. Nous utilisons objectivement Sass pour compiler tous nos CSS. Shopify équipé de l’analyseur Sass, préfèrent généralement effectuer la compilation localement avec Grunt et Compass.

Ci-dessous est le rapport de thème pour vous faire démarrer.

Sass peut être compilé via le nombre de façons. Grunt permet d’envelopper tout le fichier Sass dans un seul répertoire, brisant le fichier CSS en morceaux de taille d’octet.

Vous pouvez compiler Sass de plusieurs façons. Puisque nous utilisons Grunt pour d’autres tâches, l’emballage de la compilation Sass ici fait pour une étape de moins. Pour ce faire, nous créons un dossier dans le répertoire racine de notre thème appelé « as », qui contient une structure organisée de dossiers et de fichiers. Notez que ce dossier ne sera pas téléchargé sur le thème du magasin.

Une telle approche pour JavaScript lorsqu’elle est appliquée, elle réduit la quantité de fichiers JavaScript à la charge de la page, en gardant chaque chose intacte.

Il est préférable d’affecter des valeurs liquid à JavaScript et d’effectuer votre logique directement en JavaScript.

Conseils #4: Soyez conscient quand utiliser JavaScript au lieu de liquide

Il est impératif de noter que Liquid n’a pas été conçu pour être un langage de programmation. Son objectif principal était de produire les données avec lesquelle vous travaillez actuellement, en créant un balisage. Bien qu’il soit généralement préférable d’exécuter la logique dans Liquid, il est parfois clair de remettre les données au JavaScript.

Dans le cas où vous êtes coincé dans le nid « pour » boucles, appendices de chaîne sans fin, ou que vous voulez écrire des méthodes liquides, alors il est temps d’envisager JavaScript pour effectuer et exécuter le levage lourd. Souvent, il vous suffit de vider les données que vous recherchez dans un objet JavaScript et de travailler avec lui là-bas. Par exemple :

<Script>

Shopify.currentProduct = {{ produit | json }};

si (Shopify.currentProduct) {

console.log(Shopify.currentProduct.variants);

}

</script>

Rappelez-vous, le code efficace est toujours gérable. Ainsi, éviter un gâchis d’accolades bouclées et de longs codages. Faites confiance à la machine JavaScript et effectuez l’exécution.

Conseil #5 : Effectuer l’abstraction où jamais et dans la mesure du possible

Chaque fois que des thèmes sont construits pour les clients, assurez-vous qu’ils doivent être les principaux utilisateurs du magasin. Vous devez supprimer les caractéristiques du site quand jamais et où que ce soit possible. Par conséquent, pour éviter les paramètres de code dur dans le thème. En outre, en règle générale, le thème de base ne devrait pas stocker les données.

Par exemple, tirez parti de l’éditeur de thèmes (schéma), des zones locales, des méta-champs ou de Laltable pour contrôler le contenu, comme le texte ou les images. Le résultat est que vos clients peuvent gérer sans la nécessité de la modification du thème pour des mises à jour simples.

Conseil #6 : Prendre soin des temps de chargement et des performances

Pour les performances rapides des contrôles sur le site, utilisez
Google Chrome Developer Tools
pour suivre les goulots d’étranglement dans les thèmes.

JavaScript, Images, et la compression CSS ont tendance à être les plus préférés, aussi, l’intense liquide et JavaScript calcul, éviter le contenu de rendu sur la page qui est principalement caché.

Conseil #7 : Faites bon usage des extraits

Les extraits liquides sont l’une des meilleures approches pour diviser la logique en fichiers séparés. Il est préférable d’imbibe une longue liste de fichiers extraits par rapport au balisage. (Comme cela est difficile à comprendre.)

Les extraits offrent une approche pour organiser le contenu logiquement d’une manière structurée, de sorte que le balisage peut facilement être suivi évitant les répétitions excessives. Chaque fois qu’une section de balisage dans plusieurs fichiers est réutilisée, des extraits sont utilisés. Veuillez noter que les extraits héritent des variables déclarées d’où elles ont été incluses. Nos développeurs brisent les thèmes des fichiers liquides comme suit :

<Html>

<Tête>

{{ content_for_header }}

{% incluent ‘tête’ %}

</tête>

<Corps>

{% incluent ‘en-tête’ %}

<id principal= »main »>

{{ content_for_layout }}

</main>

{% incluent ‘footer’ %}

</corps>

</html>

Conseil #8 : Création de vos propres points de terminaison JSON pour les données dynamiques

Le modèle est généralement utilisé, chaque fois que vous souhaitez faire quelque chose de différent. Tous les modèles Liquid sont autorisés à être suffixes avec une vue unique, utilisé à des fins spécifiques. Par exemple, dans le cas où vous avez défini des pages de produit, alors vous pouvez créer un modèle comme product.unique.liquid, sélectionnez modèle respectif dans l’administrateur Shopify.

Vous êtes également autorisé à passer au nom du modèle dans le paramètre « vue » dans l’URL pour ordonner à Shopify d’utiliser un modèle spécifique.

Ci-dessous, l’utilisation de la recherche complète automatique à titre d’exemple. Vous pouvez créer des modèles/search.json.liquid en tant que modèle et développer la réponse JSON dans le fichier.

{% de disposition aucun %}

{% paginate search.results par 50 %}

{

« résultats »: {{ search.results | json }}

}

{% endpaginate %}

Puis dans JavaScript::

$.getJSON(‘/search?q=shirt&view=json’, fonction(réponse) {

console.log(réponse)

});

Veuillez noter que dans le code donné ci-dessous la recherche, le paramètre « voi » a été passé, qui est défini sur notre suffixe de modèle nommé « JSON » un tel type d’applicabilité ouvre la porte à beaucoup d’opportunités pour développer des fonctionnalités dynamiques.

Cette méthode est utilisée tout le temps aux côtés de Relatable pour l’utilisation de JavaScript pour renforcer la logique personnalisée dans les magasins. Notez que cela s’applique à n’importe quel modèle, ce qui implique que vous pouvez effectuer une approche similaire pour les données du client :
 
{% de disposition aucun %}

{

« first_name »: « {customer.first_name}} »,

« last_name »: « {client.last_name}} »,

« email »: « {{customer.email}} »,

« id »: {{customer.id}},

« nom »: « {{customer.name}} »,

« orders_count »: {{customer.orders_count}}

}

Cela produit un document JSON bien formaté :

Conclusion

Nous espérons que ces points vont être une suggestion de valeur ajoutée pour le développement Shopify, indépendamment du fait qu’ils soient programmeur chevronné ou débutants. Nous sommes sûrs que ces conseils amélioreront le codage flexible robuste centré sur le client. Il est essentiel d’avoir une analyse claire de la portée du projet et de ses exigences. Comme chaque projet est unique, son besoin de livrer doit être clairement défini et compris avant de donner une forme par le codage.

Scroll to top
Schedule a Meeting
close slider