ecom-widget

Embeddable E-commerce Widget

🚀 Lightweight, Fast, and Modern JavaScript Widget for Embedding Products into Any Website

---

📦 Project Overview

This project is a fully embeddable e-commerce widget that allows you to:

• ✅ Show 5 products per viewport
• ✅ Scroll left/right with Prev/Next buttons
• ✅ Infinite looping behavior
• ✅ Fully responsive (desktop, tablet, mobile)
• ✅ Pure Vanilla JavaScript (no frameworks)
• ✅ Easily integrate into any website with one line of code
• ✅ Host the widget yourself or through a CDN

---

🎯 Features

Feature	Status
Responsive Design	✅
Horizontal Carousel with Scroll	✅
5 Items Per Viewport	✅
Infinite Looping	✅
Lightweight & Fast	✅
Shadow DOM Isolation	✅
No External Dependencies	✅

---

🚀 Quick Start

1️⃣ Clone the repository

git clone https://github.com/your-username/your-widget-repo.git
cd your-widget-repo

2️⃣ Install dependencies

npm install

3️⃣ Start development server (Vite + HMR)

npm run dev

Opens http://localhost:5173 with live reload.

4️⃣ Build for production

npm run build

Outputs bundled widget.min.js to dist/

5️⃣ Preview production build

npx serve .

Serves widget.min.js in the preview.html available here: http://localhost:3000/preview

---

🛠 Usage Example

Paste this into any HTML page:

<div id="my-ecom-widget"></div>

<script src="https://your-cdn.com/widget.min.js"></script>
<script>
  window.EcomWidget.init({
    selector: '#my-ecom-widget',
    category: 'electronics'    // optional: API category
  });
</script>

✅ That's it! Your widget is now live and running inside any webpage.

---

✨ Widget Preview

---

⚙️ Configuration Options

Property	Type	Default	Description
selector	string	#my-ecom-widget	CSS selector where the widget mounts
category	string	'electronics'	Fake Store API category to fetch
visibleCount	number	5	Number of cards visible per viewport

Example:

window.EcomWidget.init({
  selector: '#your-div-id',
  category: 'jewelery',
  visibleCount: 5
});

---

📡 API Endpoints Used

• GET products by category:
  https://fakestoreapi.com/products/category/{category}
• POST add to cart:
  https://fakestoreapi.com/carts

(Free public test API — no API key required.)

---

🧩 Technology Stack

• Pure Vanilla JavaScript (ES6+)
• HTML + CSS inside Shadow DOM for isolation
• Vite for development & bundling (IIFE output)
• Zero runtime dependencies

---

📁 Project Structure

your-widget-repo/
├── widget.js            # Main widget source
├── vite.config.js       # Vite config for dev & build
├── package.json         # npm scripts & dependencies
├── .gitignore           # Ignored files (node_modules, dist, etc.)
└── dist/                # Production build output (widget.js)

.gitignore example:

node_modules/
dist/
.env
.DS_Store
.vscode/

---

📜 License

MIT License

You are free to use, modify, distribute, and contribute!

---

🤝 Contributing

Pull requests are very welcome!
For major changes, please open an issue first to discuss.

1. Fork the repo
2. Create a branch (git checkout -b feature/...)
3. Commit your changes (git commit -m "feat: ...")
4. Push (git push origin feature/...)
5. Open a Pull Request

---

📬 Contact

If you like this project, feel free to connect:

• 🌐 LinkedIn
• 🐦 GitHub
• 📩 Email: [e-mail]

---

Made with ❤️ and JavaScript