اضافة الى السلة

Zen Eddin Allaham · 1 يونيو

اريد عند الضغط على زر "اضافة الى السلة" يتم اضافتها في السلة التي في الاعلى بستخدام JS

بلال زيادة · 1 يونيو

سنحتاج إلى تعديل ملف index.js وإضافة بعض التعديلات على ملف index.html للتأكد من أن كل زر "أضف إلى السلة" مرتبط بالعنصر الصحيح.

نحتاج إلى إضافة معرفات أو بيانات (data attributes) لكل زر "أضف إلى السلة" لتحديد العنصر الذي سيتم إضافته إلى السلة. سنضيف data attributes لتخزين اسم العنصر والسعر.

في قسم القائمة

 <section class="menu" id="menu">

قم بتعديل كل زر "أضف إلى السلة" كالتالي:

<button class="btn add-to-cart" data-name="لذيذ وصحي" data-price="15.99">أضف الى السلة</button>

كرر هذا لكل عنصر في القائمة. يمكنك تغيير data-name إذا كنت تريد أسماء مختلفة لكل عنصر، لكن في حالتك جميعها نفس الاسم "لذيذ وصحي". إذا كنت تريد تمييز العناصر، يمكنك إعطاء كل واحد اسمًا فريدًا، مثل:

<button class="btn add-to-cart" data-name="لذيذ وصحي 1" data-price="15.99">أضف الى السلة</button>
<button class="btn add-to-cart" data-name="لذيذ وصحي 2" data-price="15.99">أضف الى السلة</button>
<!-- وهكذا -->

سنضيف كودًا في index.js للتعامل مع النقر على زر "أضف إلى السلة"، وإضافة العنصر إلى السلة في الأعلى. أضف الكود التالي إلى نهاية ملف index.js:

// اختيار جميع أزرار "أضف إلى السلة"
const addToCartButtons = document.querySelectorAll('.add-to-cart');

// اختيار حاوية العناصر في السلة
const cartItemsContainer = document.querySelector('.cart-items-container');

// عند الضغط على أي زر "أضف إلى السلة"
addToCartButtons.forEach(button => {
    button.addEventListener('click', () => {
        // استخراج اسم العنصر والسعر من الـ data attributes
        const itemName = button.getAttribute('data-name');
        const itemPrice = button.getAttribute('data-price');

        // إنشاء عنصر جديد في السلة
        const cartItem = document.createElement('div');
        cartItem.classList.add('cart-item');

        // إضافة محتوى العنصر (الصورة، الاسم، السعر، زر الحذف)
        cartItem.innerHTML = `
            <span class="fas fa-times"></span>
            <img src="coffee-cup.png" alt=""> <!-- تأكد من وجود الصورة الصحيحة -->
            <div class="content">
                <h3>${itemName}</h3>
                <div class="price">$${itemPrice}/-</div>
            </div>
        `;

        // إضافة العنصر إلى السلة
        cartItemsContainer.insertBefore(cartItem, cartItemsContainer.querySelector('.btn'));

        // إضافة وظيفة الحذف عند الضغط على زر "fa-times"
        const removeButton = cartItem.querySelector('.fa-times');
        removeButton.addEventListener('click', () => {
            cartItem.remove();
        });

        // فتح السلة تلقائيًا بعد الإضافة
        cartItemsContainer.classList.add('active');
        navbar.classList.remove('active');
        searchForm.classList.remove('active');
    });
});

في الكود استخدمنا coffee-cup.png كصورة افتراضية للعنصر المضاف إلى السلة، إذا كنت تريد استخدام نفس الصور الموجودة في القائمة، يمكنك إضافة data-img إلى زر "أضف إلى السلة" كالتالي

<button class="btn add-to-cart" data-name="لذيذ وصحي 1" data-price="15.99" data-img="path/to/image.jpg">أضف الى السلة</button>

ثم قم بتعديل الكود في index.js لاستخدام الصورة

const itemImage = button.getAttribute('data-img');
cartItem.innerHTML = `
    <span class="fas fa-times"></span>
    <img src="${itemImage}" alt="">
    <div class="content">
        <h3>${itemName}</h3>
        <div class="price">$${itemPrice}/-</div>
    </div>
`;

Zen Eddin Allaham · 1 يونيو

هل يمكنك ارفاق لي الملف بعد تعديله لان الامور ليست واضحة

بلال زيادة · 1 يونيو

بتاريخ 3 دقائق مضت قال Hxfhf Ucicic:

هل يمكنك ارفاق لي الملف بعد تعديله لان الامور ليست واضحة

هذه هي الملفات

index.html index.js style.css

Zen Eddin Allaham · 1 يونيو

اريد ايضاً عند ضغط على زر الخروج يخرج وعند ضغط على x يحذف العنصر

بلال زيادة · 1 يونيو

يمكنك المحاولة في تنفيذ حذف العنصر و إذا واجهتك أي مشكلة يمكنك ارفاقها لنقوم بمساعدتك في حلها

Zen Eddin Allaham · 1 يونيو

حاولت برمجة زر "خروج الان" ولكن لم يعمل

بلال زيادة · 1 يونيو

بتاريخ الآن قال Hxfhf Ucicic:

حاولت برمجة زر "خروج الان" ولكن لم يعمل

يرجى إرفاق الملفات و اخر ما توصلت إليه من تحديثات

Zen Eddin Allaham · 1 يونيو

coffee.zip

بلال زيادة · 1 يونيو

بتاريخ 2 دقائق مضت قال Hxfhf Ucicic:

coffee.zip 993.82 kB · 0 تنزيلات

في index.html، سأضيف data attributes لأزرار "أضف إلى السلة" لتسهيل إضافتها إلى السلة مع الصور، ثم سأضيف معرفًا (ID) لزر "الخروج الآن" لتسهيل التعامل معه في JavaScript.

<script type="text/javascript">
        var gk_isXlsx = false;
        var gk_xlsxFileLookup = {};
        var gk_fileData = {};
        function filledCell(cell) {
          return cell !== '' && cell != null;
        }
        function loadFileData(filename) {
        if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
            try {
                var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
                var firstSheetName = workbook.SheetNames[0];
                var worksheet = workbook.Sheets[firstSheetName];

                // Convert sheet to JSON to filter blank rows
                var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
                // Filter out blank rows (rows where all cells are empty, null, or undefined)
                var filteredData = jsonData.filter(row => row.some(filledCell));

                // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
                var headerRowIndex = filteredData.findIndex((row, index) =>
                  row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
                );
                // Fallback
                if (headerRowIndex === -1 || headerRowIndex > 25) {
                  headerRowIndex = 0;
                }

                // Convert filtered JSON back to CSV
                var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
                csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
                return csv;
            } catch (e) {
                console.error(e);
                return "";
            }
        }
        return gk_fileData[filename] || "";
        }
        </script><!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffee Shopping</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <header class="header">
        <a href="#" class="logo"><img src="logo.png" alt="Logo"></a>
        <nav class="navbar">
            <a href="#home">الرئيسية</a>
            <a href="#about">معلومات</a>
            <a href="#products">المنتجات</a>
            <a href="#menu">قائمة</a>
            <a href="#review">مراجعة</a>
            <a href="#blogs">المدونات</a>
        </nav>
        <div class="icons">
            <div id="menu-btn" class="fas fa-bars"></div>
            <div id="search-btn" class="fas fa-search"></div>
            <div id="cart-btn" class="fas fa-shopping-cart"></div>
        </div>
        <div class="search-form">
            <input type="search" id="search-box" placeholder="ابحث هنا...">
            <label for="search-box" class="fas fa-search"></label>
        </div>
        <div class="cart-items-container">
            <div class="cart-item" id="cart-item-1">
                <span class="fas fa-times"></span>
                <img src="coffee-cup.png" alt="">
                <div class="content">
                    <h3>عنصر العربة 01</h3>
                    <div class="price">$15.99/-</div>
                </div>
            </div>
            <div class="cart-item" id="cart-item-2">
                <span class="fas fa-times"></span>
                <img src="coffee-cup.png" alt="">
                <div class="content">
                    <h3>عنصر العربة 02</h3>
                    <div class="price">$15.99/-</div>
                </div>
            </div>
            <div class="cart-item" id="cart-item-3">
                <span class="fas fa-times"></span>
                <img src="coffee-cup.png" alt="">
                <div class="content">
                    <h3>عنصر العربة 03</h3>
                    <div class="price">$15.99/-</div>
                </div>
            </div>
            <div class="cart-item" id="cart-item-4">
                <span class="fas fa-times"></span>
                <img src="coffee-cup.png" alt="">
                <div class="content">
                    <h3>عنصر العربة 04</h3>
                    <div class="price">$15.99/-</div>
                </div>
            </div>
            <a href="#" class="btn" id="checkout-btn">الخروج الان</a>
        </div>
    </header>

    <section class="home" id="home">
        <div class="content">
            <h3>قهوة طازجة في الصباح</h3>
            <p>Coffee Shopping اهلا وسهلا بكم في متجر</p>
            <a href="#menu" class="btn">احصل على منتجك الان</a>
        </div>
    </section>

    <section class="about" id="about">
        <h1 class="heading"><span>معلومات</span></h1>
        <div class="row">
            <div class="image">
                <img src="about-img.jpeg" alt="">
            </div>
            <div class="content">
                <h3>ما الذي يجعل قهوتنا مميزة ؟</h3>
                <p>قهوتنا بشكل عام رائعا ومذاقهة يعيدك الى الحياة بشكل ايجابي وعلماً</p>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat rem explicabo ipsam eaque repudiandae voluptas molestiae. Velit consequatur tempora cum tempore? Vel doloribus earum saepe debitis odio iusto ipsum ut.</p>
                <a href="#" class="btn">ابحث اكثر</a>
            </div>
        </div>
    </section>

    <section class="menu" id="menu">
        <h1 class="heading"><span>القائمة لدينا</span></h1>
        <div class="box-container">
            <div class="box">
                <img src="menu-1.png" alt="">
                <h3>لذيذ و طازج</h3>
                <div class="price">$15.99 <span>$20.99</span></div>
                <button class="btn add-to-cart" data-name="لذيذ و طازج" data-price="15.99" data-img="menu-1.png">أضف الى السلة</button>
            </div>
            <div class="box">
                <img src="menu-2.png" alt="">
                <h3>لذيذ وصحي</h3>
                <div class="price">$15.99 <span>$20.99</span></div>
                <button class="btn add-to-cart" data-name="لذيذ وصحي 2" data-price="15.99" data-img="menu-2.png">أضف الى السلة</button>
            </div>
            <div class="box">
                <img src="menu-3.png" alt="">
                <h3>لذيذ وصحي</h3>
                <div class="price">$15.99 <span>$20.99</span></div>
                <button class="btn add-to-cart" data-name="لذيذ وصحي 3" data-price="15.99" data-img="menu-3.png">أضف الى السلة</button>
            </div>
            <div class="box">
                <img src="menu-4.png" alt="">
                <h3>لذيذ وصحي</h3>
                <div class="price">$15.99 <span>$20.99</span></div>
                <button class="btn add-to-cart" data-name="لذيذ وصحي 4" data-price="15.99" data-img="menu-4.png">أضف الى السلة</button>
            </div>
            <div class="box">
                <img src="menu-5.png" alt="">
                <h3>لذيذ وصحي</h3>
                <div class="price">$15.99 <span>$20.99</span></div>
                <button class="btn add-to-cart" data-name="لذيذ وصحي 5" data-price="15.99" data-img="menu-5.png">أضف الى السلة</button>
            </div>
            <div class="box">
                <img src="menu-6.png" alt="">
                <h3>لذيذ وصحي</h3>
                <div class="price">$15.99 <span>$20.99</span></div>
                <button class="btn add-to-cart" data-name="لذيذ وصحي 6" data-price="15.99" data-img="menu-6.png">أضف الى السلة</button>
            </div>
        </div>
    </section>

    <section class="products" id="products">
        <h1 class="heading"><span>منتجاتنا</span></h1>
        <div class="box-container">
            <div class="box">
                <div class="icons">
                    <a href="#" class="fas fa-shopping-cart"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-eye"></a>
                </div>
                <div class="image">
                    <img src="p-1.jpg" alt="">
                </div>
                <div class="content">
                    <h3>قهوة طازجة</h3>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                    <div class="price">$15.99 <span>$20.99</span></div>
                </div>
            </div>
            <div class="box">
                <div class="icons">
                    <a href="#" class="fas fa-shopping-cart"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-eye"></a>
                </div>
                <div class="image">
                    <img src="p-2.jpg" alt="">
                </div>
                <div class="content">
                    <h3>قهوة طازجة</h3>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                    <div class="price">$15.99 <span>$20.99</span></div>
                </div>
            </div>
            <div class="box">
                <div class="icons">
                    <a href="#" class="fas fa-shopping-cart"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-eye"></a>
                </div>
                <div class="image">
                    <img src="p-3.jpg" alt="">
                </div>
                <div class="content">
                    <h3>قهوة طازجة</h3>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                    <div class="price">$15.99 <span>$20.99</span></div>
                </div>
            </div>
        </div>
    </section>

    <section class="review" id="review">
        <h1 class="heading"><span>مراجعة العملاء</span></h1>
        <div class="box-container">
            <div class="box">
                <p>مرحباً عند تجربتي لهذه القهوة الرائعة احسست بتركيز عال في العمل وزيادة الانتاجية وفعلا من افضل القهوة التي جربتها</p>
                <img src="pic-1.png" class="user" alt="">
                <h3>Jhon deo</h3>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
            </div>
            <div class="box">
                <p>مرحبا عند استيقاظ في الصباح وشرب تلك القهوة احسست بنشاط ومرونة وزيادة السعادة و الابداع فعلا تستحق الشراء</p>
                <img src="pic-2.png" class="user" alt="">
                <h3>Abbe rodz</h3>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
            </div>
            <div class="box">
                <p>مرحباً كنت بصراحة دائماً حزين لكن عند تجربت تلك القهوة احسست وكأني عدت الى الحياة مرة اخرى فعلا تجربة كانت رائعة</p>
                <img src="pic-3.png" class="user" alt="">
                <h3>Smith Owen</h3>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
            </div>
        </div>
    </section>

    <section class="contact" id="contact">
        <h1 class="heading"><span>تواصل معنا</span></h1>
        <a href="#" class="btn">لنبدأ بالتواصل</a>
    </section>

    <section class="blogs" id="blogs">
        <h1 class="heading"><span>مدونتنا</span></h1>
        <div class="box-container">
            <div class="box">
                <div class="image">
                    <img src="blog-1.jpg" alt="">
                </div>
                <div class="content">
                    <a href="#" class="title">قهوة لذيذة ومنعشة</a>
                    <span>تطوير المتجر من قبل ZN99</span>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto saepe laboriosam nulla unde qui. Veritatis, error pariatur autem consequuntur deserunt voluptatum aspernatur, illo natus provident dolorum similique qui officiis unde.</p>
                    <a href="#" class="btn">أقرأ المزيد</a>
                </div>
            </div>
            <div class="box">
                <div class="image">
                    <img src="blog-2.jpg" alt="">
                </div>
                <div class="content">
                    <a href="#" class="title">قهوة لذيذة ومنعشة</a>
                    <span>تطوير المتجر من قبل ZN99</span>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto saepe laboriosam nulla unde qui. Veritatis, error pariatur autem consequuntur deserunt voluptatum aspernatur, illo natus provident dolorum similique qui officiis unde.</p>
                    <a href="#" class="btn">أقرأ المزيد</a>
                </div>
            </div>
            <div class="box">
                <div class="image">
                    <img src="blog-3.jpg" alt="">
                </div>
                <div class="content">
                    <a href="#" class="title">قهوة لذيذة ومنعشة</a>
                    <span>تطوير المتجر من قبل ZN99</span>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto saepe laboriosam nulla unde qui. Veritatis, error pariatur autem consequuntur deserunt voluptatum aspernatur, illo natus provident dolorum similique qui officiis unde.</p>
                    <a href="#" class="btn">أقرأ المزيد</a>
                </div>
            </div>
        </div>
    </section>

    <div class="footer">
        <div class="links">
            <a href="#home">الرئيسية</a>
            <a href="#about">معلومات</a>
            <a href="#products">المنتجات</a>
            <a href="#menu">قائمة</a>
            <a href="#review">مراجعة</a>
            <a href="#blogs">المدونات</a>
        </div>
        <div class="credit">ZN99 تم انشاء المتجر بواسطة <span></span></div>
    </div>

    <script src="index.js"></script>
</body>
</html>

في index.js، سأحتفظ بوظيفة إضافة العناصر إلى السلة، ثم سأضيف وظيفة لحذف العنصر عند الضغط على أيقونة "X"، ثم سأضيف وظيفة لإفراغ السلة بالكامل عند الضغط على زر "الخروج الآن".

let navbar = document.querySelector('.navbar');
document.querySelector('#menu-btn').onclick = () => {
    navbar.classList.toggle('active');
    searchForm.classList.remove('active');
    cartItem.classList.remove('active');
}

let searchForm = document.querySelector('.search-form');
document.querySelector('#search-btn').onclick = () => {
    searchForm.classList.toggle('active');
    navbar.classList.remove('active');
    cartItem.classList.remove('active');
}

let cartItem = document.querySelector('.cart-items-container');
document.querySelector('#cart-btn').onclick = () => {
    cartItem.classList.toggle('active');
    navbar.classList.remove('active');
    searchForm.classList.remove('active');
}

window.onscroll = () => {
    navbar.classList.remove('active');
    searchForm.classList.remove('active');
    cartItem.classList.remove('active');
}

// إضافة وظيفة "أضف إلى السلة"
const addToCartButtons = document.querySelectorAll('.add-to-cart');
const cartItemsContainer = document.querySelector('.cart-items-container');

addToCartButtons.forEach(button => {
    button.addEventListener('click', () => {
        const itemName = button.getAttribute('data-name');
        const itemPrice = button.getAttribute('data-price');
        const itemImage = button.getAttribute('data-img');

        const cartItem = document.createElement('div');
        cartItem.classList.add('cart-item');

        cartItem.innerHTML = `
            <span class="fas fa-times"></span>
            <img src="${itemImage}" alt="">
            <div class="content">
                <h3>${itemName}</h3>
                <div class="price">$${itemPrice}/-</div>
            </div>
        `;

        cartItemsContainer.insertBefore(cartItem, cartItemsContainer.querySelector('#checkout-btn'));

        // إضافة وظيفة الحذف عند الضغط على "X"
        const removeButton = cartItem.querySelector('.fa-times');
        removeButton.addEventListener('click', () => {
            cartItem.remove();
        });

        cartItemsContainer.classList.add('active');
        navbar.classList.remove('active');
        searchForm.classList.remove('active');
    });
});

// وظيفة إفراغ السلة عند الضغط على "الخروج الآن"
const checkoutButton = document.querySelector('#checkout-btn');
checkoutButton.addEventListener('click', (e) => {
    e.preventDefault(); // منع السلوك الافتراضي للرابط
    const cartItems = cartItemsContainer.querySelectorAll('.cart-item');
    cartItems.forEach(item => item.remove());
});

اضافة الى السلة

السؤال

Zen Eddin Allaham

9 أجوبة على هذا السؤال

Recommended Posts

بلال زيادة

Zen Eddin Allaham

بلال زيادة

Zen Eddin Allaham

بلال زيادة

Zen Eddin Allaham

بلال زيادة

Zen Eddin Allaham

بلال زيادة

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية