Shopify Functions - wie man jetzt tolle Dinge im Checkout programmieren kann, ohne in den checkout.liquid zu greifen und auf ALLEN Plänen!
Wie oft möchte man als Shopinhaber den eigenen Kunden eine bessere Checkout Experience anbieten, wie z. B. die Zahlungsmethoden und/oder die Versandtarife in einer bestimmten senkrechten Reihenfolge anzeigen je nach einer gewissen Logik, wie Herkunftsland des User?
Solche Epic Wants unserer Händler sind unter den meist gefragten Features, die bis jetzt nur den Besitzer von Plus Shops vorbehalten waren, wo man komplexe Programmierung und Logik im checkout.liquid implementieren konnte. Auch der Zugang zum checkout.liquid naht für Plus Shops dem Ende mit dem Beginn des neuen Shopify Functions und des Checkout UI Extensions. Siehe auch unsere Blog Artikel hier:
- Shopify Functions: The New Way to Extend and Customize ...
- Build Custom Commerce Experiences with Shopify Functions
Bevor wir beginnen, vorab ein paar wichtige Punkte über Shopify Functions:
- Manche Function APIs sind nur im Developer Preview erhältlich.
- Shopinhaber, die checkout.liquid Anpassungen haben, müssen zur checkout extensibility upgraden, um die neuen Function APIs zu nutzen.
Shopify Functions ermöglicht es Entwicklern, die Backend-Logik, die Teile von Shopify antreibt, anzupassen. In diesem Leitfaden werde ich die folgenden neuen Shopify-Funktionen und APIs vorstellen:
Wie man die Shopify Backend Logik erweitern kann, wie z. B. die folgenden Use-Cases:
- Eine neue Function bauen, die einen automatischen Rabatt oder Staffelpreis (volume discount) im Checkout auslöst, wenn bestimmte Produkte in einer bestimmten Anzahl oder Kombination in den Checkout gelegt werden.
- Oder die Zahlungsmethoden neu anordnen, abhängig von bestimmten Faktoren wie dem Herkunftsland des Kunden. Hier eine typische Frage aus diesem Leitfaden von unserem Shopify Partner Henry Auffahrt das jetzt endlich gelöst werden kann:
- Oder bestimmte Versandmethoden bzw. Tarife anzeigen oder neu anordnen, je nach einer gewissen Logik, wie welche Produkte in den Warenkorb gelegt wurden, oder die Ship-to- Adresse oder Land. Use-case: Kunden wählen aus Versehen den ersten Tarif, da dieser vorausgewählt ist, da standardmäßig das System automatisch die günstigste verfügbare Versandoption an erster Stelle anzeigt:
Jetzt kann man endlich diese Default Logic des "unantastbaren" Shopify Backend modifizieren und mit einer angepassten Logik ersetzen, ohne das Shopify Backend System zu berühren mit der ständig wachsenden Anzahl an Shopify Functions APIs!
Unterschiede zum checkout.liquid und Shopify Scripts
Der Unterschied zu den älteren Checkout Features, wie Shopify Scripts und dem checkout.liquid (hauptsächlich für Plus Shops vorbehalten) ist das man traditionsgemäss den checkout.liquid anpassen musste um bestimmte Widgets im Checkout ergänzen können, wie Upsells oder Trust Badges, über die Shopify Scripts oder den Liquid Code.
Die Performance der neuen Functions (<5ms) stellt die bald sunsetted und deprecated Scripts (Sommer, 2024) ebenfalls in den Schatten, was z. B. wichtig für die notwendige Performance deines Checkouts während deinen Flash Sales ist und Scripts liefen auch nur auf Ruby, wobei die Functions auf alle Sprachen laufen die zu WebAssembly compilen (die compiled Modules dürfen den File-size Limit von 256Kb nicht überschreiten, könnte aber in der Zukunft erhöht werden). Wenn man Scripts ändern wollte, musste man auch wieder in den Code gehen, wobei bei Functions kann man das Behaviour direkt im Admin Dashboard UI ändern was eine viel verbesserte UX bietet.
Also sollte man jetzt darüber nachdenken, zu Functions zu migrieren, oder, wenn man Shopify Partner ist, die eigenen Klienten empfehlen, zu Functions zu migrieren.
Was sind die APIs, die bis heute im neuen Functions Feature erhältlich sind?
Anfangs war es der Order Discount und der Product Discount API erhältlich und mittlerweile sind es die folgenden Erweiterungen:
|
Benenne, ordne und sortiere die Lieferoptionen um, die den Käufern während der Kaufabwicklung zur Verfügung stehen. |
|
|
Erstelle eine neue Art von Rabatt, der auf alle Waren im Warenkorb angewendet wird. |
|
|
Erstelle eine neue Art von Rabatt, der auf ein bestimmtes Produkt oder eine Produktvariante im Warenkorb angewendet wird. |
|
|
Benenne, ordne und sortiere die Zahlungsmethoden um, die den Käufern während der Kasse zur Verfügung stehen. |
APIs im Developer Preview:
|
Biete deine eigene Validierung eines Warenkorbs und der Kasse an. |
|
|
Gib deine eigene Logik an, wie Shopify eine Bestellung erfüllen und zuordnen soll. |
|
|
Gib für jeden Artikel eine eigene Rangfolge der Standorte an, wenn du die Bestellung weiterleitest. |
|
|
Erstelle eine neue Art von Rabatt, der an der Kasse auf einen oder mehrere Versandtarife angewendet wird. |
API noch im Beta:
|
Erweitere die Warenkorbpositionen und aktualisiere die Darstellung der Warenkorbpositionen. |
Weitere Good News ist, dass die Functions jetzt auch komplett in JavaScript geschrieben werden können, wenn man vor allem in Node.js programmieren möchte. Um JavaScript zu WebAssembly zu compilen, einfach den neuen Javy Tool von Shopify verwenden der komplett in das CLI integriert ist. Hier ein super Blog Artikel zu dem Thema.
Der Delivery Customizations API - wie man die Versandmethoden oder Tarife im Checkout neu anordnen kann:
Vorab - die folgenden Anpassungen sind nicht mit Bestellentwürfe, Shop Pay, sowie local delivery oder local pickup kompatibel.
Es gibt mehrere Use-Cases die Lieferoptionen im Checkout neu anzuordnen oder zu ändern. Mit den Lieferanpassungen kannst du die Lieferoptionen ausblenden, neu ordnen und umbenennen, die den Käufern im Checkout angezeigt werden. Was muss man machen, um das mit dem neuen Functions Feature zu erreichen?
Um das zu erreichen muss man die folgenden Aufgaben erledigen:
- Richte deine Testumgebung für die Verwendung der Shopify Functions ein.
- Erstelle eine Function zur Anpassung der Lieferungsoptionen.
- Konfiguriere die Lieferanpassung mit Hilfe von Meta-Feldern.
- Erstelle eine Benutzeroberfläche für die Lieferanpassung mit der App Bridge.
Voraussetzungen (die Technik ist mittlerweile sehr ausgereift und benutzerfreundlich geworden):
- Du bist unseren Partner Program beigetreten (geht relativ schnell).
- Du hast ein gratis Entwickler Shop erstellt (mehr dazu hier).
- Du hast eine App erstellt die das Shopify CLI 3.0 oder höher verwendet.
- Du hast deine App in deinem Development Store installiert.
Alle weiteren Schritte findest du in unserer Anleitung ab diesen Punkt. und dann auch hier.
Du kannst also diese Lieferanpassungen verwenden, um die Lieferoptionen auszublenden, neu anzuordnen und umzubenennen, die den Käufern an der Kasse zur Verfügung stehen.
In diesem Tutorial verwendest du Shopify-Funktionen, um eine Lieferoption umzubenennen, die Kunden an der Kasse angeboten wird, basierend auf dem Versandziel. Das kann die Kundenerfahrung verbessern, wenn die Tarife mehr bedeutungsvolle Titel haben, bedingt darauf in welchem Ship-to Ziel oder Land der Kunden sich befindet.
Du wirst auch lernen, wie du die folgenden Aufgaben erledigst:
- Wie du den Startcode für diese Shopify Functions erstellst.
- Wie du den GraphQL verwendest, um die Eingabe deiner Funktion zu definieren.
- Die Funktionen auf der Shopify-Plattform deployen/bereitstellen.
- GraphQL zu verwenden, um Function Owners in einem Shopify Store zu erstellen.
- Die Logs für deine Function zu überprüfen.
Schritt 1: Erstelle der Lieferanpassungsfunktion
Um deine Lieferanpassungsfunktion zu erstellen, kannst du den Shopify CLI verwenden, um eine Starterfunktion zu generieren, die Eingaben für deine Funktion mit einer Input Query festzulegen und deine Funktionslogik mit JavaScript oder Rust zu implementieren.
- Siehe die Schritte hier.
Schritt 2: Erstelle die Lieferanpassung mit GraphiQL
Um deine Funktion zu aktivieren, musst du eine Lieferanpassung in dem Store erstellen, in dem du deine App installiert hast. Das kannst du mit der GraphQL-Mutation deliveryCustomizationCreate tun.
In den folgenden Tutorials wirst du Metafelder in dieser Lieferanpassung verwenden, um deine Funktion zu konfigurieren und eine Benutzeroberfläche zu erstellen, damit Händler die Funktion selbst konfigurieren können.
- Siehe die Schritte hier.
Schritt 3: die delivery customization testen
- Siehe die Schritte hier
Schritt 4: Füge Konfiguration zu deinen Lieferanpassungen hinzu
Du kannst Metafelder für die Konfiguration deiner Lieferanpassungsfunktion verwenden. Metafelder bieten mehr Flexibilität bei der Verwendung von Funktionen und sind eine Voraussetzung für die Erstellung einer Händler-Benutzeroberfläche zur Konfiguration von Funktionen.
- Siehe die Schritte dafür hier.
Der Payments Customizations API - wie man die Bezahlmethoden im Checkout neu anordnen kann:
Mit Zahlungsanpassungen kannst du die Zahlungsoptionen, die den Käufern beim Checkout zur Verfügung stehen, ausblenden, neu ordnen und umbenennen. In dieser Tutorial-Reihe erstellst du mit Shopify-Funktionen eine Funktion, mit der Händler eine Zahlungsoption ausblenden können, die den Kunden beim Checkout angeboten wird, basierend auf dem Gesamtwert des Warenkorbs.
Im Großen und Ganzen sind es dieselben Schritte wie oben, aber mit kleinen Unterschieden, wie in unserer Anleitung hier aufgelistet werden.
Starte jetzt mit den Payments Customizations in unserem Tutorial hier.
