“ oder „classname“ nicht verwenden. Sie müssen die Grundelemente von Shopify verwenden.

„tsx // extensions/gift-message/Checkout.jsx importieren { ReactExtension, TextFeld, BlockStack, Text, useApplyAttributeChange } von ‘@shopify/ui-extensions-react/checkout’;

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

Funktion GiftMessage() { const applyChange = useApplyAttributeChange();

const handleInput = (Wert) => { applyChange({ Typ: ‘updateAttribute’, Schlüssel: ‘_gift_note’, Wert: Wert }); };

zurück ( <BlockStack-Abstand=“tight”> <Text size=“medium”weight=“bold”>Ist das ein Geschenk? ); } „

Schlüsseleinschränkung: Sie können nicht auf „Fenster“ oder „Dokument“ zugreifen. Wenn Sie Daten abrufen müssen, müssen Sie den von der Sandbox bereitgestellten „useQuery“-Hook verwenden oder „fetch“-Aufrufe an Ihren eigenen Proxy durchführen.

3. Shopify-Funktionen: Logik am Rande (Rust)

Dies ist der mächtigste Teil. Bisher haben Sie für „gestufte Rabatte“ (Beim Kauf von 5 erhalten Sie 20 % Rabatt) Shopify Scripts (Ruby) verwendet. Die Skripte waren fehlerhaft, schwer zu testen und hatten strenge CPU-Grenzwerte. Shopify-Funktionen werden zu WebAssembly (Wasm) kompiliert. Sie werden in <5 ms ausgeführt.

Wir schreiben sie in Rust, weil es die leistungsstärkste Sprache für Wasm ist.

Fallstudie: Mengenrabatt

„Rost.“ // src/run.rs use shopify_function::prelude::*; benutze shopify_function::Result;

#[shopify_function] fn run(input: input::ResponseData) -> Resultoutput::FunctionResult { let mut discount = vec![];

für Zeile in input.cart.lines {
    let amount = line.quantity;
    
    // Logik definieren
    let Prozentsatz = wenn Menge >= 50 {
        25,0 // Großhandel
    } sonst wenn Menge >= 10 {
        10,0 // Masse
    } sonst {
        0,0
    };

    wenn Prozentsatz > 0,0 {
        Rabatte.push(Rabatt {
            Wert: DiscountValue::Percentage(Prozentsatz),
            Nachricht: format!("Mengenrabatt ({}%)", Prozentsatz),
            Ziele: vec![Target::ProductVariant(line.merchandise.id)],
        });
    }
}

Ok(output::FunctionResult {
    Rabatte,
    discount_application_strategy: DiscountApplicationStrategy::Maximum,
})

} „ Diese Binärdatei wird auf Shopify hochgeladen. Es skaliert unendlich.

4. Validierung: Fehlbestellungen blockieren

Um früher P.O. zu verhindern, Beim Kartonversand haben wir die JS-Validierung verwendet. Versierte Benutzer (oder Bots) haben JS deaktiviert und trotzdem bestellt. Jetzt verwenden wir Warenkorb-Validierungsfunktionen. Dies wird im Backend ausgeführt, bevor der Checkout fortgesetzt werden kann.

„graphql

Eingabeabfrage

Abfrageeingabe { Warenkorb { Liefergruppen { Lieferadresse { Adresse1 Stadt Ländercode } } } } „

Wenn die Rust-Funktion einen Fehler zurückgibt, ist die Schaltfläche „Jetzt bezahlen“ auf API-Ebene deaktiviert. Es ist unmöglich, es zu umgehen.

5. Webpixel: Der Tracking-Fix

Marketingteams hassen Migration, weil „wir unser GTM-Tracking verlieren werden!“ Tatsächlich behebt die Erweiterbarkeit das Tracking. Die Web Pixels API abonniert Checkout-Ereignisse („checkout_completed“, „ payment_info_submitted“) in einer sicheren Sandbox. Da es die Browser-Beacon-API verwendet, ist es überraschend resistent gegen Werbeblocker. Nach der Migration zu Web Pixels sehen wir einen Anstieg der erfassten Conversions um 15 %.

„Javascript // Analytics.js Analytics.subscribe(‘checkout_completed’, (event) => { const total = event.data.checkout.totalPrice.amount; // An GA4 senden gtag(‘event’, ‘purchase’, { value: total }); }); „

6. Headless Checkout vs. Erweiterbarkeit

Jahrelang war „Headless Checkout“ die einzige Möglichkeit zur Individualisierung. Aber es war gefährlich. Sie wurden für die PCI-Compliance verantwortlich. Checkout-Erweiterbarkeit macht Headless Checkout überflüssig. Sie erhalten 90 % der Flexibilität (benutzerdefinierte Felder, Upsells, Logik) bei 0 % der Wartung. Sofern Sie nicht Nike oder Apple sind, benötigen Sie keinen benutzerdefinierten Checkout-Build. Wenn Sie sich an die Plattform (Shopify) halten, erhalten Sie garantiert sofort Apple Pay-, PayPal- und Shop Pay-Updates.

7. Globale Märkte: Lokalisierter Checkout

Verkaufen in Frankreich oder in den USA?

• USA: Dropdown-Liste „Bundesstaat“ erforderlich.
• Frankreich: Benötigt „Cedex“-Abwicklung.
• Japan: Benötigt „Präfektur“. Mit Erweiterbarkeit verwenden wir die Lokalisierungs-API. Unsere Erweiterungen rendern verschiedene Felder basierend auf „context.market“. Wir können die Anweisung „An der Tür verlassen“ für US-Bestellungen anzeigen, diese jedoch für deutsche Bestellungen ausblenden (wo dies illegal/ungewöhnlich sein könnte). Dies ist dynamisches Rendern am Rand.

8. Branding-API: Kein CSS mehr

Sie können „checkout.css“ oder „checkout.scss“ nicht mehr bearbeiten. Sie verwenden die Branding API (GraphQL). Sie definieren:

• Primärfarben.
• Eckradien (gerundet vs. quadratisch).
• Schriftarten (WOFF2 hochladen).
• Kopf-/Fußzeilen-Layouts.

Die „Skeptic’s View“: „Aber ich kann den Button nicht um 5 Pixel nach links verschieben!“ Kontrapunkt: Gut. Das solltest du nicht. Jedes Mal, wenn Sie das Layout hacken, beeinträchtigen Sie die Barrierefreiheit. Shopify hat Millionen ausgegeben, um das optimale Layout zu testen. Vertrauen Sie der Plattform. Konzentrieren Sie sich auf den Inhalt und die Logik, nicht auf die Polsterung.

7. Erweiterungen nach dem Kauf: Der goldene Moment

Mit dem Bezahlen ist die Kasse noch nicht beendet. Die Dankeschön-Seite ist die Immobilie mit der höchsten Conversion-Rate im E-Commerce. Öffnungsrate: 100 %. Achtung: 100 %. Mit der Erweiterbarkeit können wir hier einen „One-Click Upsell“ einbringen. „Sie haben die Sneakers gekauft. Möchten Sie den Reiniger für 10 €? (Keine Versandkosten).“ Da wir die „order_id“ und den „ payment_token“ haben, können wir diese Transaktion ohne erneute Eingabe von CVV verarbeiten. Allein diese Funktion deckt die gesamten Migrationskosten in einem Monat ab.

8. Testen: Die Sandbox-Umgebung

In den alten „flüssigen“ Tagen haben wir in der Produktion getestet. Erschreckend. Jetzt haben wir die Partner Dashboard Sandbox. Sie können Folgendes simulieren:

• Langsames Netzwerk (3G).
• API-Fehler (Bestandsfehler).
• Verschiedene Märkte (USD vs. EUR). Wir schreiben Unit-Tests für unsere Rust-Funktionen. „Frachttest“ läuft in 10 ms. Wir beweisen, dass „Kaufe 5, erhalte 10 % Rabatt“ mathematisch funktioniert, bevor wir es in einem Geschäft einsetzen, das 1 Million US-Dollar pro Tag verarbeitet.

9. Fazit

Checkout-Erweiterbarkeit ist ein Filter. Es filtert die „Hacker“ heraus und behält die „Ingenieure“. Es zwingt Sie dazu, sauberen, modularen und testbaren Code zu schreiben. Das Ergebnis ist ein schnelleres, sichereres Checkout-Erlebnis, das für die nächsten 10 Jahre E-Commerce gerüstet ist.

Panik wegen der Deadline?

Das Ablaufdatum von „checkout.liquid“ rückt näher.

Buchen Sie Ihr Migrationsaudit. Lesen Sie mehr über B2B-Preise und Clean Code.

Die Migration eines komplexen Shops dauert 4–8 Wochen.

1. Audit: Exportieren Sie „checkout.liquid“ und ordnen Sie jeden „ -> Webpixel.
2. Versandlogik -> Lieferfunktionen.

• Upsell-Slider -> UI-Erweiterung.

2. Priorisierung: „Must Haves“ vs. „Legacy Junk“. Normalerweise sind 30 % der Skripte toter Code.
3. Entwickeln: Erstellen Sie Erweiterungen lokal mit „shopify app dev“.
4. A/B-Test: Sie können den neuen Checkout im Status „Entwurf“ veröffentlichen und in der Vorschau anzeigen.
5. Go Live: Ändern Sie die Markierung in den Checkout-Einstellungen.

8. Fazit

Checkout-Erweiterbarkeit ist ein Filter. Es filtert die „Hacker“ heraus und behält die „Ingenieure“. Es zwingt Sie dazu, sauberen, modularen und testbaren Code zu schreiben. Das Ergebnis ist ein schnelleres, sichereres Checkout-Erlebnis, das für die nächsten 10 Jahre E-Commerce gerüstet ist.

---

Panik wegen der Deadline?

Das Ablaufdatum von „checkout.liquid“ rückt näher.

Buchen Sie Ihr Migrationsaudit. Beauftragen Sie unsere Architekten.