Package Exports

ondc-campaign-sdk
ondc-campaign-sdk/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ondc-campaign-sdk) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🛍️ ONDC Campaign SDK

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

npm install ondc-campaign-sdk

⚡ Quick Start

1. Fetch Campaign Products (Raw JSON)

import { fetchLiveCampaignProducts } from "ondc-campaign-sdk";

const data = await fetchLiveCampaignProducts();
console.log(data);

2. Generate Styled HTML (for embedding)

import { fetchLiveCampaignProductsWithHtml } from "ondc-campaign-sdk";

const html = await fetchLiveCampaignProductsWithHtml(5); // show 5 products
document.getElementById("campaign-section").innerHTML = html;

With custom styles:

const styles = {
  primary: "#0d9488",
  accent: "#ef4444",
  bgLight: "#f0fdfa",
  borderRadius: "16px",
};

const html = await fetchLiveCampaignProductsWithHtml(6, styles);

3. Render Directly into the DOM

import { renderLiveCampaignProducts } from "ondc-campaign-sdk";

// Renders 6 products directly into <body>
renderLiveCampaignProducts(6);

With styles:

renderLiveCampaignProducts(6, {
  primary: "#7c3aed",
  accent: "#f43f5e",
  bgLight: "#faf5ff",
});

🧪 API Response Format

{
  "id": 0,
  "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": false,
  "is_featured": false,
  "on_sale": false,
  "is_saleable": false,
  "is_wishlist": false,
  "min_price": "",
  "prices": {
    "regular": {
      "price": "",
      "formatted_price": ""
    },
    "final": {
      "price": "",
      "formatted_price": ""
    }
  },
  "price_html": "",
  "ratings": {
    "average": "",
    "total": 0
  },
  "reviews": {
    "total": 0
  }
}

🎨 Style Options (Optional)

{
  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

<!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:

<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

🤝 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 💙