پروژه فروشگاه اینترنتی با جاوااسکریپت - رسید خرید

🎯 اهداف این بخش

طراحی و پیاده سازی بخش رسید خرید
نمایش اطلاعات کامل سفارش
محاسبه جمع کل سبد خرید
ذخیره اطلاعات سفارش در localStorage
چاپ رسید خرید

📌 ساختار HTML رسید خرید

ابتدا بخش HTML مربوط به رسید خرید را ایجاد می‌کنیم:

html

            <div id="receipt-container">
    <h2>رسید خرید h2>
    <div id="receipt-details">
        <p>شماره سفارش: <span id="order-id">span>p>
        <p>تاریخ سفارش: <span id="order-date">span>p>
    div>
    <table id="receipt-items">
        <thead>
            <tr>
                <th>نام محصولth>
                <th>تعدادth>
                <th>قیمت واحدth>
                <th>جمعth>
            tr>
        thead>
        <tbody>tbody>
    table>
    <div id="receipt-total">
        <p>جمع کل: <span id="total-amount">span> تومانp>
    div>
    <button id="print-receipt" class="btn">چاپ رسیدbutton>
div>

            

توضیحات ساختار:

receipt-container: محفظه اصلی رسید خرید
receipt-details: اطلاعات کلی سفارش مانند شماره و تاریخ
receipt-items: جدول محصولات خریداری شده
receipt-total: مبلغ نهایی پرداختی

📌 پیاده‌سازی جاوااسکریپت

حالا نوبت به پیاده‌سازی منطق نمایش رسید خرید می‌رسد:

javascript

            function generateReceipt(cartItems) {
    // ایجاد شماره سفارش تصادفی
    const orderId = 'ORD-' + Math.floor(Math.random() * 1000000);
    const orderDate = new Date().toLocaleDateString('fa-IR');
    let totalAmount = 0;
    // پر کردن اطلاعات سفارش
    document.getElementById('order-id').textContent = orderId;
    document.getElementById('order-date').textContent = orderDate;
    // پر کردن جدول محصولات
    const receiptTable = document.getElementById('receipt-items').getElementsByTagName('tbody')[0];
    receiptTable.innerHTML = '';
    cartItems.forEach(item => {
        const row = receiptTable.insertRow();
        const itemTotal = item.price * item.quantity;
        totalAmount += itemTotal;
        row.innerHTML = `
            <td>${item.name}</td>
            <td>${item.quantity}</td>
            <td>${item.price.toLocaleString('fa-IR')} تومان</td>
            <td>${itemTotal.toLocaleString('fa-IR')} تومان</td>
        `;
    });
    // نمایش جمع کل
    document.getElementById('total-amount').textContent = totalAmount.toLocaleString('fa-IR');
    // ذخیره اطلاعات سفارش
    const orderData = {
        id: orderId,
        date: orderDate,
        items: cartItems,
        total: totalAmount
    };
    localStorage.setItem('lastOrder', JSON.stringify(orderData));
    // نمایش رسید
    document.getElementById('receipt-container').style.display = 'block';
}

            

توضیحات کد:

generateReceipt: تابع اصلی برای تولید رسید خرید
orderId: ایجاد یک شماره سفارش تصادفی
orderDate: نمایش تاریخ فعلی به فرمت فارسی
receiptTable: پر کردن جدول محصولات با اطلاعات سبد خرید
localStorage: ذخیره اطلاعات سفارش برای استفاده بعدی

📌 قابلیت چاپ رسید

برای اضافه کردن قابلیت چاپ رسید، کد زیر را به پروژه اضافه می‌کنیم:

javascript

            document.getElementById('print-receipt').addEventListener('click', function() {
    // ایجاد یک پنجره جدید برای چاپ
    const printWindow = window.open('', '_blank');
    const receiptContent = document.getElementById('receipt-container').innerHTML;
    // استایل‌های مورد نیاز برای چاپ
    const printStyles = `
        <style>
            body { font-family: Tahoma, sans-serif; direction: rtl; padding: 20px; }
            h2 { color: #333; text-align: center; }
            table { width: 100%; border-collapse: collapse; margin: 15px 0; }
            th, td { padding: 8px; text-align: right; border: 1px solid #ddd; }
            th { background-color: #f5f5f5; }
            #receipt-total { font-weight: bold; text-align: left; margin-top: 20px; }
            @media print {
                button { display: none; }
            }
        </style>
    `;
    printWindow.document.write('<html><head><title>رسید خرید</title>' + printStyles + '</head><body>');
    printWindow.document.write(receiptContent);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    // فعال کردن چاپ پس از بارگذاری محتوا
    printWindow.onload = function() {
        printWindow.print();
    };
});

            

ویژگی‌های قابلیت چاپ:

پنجره جدید: ایجاد یک پنجره مجزا برای چاپ رسید
استایل‌های چاپ: طراحی مناسب برای چاپ با حذف دکمه‌های غیرضروری
راست‌چین: پشتیبانی از زبان فارسی با direction: rtl
خودکار: فعال شدن پنجره چاپ بلافاصله پس از بارگذاری

📌 بهبودهای پیشنهادی

برای توسعه بیشتر این بخش می‌توانید موارد زیر را پیاده‌سازی کنید:

javascript

            // 1. افزودن آدرس و اطلاعات مشتری
function addCustomerInfo(name, address, phone) {
    const customerDiv = document.createElement('div');
    customerDiv.innerHTML = `
        <h3>اطلاعات مشتری</h3>
        <p>نام: ${name}</p>
        <p>آدرس: ${address}</p>
        <p>تلفن: ${phone}</p>
    `;
    document.getElementById('receipt-details').appendChild(customerDiv);
}
// 2. افزودن کد QR برای پیگیری سفارش
function addQRCode(orderId) {
    const qrDiv = document.createElement('div');
    qrDiv.innerHTML = `
        <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${orderId}" 
             alt="QR Code" style="display: block; margin: 10px auto;">
        <p style="text-align: center;">برای پیگیری سفارش اسکن کنید</p>
    `;
    document.getElementById('receipt-container').appendChild(qrDiv);
}

            

ایده‌های توسعه:

اطلاعات مشتری: ذخیره و نمایش اطلاعات خریدار
QR Code: ایجاد کد QR برای پیگیری سفارش
تاریخچه سفارشات: نمایش تمام سفارشات قبلی کاربر
ارسال ایمیل: ارسال رسید به ایمیل مشتری
PDF: تولید نسخه PDF از رسید

📌 جمع‌بندی

در این بخش یاد گرفتیم چگونه:

یک رسید خرید حرفه‌ای طراحی کنیم
اطلاعات سفارش را به درستی نمایش دهیم
جمع کل سبد خرید را محاسبه و نمایش دهیم
اطلاعات سفارش را در localStorage ذخیره کنیم
قابلیت چاپ رسید را پیاده‌سازی کنیم

📌 قدم بعدی

در بخش بعدی با سیستم مدیریت سفارشات و پنل کاربری آشنا خواهیم شد!

❮ خانه بخش بعدی ❯