Acest proiect conține integrarea completă bidirecțională între magazinul Shopify (ykiysp-be.myshopify.com) și platforma educațională Manus EduForYou (eduforyou.co.uk).
Integrarea rezolvă cele 4 cerințe principale prin intermediul unui server middleware (Node.js/Express) și al modificărilor în fișierele Liquid din Shopify:
- Shopify → Manus (Orders): Webhook-uri Shopify (
orders/create,orders/updated) trimit datele comenzilor către serverul de integrare, care le sincronizează cu backend-ul Manus prin tRPC, asociindu-le profilului de student pe baza adresei de email. - Shopify → Manus (Quizuri): Fișierele Liquid modificate comunică direct cu serverul de integrare via API REST. La finalizarea unui quiz (Eligibility, Ikigai, Finance), datele sunt trimise către Manus și asociate contului de student.
- Auth Flow (SSO):
- Sesiunea Manus generează un token JWT de integrare.
- La navigarea către Shopify, token-ul este pasat prin URL (
?manus_token=...). - Shopify salvează token-ul și îl folosește pentru a trimite date (quizuri) autentificate.
- Snippet-ul
manus-auth-gate.liquidpoate bloca accesul la checkout dacă utilizatorul nu are o sesiune Manus activă. - După checkout,
checkout-redirect.liquidredirecționează utilizatorul înapoi în dashboard-ul Manus, restabilind sesiunea.
- Conturi Unice: Identificatorul unic (sursa de adevăr) este adresa de email. Dacă un utilizator plasează o comandă pe Shopify fără a fi logat, serverul de integrare va face
upsertpe adresa de email în baza de date Manus.
Serverul este construit în Node.js (Express) și servește ca punte între Shopify și API-ul tRPC din Manus.
- Clonează acest repository (directorul
shopify-manus-integration). - Instalează dependențele:
npm install - Configurează variabilele de mediu (
.env):NODE_ENV=production PORT=3000 # Shopify Dev App Credentials SHOPIFY_STORE_DOMAIN=ykiysp-be.myshopify.com SHOPIFY_API_VERSION=2024-01 SHOPIFY_CLIENT_ID=7f630fbb79b54b156610dbc7b3a91c7e SHOPIFY_CLIENT_SECRET=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 SHOPIFY_WEBHOOK_SECRET=your_webhook_signing_secret_here # Manus EduForYou MANUS_BASE_URL=https://www.eduforyou.co.uk MANUS_API_URL=https://www.eduforyou.co.uk/api/trpc # Integration JWT Secret INTEGRATION_JWT_SECRET=generate_a_strong_random_string_here
- Pornește serverul:
npm start
Pentru a sincroniza comenzile și clienții, trebuie să configurezi Webhook-uri în Shopify Admin.
- Mergi la Settings > Notifications în Shopify Admin.
- La secțiunea Webhooks, apasă pe Create webhook.
- Configurează următoarele 4 webhook-uri:
| Event | Format | URL |
|---|---|---|
| Order creation | JSON | https://[URL_SERVER]/webhooks/orders/create |
| Order update | JSON | https://[URL_SERVER]/webhooks/orders/updated |
| Customer creation | JSON | https://[URL_SERVER]/webhooks/customers/create |
| Customer update | JSON | https://[URL_SERVER]/webhooks/customers/update |
Notă: După salvare, Shopify îți va afișa un secret de semnare (Webhook signing secret) în partea de jos a paginii Notifications. Copiază acel secret și pune-l în variabila SHOPIFY_WEBHOOK_SECRET de pe serverul tău.
Fișierele modificate se găsesc în folderul shopify-liquid/.
Înlocuiește conținutul actual al fișierelor din tema ta Shopify cu variantele modificate:
eligibility-quiz.liquidikigai-quiz.liquidfinance-calculator.liquid
Important: În Customizer (sau direct în cod), setează Integration Server URL cu URL-ul unde ai făcut deploy la serverul Node.js.
Pentru a forța utilizatorii să fie logați în Manus înainte de checkout și pentru a-i redirecționa înapoi după plată:
-
Gate-ul de Autentificare: Adaugă snippet-ul
manus-auth-gate.liquidîn tema ta (ideal întheme.liquidchiar înainte de</body>sau pe pagina de cart).{% render 'manus-auth-gate' %} -
Redirect-ul Post-Checkout: În Shopify Admin, mergi la Settings > Checkout > Order status page (sau în secțiunea de extensii de checkout dacă folosești Checkout Extensibility). Adaugă codul din
checkout-redirect.liquidîn secțiunea "Additional scripts". Acest script va redirecționa automat clientul cătrehttps://www.eduforyou.co.uk/student/dashboardprin intermediul serverului de integrare.
Deoarece aplicația EduForYou folosește tRPC, trebuie să expui procedurile necesare pentru ca serverul de integrare să poată comunica cu baza de date.
În router-ul tRPC al aplicației (ex: src/server/api/routers/integration.ts), adaugă:
integration.syncOrder: Primește payload-ul comenzii și face upsert în baza de date.integration.syncQuiz: Primește rezultatele quiz-urilor și le leagă de profilul studentului.integration.upsertStudent: Creează contul (fără parolă, bazat pe email) dacă studentul nu există deja, atunci când vine din Shopify.
Pentru detalii complete despre structura de date așteptată, consultă fișierul src/routes/manusIntegration.js din acest repository, care servește ca documentație a contractului API sau ca adaptor/proxy fallback.