web-dev-qa-db-fra.com

Comment développer des thèmes Shopify localement?

Je vais travailler sur un thème Shopify et je veux savoir comment l'exécuter/l'éditer localement. J'aimerais pouvoir faire ce qui suit, si possible:

  1. Extrayez tout le code de thème Shopify du site sur mon ordinateur local (idéalement, un seul outil en ligne de commande)
  2. Apportez des modifications localement et exécutez-les localement ou dans un environnement intermédiaire
  3. Envoyez toutes les modifications au site Shopify principal, à nouveau à l'aide d'un outil de ligne de commande

Est-ce possible?

shopify
10
Sam Lee

Vous pouvez utiliser ici plusieurs flux de travail.

0. Shopify Slate (nouveau!)

Slate est un échafaudage de thèmes et un outil de ligne de commande permettant de développer des thèmes Shopify. Il est conçu pour faciliter votre processus de développement et accélérer le processus de développement, de test et de déploiement de thèmes dans les magasins Shopify.

C’est la nouvelle façon de développer des thèmes sur lesquels l’équipe Shopify travaille depuis un certain temps et qui a été lancée publiquement vers le 23 mars 2017. Elle semble être à l’heure actuelle la manière la plus complète et la plus efficace de travailler avec Shopify.

_ { https://github.com/Shopify/slate _

1. Les coureurs de tâches

Si vous utilisez Gulp ou Grunt localement pour le développement, il existe des bibliothèques qui téléchargeront vos fichiers dans le magasin à l'aide des informations d'identification d'API d'une application privée que vous devez créer. La plupart fonctionnent en téléchargeant les fichiers que vous modifiez, en utilisant un observateur. 

  1. grunt-shopify
  2. grunt-shopify-upload
  3. gulp-shopify-upload (c'est mon préféré car j'utilise Gulp, mais j'ai un problème connu: il arrête parfois le téléchargement de fichiers et vous devez le redémarrer).

2. Kit thématique Shopify officiel

Theme Kit est un outil CLI multiplate-forme créé par les employés de Shopify. Il peut fonctionner sur Windows/Linux/OS X. Vous pouvez en savoir plus à ce sujet sur Shopify Blog ou le télécharger directement . L'alternative mentionnée précédemment de Desktop Theme Editor est obsolète et a été remplacée par Theme Kit. 

3. SaaS Applications tierces

Au lieu de surveiller les modifications, celles-ci fonctionnent avec un flux de travail d'intégration continue, dans lequel votre dernier envoi Push sur une branche donnée est chargé sur le thème que vous avez sélectionné.

  1. Beanstalk . Des informations plus spécifiques peuvent être trouvées sur leur page de destination pour Shopify, ici . 
  2. DeployBot . Leur article d'aide sur Shopify contient des informations sur la manière de démarrer. Les deux options appartiennent à la même société. _ { Here } _ une comparaison des deux qu'ils ont fait sur leur blog.

4. Bibliothèques tierces

  1. Il y a aussi une alternative non officiellement prise en charge par Shopify qui est un TextMate Bundle au cas où vous utiliseriez cet éditeur OSX.

  2. Il existe un cli étendu non officiel similaire au kit de thème, mais avec des fonctionnalités supplémentaires appelées Quickshot , que je viens de découvrir à partir de la réponse de Matt et qui semble assez génial. Certaines des fonctionnalités qu'ils soulignent sont les suivantes:

    • Prise en charge du téléchargement dans plusieurs magasins et thèmes Shopify
    • Assistant de configuration facile à utiliser
    • Les téléchargements/téléchargements en parallèle réduisent considérablement les temps de transfert
    • Prend en charge la compilation automatique de fichiers scss localement avant le téléchargement sur Shopify
    • Prend en charge la compilation automatique de Babel/ES6 dans des modules faciles à utiliser par - Requirejs et autres
    • Peut être utilisé avec des fichiers .gitignore ou un fichier personnalisé .quickshotignore.
    • Peut télécharger/télécharger des blogs, des pages et des produits Shopify! Transférez-les facilement entre les magasins! Même les metafields! Et éditez-les localement dans votre éditeur préféré.
14
Juan Ferreras

Shopify a récemment publié Slate, un nouvel outil de développement de thèmes.

https://github.com/Shopify/slate

5
Bryan

La réponse de Juan est parfaite.

Il y en a un autre que je connais qui, à mon avis, est un peu plus avancé que Themekit (que j'utilise) appelé Quickshot: https://quickshot.readme.io/v2.1/docs

1
Matt Willmott

Installez le paquet d'état en lançant les commandes suivantes:

npm install -g @shopify/slate
slate theme theme-name
0
Rubel Hossain

Si vous recherchez un développement complètement hors ligne, ce n'est malheureusement pas possible pour le moment. Bien que les CLI de Slate/ThemeKit vous permettent de coder dans votre éditeur de texte préféré, une connexion Internet est tout de même nécessaire, car elle permet de tout synchroniser à tout moment.

0
pfcodes

Shopify a créé un outil pour Mac qui vous permet de développer votre thème localement et de le synchroniser avec votre magasin https://apps.shopify.com/desktop-theme-editor

Je ne sais rien pour Windows/Linux, etc.

0
Rob