فرادرسآموزش پروژه محور ساخت سبد خرید با جاوا اسکریپت – ساده و رایگان
زمانی که صحبت از توسعه تجربه خرید مُدرن مبتنی بر وب می‌شود، بحث استفاده از زبان برنامه نویسی جاوا اسکریپت به طور قطع به میان می‌آید. با جاوا اسکریپت می‌توان ابزارهای لازم را برای ایجاد تجربه خرید مطلوب و جذاب در اختیار داشت. از شخصی‌سازی صفحات خرید گرفته تا ایجاد سبدهای خرید زیبا و کاربردی، همه و همه با جاوا اسکریپت امکان پذیر است. همچنین انجام پروژه ساخت سبد خرید با جاوا اسکریپت می‌تواند تمرین و نمونه کار خیلی خوبی برای برنامه‌نویسان و توسعه‌دهندگان باشد. بنابراین در این آموزش پروژه محور جاوا اسکریپت از مجله فرادرس، قرار است به صورت عملی به آموزش سبد خرید با جاوا اسکریپت بپردازیم.
پیش نیاز ساخت سبد خرید با جاوا اسکریپت چیست؟
برای ایجاد سبد خرید با جاوا اسکریپت، درک خوبی از «HTML» ،«CSS» و جاوا اسکریپت نیاز است. همچنین برای ساخت سبدهای خرید در پروژه‌های واقعی، تسلط به نوعی زبان سمت سرور مانند «PHP»، «پایتون» و غیره برای ارائه عملکرد «بک‌اند» (Backend) مورد نیاز خواهد بود. علاوه بر این، برای ذخیره داده‌های سبد خرید و اطلاعات مشتری، کار با پایگاه داده و توانایی تعامل با آن نیز مورد نیاز است.
پروژه‌های ارائه شده در این آموزش ساخت سبد خرید با جاوا اسکریپت نسبتاً ساده هستند و کاربران تنها کافی است با HTML ،CSS و جاوا اسکریپت آشنایی داشته باشند.
آموزش ساخت سبد خرید با جاوا اسکریپت
ساخت سبد خرید با جاوا اسکریپت در این مطلب آموزشی نیازمند یک سری پیش‌نیاز اساسی است که به صورت فهرست موارد زیر هستند:
- آشنایی با HTML
- آشنایی با CSS
- آشنایی با جاوا اسکریپت
در ادامه قطعه کدهای مربوط به آموزش سبد خرید با جاوا اسکریپت آورده شده است و تحلیل و بررسی هر قطعه کد نیز در پایین آن بیان خواهد شد. قبل از اینکه به دنبال این آموزش پروژه محور جاوا اسکریپت برویم، کاربرانی که قصد سفارشی‌سازی این سبد خرید را داشته باشند باید به نکات زیر در این رابطه توجه کنند.
- فایل products.js را باید ویرایش و جزئیات محصول شخصی را در آن وارد کرد.
- تصاویر محصول را باید در پوشه images قرار داد.
- فایل cart.html باید مقداردهی اولیه شود و در آن به‌جای file:// از http:// استفاده کرد.
- در نهایت، باید شیوه پرداخت را در cart.js ، بخش H تکمیل کرد.
ساختار پوشه پروژه فرضی در این مثال به صورت تصویر زیر است:
قطعه کد HTML ساخت سبد خرید
قطعه HTML آموزش سبد خرید با جاوا اسکریپت به صورت زیر است:
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>آموزش ساخت سبد خرید با جاوا اسکریپت - مجله فرادرس</title>
5 <meta charset="utf-8">
6 <link rel="stylesheet" href="cart.css">
7 <script src="products.js"></script>
8 <script src="cart.js"></script>
9 </head>
10 <body>
11 <!-- (A) CART -->
12 <div id="cart-wrap">
13 <!-- (A1) PRODUCTS LIST -->
14 <div id="cart-products"></div>
15
16 <!-- (A2) CURRENT CART ITEMS -->
17 <div id="cart-items"></div>
18 </div>
19
20 <!-- (B) TEMPLATES -->
21 <!-- (B1) PRODUCT CELL -->
22 <template id="template-product">
23 <div class="p-item">
24 <img class="p-img">
25 <div class="p-info">
26 <div class="p-txt">
27 <div class="p-name"></div>
28 <div class="p-price"></div>
29 </div>
30 <button class="cart p-add">+</button>
31 </div>
32 </div>
33 </template>
34
35 <!-- (B2) CART ITEMS -->
36 <template id="template-cart">
37 <div class="c-item">
38 <input class="c-qty" type="number" min="0">
39 <div class="c-name"></div>
40 <button class="c-del cart">X</button>
41 </div>
42 </template>
43 <template id="template-cart-checkout">
44 <div class="c-go">
45 <button class="c-empty cart" onclick="cart.nuke()">خالی کردن سبد خرید</button>
46 <button class="c-checkout cart" onclick="cart.checkout()">پرداخت هزینه</button>
47 </div>
48 </template>
49 </body>
50</html>قطعه کد بالا نوعی سند HTML با یک div برای نمایش فهرست محصولات، یک div دیگر برای نمایش اقلام فعلی سبد خرید و سپس ۲ الگو برای سلول محصول و اقلام سبد خرید است. الگوی سلول محصول شامل تصویر، توضیحات و دکمه‌ای برای افزودن محصول به سبد خرید خواهد بود.
الگوی اقلام سبد خرید شامل ورودی مقدار، توضیحات کالا و دکمه‌ای برای حذف کالا از سبد خرید است. در نهایت، الگوی پرداخت سبد خرید شامل دو دکمه می‌شود، یکی برای خالی کردن سبد خرید و دیگری برای پرداخت هزینه اقلام. در کل div - ها در قطعه کد بالا دو مورد زیر هستند:
- div id="cart-produc ts" حاوی لیست محصولات.
- div id="cart-items" برای نمایش اقلام فعلی در سبد خرید.
کد جاوا اسکریپت ساخت سبد خرید
کدهای جاوا اسکریپت در این آموزش پروژه محور ساخت سبد خرید در دو فایل products.js و cart.js قرار خواهند گرفت که در ادامه، کدهای هر دو فایل همراه با توضیحات مربوطه ارائه شده‌اند.
فایل products.js
فایل products.js در این آموزش سبد خرید با جاوا اسکریپت حاوی کدهای زیر است:
1// DUMMY PRODUCTS (PRODUCT ID : DATA)
2var products = {
3 123: {
4 name : " 1 کرم ضد آفتاب",
5 img : "sun cream-1.webp",
6 price : 123000
7 },
8 124: {
9 name : "کرم ضد آفتاب 2",
10 img : "sun cream-2.webp",
11 price : 150000
12 }
13};قطعه کد بالا نوعی شی جاوا اسکریپت حاوی دو محصول ساختگی با شناسه، نام، تصویر و قیمت آن است. از این محصولات ساختگی می‌توان برای آزمایش عملکرد سبد خرید استفاده کرد.
فایل cart.js
در این مرحله از آموزش ساخت سبد خرید با جاوا اسکریپت نوبت به ساخت فایل اصلی به نام cart.js خواهد رسید.
در ادامه این فایل به صورت بخش به بخش بررسی و فرایند ساخت سبد خرید تحلیل خواهد شد. بخش اول این فایل حاوی کدهای زیر است:
1var cart = {
2 // (A) PROPERTIES
3 hPdt : null, // html products list
4 hItems : null, // html current cart
5 items : {}, // current items in cart
6 iURL : "images/", // product image url folder
7 currency : "<b>IRR</b> ", // currency symbol
8 total : 0, // total amount
9};در قطعه کد بالا، شی var cart حاوی ویژگی‌های مربوط به سبد خرید است که فهرست آن‌ها به صورت زیر خواهد بود:
- عنصر cart.hPdt برای نمایش فهرست محصولات
- عنصر hItems برای نمایش اقلام فعلی سبد خرید
- items برای موارد موجود در سبد خرید
- iURL برای مسیر پوشه تصاویر
- currency برای نشان دادن نماد پول
- total برای نشان دادن مبلغ کل
بخش بعدی قطعه کد فایل cart.js از این آموزش سبد خرید با جاوا اسکریپت مربوط به کار با محل ذخیره‌سازی خواهد بود که حاوی کدهای زیر است:
1// (B) LOCALSTORAGE CART
2// (B1) SAVE CURRENT CART INTO LOCALSTORAGE
3save : () => localStorage.setItem("cart", JSON.stringify(cart.items)),
4
5// (B2) LOAD CART FROM LOCALSTORAGE
6load : () => {
7 cart.items = localStorage.getItem("cart");
8 if (cart.items == null) { cart.items = {}; }
9 else { cart.items = JSON.parse(cart.items); }
10},
11
12// (B3) NUKE CART!
13nuke : () => { if (confirm("Empty cart?")) {
14 cart.items = {};
15 localStorage.removeItem("cart");
16 cart.list();
17}}قطعه کد بالا عملکردهایی را برای ذخیره، بارگیری و خالی کردن سبد خرید ذخیره شده در حافظه محلی ارائه می‌دهد. تابع save() آیتم‌های سبد خرید فعلی را با استفاده از متد setItem() در حافظه محلی ذخیره می‌کند. تابع load() داده‌ها را از حافظه محلی بازیابی کرده و آن را در cart.item تجزیه می‌کند.
در نهایت، تابع nuke() کل سبد خرید را در صورت تائید کاربر پاک خواهد کرد. بخش بعدی از این آموزش پروژه محور جاوا اسکریپت برای ساخت سبد خرید مربوط به راه‌اندازی و مقداردهی اولیه آن خواهد بود که قطعه کد آن به صورت زیر است:
1// (C) INITIALIZE
2init : () => {
3 // (C1) GET HTML ELEMENTS
4 cart.hPdt = document.getElementById("cart-products");
5 cart.hItems = document.getElementById("cart-items");
6
7 // (C2) DRAW PRODUCTS LIST
8 cart.hPdt.innerHTML = "";
9 let template = document.getElementById("template-product").content, p, item;
10 for (let id in cart.products) {
11 p = cart.products[id];
12 item = template.cloneNode(true);
13 item.querySelector(".p-img").src = cart.iURL + p.img;
14 item.querySelector(".p-name").textContent = p.name;
15 item.querySelector(".p-price").textContent = cart.currency + p.price.toFixed(2);
16 item.querySelector(".p-add").onclick = () => cart.add(id);
17 cart.hPdt.appendChild(item);
18 }
19
20 // (C3) LOAD CART FROM PREVIOUS SESSION
21 cart.load();
22
23 // (C4) LIST CURRENT CART ITEMS
24 cart.list();
25}قطعه کد داده شده عملکرد یا تابعی است که برای مقداردهی اولیه سبد خرید استفاده می‌شود و کارهای زیر را انجام می‌دهد.
- دریافت تمام عناصر HTML موردنیاز
- نمایش فهرست محصولات
- بارگیری سبد خرید از بازدید یا جلسه قبلی کاربر
- نمایش اقلام سبد خرید فعلی
در کدهای بالا تابع init() با دریافت عناصر cart-products و cart-item شروع خواهد شد که این عناصر به ترتیب به متغیرهای cart.hPdt و cart.hItems اختصاص داده می‌شوند. پس از آن، فهرست محصولات با استفاده از نوعی الگو و با کمک حلقه نمایش داده خواهد شد. این حلقه همچنین رویداد کلیک را برای کلاس p-add تنظیم می‌کند که برای افزودن موارد به سبد خرید استفاده می‌شود.
بعد، سبد خرید از جلسه یا بازدید قبلی کاربر بارگیری می‌شود. این کار با فراخوانی تابع cart.load() انجام خواهد شد و در نهایت، اقلام فعلی سبد خرید با فراخوانی تابع cart.list() فهرست می‌شوند. به طور کلی، این قطعه کد وظیفه مقداردهی اولیه سبد خرید و نمایش فهرست محصولات را بر عهده دارد.
بخش بعدی کدهای فایل cart.js مربوط به نمایش اقلام خواهد بود که به صورت زیر است:
1// (D) LIST CURRENT CART ITEMS (IN HTML)
2list : () => {
3 // (D1) RESET
4 cart.total = 0;
5 cart.hItems.innerHTML = "";
6 let item, empty = true;
7 for (let key in cart.items) {
8 if (cart.items.hasOwnProperty(key)) { empty = false; break; }
9 }
10
11 // (D2) CART IS EMPTY
12 if (empty) {
13 item = document.createElement("div");
14 item.innerHTML = "Cart is empty";
15 cart.hItems.appendChild(item);
16 }
17
18 // (D3) CART IS NOT EMPTY - LIST ITEMS
19 else {
20 let template = document.getElementById("template-cart").content, p;
21 for (let id in cart.items) {
22 p = cart.products[id];
23 item = template.cloneNode(true);
24 item.querySelector(".c-del").onclick = () => cart.remove(id);
25 item.querySelector(".c-name").textContent = p.name;
26 item.querySelector(".c-qty").value = cart.items[id];
27 item.querySelector(".c-qty").onchange = function () { cart.change(id, this.value); };
28 cart.hItems.appendChild(item);
29 cart.total += cart.items[id] * p.price;
30 }
31
32 // (D3-3) TOTAL AMOUNT
33 item = document.createElement("div");
34 item.className = "c-total";
35 item.id = "c-total";
36 item.innerHTML = `TOTAL: ${cart.currency}${cart.total}`;
37 cart.hItems.appendChild(item);
38
39 // (D3-4) EMPTY & CHECKOUT
40 item = document.getElementById("template-cart-checkout").content.cloneNode(true);
41 cart.hItems.appendChild(item);
42 }
43}از کدهای فوق برای فهرست کردن تمام اقلام سبد خرید در قالب HTML استفاده می‌شود. ابتدا مقدار کل را به 0 بازنشانی و عناصر HTML را پاک می‌کند. سپس بررسی خواهد کرد که آیا سبد خرید خالی است یا خیر و در این صورت پیامی به کاربر ارائه می‌کند. اگر سبد خالی نباشد، نوعی الگو ایجاد می‌شود و مقدار کل و دکمه پرداخت به سبد خرید اضافه خواهند شد.
در واقع کد بالا از شی Cart برای ذخیره همه اقلام و جزئیات آن‌ها استفاده می‌کند. سپس با استفاده از حلقه عناصر HTML را برای هر آیتم ایجاد خواهد کرد. در نهایت، کل مبلغ و دکمه‌های پرداخت به سبد خرید اضافه خواهند شد. بخش بعدی و نهایی کدهای فایل cart.js از این آموزش سبد خرید با جاوا اسکریپت مربوط به اقدامات سبد خرید است که به صورت قطعه کد زیر خواهد بود:
1// (E) ADD ITEM INTO CART
2add : id => {
3 if (cart.items[id] == undefined) { cart.items[id] = 1; }
4 else { cart.items[id]++; }
5 cart.save(); cart.list();
6},
7
8// (F) CHANGE QUANTITY
9change : (pid, qty) => {
10 // (F1) REMOVE ITEM
11 if (qty <= 0) {
12 delete cart.items[pid];
13 cart.save(); cart.list();
14 }
15
16 // (F2) UPDATE TOTAL ONLY
17 else {
18 cart.items[pid] = qty;
19 var total = 0;
20 for (let id in cart.items) {
21 cart.total += cart.items[id] * products[id].price;
22 document.getElementById("c-total").innerHTML = `TOTAL: ${cart.currency}${cart.total}`;
23 }
24 }
25},
26
27// (G) REMOVE ITEM FROM CART
28remove : id => {
29 delete cart.items[id];
30 cart.save();
31 cart.list();
32},
33
34// (H) CHECKOUT
35checkout : () => {
36 // SEND DATA TO SERVER
37 // CHECKS
38 // SEND AN EMAIL
39 // RECORD TO DATABASE
40 // PAYMENT
41 // WHATEVER IS REQUIRED
42 alert("TO DO");
43
44 /*
45 var data = new FormData();
46 data.append("cart", JSON.stringify(cart.items));
47 data.append("products", JSON.stringify(products));
48 data.append("total", cart.total);
49
50 fetch("SERVER-SCRIPT", { method:"POST", body:data })
51 .then(res=>res.text())
52 .then(res => console.log(res))
53 .catch(err => console.error(err));
54 */
55}قطعه کد بالا شامل چهار تابع اصلی است که وظیفه تعامل با سبد خرید را بر عهده دارند. این توابع به صورت موارد زیر هستند:
- add()
- change()
- remove()
- checkout()
توضیحات چهار تابع بالا به صورت زیر است:
- تابع add() محصول انتخاب شده را به سبد خرید اضافه کرده و بررسی می‌کند که آیا کالا از قبل در سبد خرید وجود دارد یا خیر و در صورت وجود، مقدار آن را افزایش می‌دهد. در نهایت این تابع، سبد خرید را ذخیره کرده و تابع list() را برای به‌روزرسانی صفحه‌نمایش سبد خرید فراخوانی می‌کند.
- تابع change() مقدار کالا را در سبد خرید تغییر می‌دهد. اگر total روی 0 تنظیم شود، کالا از سبد خرید حذف می‌شود. در غیر این صورت، total به‌روز خواهد شد تا مقدار جدید را منعکس کند.
- تابع remove() آیتم یا همان محصول را از سبد خرید حذف می‌کند. در واقع این تابع آیتم را از اقلام سبد خرید حذف کرده و سپس سبد خرید را ذخیره خواهد کرد و تابع remove() را برای به‌روزرسانی صفحه‌نمایش سبد خرید فراخوانی می‌کند.
- از تابع checkout() می‌توان برای ارسال سفارش به وسیله ایمیل، پیامک، ذخیره در پایگاه داده و غیره استفاده کرد.
قطعه کد اصلی و کلی فایل cart.js از آموزش سبد خرید با جاوا اسکریپت که حاوی عملکرد اصلی سبد خرید است، به صورت زیر خواهد بود:
1var cart = {
2 // (A) PROPERTIES
3 hPdt : null, // html products list
4 hItems : null, // html current cart
5 items : {}, // current items in cart
6 iURL : "images/", // product image url folder
7 currency : "<b>IRR</b> ", // currency symbol
8 total : 0, // total amount
9
10 // (B) LOCALSTORAGE CART
11 // (B1) SAVE CURRENT CART INTO LOCALSTORAGE
12 save : () => localStorage.setItem("cart", JSON.stringify(cart.items)),
13
14 // (B2) LOAD CART FROM LOCALSTORAGE
15 load : () => {
16 cart.items = localStorage.getItem("cart");
17 if (cart.items == null) { cart.items = {}; }
18 else { cart.items = JSON.parse(cart.items); }
19 },
20
21 // (B3) EMPTY ENTIRE CART
22 nuke : () => { if (confirm("Empty cart?")) {
23 cart.items = {};
24 localStorage.removeItem("cart");
25 cart.list();
26 }},
27
28 // (C) INITIALIZE
29 init : () => {
30 // (C1) GET HTML ELEMENTS
31 cart.hPdt = document.getElementById("cart-products");
32 cart.hItems = document.getElementById("cart-items");
33
34 // (C2) DRAW PRODUCTS LIST
35 cart.hPdt.innerHTML = "";
36 let template = document.getElementById("template-product").content, p, item;
37 for (let id in products) {
38 p = products[id];
39 item = template.cloneNode(true);
40 item.querySelector(".p-img").src = cart.iURL + p.img;
41 item.querySelector(".p-name").textContent = p.name;
42 item.querySelector(".p-price").textContent = cart.currency + p.price.toFixed(2);
43 item.querySelector(".p-add").onclick = () => cart.add(id);
44 cart.hPdt.appendChild(item);
45 }
46
47 // (C3) LOAD CART FROM PREVIOUS SESSION
48 cart.load();
49
50 // (C4) LIST CURRENT CART ITEMS
51 cart.list();
52 },
53
54 // (D) LIST CURRENT CART ITEMS (IN HTML)
55 list : () => {
56 // (D1) RESET
57 cart.total = 0;
58 cart.hItems.innerHTML = "";
59 let item, empty = true;
60 for (let key in cart.items) {
61 if (cart.items.hasOwnProperty(key)) { empty = false; break; }
62 }
63
64 // (D2) CART IS EMPTY
65 if (empty) {
66 item = document.createElement("div");
67 item.innerHTML = "Cart is empty";
68 cart.hItems.appendChild(item);
69 }
70
71 // (D3) CART IS NOT EMPTY - LIST ITEMS
72 else {
73 let template = document.getElementById("template-cart").content, p;
74 for (let id in cart.items) {
75 p = products[id];
76 item = template.cloneNode(true);
77 item.querySelector(".c-del").onclick = () => cart.remove(id);
78 item.querySelector(".c-name").textContent = p.name;
79 item.querySelector(".c-qty").value = cart.items[id];
80 item.querySelector(".c-qty").onchange = function () { cart.change(id, this.value); };
81 cart.hItems.appendChild(item);
82 cart.total += cart.items[id] * p.price;
83 }
84
85 // (D3-3) TOTAL AMOUNT
86 item = document.createElement("div");
87 item.className = "c-total";
88 item.id = "c-total";
89 item.innerHTML = `هزینه کل: ${cart.currency}${cart.total}`;
90 cart.hItems.appendChild(item);
91
92 // (D3-4) EMPTY & CHECKOUT
93 item = document.getElementById("template-cart-checkout").content.cloneNode(true);
94 cart.hItems.appendChild(item);
95 }
96 },
97
98 // (E) ADD ITEM INTO CART
99 add : id => {
100 if (cart.items[id] == undefined) { cart.items[id] = 1; }
101 else { cart.items[id]++; }
102 cart.save(); cart.list();
103 },
104
105 // (F) CHANGE QUANTITY
106 change : (pid, qty) => {
107 // (F1) REMOVE ITEM
108 if (qty <= 0) {
109 delete cart.items[pid];
110 cart.save(); cart.list();
111 }
112
113 // (F2) UPDATE TOTAL ONLY
114 else {
115 cart.items[pid] = qty;
116 cart.total = 0;
117 for (let id in cart.items) {
118 cart.total += cart.items[id] * products[id].price;
119 document.getElementById("c-total").innerHTML = `TOTAL: ${cart.currency}${cart.total}`;
120 }
121 }
122 },
123
124 // (G) REMOVE ITEM FROM CART
125 remove : id => {
126 delete cart.items[id];
127 cart.save();
128 cart.list();
129 },
130
131 // (H) CHECKOUT
132 checkout : () => {
133 // SEND DATA TO SERVER
134 // CHECKS
135 // SEND AN EMAIL
136 // RECORD TO DATABASE
137 // PAYMENT
138 // WHATEVER IS REQUIRED
139 alert("TO DO");
140
141 /*
142 var data = new FormData();
143 data.append("cart", JSON.stringify(cart.items));
144 data.append("products", JSON.stringify(products));
145 data.append("total", cart.total);
146
147 fetch("SERVER-SCRIPT", { method:"POST", body:data })
148 .then(res=>res.text())
149 .then(res => console.log(res))
150 .catch(err => console.error(err));
151 */
152 }
153};
154window.addEventListener("DOMContentLoaded", cart.init);قطعه کد Css پروژه ساخت سبد خرید با جاوا اسکریپت
قطعه کد Css در این آموزش پروژه محور جاوا اسکریپت به صورت زیر است.
1/* (A) ENTIRE PAGE */
2#cart-wrap * {
3 font-family: Arial, Helvetica, sans-serif;
4 box-sizing: border-box;
5}
6#cart-wrap {
7 max-width: 800px;
8 margin: 0 auto;
9}
10input.cart, button.cart {
11 border: 0;
12 padding: 10px;
13 color: #fff;
14 background: #d32828;
15 cursor: pointer;
16}
17
18/* (B) PRODUCTS */
19#cart-products {
20 display: grid;
21 grid-template-columns: repeat(2, 1fr);
22 grid-gap: 10px; padding: 10px;
23}
24.p-item { position: relative; }
25.p-img { width: 100%; }
26.p-info {
27 display: flex; align-items: center;
28 position: absolute;
29 bottom: 0; left: 0;
30 width: 100%; padding: 10px;
31 background: rgba(0, 0, 0, 0.5);
32}
33.p-txt { flex-grow: 1; }
34.p-name {
35 color: #fff;
36 font-size: 1.1em; font-weight: 700;
37}
38.p-price { color: #fff; }
39.p-add { font-size: 1.5em; }
40
41/* (C) CART */
42#cart-items { padding: 10px; }
43.c-item {
44 padding: 10px;
45 display: flex;
46 align-items: center;
47 background: #f2f2f2;
48}
49.c-item:nth-child(even) { background: #fff; }
50.c-qty {
51 width: 60px;
52 padding: 10px;
53}
54.c-name {
55 padding: 0 10px;
56 flex-grow: 1;
57}
58.c-del { font-size: 1.2em; }
59.c-total {
60 padding: 10px;
61 font-size: 1em; font-weight: 700;
62 background: #ffe9e9;
63}
64.c-go { margin-top: 10px; }خروجی نهایی قطعه کدهای بالا برای ساخت سبد خرید به صورت تصویر متحرک زیر خواهد بود.
آیا می توان به پروژه سبد خرید دسته محصولات اضافه کرد؟
بله، برای افزودن دسته‌بندی محصولات به سبد خرید می‌توان تغییرات زیر را اعمال کرد:
- باید شی جدیدی به نام categories ایجاد شود که شناسه‌های محصول را برای هر دسته نگه می‌دارد. به عنوان مثال، می‌توان شیئی با ساختار زیر ایجاد کرد: { CATEGORY-A: [123, 124, 125], CATEGORY-B: [1, 2, 3] } . در اینجا، « CATEGORY-A » و « CATEGORY-B » نام دسته‌ها هستند و آرایه شناسه‌های محصول در داخل هر دسته شامل شناسه‌های محصولات متعلق به آن دسته است.
- کار دوم، تغییر تابع draw است، به‌گونه‌ای که فقط محصولاتی را نمایش دهد که متعلق به دسته انتخابی هستند. این کار را می‌توان با افزودن آرگومانی جدید به تابع draw به نام category انجام داد.
با انجام این تغییرات می‌توان کاربر را قادر به انتخاب نوعی دسته‌بندی خاص و مشاهده محصولات متعلق به آن دسته در سبد خرید کرد.
افزودن گزینه های محصول به سبد خرید
دستورالعمل‌های زیر برای کسانی است که می‌خواهند گزینه‌های محصول را به سبد خرید اضافه کنند. برای انجام این کار، باید مراحل زیر را دنبال کرد:
- باید متغیری جدید به نام options ایجاد شود و به آن شیئی اختصاص داد که گزینه‌های مختلف محصول مانند رنگ و اندازه را در خود جای دهد. به عنوان مثال، می‌توان متغیرهای { color : [red, green, blue], size : [small, large], ... } را در نظر گرفت که به ترتیب به رنگ و اندازه محصول اشاره دارند.
- همچنین اتصال گزینه‌ها به محصولات باید انجام گیرد تا هر محصول مجموعه‌ای از گزینه‌ها را برای انتخاب داشته باشد.
- فهرست محصولات را طوری باید تغییر داد که گزینه‌های مربوط به هر محصول را شامل شود. این بدان معناست که وقتی کاربر فهرست محصول را مشاهده می‌کند، می‌تواند گزینه‌های موجود برای هر محصول را نیز ببیند.
- همچنین نحوه ثبت اقلام به وسیله سبد خرید نیز باید تغییر کند. نسخه به‌روز شده باید شامل شناسه محصول به همراه گزینه‌های انتخابی و مقادیر مربوطه آن‌ها باشد. برای مثال، فرمت جدید آن باید چیزی شبیه به PRODUCT-ID[OPTION][VALUE][OPTION][VALUE]: QUANTITY باشد.
با انجام این مراحل می‌توان گزینه‌های محصول را به سبد خرید خود اضافه کرد. توجه به این نکته مهم است که این مراحل امکان دارد آن‌طور که به نظر می‌رسد ساده نباشند، بنابراین مهم است که روی آن وقت صرف کرد و اصلاحات و تغییرات را به درستی انجام داد.
پروژه ساخت سبد خرید با جاوا اسکریپت
در این بخش از آموزش پروژه محور ساخت سبد خرید با جاوا اسکریپت، پروژه سبد خرید دیگری همراه با توضیحات ارائه شده است. در این تمرین ساده، فهرستی از اقلام به کاربر داده می‌شود که هر کدام دارای قیمت خاص خود هستند و کاربر می‌تواند آن‌ها را به سبد خرید خود منتقل کند.
ساختار دایرکتوری پروژه به صورت زیر است:
در این پروژه در کنار مفاهیم HTML و CSS از مفاهیم زیر در جاوا اسکریپت استفاده شده است:
- متغیرها در جاوا اسکریپت
- آرایهها در جاوا اسکریپت
- اشیاء در جاوا اسکریپت
- توابع جاوا اسکریپت
- شنوندگان رویداد در جاوا اسکریپت
- دستکاری DOM در جاوا اسکریپت
- ذخیره‌سازی سمت کلاینت یا محلی در جاوا اسکریپت
در این بخش به سراغ قطعه کدهای مربوط به هر فایل از این آموزش سبد خرید با جاوا اسکریپت خواهیم رفت و آن‌ها را تشریح خواهیم کرد. فایل Cart.html این برنامه حاوی قطعه کد زیر است:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Cart</title>
8 <link rel="stylesheet" href="css/app.css">
9</head>
10<body>
11 <table>
12 <thead>
13 <tr>
14 <th>Title</th>
15 <th>Price</th>
16 <th>Qty</th>
17 </tr>
18 </thead>
19 <tbody id="tbody">
20
21 </tbody>
22 </table>
23
24 <script src="js/cart.js"></script>
25</body>
26</html>قطعه کد بالا ساختار صفحه وب را برای سبد خرید تعریف می‌کند. این صفحه وب شامل یک جدول با سه ستون: «عنوان» ( Title )، «قیمت» ( Price ) و «تعداد» ( Qty ) خواهد بود. محتویات جدول به صورت پویا با استفاده از کد جاوا اسکریپت از فایل cart.js تولید می‌شود. سند HTML همچنین شامل یک ارجاع به فایل app.css برای تعریف استایل بصری عناصر در صفحه است. حال نوبت به قطعه کد Index.html این برنامه خواهد رسید که حاوی کدهای زیر است:
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Document</title>
8
9 <link rel="stylesheet" href="css/app.css">
10 </head>
11 <body>
12 <div class="toolbar">
13 <h1 class="brand">Shop</h1>
14 <p>
15 <a href="cart.html">
16 Cart items:
17 <span id="count">0</span>, Price:
18 <span id="sum">0</span>
19 </a>
20 </p>
21 </div>
22
23 <div class="products">
24 <div class="product">
25 <h3>Procut one</h3>
26 <p>Price: 2000</p>
27 <button data-id="1" data-price="2000" data-title="Product one">Add to cart</button>
28 </div>
29
30 <div class="product">
31 <h3>Procut two</h3>
32 <p>Price: 3000</p>
33 <button data-id="2" data-price="3000" data-title="Product two">Add to cart</button>
34 </div>
35
36 <div class="product">
37 <h3>Procut three</h3>
38 <p>Price: 6000</p>
39 <button data-id="3" data-price="6000" data-title="Product three">Add to cart</button>
40 </div>
41
42 <div class="product">
43 <h3>Procut four</h3>
44 <p>Price: 1000</p>
45 <button data-id="4" data-price="1000" data-title="Product four">Add to cart</button>
46 </div>
47 </div>
48
49 <script src="js/app.js"></script>
50 </body>
51</html>قطعه کد بالا از این آموزش سبد خرید با جاوا اسکریپت شامل سربرگ و پیوندی به صفحه سبد خرید است که تعداد اقلام موجود در سبد و قیمت کل اقلام را نشان می‌دهد. این صفحه همچنین شامل فهرستی از محصولات است که هر کدام عنوان، قیمت و دکمه‌ای برای افزودن محصول به سبد خرید برای آن‌ها درج شده است. هنگامی که کاربر روی دکمه Add to cart کلیک می‌کند، اطلاعات محصول با استفاده از کد جاوا اسکریپت از فایل app.js به سبد خرید اضافه می‌شود.
در این قسمت از آموزش پروژه محور سبد خرید جاوا اسکریپت نوبت به بررسی فایل‌های جاوا اسکریپت خواهد رسید. اولین فایل، app.js بوده که حاوی کدهای زیر است:
1let count = 0;
2let sum = 0;
3let cart = {};
4
5if (localStorage.getItem("count")) {
6 count = parseInt(localStorage.getItem("count"));
7}
8
9if (localStorage.getItem("sum")) {
10 sum = parseInt(localStorage.getItem("sum"));
11}
12
13if (localStorage.getItem("cart")) {
14 cart = JSON.parse(localStorage.getItem("cart"));
15}
16
17updateCart();
18
19let btns = document.querySelectorAll(".products button");
20
21for (let i = 0; i < btns.length; i++) {
22 let btn = btns[i];
23 btn.addEventListener("click", add);
24
25 // id = btn.dataset.id;
26 // if (cart.indexOf(id) >= 0) {
27 // btn.className = "added";
28 // btn.textContent = "Remove";
29 // }
30}
31
32function add(event) {
33 let price = Number(event.target.dataset.price);
34 let title = event.target.dataset.title;
35 let id = event.target.dataset.id;
36
37if (id in cart) {
38 cart[id].qty++;
39} else {
40 let cartItem = {
41 title: title,
42 price: price,
43 qty: 1
44 };
45 cart[id] = cartItem
46}
47
48 count++;
49 sum += price;
50
51 console.log(cart);
52
53 // let index = cart.indexOf(event.target.dataset.id);
54 // if (index >= 0) {
55 // cart.splice(index, 1);
56 // count--;
57 // sum -= price;
58 // event.target.className = "";
59 // event.target.textContent = "Add to cart";
60 // } else {
61 // cart.push(event.target.dataset.id);
62 // count++;
63 // sum += price;
64 // event.target.className = "added";
65 // event.target.textContent = "Remove";
66 // }
67 localStorage.setItem("cart", JSON.stringify(cart));
68 updateCart();
69}
70
71function updateCart() {
72 document.getElementById("sum").textContent = sum;
73 document.getElementById("count").textContent = count;
74 localStorage.setItem("sum", sum);
75 localStorage.setItem("count", count);
76}قطعه کد بالا به منظور عملکرد اصلی سبد خرید در این پروژه نوشته شده است. این قطعه کد در اصل برای کارهایی مانند پیگیری تعداد اقلام، قیمت کل و اقلام اضافه شده به سبد خرید، تعداد و غیره برای سبد خرید نوشته شده است. این قطعه کد همچنین داده‌ها را در صورت وجود، برای متغیرهای بالا از حافظه محلی بازیابی می‌کند.
سپس، صفحه‌نمایش سبد خرید را بر اساس مقادیر بازیابی شده از حافظه محلی با فراخوانی تابع updateCart به‌روز می‌کند. پس از آن، شنوندگان رویداد را به تمام دکمه‌های Ad to Card در صفحه اضافه می‌کند، به طوری که با کلیک کردن روی دکمه، تابع add فراخوانی می‌شود که محصول را به شی سبد خرید اضافه کرده و متغیرهای count و sum را به‌روزرسانی می‌کند.
در نهایت، تابع updateCart دوباره فراخوانی می‌شود تا نمایشگر سبد خرید را با مقادیر جدید count و sum به‌روز کند، و شیء سبد خرید به‌روز شده برای ماندگاری در حافظه محلی ذخیره خواهد شد. همچنین در کد بالا و در تابع add ، خطوطی از کدهای کامنت‌شده وجود دارد که بررسی می‌کنند آیا کالا از قبل در سبد خرید هست یا خیر و متن دکمه را متناسب با آن به‌روزرسانی خواهد کرد که اگر کالا از قبل در سبد خرید موجود باشد، آن را از سبد حذف می‌کند. حال نوبت به بررسی فایل Cart.js فرا رسیده است که کدهای زیر در آن نوشته می‌شوند.
1let cart = {};
2if (localStorage.getItem("cart")) {
3 cart = JSON.parse(localStorage.getItem("cart"));
4}
5
6let tbody = document.getElementById("tbody");
7
8for (let id in cart) {
9 let item = cart[id];
10
11 let tr = document.createElement('tr')
12
13 let title_td = document.createElement('td')
14 title_td.textContent = item.title
15 tr.appendChild(title_td)
16
17
18 let price_td = document.createElement("td");
19 price_td.textContent = item.price;
20 tr.appendChild(price_td);
21
22 let qty_td = document.createElement("td");
23 qty_td.textContent = item.qty;
24 tr.appendChild(qty_td);
25
26 tbody.appendChild(tr)
27
28}قطعه کد بالا داده‌های سبد خرید را از فضای ذخیره‌سازی محلی بازیابی کرده و به وسیله پیمایش اقلام موجود در سبد خرید، آن‌ها را در جدولی نمایش می‌دهد. برای هر مورد در سبد خرید، کد فوق ردیف جدول ( tr ) را ایجاد می‌کند و سه خانه جدول ( td ) را برای عنوان، قیمت و تعداد کالا اضافه خواهد کرد. سپس داده‌های فهرست اقلام استفاده از ویژگی textContent به هر سلول جدول اضافه می‌شوند.
در نهایت، قطعه کد CSS این آموزش سبد خرید با جاوا اسکریپت به صورت زیر است.
1/* Home page */
2.toolbar {
3 display: flex;
4 justify-content: space-between;
5 align-items: center;
6 padding: 5px 20px;
7}
8
9.products {
10 display: flex;
11 justify-content: center;
12 background-color: beige;
13}
14.product {
15 width: 300px;
16 border: 2px solid greenyellow;
17 margin: 10px;
18 padding: 10px;
19 background-color: aliceblue;
20}
21
22.added {
23 color: white;
24 background-color: red;
25}
26
27/* Cart page */
28
29table {
30 width: 100%;
31 border-collapse: collapse;
32 text-align: left;
33}
34
35thead {
36 background-color: antiquewhite;
37}
38
39td {
40 padding: 5px;
41}
42
43tr:nth-child(even) {
44 background-color: azure;
45}با اجرای فایل index.html خروجی زیر به نمایش درخواهد آمد.
با کلیک روی Cart items یا price کاربر به صفحه Cart.html هدایت خواهد شد که خروجی آن چیزی به شبیه به تصویر زیر خواهد بود.
آیا می توان سبد های خرید ساخته شده با جاوا اسکریپت را سفارشی سازی کرد؟
بله کدهای ساخت سبد خرید در این مطلب و تمامی سورس کدهای موجود در وب را به شرطی که «اوپن سورس» (منبع آزاد) باشند، می‌توان شخصی‌سازی و در پروژه‌های مختلف استفاده کرد. برای این هدف، درک و تسلط نسبی به زبان برنامه نویسی جاوا اسکریپت و همچنین HTML و CSS ضروری به نظر می‌رسد.
سخن پایانی
جاوا اسکریپت یکی از پراستفاده‌ترین و محبوب‌ترین زبان‌های توسعه و برنامه نویسی وب است که برای اهداف گوناگونی از آن استفاده می‌شود که یکی از این اهداف، ساخت فروشگاه‌های اینترنتی و توسعه بخش سبد خرید است. در این مطلب از «مجله فرادرس» به صورت نوعی آموزش پروژه محور جاوا اسکریپت در قالب دو مثال مختلف، آموزش ساخت دو نوع سبد خرید ارائه شد.
آموزش ساخت سبد خرید با جاوا اسکریپت می‌تواند یکی از پروژه‌های تمرینی جاوا اسکریپت بسیار جذاب و کاربردی برای آن دسته از افرادی باشد که به دنبال یادگیری پروژه محور و تمرینی جاوا اسکریپت هستند.
خواستم درمورد طراحی ثبت سفارش فایل نوشتاری برای سایت های تایپ و ترجمه + محاسبه قیمت انلاین بر اساس تعداد کلمات و صفحات و.. را بصورت مینی پروزه با جاوا یا ری اکت ارائه نمیدهید؟
محاسبه انلاین قیمت ترجمه مثلا در سایت های ترجمه ( که ترکیبی از htm5 -css-bootstrap–react(hks-render)/ jquary هست . چند نمونه که دیدم از سورس سایت این ها بود. بصورت مینی پروژه ارائه نمیشه این مدل فرم ها؟