La partie application vue ici ne traite que la partie admin d’une boutique Shopify, vous pouvez donc effectuer des opérations uniquement sur la partie admin / base de données …

Pour pouvoir effectuer des ajouts / modifications sur la partie boutique il faut créer une extension, cette dernière doit être considérée comme un widget que le client pourra placer sur son interface afin d’ajouter une fonctionnalité.

Avant tout il est nécessaire que shopify-cli soit installé et que vous soyez identifié sur votre compte shopify depuis la console, des tutos existent pour cette tâche.

Pour ajouter une extension à notre application, nous allons ouvrir une console, nous placer dans le répertoire du projet et exécuter la ligne :

shopify app config link

Cette ligne va nous permettre de lier notre extension à une application existante ou bien en créer une, l’écran en résultant devant ressembler à ça :

Maintenant que notre extension est liée à notre application, nous allons générer le répertoire de cette dernière avec la ligne :

shopify app generate extension

Il est demandé de préciser le type d’extension, pour notre cas, ce sera Theme app extension, puis nous nommons notre extension, le résultat devant être :

L’extension est créée avec un exemple, dans le répertoire extensions de notre application :

Pour pouvoir la tester sur la boutique où est installée notre application, dans la console, exécuter :

shopify app dev

Répondre aux questions concernant la boutique et si besoin bloquer le transfert ultérieur de la boutique

Si besoin renseigner le mot de passe de la boutique trouvable ici : https://***.myshopify.com/admin/online_store/preferences

Cette ligne de commande va nous permettre à l’instar de ce billet d’accéder à nos sources depuis notre boutique en ligne avec un rafraichissement instantané.

Attention si vous utilisez le lien de vos sources en local via herd share, il faudra modifier le fichier shopify.app.toml pour y renseigner les urls que vous utilisez avec cette commande.

Nous allons maintenant voir si notre extension apparait bien sur notre boutique, l’exemple donné s’affiche sur le détail de la fiche produit, nous allons donc nous rendre dans l’admin de notre boutique Shopify, onglet Thèmes du canal de vente Boutique en ligne, et cliquer sur le bouton Personnaliser :

Ensuite sur l’interface de personnalisation, nous allons cliquer sur le menu Catalog, puis sur un des produits de la liste, arrivé sur l’interface de modification de la fiche produit, nous allons cliquer sur Ajouter un bloc, dans la section Informations produits, si tout s’est correctement passé, vous devriez voir votre extension dans la liste qui s’affiche :

En cliquant dessus, le bloc va s’ajouter à l’interface, vous pourrez le déplacer et le configurer :

Votre extension est fonctionnelle, vous pouvez vous attaquer à sa modification, et ça ce n’est pas une mince affaire, nous le verrons dans un prochain billet.