Homepage: Implement Subcribe section #16

New Issue

namds29 · 2025-12-18T10:36:42Z

namds29 commented

2025-12-18 10:36:42 +00:00

No description provided.

namds29 added this to the Storefront Shop project 2025-12-18 10:55:09 +00:00

namds29 commented

2026-01-07 03:35:59 +00:00

VtSubcription — Usage & JSON Configuration

Overview

VtSubcription renders a subscription/signup card with optional benefits, inputs, a policy checkbox, and a submit button.
It is driven entirely by the design JSON. No network request is made on submit; it logs the event to the console for you to hook into.
Component mapping is registered in src/vibentec/component-map.tsx (import and renderer entry). Rendering is handled by src/vibentec/renderer.tsx.

Where To Configure

The active design JSON is loaded by src/vibentec/configloader.ts via jsonFileNames.namDrsquatch. The file on disk is config/nam.drsquatch.design.json.
You can place VtSubcription in any page section. Commonly it goes under pages.Home.

Minimal JSON Snippet

{
  "VtSubcription": {
    "config": {
      "className": "w-full",
      "cardClassName": "overflow-hidden bg-[#F3EDE3] p-10",
      "title": "SUBSCRIBE & SAVE",
      "description": true,

      "firstName": { "placeholder": "First name" },
      "email": { "placeholder": "Email address" },

      "policyLabel": "I accept the privacy policy",
      "newCheckboxRowClassName": "flex items-center gap-3",

      "cta": { "label": "Subscribe", "className": "mt-12 px-6 h-[56px] rounded-full bg-orange-500 text-white font-bold" }
    }
  }
}

Full Example (with benefits and copy)

This mirrors the structure used in config/nam.drsquatch.design.json.

{
  "VtSubcription": {
    "config": {
      "className": "w-full",
      "cardClassName": "overflow-hidden bg-[#F3EDE3] p-10",
      "title": "SUBSCRIBE & SAVE",
      "titleClassName": "text-[#003F31] text-[28px] font-bold text-center",
      "description": true,

      "benefits": [
        {
          "icon": "🗓",
          "title": "Ships Every 3 Months",
          "description": "Customize your picks and scents, upgrade anytime, or snooze if you want."
        },
        {
          "icon": "🚚",
          "title": "Free Delivery",
          "description": "Subscribe once and relax. Shipping expenses are covered."
        },
        {
          "icon": "⭐",
          "title": "Exclusive Benefits",
          "description": "Early access to new products and limited releases."
        }
      ],

      "formClassName": "flex justify-center",
      "firstName": { "placeholder": "First name" },
      "email": { "placeholder": "Email address" },
      "policyLabel": "I have read and accept the privacy policy.",
      "newCheckboxRowClassName": "flex items-center gap-3",

      "cta": {
        "label": "SUBSCRIBE & SAVE",
        "className": "w-fit mt-12 px-[30px] h-[56px] rounded-full bg-orange-500 text-white font-bold"
      }
    }
  }
}

Config Keys

Copy & content
- title: Heading text. Optional; when set, shown as h2.
- description: Boolean to show description line.
- descriptionPrefix, descriptionHighlight, descriptionSuffix: Split description parts; highlight gets bold styling.
- subtext: Secondary line shown below description.
- successMessage: Text shown after successful submit.
Inputs & submit
- firstName: Object with optional placeholder and className to render the first-name input.
- email: Object with optional placeholder and className to render the email input. Marked required.
- policyLabel: Checkbox label text; default is German copy.
- newCheckboxRowClassName: When present, the policy checkbox row is rendered. Use to control visibility and styling.
- cta: Object { label, className } for the submit button.
Benefits (optional)
- benefits: Array of items. Each item supports icon or imgSrc, plus title, description, and per-item classNames.
Styling classNames
- className (section), cardClassName (card), titleClassName, descriptionClassName, highlightClassName.
- Form: formClassName, fieldsClassName, inputClassName.
- Checkbox: checkboxRowClassName, checkboxClassName, checkboxLabelClassName.
- Success: successClassName.
- Benefits grid: benefitsClassName, benefitItemClassName, benefitIconClassName, benefitTitleClassName, benefitDescClassName.

Behavior Notes

Submit handling
- The form prevents default and requires the policy checkbox to be checked when rendered.
- On submit, it sets submitted=true and logs to the console.
- No API call is made. To integrate with a newsletter provider, add your fetch/SDK call inside the component’s onSubmit.
Visibility rules
- Inputs render only if firstName / email objects exist in config.
- The policy checkbox row renders only if newCheckboxRowClassName is present.

Placement in Page JSON

Insert under any page array. Typical placement is under pages.Home:

{
  "pages": {
    "Home": [
      { "Hero": { "config": { /* ... */ } } },
      { "VtSubcription": { "config": { /* as above */ } } }
    ]
  }
}

Alternate Example (3Bears design)

See config/nam.3bear.design.json for a localized German version with description parts and placeholders.

Switching the Active Design JSON

Edit src/vibentec/configloader.ts to point fileName to a different entry from src/vibentec/devJsonFileNames.ts (e.g., jsonFileNames.nam3Bear) and restart the dev server.

![image](/attachments/e9547a2f-2112-480c-951e-6db0b68f53be) ![image](/attachments/bf55080d-5d72-4666-a3dc-ce0fea34eb35) # VtSubcription — Usage & JSON Configuration ## Overview - `VtSubcription` renders a subscription/signup card with optional benefits, inputs, a policy checkbox, and a submit button. - It is driven entirely by the design JSON. No network request is made on submit; it logs the event to the console for you to hook into. - Component mapping is registered in `src/vibentec/component-map.tsx` (import and renderer entry). Rendering is handled by `src/vibentec/renderer.tsx`. ## Where To Configure - The active design JSON is loaded by `src/vibentec/configloader.ts` via `jsonFileNames.namDrsquatch`. The file on disk is `config/nam.drsquatch.design.json`. - You can place `VtSubcription` in any page section. Commonly it goes under `pages.Home`. ## Minimal JSON Snippet ```json { "VtSubcription": { "config": { "className": "w-full", "cardClassName": "overflow-hidden bg-[#F3EDE3] p-10", "title": "SUBSCRIBE & SAVE", "description": true, "firstName": { "placeholder": "First name" }, "email": { "placeholder": "Email address" }, "policyLabel": "I accept the privacy policy", "newCheckboxRowClassName": "flex items-center gap-3", "cta": { "label": "Subscribe", "className": "mt-12 px-6 h-[56px] rounded-full bg-orange-500 text-white font-bold" } } } } ``` ## Full Example (with benefits and copy) This mirrors the structure used in `config/nam.drsquatch.design.json`. ```json { "VtSubcription": { "config": { "className": "w-full", "cardClassName": "overflow-hidden bg-[#F3EDE3] p-10", "title": "SUBSCRIBE & SAVE", "titleClassName": "text-[#003F31] text-[28px] font-bold text-center", "description": true, "benefits": [ { "icon": "🗓", "title": "Ships Every 3 Months", "description": "Customize your picks and scents, upgrade anytime, or snooze if you want." }, { "icon": "🚚", "title": "Free Delivery", "description": "Subscribe once and relax. Shipping expenses are covered." }, { "icon": "⭐", "title": "Exclusive Benefits", "description": "Early access to new products and limited releases." } ], "formClassName": "flex justify-center", "firstName": { "placeholder": "First name" }, "email": { "placeholder": "Email address" }, "policyLabel": "I have read and accept the privacy policy.", "newCheckboxRowClassName": "flex items-center gap-3", "cta": { "label": "SUBSCRIBE & SAVE", "className": "w-fit mt-12 px-[30px] h-[56px] rounded-full bg-orange-500 text-white font-bold" } } } } ``` ## Config Keys - Copy & content - `title`: Heading text. Optional; when set, shown as `h2`. - `description`: Boolean to show description line. - `descriptionPrefix`, `descriptionHighlight`, `descriptionSuffix`: Split description parts; highlight gets bold styling. - `subtext`: Secondary line shown below description. - `successMessage`: Text shown after successful submit. - Inputs & submit - `firstName`: Object with optional `placeholder` and `className` to render the first-name input. - `email`: Object with optional `placeholder` and `className` to render the email input. Marked `required`. - `policyLabel`: Checkbox label text; default is German copy. - `newCheckboxRowClassName`: When present, the policy checkbox row is rendered. Use to control visibility and styling. - `cta`: Object `{ label, className }` for the submit button. - Benefits (optional) - `benefits`: Array of items. Each item supports `icon` or `imgSrc`, plus `title`, `description`, and per-item classNames. - Styling classNames - `className` (section), `cardClassName` (card), `titleClassName`, `descriptionClassName`, `highlightClassName`. - Form: `formClassName`, `fieldsClassName`, `inputClassName`. - Checkbox: `checkboxRowClassName`, `checkboxClassName`, `checkboxLabelClassName`. - Success: `successClassName`. - Benefits grid: `benefitsClassName`, `benefitItemClassName`, `benefitIconClassName`, `benefitTitleClassName`, `benefitDescClassName`. ## Behavior Notes - Submit handling - The form prevents default and requires the policy checkbox to be checked when rendered. - On submit, it sets `submitted=true` and logs to the console. - No API call is made. To integrate with a newsletter provider, add your fetch/SDK call inside the component’s `onSubmit`. - Visibility rules - Inputs render only if `firstName` / `email` objects exist in config. - The policy checkbox row renders only if `newCheckboxRowClassName` is present. ## Placement in Page JSON - Insert under any page array. Typical placement is under `pages.Home`: ```json { "pages": { "Home": [ { "Hero": { "config": { /* ... */ } } }, { "VtSubcription": { "config": { /* as above */ } } } ] } } ``` ## Alternate Example (3Bears design) - See `config/nam.3bear.design.json` for a localized German version with description parts and placeholders. ## Switching the Active Design JSON - Edit `src/vibentec/configloader.ts` to point `fileName` to a different entry from `src/vibentec/devJsonFileNames.ts` (e.g., `jsonFileNames.nam3Bear`) and restart the dev server.

image.png

148 KiB

image.png

111 KiB

Sign in to join this conversation.