טפסי פניות

הגדירו סכמת ArkType שטוחה ורשמו את הרכיב שלה:

src/leads.ts

import { type, defineLeadForm } from '@shoplifter/presentation-sdk/leads';

export const contact = defineLeadForm({
  id: 'contact',
  version: 1,
  label: 'Contact',
  persist: true,
  schema: type({ name: 'string', email: 'string.email' }),
  fields: [
    { id: 'name', label: 'Name', kind: 'text' },
    { id: 'email', label: 'Email', kind: 'email' },
  ],
});
export const leadForms = [{ form: contact, component: 'src/LeadForm.astro' }];
export const defaultFormId = contact.id;

צרו את src/LeadForm.astro והוסיפו "leads": { "source": "src/leads.ts" } ל־shoplifter.json. הריצו shoplifter types להידור תיאורי טפסים ניידים. לכל טופס רשום רכיב Astro משלו; טופס ברירת המחדל מופיע גם ב־/contact-us.

מזהה וגרסה אינם ניתנים לשינוי לאחר רישום. העלו את גרסת הטופס כאשר הסכמה משתנה. persist: true שומר פניות. ברירת המחדל היא העברה בלבד והיא דורשת webhook מוגדר.

שליחה מהדפדפן

ייבאו fetchLeadContext ו־submitLead מנקודת הכניסה של הטפסים. אמתו ערכים בעזרת הטופס, בקשו הקשר חדש לפי מזההו ושלחו עם מפתח idempotency. שמרו את המפתח לניסיונות חוזרים עם אותם ערכים; לשליחה חדשה צרו מפתח חדש.

const values = contact.validate({ name: 'Example', email: 'example@example.com' });
const key = crypto.randomUUID();
const context = await fetchLeadContext(contact.id);
await submitLead(contact, context, values, key);

הקטע שייך למטפל האירוע בדפדפן של הרכיב, עם ייבוא contact ממודול הטופס. השביתו את בקרי השליחה כאשר preview הוא true או כאשר mode !== 'published'; אל תשלחו פניות בדיקה מדפי דמה או תצוגה מקדימה. ההקשר קשור לאתר, לטופס ולשם המארח שנפתרו בפלטפורמה. אל תעבירו מזהה דייר מקלט דפדפן, אל תטמיעו סודות ואל תכללו פניות אמיתיות בקוד.

ה־SDK מייצא LeadSubmittedEvent לצרכני webhook. פרסום מפעיל את הגדרות הטפסים שאומתו.