Ecommerce App ب Javascript

Ecommerce App ب Javascript


فهاد ل projet الجديد من سلسلة javascript  غادي نشوفوا كيفاش نقادو واحد Ecommerce App لي بسيطة فالناس لي تبعت معاي دروس javascript للمبتدئين فهاد ل projet غادي يكون فيه داكشي لي شفنا تقريبا كامل.
ل application ديالنا غادي تكون كتعرض des produits مع الأثمنة ديالهم المستخدم كيمكنلوا يختار produit بغاه ويزيدو فل panier ويمكنلوا ايضا يمسح لي بغى من ل panier هادشي كامل غادي نديروه فقط ب javascript.

نظرة سريعة بالفيديو

1- إضافة الصفحة الرئيسية

أول حاجة غادي تزيد dossier جديد سميه لي بغيتي زيد فيه 3 ديال les fichiers :
- index.html
- style.css
- main.js

منبعد ف html غادي نزيد الكود ديال design هنا خدمنا ب bootstrap كنزيدو فالأول منبعد عندي table غادي يكون فيها ل
panier ديالنا فين غادي يتزادو les produits لي اختار المستخدم.

منبعد عندي des divs card لي كل وحدة فيها الصورة ديال ل produit والمعلومات عليه و bouton لي كيمكن باش نزيدو ل panier.

كل bouton عندو id به باش غادي نسترجعوه فل fichier main.js  وعندو أيضا data-id لي كنحدد بها ل id ديال ل produit الكود ديال الملف هو :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Js Ecommerce</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Ecommerce Js</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarColor03">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Panier
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <div id="sopping-list">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Image</th>
                                        <th>Libellé</th>
                                        <th>Prix</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <hr>
                            <p class="lead"><span id="total" class="mx-auto badge badge-danger"></span></p>
                            <a href="#" class="btn btn-primary btn-block" id="clear">Vider</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <div class="container">
        <div class="jumbotron mt-4 mb-4">
            <h1 class="display-3">Ecommerce Js</h1>
            <p class="lead">Des offres spéciales à partir de 1000 DH</p>
            <hr class="my-2">
            <p class="lead">
                <a class="btn btn-primary btn-lg" href="#" role="button">Détails</a>
            </p>
        </div>
        <div class="row mt-4">
            <div class="col-md-3">
                <div class="card mb-3 p-3 bg-white">
                    <img class="mb-2" style="height: 200px; width: 100%; display: block;" src="images/samsung.jpg" alt="Card image">
                    <hr class="my-2">
                    <h3 class="card-subtitle mb-3 mt-2 text-muted">Samsung S4</h3>
                    <hr class="my-2">
                    <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                    <p class="float-left"><strike>2000 DH</strike></p>
                    <p id="price" class="text-center bg-danger text-white p-1">1499 DH</p> 
                    <a href="#" class="btn btn-primary btn-block" id="add-to-list" data-id="1">Ajouter au panier</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card mb-3 p-3 bg-white">
                    <img class="mb-2" style="height: 200px; width: 100%; display: block;" src="images/samsung.jpg" alt="Card image">
                    <hr class="my-2">
                    <h3 class="card-subtitle mb-3 mt-2 text-muted">Samsung S8</h3>
                    <hr class="my-2">
                    <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                    <p class="float-left"><strike>9000 DH</strike></p>
                    <p id="price" class="text-center bg-danger text-white p-1">8499 DH</p> 
                    <a href="#" class="btn btn-primary btn-block" id="add-to-list" data-id="2">Ajouter au panier</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card mb-3 p-3 bg-white">
                    <img class="mb-2" style="height: 200px; width: 100%; display: block;" src="images/iphone.jpg" alt="Card image">
                    <hr class="my-2">
                    <h3 class="card-subtitle mb-3 mt-2 text-muted">Iphone 8</h3>
                    <hr class="my-2">
                    <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                    <p class="float-left"><strike>10000 DH</strike></p>
                    <p id="price" class="text-center bg-danger text-white p-1">9499 DH</p> 
                    <a href="#" class="btn btn-primary btn-block" id="add-to-list" data-id="3">Ajouter au panier</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card mb-3 p-3 bg-white">
                    <img class="mb-2" style="height: 200px; width: 100%; display: block;" src="images/htc_one.jpg" alt="Card image">
                    <hr class="my-2">
                    <h3 class="card-subtitle mb-3 mt-2 text-muted">HTC ONE</h3>
                    <hr class="my-2">
                    <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                    <p class="float-left"><strike>2000 DH</strike></p>
                    <p id="price" class="text-center bg-danger text-white p-1">1799 DH</p> 
                    <a href="#" class="btn btn-primary btn-block" id="add-to-list" data-id="4">Ajouter au panier</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card mb-3 p-3 bg-white">
                    <img class="mb-2" style="height: 200px; width: 100%; display: block;" src="images/toshiba.jpg" alt="Card image">
                    <hr class="my-2">
                    <h3 class="card-subtitle mb-3 mt-2 text-muted">TOSHIBA</h3>
                    <hr class="my-2">
                    <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                    <p class="float-left"><strike>4000 DH</strike></p>
                    <p id="price" class="text-center bg-danger text-white p-1">3299 DH</p> 
                    <a href="#" class="btn btn-primary btn-block" id="add-to-list" data-id="5">Ajouter au panier</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card mb-3 p-3 bg-white">
                    <img class="mb-2" style="height: 200px; width: 100%; display: block;" src="images/diesel.jpg" alt="Card image">
                    <hr class="my-2">
                    <h3 class="card-subtitle mb-3 mt-2 text-muted">DELL</h3>
                    <hr class="my-2">
                    <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                    <p class="float-left"><strike>7000 DH</strike></p>
                    <p id="price" class="text-center bg-danger text-white p-1">4999 DH</p> 
                    <a href="#" class="btn btn-primary btn-block" id="add-to-list" data-id="6">Ajouter au panier</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card mb-3 p-3 bg-white">
                    <img class="mb-2" style="height: 200px; width: 100%; display: block;" src="images/toyota.jpg" alt="Card image">
                    <hr class="my-2">
                    <h3 class="card-subtitle mb-3 mt-2 text-muted">MACBOOK</h3>
                    <hr class="my-2">
                    <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                    <p class="float-left"><strike>12000 DH</strike></p>
                    <p id="price" class="text-center bg-danger text-white p-1">11499 DH</p> 
                    <a href="#" class="btn btn-primary btn-block" id="add-to-list" data-id="7">Ajouter au panier</a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card mb-3 p-3 bg-white">
                    <img class="mb-2" style="height: 200px; width: 100%; display: block;" src="images/jetta.jpg" alt="Card image">
                    <hr class="my-2">
                    <h3 class="card-subtitle mb-3 mt-2 text-muted">HP</h3>
                    <hr class="my-2">
                    <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                    <p class="float-left"><strike>2000 DH</strike></p>
                    <p id="price" class="text-center bg-danger text-white p-1">1699 DH</p> 
                    <a href="#" class="btn btn-primary btn-block" id="add-to-list" data-id="8">Ajouter au panier</a>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="container mt-3">
            <div class="text-center">
                <p class="lead">©DCoding 2018.</p>
            </div>
        </div>
    </footer>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <script src="js/main.js"></script>
</body>
</html>
                            

2- إضافة كود javascript

فالملف main.js غادي نسترجع  les éléments بل id ديالهم كنسترجع table فين غادي تزاد ل panier منبعد كنديكلاري variable total فيها غادي يكون المجموع ديال les produits.

منبعد كنخدم ب for باش كندور على les boutons ajouter au panier كاملين وكل مرة كليكا المستخدم على شي bouton كنفذ ل fonction BuyProducts.
هاد ل fonction كتسترجع ل parent ديال ل bouton لي هو ل card لي فيها جميع المعلومات الخاصة به وكترسلها لل fonction getProductInfo.
هاد ل fonction كن créer بها objet كنعطيه المعلومات الخاصة بل produit من بعد كنعطيه لل fonction addToCart.
هاد ل fonction كن créer بها tr لي هو سطر ديال table كنزيد فيه ل produit لي جاني منبعد كنزيد tr لي زدت ل tbody لي هو body ديال la table لي هي ل panier.
وكل مرة تزاد شي produit كنزيد الثمن ديالو فل variable total منبعد كنعطي ل produit ل fonction saveProduct.
هاد ل fonction لي كتسترجع les produits من local storage بواسطة ل fonction getProducts منبعد كتزيد ل produit لي عطيناها ف local storage.

منبعد كنزيد ل tbody ملي نكليكي عليها كتنفذ ل fonction removeProduct هاد ل fonction كتسترجع الرابط لي عندو la classe delete لي هو لي فيه العلامة الحمرة منبعد كتسترجع ل id ديال ل produit لي زدناه ب data-id منبعد كنسترجع les produits كاملين وكنخدم ب foreach وكن tester يلا كان ل id ديال ل produit كيساوي ل id ديال ل produit لي بغيت نمسح كنمسحو وكنقص ثمنو من المجموع وكنعاود نزيد la liste ديال les produits لي بقات لي ل local storage.
منبعد ملي كنكليكي على vider كتنفذ ل fonction clearCart لي كتخوي ل panier وكترد total كيساوي صفر.
الكود ديال الملف هو :

                                const products = document.querySelectorAll('#add-to-list');
const shoppingList = document.querySelector('#sopping-list');
const table = shoppingList.querySelector('table');
const tbody = table.querySelector('tbody');
const clearBtn = document.querySelector('#clear');
const totalM = document.getElementById('total');
let total = 0;

for(var i = 0;i < products.length;i++){
    products[i].addEventListener('click',BuyProducts);
}
//show cart
document.addEventListener('DOMContentLoaded',showCart);

function showCart(){
    let products = getProducts();
    products.forEach(product => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <th><img style="height: 50px; width: 100%; display: block;" src="${product.img}"></th>
            <th>${product.title}</th>
            <th>${product.price}</th>
            <th><a href="#" class="badge badge-danger delete" data-id="${product.id}">X</a></th>
        `;
        tbody.appendChild(row);
        total = total + parseInt(product.price);
        totalM.innerHTML = `${total} DH`;
    });
}
function BuyProducts(e){
    e.preventDefault();
    const product = e.target.parentElement;
    getProductInfo(product);
}
function getProductInfo(product){
    const productInfo = {
        img : product.querySelector('img').src,
        title : product.querySelector('h3').textContent,
        price : product.querySelector('#price').textContent,
        id : product.querySelector('a').getAttribute('data-id')
    };
    addToCart(productInfo);
}
function addToCart(productInfo){
    const row = document.createElement('tr');
    row.innerHTML = `
        <th><img style="height: 50px; width: 100%; display: block;" src="${productInfo.img}"></th>
        <th>${productInfo.title}</th>
        <th>${productInfo.price}</th>
        <th><a href="#" class="badge badge-danger delete" data-id="${productInfo.id}">X</a></th>
        `;
    tbody.appendChild(row);
    total = total + parseInt(productInfo.price);
    totalM.innerHTML = `${total} DH`;
    //save to local storage
    saveProduct(productInfo);
}
//add product
function saveProduct(productInfo){
    let products = getProducts();
    products.push(productInfo);
    localStorage.setItem('products',JSON.stringify(products));
}
//get all products from local storage
function getProducts(){
    let products;
    if(localStorage.getItem('products') === null){
        products = [];
    }else{
        products = JSON.parse(localStorage.getItem('products'));
    }
    return products;
}
//remove from cart
tbody.addEventListener('click',removeProduct);

function removeProduct(e){
    let prodcutsList,product,productId;
    if(e.target.classList.contains('delete')){
        e.target.parentElement.parentElement.remove();
        product =  e.target.parentElement.parentElement;
        productId = product.querySelector('a').getAttribute('data-id');
    }
    //remove product from local storage
    prodcutsList = getProducts();
    prodcutsList.forEach((product,index)=>{
        if(product.id === productId){
            prodcutsList.splice(index,1);
            total = total - parseInt(product.price);
            totalM.innerHTML = `${total} DH`;
        }
    });
    localStorage.setItem('products',JSON.stringify(prodcutsList));
}
//clean cart
clearBtn.addEventListener('click',clearCart);

function clearCart(){
    while(tbody.firstChild){
        tbody.removeChild(tbody.firstChild);
    }
    localStorage.clear();
    totalM.innerHTML = '';
}
                            

3- إضافة css للملف ديالنا

باش نزيد style css كنمشي للملف style.css فيه غادي نزيد des styles لي خدمت بهم الكود ديال الملف هو :

                                body{
    background-color: aliceblue;
}
.jumbotron{
    background-color: blanchedalmond;
}
                            


بحث في الموقع


إشترك للتوصل بالجديد