- https://traditional-insurance-685177.framer.app
The RFQCart component is a customizable shopping cart system designed for handling quote requests, bulk orders, and custom inquiries without the need for payment processing. It supports localStorage persistence to maintain cart items across sessions, webhook submission for quote requests, and features engaging animations for enhanced user experience.
- LocalStorage Persistence: Automatically saves cart items in the user's browser.
- Webhook Submission: Send quote requests directly to a specified URL.
- Customizable Appearance: Tailor colors, texts, and styles to fit your design needs.
- Multiple Display Modes: Choose from full cart, button, mini summary, header icon, or header popup.
- Dynamic Form Fields: Collect additional customer information through customizable forms.
- Animation Support: Enable or disable animations for smoother transitions.
## 3. Installation & Setup
To use the RFQCart component in Framer:
1. Open your Framer project.
2. Navigate to the "Marketplace."
3. Search for "RFQCart" and select it.
4. Click "Add to Project" to import the component into your workspace.
5. Drag and drop the RFQCart component onto your canvas.
1. Select Component Type: Choose between "cart" for a full cart view or "addToCart" for a button.
2. Configure Display Mode: Select how you want the cart to be displayed (e.g., full cart, button, mini summary).
3. Set Storage Key: Use a unique key to store cart data in localStorage.
4. Customize Appearance:
- Adjust color settings for primary, secondary, background, text, and borders.
- Configure the button appearance if using the "addToCart" type.
5. Define Webhook URL: Paste your webhook endpoint (Make/Zapier/Cloudflare Workers). The component sends a POST (JSON) request with items[], summary, requestId, and optional customer. Return 2xx for success (non-2xx shows an error). If CORS blocks direct requests, use a proxy (e.g., Cloudflare Workers).
6. Set Up Form Fields: If using forms, define custom fields for customer information.
7. Add Event Callbacks: Use the optional event callbacks to handle cart updates, submission success, and errors.
```
{
"requestId": "RFQ-...",
"timestamp": "2026-01-20T14:45:30.000Z",
"customer": { "name": "Jane Smith", "email": "jane@company.com" },
"items": [
{ "id": "widget-pro", "name": "Widget Pro", "price": 149, "quantity": 10, "subtotal": 1490 }
],
"summary": { "totalItems": 10, "totalPrice": 1490, "currency": "$" }
}
```
MJ Jung
