Estendibilità del checkout: modificare l'immodificabile

Per un decennio, “checkout.liquid” è stato il Santo Graal (e l’incubo) di Shopify Plus. Permetteva il controllo totale, ma si rompeva facilmente e non era sicuro per l’aggiornamento. Shopify lo ha ucciso. Il futuro è l’estensibilità del checkout.

L’architettura: interfaccia utente sandbox

Non è più possibile scrivere JavaScript arbitrario (rischio Magecart). Devi scrivere estensioni dell’interfaccia utente che vengano eseguite in una sandbox sicura. Sono renderizzati in modo nativo da Shopify, il che significa che sono veloci e ottimizzati per dispositivi mobili.

“sirena”. grafico TD Dev[Sviluppatore] —>|Scrive| App[App Shopify] App —>|Distribuisce| Estensione[Estensione dell’interfaccia utente di Checkout]

Shopify[Shopify Checkout] -->|Carichi| Estensione
Estensione -->|Render| Componenti[Banner/Upsell/Input]

sottografo "The Sandbox"
Componenti
fine

## Caso d'uso 1: il blocco "Upsell".
Vogliamo offrire "Assicurazione sulla spedizione" per $ 2,99 proprio sopra il pulsante "Paga adesso".

"dattiloscritto".
// estensioni/assicurazione/src/Checkout.jsx
importare {
  reactExtension,
  Casella di controllo,
  usaApplicaCartLinesCambia,
} da '@shopify/ui-extensions-react/checkout';

esporta default reactExtension('purchase.checkout.block.render', () => <App />);

funzione App() {
  const applyChange = useApplyCartLinesChange();
  
  ritorno (
    <Casella di controllo onChange={(selezionato) => {
      se (selezionato) {
        applicaCambia({
          digitare: 'addCartLine',
          ID merce: 'gid://shopify/ProductVariant/12345',
          quantità: 1,
        });
      }
    }}>
      Aggiungi la protezione sulla spedizione (+$2,99)
    </Casella di controllo>
  );
}

Questo è pulito, nativo e ottimizzato per la conversione.

Caso d’uso 2: logica di convalida (funzioni)

Vogliamo bloccare le caselle postali per la spedizione Fedex Express. Utilizziamo Shopify Functions (Wasm) per applicare questa regola di convalida sul lato server. È infinitamente più veloce e affidabile del vecchio Script Editor.

Cronologia della migrazione

Se sei ancora su checkout.liquid, sei sul ticchettio dell’orologio. Shopify lo sta deprecando. La migrazione ti dà accesso a:

• Pagamento in una pagina: conversione più alta del 10%.
• Integrazione Shop Pay: perfetta.
• Prestazioni: tempi di caricamento 2 volte più rapidi.

---

---

Stai ancora eseguendo il pagamento precedente?

Non aspettare l’avviso di chiusura. Assumi i nostri architetti.