{"id":26245162,"url":"https://github.com/sandeepkumar-s-18/shoppykart-template","last_synced_at":"2026-04-19T04:34:51.989Z","repository":{"id":275328314,"uuid":"925700241","full_name":"Sandeepkumar-S-18/ShoppyKart-template","owner":"Sandeepkumar-S-18","description":"🛍️ A simple e-commerce website with product display, cart management, and checkout functionality using HTML, CSS, and JavaScript.","archived":false,"fork":false,"pushed_at":"2025-03-01T17:38:17.000Z","size":37491,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-13T12:36:59.297Z","etag":null,"topics":["css3","custom-elements","e-commerce-website","google-map","html5","js","localstorage","sweetalert","video"],"latest_commit_sha":null,"homepage":"https://sandeepku-s.github.io/ShoppyKart-template/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sandeepkumar-S-18.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-01T14:30:08.000Z","updated_at":"2025-03-01T17:38:20.000Z","dependencies_parsed_at":"2025-03-01T18:34:52.858Z","dependency_job_id":null,"html_url":"https://github.com/Sandeepkumar-S-18/ShoppyKart-template","commit_stats":null,"previous_names":["sandeepku-s/shoppykart-template","sandeepkumar-s-18/shoppykart-template"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Sandeepkumar-S-18/ShoppyKart-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sandeepkumar-S-18%2FShoppyKart-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sandeepkumar-S-18%2FShoppyKart-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sandeepkumar-S-18%2FShoppyKart-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sandeepkumar-S-18%2FShoppyKart-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sandeepkumar-S-18","download_url":"https://codeload.github.com/Sandeepkumar-S-18/ShoppyKart-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sandeepkumar-S-18%2FShoppyKart-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259704409,"owners_count":22898858,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","custom-elements","e-commerce-website","google-map","html5","js","localstorage","sweetalert","video"],"created_at":"2025-03-13T12:31:42.868Z","updated_at":"2026-04-19T04:34:51.931Z","avatar_url":"https://github.com/Sandeepkumar-S-18.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# E-Commerce Web Application\n\nWelcome to the **ShoppyKart Website** – a seamless and dynamic platform where users can browse through products, add them to their cart, and enjoy a fully functional shopping experience, all built using modern web technologies: **HTML**, **CSS**, and **JavaScript**.\n\n---\n\n## 📸 Preview  \n### 🛍️ **Page Preview**  \n[![Page preview](Images/page_preview.jpg)](https://sandeepku-s.github.io/ShoppyKart-template/)\n### 🛒 **Cart Page Window**  \n![Cart page window](Images/cart.png)  \n### 💳 **Checkout Window Notification**  \n![Checkout window](Images/checkout.png)  \n### 🏷️ **Product Information Window**  \n![Product information window](Images/product_information.png)  \n### 🎥 **Video Window**  \n![Video window](Images/display_video.png)  \n### 🗺️ **Map Window**  \n![Map window](Images/map.png)  \n### ➕ **Add the Product Window**  \n![Add the Product window](Images/add_product.png)\n\n---\n\n## 🛠 **Features**\n\n- **Product Catalog**: Users can view and explore a variety of products with detailed images, ratings, and descriptions.\n- **Interactive Cart**: Add products to your cart and view the total price dynamically.\n- **Dark/Light Theme Toggle**: Enhance the browsing experience by switching between light and dark themes.\n- **Zoom-in Product Images**: Hover over product images to zoom in for more details.\n\n---\n\n## 💻 **Tech Stack**\n\n- **HTML**: Semantic structure for the web pages.\n- **CSS**: Styling and layout using custom fonts, grids, and flexbox.\n- **JavaScript**: Core interactivity, including product management, cart operations, and UI functionality.\n- **LocalStorage**: Data persistence for cart items and product listings, ensuring data is not lost across sessions.\n- **External Libraries**:\n  - [Font Awesome](https://fontawesome.com/): For the history button icon.\n  - [SweetAlert](https://sweetalert.js.org/): For error alerts (e.g., division by zero).\n\n---\n\n## 👨‍💻 Installation\n\n1. Clone this repository:\n   ```bash\n   git clone https://github.com/sandeepku-s/ShoppyKart-template.git\n   ```\n2. Navigate to the project directory:\n   ```bash\n   cd ShoppyKart-template\n   ```\n3. Open `index.html` in your web browser to use the ShoppyKart-template.\n\n---\n\n## 🛍️ Usage\n\n### 🖥️ **User Interface**\n\n1. **Product Display**:\n   - Products are displayed on the main page in a grid layout.\n   - Each product shows the image, name, rating, original price, and discounted price.\n   \n2. **Product Details**:\n   - Clicking on a product name or image opens a detailed view of the product with additional information like rating, price, and description.\n   \n3. **Add to Cart**:\n   - Users can add products to the cart directly from the main product display.\n   - The cart icon in the header shows the current count of products in the cart.\n\n4. **Cart Management**:\n   - View cart by clicking the cart icon in the header.\n   - The cart dynamically updates with the total price.\n\n### 💳 **Checkout Process**\n\n- Once the user is ready to purchase, they can view the total cart amount and proceed with checkout.\n- The project uses a simple SweetAlert confirmation upon successful checkout.\n  \n---\n\n## 📂 Project Structure\n\nHere is an overview of the project structure:\n\n```bash\nShoppyKart-template/\n├── index.html               # The main HTML file with the product listing and cart structure\n├── CSS/\n│   ├── Style.css            # The main stylesheet for page layouts and UI\n│   └── Font.css             # Additional styles related to custom fonts\n├── Fonts/\n│   └── font_templates       # Custom fonts and templates used in the app\n├── Images/\n│   ├── product_1.jpg        # Example product image\n│   ├── product_2.jpg        # Another example image\n│   └── .............\t     # All Images\n└── Script.js                # JavaScript logic for managing products, cart, and UI behavior\n```\n\n---\n\n## 🚀 Deployment\n\nThis project can be deployed easily using platforms like [GitHub Pages](https://pages.github.com/). To preview the live version, visit:\n\n---\n\n### 🚀 **Live Demo** \nYou can preview the live demo of the application by following this link:\n[Demo Link](https://sandeepku-s.github.io/ShoppyKart-template/)\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandeepkumar-s-18%2Fshoppykart-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsandeepkumar-s-18%2Fshoppykart-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandeepkumar-s-18%2Fshoppykart-template/lists"}