نحوه ایجاد یک سبد خرید ساده در HTML5، CSS3 و JS با ادغام Payment

Summarize this content to 400 words in Persian Lang
اگر می خواهید سبد خرید خود را در HTM5، CSS3 و JS ایجاد کنید، در جای مناسبی هستید! این نحوه ایجاد سبد خرید است. این شامل ادغام پرداخت از API درخواست پرداخت نیز می شود!

1. فایل ها را ایجاد کنید

یک پوشه ایجاد کنید و این فایل ها را در آن قرار دهید:

index.html
style.css
script.js

2. HTML اضافه کنید

این را قرار دهید index.html:

lang=”en”>

charset=”UTF-8″>
name=”viewport” content=”width=device-width, initial-scale=1.0″>
Shopping Cart
rel=”stylesheet” href=”styles.css”>

class=”products”>
class=”product”>
Product 1
$10
onclick=”addToCart(‘Product 1’, 10)”>Add to Cart

class=”cart”>
Shopping Cart

Total: $ id=”cart-total”>0

src=]]>”script.js”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. CSS را اضافه کنید

این را قرار دهید style.css:

.products, .cart {
margin: 20px;
}
.product, .cart-item {
margin-bottom: 10px;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. جاوا اسکریپت را اضافه کنید

این را قرار دهید script.js:

let cart = [];

function addToCart(name, price) {
const item = cart.find(product => product.name === name);
if (item) {
item.quantity++;
} else {
cart.push({ name, price, quantity: 1 });
}
updateCart();
}

function removeFromCart(name) {
cart = cart.filter(product => product.name !== name);
updateCart();
}

function updateCart() {
const cartItems = document.getElementById(‘cart-items’);
const cartTotal = document.getElementById(‘cart-total’);
cartItems.innerHTML = ”;
let total = 0;
cart.forEach(product => {
const li = document.createElement(‘li’);
li.textContent = `${product.name} – $${product.price} x ${product.quantity}`;
const removeButton = document.createElement(‘button’);
removeButton.textContent = ‘Remove’;
removeButton.onclick = () => removeFromCart(product.name);
li.appendChild(removeButton);
cartItems.appendChild(li);
total += product.price * product.quantity;
});
cartTotal.textContent = total;
}
const paymentRequest = new PaymentRequest(
[
{
supportedMethods: ‘basic-card’,
data: {
supportedNetworks: [‘visa’, ‘mastercard’],
},
},
],
{
total: {
label: ‘Total’,
amount: { currency: ‘USD’, value: ‘10.00’ },
},
}
);
paymentRequest.show().then((paymentResponse) => {
// Process the payment
console.log(paymentResponse);

// Complete the payment
paymentResponse.complete(‘success’).then(() => {
console.log(‘Payment completed successfully’);
});
}).catch((error) => {
console.error(‘Payment failed’, error);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

5. توضیح فایل JS

1. قابلیت سبد خرید

سبد خرید را اولیه کنید

let cart = [];

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سبد خرید: یک آرایه خالی برای ذخیره اقلام اضافه شده به سبد خرید.

2 موارد را به سبد خرید اضافه کنید

function addToCart(name, price) {
const item = cart.find(product => product.name === name);
if (item) {
item.quantity++;
} else {
cart.push({ name, price, quantity: 1 });
}
updateCart();
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

addToCart (نام، قیمت): قابلیت افزودن اقلام به سبد خرید.

cart.find(product => product.name === نام): یک مورد را در سبد خرید با نام جستجو می کند.

اگر (مورد): اگر موردی پیدا شود، مقدار آن را افزایش می دهد.

دیگر: در صورت یافت نشدن کالا، یک کالای جدید با نام، قیمت و مقدار مشخص شده 1 به سبد خرید اضافه می کند.

updateCart(): تماس می گیرد updateCart عملکردی برای تازه کردن صفحه نمایش سبد خرید.

3 اقلام را از سبد خرید حذف کنید

function removeFromCart(name) {
cart = cart.filter(product => product.name !== name);
updateCart();
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

removeFromCart(نام): عملکرد حذف اقلام از سبد خرید.

cart.filter(product => product.name !== name): مورد را با نام مشخص شده از سبد خرید فیلتر می کند.

updateCart(): تماس می گیرد updateCart عملکردی برای تازه کردن صفحه نمایش سبد خرید.

4 صفحه نمایش سبد خرید را به روز کنید

function updateCart() {
const cartItems = document.getElementById(‘cart-items’);
const cartTotal = document.getElementById(‘cart-total’);
cartItems.innerHTML = ”;
let total = 0;
cart.forEach(product => {
const li = document.createElement(‘li’);
li.textContent = `${product.name} – $${product.price} x ${product.quantity}`;
const removeButton = document.createElement(‘button’);
removeButton.textContent = ‘Remove’;
removeButton.onclick = () => removeFromCart(product.name);
li.appendChild(removeButton);
cartItems.appendChild(li);
total += product.price * product.quantity;
});
cartTotal.textContent = total;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

updateCart(): عملکردی که نمایشگر سبد خرید را به روز می کند.

کالاهای سبد خرید: عنصر HTML را با شناسه دریافت می کند cart-items.

سبد خرید مجموع: عنصر HTML را با شناسه دریافت می کند cart-total.

cartItems.innerHTML = '': نمایش اقلام فعلی سبد خرید را پاک می کند.

مجموع = 0 را بگذارید: مقدار کل را به 0 مقدار دهی اولیه می کند.

cart.forEach(product => { … }): روی هر محصول در سبد خرید تکرار می شود.

document.createElement('li'): یک عنصر فهرست جدید ایجاد می کند.

li.textContent = ${product.name} – $${product.price} x ${product.quantity}: محتوای متن مورد فهرست را تنظیم می کند.

document.createElement('button'): یک عنصر دکمه جدید ایجاد می کند.

removeButton.textContent=”حذف”: محتوای متنی دکمه را تنظیم می کند.

removeButton.onclick = () => removeFromCart(product.name): رویداد کلیک دکمه را برای تماس تنظیم می کند removeFromCart.

li.appendChild(removeButton): دکمه را به آیتم لیست اضافه می کند.

cartItems.appendChild(li): مورد لیست را به نمایش اقلام سبد خرید اضافه می کند.

کل += محصول.قیمت *محصول.تعداد: قیمت کل محصول را به کل مبلغ اضافه می کند.

cartTotal.textContent = کل: نمایش مقدار کل را به روز می کند.

API درخواست پرداخت

یک شیء درخواست پرداخت ایجاد کنید

const paymentRequest = new PaymentRequest(
[
{
supportedMethods: ‘basic-card’,
data: {
supportedNetworks: [‘visa’, ‘mastercard’],
},
},
],
{
total: {
label: ‘Total’,
amount: { currency: ‘USD’, value: ‘10.00’ },
},
}
);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

درخواست پرداخت: یک درخواست پرداخت جدید ایجاد می کند.

روش های پشتیبانی شده: روش های پرداخت پشتیبانی شده را مشخص می کند (به عنوان مثال، «کارت اصلی»).

داده ها: حاوی اطلاعات اضافی در مورد روش پرداخت، مانند شبکه های پشتیبانی شده است.

کل: نشان دهنده کل مبلغی است که باید شارژ شود.

2 نمایش درخواست پرداخت

paymentRequest.show().then((paymentResponse) => {
// Process the payment
console.log(paymentResponse);

// Complete the payment
paymentResponse.complete(‘success’).then(() => {
console.log(‘Payment completed successfully’);
});
}).catch((error) => {
console.error(‘Payment failed’, error);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نمایش (): رابط پرداخت را به کاربر نمایش می دهد.

then((paymentResponse) => { … }): اگر کاربر پرداخت را تایید کند، این قول با الف حل می شود paymentResponse شی

پاسخگویی پرداخت: حاوی جزئیات پرداخت کاربر است.

console.log(paymentResponse): پاسخ پرداخت را برای پردازش ثبت می کند.

catch((خطا) => { … }): اگر پرداخت انجام نشد یا لغو شد، این وعده خطا را می گیرد و آن را ثبت می کند.

خلاصه

این کد با افزودن، حذف و به‌روزرسانی موارد، سبد خرید را مدیریت می‌کند و سپس با استفاده از API درخواست پرداخت، پرداخت را پردازش می‌کند. اگر سوال دیگری دارید یا نیاز به توضیح بیشتر دارید، در نظرات بپرسید!

نتیجه گیری

این پایان مقاله من در مورد ایجاد یک سبد خرید با یکپارچه سازی پرداخت در HTML5، CSS3 و JS است! حتما یک نظر و یک واکنش بگذارید و چیزهای بیشتری را بررسی کنید!

 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">