https://github.com/r2hu1/cart.js
This repository contains JavaScript code that streamlines the creation of a shopping cart feature for e-commerce websites. The code allows users to seamlessly add items to a cart and remove them as needed.
https://github.com/r2hu1/cart.js
cart e-commerce e-commerce-integration javascript
Last synced: about 2 months ago
JSON representation
This repository contains JavaScript code that streamlines the creation of a shopping cart feature for e-commerce websites. The code allows users to seamlessly add items to a cart and remove them as needed.
- Host: GitHub
- URL: https://github.com/r2hu1/cart.js
- Owner: r2hu1
- License: mit
- Created: 2023-11-20T15:25:59.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-21T18:06:58.000Z (over 1 year ago)
- Last Synced: 2023-12-21T20:01:20.749Z (over 1 year ago)
- Topics: cart, e-commerce, e-commerce-integration, javascript
- Language: JavaScript
- Homepage:
- Size: 13.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 1. **Include the Script**:
Include the JavaScript file containing the `cartJS` function in your HTML file. You can do this by adding a `` tag in your HTML file that points to the JavaScript file. For example:
```html
<script src="https://cdn.jsdelivr.net/gh/r2hu1/cart.JS@latest/src/cart.js">
```
## 2. **Call the Function**:
Call the `cartJS` function in your HTML file. You can do this by adding a `` tag in your HTML file that calls the `cartJS` function. For example:
```html
<script>cartJS();
```
## 3. **HTML Structure**:
Your HTML structure should have elements with the classes `.addToCart`, `.itemTitle`, `.itemDescription`, `.itemQuantity`, `.itemPrice`, `.itemImg`, and `.cartItem`. The script will add an event listener to each `.addToCart` element and when clicked, it will retrieve the details of the item and add it to the cart.
For Example:
```html
Product Title
Product Description
1
2
3
Product Price
Add To Cart (edit according to your need)
```
You can change select to input just add class `.itemQuantity` to it, For Example:
```html
```
## 4. **CSS Styling**:
Style your HTML elements as needed. The script does not provide any styling, so you will need to add your own CSS to style the cart and the items.
Remember to call the `cartJS` function after the DOM has fully loaded. You can ensure this by placing the `` tags just before the closing `</body>` tag, or by calling the function in a `window.onload` or `$(document).ready()` event if you're using jQuery.
[Live Demo](https://cartsjss.r2hu1.repl.co/)
[Code Demo](https://replit.com/@r2hu1/cartsjss#index.html)