ondc-campaign-sdk
Version:
[](https://www.npmjs.com/package/ondc-campaign-sdk) [](LICENSE) [ • 4.59 kB
Markdown
# 🛍️ ONDC Campaign SDK
[](https://www.npmjs.com/package/ondc-campaign-sdk)
[](LICENSE)
[](#)
A lightweight & beautiful SDK to fetch and display live **ONDC campaign products**. Whether you're building a storefront, promotion landing page, or partner dashboard — plug & play this SDK to show campaigns with style 🚀
## ✨ Features
- 📢 **Campaign Info** — name, description, banner, and URLs
- 🛒 **Product Details** — seller, pricing, image, category, discount
- 🎨 **Styled UI Renderer** — embed product cards with optional themes
- 📱 **Mobile Responsive** — optimized HTML ready for any screen
- ⚙️ **Zero Config** — just install & run. That’s it.
## 📦 Installation
```bash
npm install ondc-campaign-sdk
```
## ⚡ Quick Start
### 1. Fetch Campaign Products (Raw JSON)
```ts
import { fetchLiveCampaignProducts } from "ondc-campaign-sdk";
const data = await fetchLiveCampaignProducts();
console.log(data);
```
### 2. Generate Styled HTML (for embedding)
```ts
import { fetchLiveCampaignProductsWithHtml } from "ondc-campaign-sdk";
const html = await fetchLiveCampaignProductsWithHtml(5); // show 5 products
document.getElementById("campaign-section").innerHTML = html;
```
With custom styles:
```ts
const styles = {
primary: "#0d9488",
accent: "#ef4444",
bgLight: "#f0fdfa",
borderRadius: "16px",
};
const html = await fetchLiveCampaignProductsWithHtml(6, styles);
```
### 3. Render Directly into the DOM
```ts
import { renderLiveCampaignProducts } from "ondc-campaign-sdk";
// Renders 6 products directly into <body>
renderLiveCampaignProducts(6);
```
With styles:
```ts
renderLiveCampaignProducts(6, {
primary: "#7c3aed",
accent: "#f43f5e",
bgLight: "#faf5ff",
});
```
## 🧪 API Response Format
```json
{
"_id": "",
"campaignName": "",
"description": "",
"banner": "",
"products": [
{
"prices": {
"regular": {
"price": "",
"formatted_price": ""
},
"final": {
"price": "",
"formatted_price": ""
}
},
"ratings": {
"average": "",
"total": ""
},
"reviews": {
"total": ""
},
"id": "",
"sku": "",
"name": "",
"description": "",
"url_key": "",
"base_image": {
"small_image_url": "",
"medium_image_url": "",
"large_image_url": "",
"original_image_url": ""
},
"images": [
{
"small_image_url": "",
"medium_image_url": "",
"large_image_url": "",
"original_image_url": ""
}
],
"is_new": "",
"is_featured": "",
"on_sale": "",
"is_saleable": "",
"is_wishlist": "",
"min_price": "",
"price_html": ""
}
],
"isActive": "",
"createdAt": "",
"__v": ""
}
```
## 🎨 Style Options (Optional)
```ts
{
primary: "#3d5af1",
primaryDark: "#2a3eb1",
accent: "#ff6b6b",
text: "#333333",
textLight: "#777777",
bgLight: "#f8f9fa",
white: "#ffffff",
shadow: "0 10px 30px rgba(0,0,0,0.08)",
borderRadius: "12px"
}
```
## 🌐 Full HTML Example
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>ONDC Campaign</title>
<script type="module">
import { renderLiveCampaignProducts } from "https://cdn.skypack.dev/ondc-campaign-sdk";
renderLiveCampaignProducts(6);
</script>
</head>
<body></body>
</html>
```
Or embed into a custom container:
```html
<div id="campaign-section"></div>
<script type="module">
import { fetchLiveCampaignProductsWithHtml } from "https://cdn.skypack.dev/ondc-campaign-sdk";
const html = await fetchLiveCampaignProductsWithHtml(4);
document.getElementById("campaign-section").innerHTML = html;
</script>
```
## 📜 License
MIT License © 2025 [Your Company Name]
## 🤝 Contributing
We’d love your help to make this better!
- 🐞 Report bugs
- 💡 Suggest features
- 📥 Submit pull requests
- 🌟 Star the repo if you find it useful!
## 💬 Support
Have a question or need help?
Feel free to reach out: `dev-support@yourdomain.com`
## 🧩 Coming Soon
- Filters by category or seller
- Sorting options (price, discount)
- Lazy loading for product lists
- CDN-ready minified build
Enjoy building cool stuff with ONDC 💙