Checkout-Erweiterbarkeit: Das Unveränderbare ändern

Ein Jahrzehnt lang war „checkout.liquid“ der heilige Gral (und der Albtraum) von Shopify Plus. Es ermöglichte die vollständige Kontrolle, ging jedoch leicht kaputt und war nicht aktualisierungssicher. Shopify hat es getötet. Die Zukunft liegt in der Checkout-Erweiterbarkeit.

Die Architektur: Sandbox-Benutzeroberfläche

Sie können kein beliebiges JavaScript mehr schreiben (Magecart-Risiko). Sie müssen UI-Erweiterungen schreiben, die in einer sicheren Sandbox ausgeführt werden. Sie werden von Shopify nativ gerendert, sind also schnell und für Mobilgeräte optimiert.

„Meerjungfrau Diagramm TD Dev[Entwickler] ->|Schreibt| App[Shopify-App] App ->|Bereitstellt| Erweiterung[Erweiterung der Checkout-Benutzeroberfläche]

Shopify[Shopify Checkout] -->|Ladet| Erweiterung
Erweiterung ->|Render| Komponenten[Banner / Upsell / Input]

Unterabschnitt „Die Sandbox“
Komponenten
Ende

„

Anwendungsfall 1: Der „Upsell“-Block

Wir möchten direkt über der Schaltfläche „Jetzt bezahlen“ eine „Versandversicherung“ für 2,99 $ anbieten.

„Typoskript // extensions/insurance/src/Checkout.jsx importieren { ReactExtension, Kontrollkästchen, useApplyCartLinesChange, } von ‘@shopify/ui-extensions-react/checkout’;

Export Standard ReactExtension(‘purchase.checkout.block.render’, () => );

Funktion App() { const applyChange = useApplyCartLinesChange();

zurück ( <Checkbox onChange={(markiert) => { wenn (markiert) { applyChange({ Typ: ‘addCartLine’, merchandyId: ‘gid://shopify/ProductVariant/12345’, Menge: 1, }); } }}> Versandschutz hinzufügen (+2,99 $) </Kontrollkästchen> ); } „ Dies ist sauber, nativ und konvertierungsoptimiert.

Anwendungsfall 2: Validierungslogik (Funktionen)

Wir möchten Postfächer für den Versand mit Fedex Express sperren. Wir verwenden Shopify Functions (Wasm), um diese Validierungsregel auf der Serverseite durchzusetzen. Er ist unendlich schneller und zuverlässiger als der alte Skripteditor.

Migration Timeline

Wenn Sie sich immer noch auf „checkout.liquid“ befinden, tickt die Uhr. Shopify lehnt es ab. Durch die Migration erhalten Sie Zugriff auf:

• One-Page Checkout: 10 % höhere Conversion.
• Shop Pay-Integration: Nahtlos.
• Leistung: 2x schnellere Ladezeiten.

---

---

Führen Sie immer noch den alten Checkout aus?

Warten Sie nicht auf die Abschaltbenachrichtigung. Beauftragen Sie unsere Architekten.