GitHub Action: Automatisierte Theme-Vorschau für Shopify-Shops erstellen

In diesem Artikel erfahren Sie, wie Sie unsere GitHub Action richtig einpflegen und nutzen können, um Ihre Prozesse in der Shopentwicklung noch einfacher und reibungsloser zu gestalten.

Shopify ist eine beliebte Plattform für den Aufbau von Online-Shops und wird häufig mithilfe eines GitHub-Repositorys verwaltet und gepflegt. Um die CI/CD-Prozesse innerhalb eines Projektes noch einfacher zu gestalten haben wir eine GitHub Composite Action implementiert, die besonders den Integrationsprozess von Änderungen am Theme erleichtert und vor allem kostbare Zeit bei der Entwicklung einspart.

"Create Shopify Theme Preview" ist eine Action auf der GitHub Marketplace, die es Entwicklern ermöglicht, eine Vorschau ihres Shopify-Themes zu erstellen, ohne dass sie dafür eine Shopify-Testumgebung einrichten müssen.

In diesem Artikel

1. Vorteile der Nutzung unserer Action
2. Einrichtung der GitHub Action
3. Anwendungsbeispiel

Vorteile der Nutzung unserer Action

Um Änderungen von bestimmten Pull Requests in das eigentliche Theme zu überführen, finden oft mehrere Korrekturschleifen statt.
Die Abstimmung von Änderungen kann sich dabei mühsam gestalten, da die Vorschau nur Lokal beim jeweiligen Entwickler läuft und langlebige Previewlinks manuell erstellt werden müssen, bevor diese mit Projektmanagern oder Kunden geteilt werden können.

Um diesen Prozess zu vereinfachen, haben wir eine GitHub-Action erstellt, die automatisch eine Vorschau eines Pull Requests erstellt und einen Kommentar zum Pull Request mit einem Link zur Vorschau hinterlässt. Wenn Sie Änderungen von mehreren offenen Pull Requests überprüfen müssen, vereinfacht diese Action dies um ein Vielfaches.

So muss nicht manuell für jeden Pull Request eine Vorschau mithilfe der Shopify CLI erstellt, sondern lediglich ein Kommentar mit dem bestimmten vordefinierten Keyword hinterlegt werden. Die Action erzeugt daraufhin automatisch die gewünschten Links.

Inspiriert ist die Action von der Vercel Preview Deployment Funktion, die es Entwicklern ermöglicht eine automatische Vorschau zu erstellen, sobald ein neuer Commit stattgefunden hat.

Die Action ist besonders nützlich für Entwickler, die an großen Theme-Projekten arbeiten und häufig Änderungen vornehmen. Auch Projektmitglieder die kaum Codeverständnis besitzen können so ebenfalls eine Vorschau erzeugen lassen, ohne eine eigene lokale Umgebung aufzusetzen.

Allerdings ist die Action auch für Entwickler nützlich, die an kleineren Theme-Projekten arbeiten und schnell eine Vorschau erstellen möchten, ohne dass dafür viel Aufwand erforderlich ist.
Dies kann dazu beitragen, den Entwicklungsprozess zu beschleunigen und die Qualität der Themes zu verbessern.

Einrichtung der GitHub Action

Um die Action problemlos für Sie nutzen zu können, muss diese für jedes Repository in der sie genutzt werden soll, eingerichtet werden. Im Folgenden ist die übliche Methode via github.com zur Implementation aufgezeigt und erklärt:

Navigiere zum richtigen Repository
Klicke auf den Reiter Actions
Klicke auf New Workflow
Kopiere den untenstehenden Code und speichere die Datei (siehe Codeausschnitt)
Ersetze die Inputs shopify_flag_store und shopify_cli_theme_token durch die eigenen Eingabewerte
(optional) Ersetze die Inputs build_step und dir

Preview.yml

run-name: Create Theme Preview by @${{ github.actor }}
on:
  issue_comment:      
    types: [created]    
jobs:                   
  deploy:
    name: Preview
    runs-on: ubuntu-latest
    if: contains(github.event.comment.body, '!preview')
    steps:
      - uses: Brand-Boosting-GmbH/shopify-theme-preview@v1
        with:
          shopify_flag_store: 'your-shop.myshopify.com'
          shopify_cli_theme_token: 'your-cli-theme-token'
          build_step: 'npm i && npm run build'
          dir: 'dist'

Anwendungsbeispiel

Diese Action kann ausgelöst werden, indem das Schlüsselwort !preview zu einem Pull Request-Kommentar hinzugefügt wird. Das Keyword kann angepasst werden, um nach einer anderer Zeichenfolge in den Pull Request-Kommentaren zu filtern.

Nach wenigen Sekunden wird der gesamte Kommentar durch eine Tabelle ersetzt, die die Informationen und den Ladezustand anzeigt.

Anschließend wird die erste Tabelle durch eine weitere Tabelle ersetzt, die einen Vorschau- und Editor-Link enthält.

Wir haben ein Repository erstellt indem das ganze beispielhaft ausprobiert werden kann.
Ein Beispiel zur Anwendung finden Sie hier!

👍 Tipp

Vergessen Sie nicht, einen shopify_cli_theme_token für das Repository zu generieren und ihn als Eingabe für diese Action bereitzustellen, zusammen mit dem shopify_flag_store, der Ihre Shop-URL ist.

Optionale Eingaben

Optional können Sie die Eingaben build_step und dir zur composite Action hinzufügen. Diese Eingaben werden verwendet, wenn es spezifische Anforderungen gibt, um das Thema vorzustellen, wie beispielsweise ein benutzerdefinierter Build-Schritt oder das Ändern des Pfads zu einem anderen Pfad, bevor die Vorschau bereitgestellt wird.

⚠️ Hinweis

Weitere Informationen zum Einrichten des shopify_cli_theme_tokens finden Sie in diesem Theme Access App Guide

Inputs

Die Action umfasst folgende Schritte:

Das aktuelle Datum und die Uhrzeit abfragen.
Einen Kommentar zum Pull Request mit einer Tabelle erstellen, die den Namen des Shops, den Status der Vorschau-Erstellung und das Datum und die Uhrzeit der Action enthält.
Den aktuellen Pull Request auschecken.
Node.js und Ruby einrichten.
Die Shopify CLI installieren.
Optionaler Build-Schritt über den „build-step“-input.
Die Shopify CLI verwenden, um eine Vorschau zu erstellen und den zurückgegebenen Vorschau-Link in einem Output-Objekt speichern (optionaler Pfad über „dir“-input).
Die Tabelle aktualisieren, um die Vorschau-Links anzuzeigen.
Wenn einer der vorherigen Schritte fehlschlägt, einen Kommentar zum Pull Request mit einer Fehlermeldung erstellen.