DevAy

Projet principal : Agara

Cette section affiche la progression de l'utilisateur vers la livraison gratuite.

L'explication

Ce code utilise Liquid pour afficher dynamiquement des messages et une barre de progression basée sur le prix total du panier. Tout d'abord, il assigne cart.total_price à total_price_number, formaté en nombre décimal. Si ce montant est inférieur à 49€, il affiche le montant restant pour bénéficier de la livraison gratuite et met à jour une barre de progression. Par exemple, {% assign prix_restant = 49 | minus: total_price_number %} calcule le montant restant. Si le prix total est supérieur ou égal à 49€, un message de livraison gratuite est affiché. Liquid permet de personnaliser le contenu en fonction des données du panier en temps réel, rendant l'expérience utilisateur plus interactive et pertinente.

Un pop up personnalisable qui apparait au bout de 10s de navigation le snippet lié
le code liquid de la section

L'explication

Ce code définit une section "Pop-Up" pour un thème Shopify en utilisant Liquid. Il commence par parcourir chaque bloc de la section avec une boucle {% for block in section.blocks %} et rend le contenu de chaque bloc en utilisant le snippet pop-up. Cela permet de réutiliser un modèle de pop-up pour afficher différentes configurations de contenu. Le schéma JSON à l'intérieur des balises {% schema %} et {% endschema %} définit les paramètres configurables de la section et des blocs. Par exemple, un bloc de type "Pop-Up Block" peut inclure une image (image_popup), un titre (popup_title), et un texte (popup_text), permettant aux utilisateurs de personnaliser ces éléments via l'éditeur de thème. Une configuration prédéfinie ("preset") nommée "Pop-up" est également incluse pour simplifier l'ajout de nouveaux pop-ups.

section upsell qui recommende d'autres produits à l'utilisateur

L'explication

Ce code affiche une section d'upsell présentant des produits de la collection "huile-a-barbe". Il commence par assigner la collection à une variable, puis boucle à travers les produits de cette collection pour afficher une image, un titre, une description tronquée et un prix pour chaque produit. Un bouton d'achat est également inclus pour chaque produit en utilisant un snippet de bouton d'achat. Enfin, deux scripts JavaScript sont chargés pour gérer les informations des produits et les formulaires d'achat, améliorant ainsi l'interactivité et la fonctionnalité de la section d'upsell.

Mes autres réalisations

Section bandeau pour le site (la section à gauche et l'interface d'édition à droite) Infinity Musc

L'explication

La section peut contenir plusieurs blocs, chacun configuré pour afficher une image SVG, un titre, et un sous-titre. Le schéma JSON permet de configurer ces blocs via l'éditeur de thème Shopify, en fournissant des champs pour le titre, le sous-titre, et l'image SVG. La boucle Liquid dans le code HTML parcourt chaque bloc et rend le contenu correspondant, permettant ainsi de personnaliser dynamiquement le bandeau en fonction des paramètres définis.

Développement d'une section FAQ

L'explication

J'ai créé une section FAQ dynamique pour un site e-commerce. J'ai commencé par intégrer le fichier CSS faq.css pour styliser la section. Ensuite, j'ai utilisé Liquid pour afficher chaque question et réponse en parcourant les blocs définis dans l'éditeur de thème Shopify. Pour chaque question, j'ai ajouté une flèche SVG interactive. En cliquant sur cette flèche, un script JavaScript se déclenche pour révéler ou masquer la réponse correspondante. Le script anime également la flèche, la faisant tourner de 90 degrés et changeant sa couleur et son arrière-plan pour indiquer visuellement l'état (ouvert/fermé) de la question.

Développement d'une section produit

L'explication

j'ai développé une section de liste de produits dynamique pour un site e-commerce Shopify. J'ai commencé par intégrer le fichier CSS product-list.css pour styliser la présentation des produits. Ensuite, j'ai utilisé Liquid pour afficher chaque produit de la collection "frontpage". Chaque produit est présenté avec son image principale, son titre, une description, son prix et un formulaire permettant d'ajouter le produit au panier.
Ensuite, j'ai ajouté un script JavaScript qui intercepte la soumission du formulaire. Lorsque l'utilisateur clique sur le bouton "Ajouter au panier", le script empêche le comportement par défaut et envoie une requête AJAX à l'API de Shopify pour ajouter le produit au panier sans recharger la page. Le script récupère l'ID de la variante du produit et envoie une requête POST avec les données nécessaires. Cette approche rend le processus d'ajout au panier plus fluide et réactif, améliorant ainsi l'interactivité et la convivialité du site.

Le planning du travail réalisé

Initialement, il était prévu que je travaille sur la refonte complète du site Agara. Cependant, il a été décidé que je me concentre plutôt sur les fonctionnalités plus complexes, telles que l'upsell, tandis que la refonte visuelle serait réalisée en no-code. Voici donc le planning revisité de mon stage :

L'analyse de mon travail

Points forts

  • Variété de tâches réalisées : J'ai travaillé sur diverses sections du site Shopify, démontrant ma capacité à gérer différents aspects du développement de thème.
  • Documentation : J'ai pris le temps de me documenter sur Liquid et la personnalisation de thèmes Shopify, ce qui m'a permis de bien utiliser les outils à ma disposition.
  • Utilisation de l'API Shopify et des objets Liquid : En documentant l'ajout au panier en utilisant l'API Shopify et les objets Liquid, j'ai exploré des aspects techniques avancés, montrant ma volonté d'approfondir mes connaissances.
  • Développement de snippets : J'ai créé des snippets comme "free-livraison" et "pop-up" pour Agara, montrant que je suis capable de créer des composants réutilisables et d'optimiser mon code.
  • Réunions hebdomadaires : La tenue de réunions hebdomadaires a permis un suivi régulier et une bonne communication, ce qui a été un atout majeur pour la gestion de projets à distance.

Points d'amélioration

  • Gestion de l'Intégration avec thèmes différents : Je dois développer des compétences pour adapter des fonctionnalités comme l'up-sell à différents thèmes Shopify.
  • Optimisation du code : Je cherche continuellement à optimiser le code pour améliorer les performances du site, notamment en réduisant le temps de chargement des pages et en minimisant l'utilisation des ressources.
  • Tests et validation : Je dois continuer à renforcer les processus de tests pour m'assurer que chaque fonctionnalité est testée de manière rigoureuse.

Actions correctives

  • Formation sur l'adaptation de thèmes : Je participerai à des formations ou consulterai des ressources pour apprendre à adapter des fonctionnalités comme l'up-sell à différents thèmes Shopify.
  • Optimisation et performances : Je vais revoir les sections développées pour identifier les opportunités d'optimisation, comme la réduction de la taille des images, l'utilisation de lazy loading, et l'optimisation des requêtes API.
  • Implémenter des tests systématiques : Je mettrai en place un cadre de tests automatisés pour assurer la cohérence et la qualité des développements. J'utiliserai des outils comme Jest pour les tests unitaires et Cypress pour les tests end-to-end.
  • Révision de code : J'adopterai des pratiques de révision de code où chaque morceau de code sera examiné par un pair avant d'être intégré. Cela aidera à identifier les problèmes potentiels et à partager des bonnes pratiques de codage.

Mon bilan personnel

Ce stage, entièrement réalisé en distanciel, a été une expérience extrêmement enrichissante pour moi, tant sur le plan professionnel que personnel.

Les modalités de ce stage à distance m'ont permis de découvrir une nouvelle manière de travailler, en m'adaptant aux outils de communication et de gestion de projets en ligne. Les réunions hebdomadaires régulières ont facilité un suivi efficace et une communication continue avec mon tuteur de stage. Cette expérience m'a appris à être plus autonome et à gérer mon temps de manière optimale, des compétences essentielles pour le travail en distanciel.

Durant ce stage, j'ai eu l'opportunité de travailler sur diverses tâches liées au développement et à la personnalisation de thèmes Shopify avec le moteur de template Liquid. J'ai notamment développé des sections "hero", "bandeau", "FAQ" et "produits" pour Infinity Musc, ainsi que des snippets "free-livraison" et "pop-up" pour Agara. Ces projets m'ont permis d'approfondir mes connaissances en Liquid, de me familiariser avec l'API Shopify et de perfectionner mes compétences en développement front-end.

Le travail sur l'implémentation d'up-sell et l'ajout de produits m'a également montré l'importance de l'adaptabilité et de la capacité à résoudre des problèmes techniques complexes, notamment lorsqu'il s'agit d'intégrer des fonctionnalités dans des thèmes différents. Même si je n'ai pas pu finaliser l'up-sell à cause des contraintes du thème utilisé, cette tentative m'a permis de comprendre les défis techniques et de chercher des solutions alternatives.

Ce stage a été un pas important vers la réalisation de mon projet professionnel, qui est de devenir développeur front-end spécialisé dans les sites e-commerce. J'ai pu appliquer mes connaissances théoriques à des cas pratiques, améliorer mes compétences techniques et découvrir des aspects spécifiques du développement e-commerce.

En conclusion, ce stage m'a non seulement permis d'acquérir des compétences techniques et pratiques essentielles pour mon futur métier, mais m'a aussi montré l'importance de la communication et de la gestion du temps dans un environnement de travail à distance. Je me sens désormais plus confiant et mieux préparé pour poursuivre ma carrière.

DevAy