Online Product Order System on Blogger
### **Hello**
আপনি যদি আপনার ছোট ব্যবসা বা অনলাইন শপের জন্য একটি সহজ এবং কার্যকরী অর্ডার সিস্টেম তৈরি করতে চান, তবে এই টিউটোরিয়ালটি আপনার জন্য। এই সিস্টেমে ব্যবহারকারী প্রোডাক্টের কালার এবং পরিমাণ নির্বাচন করতে পারবে, কার্টে যোগ করতে পারবে, এবং **Buy Now বাটন ক্লিক করলে Checkout Form popup হিসেবে দেখাবে**।
Checkout Form-এর মাধ্যমে গ্রাহক তাদের নাম, ফোন নাম্বার, ঠিকানা এবং প্রোডাক্টের বিবরণ সরাসরি পাঠাতে পারবে। এখানে দুটি মাধ্যম ব্যবহার করা হয়েছে – **WhatsApp এবং Gmail**। ফলে ক্রেতারা সরাসরি WhatsApp-এ অর্ডার পাঠাতে পারবে এবং আপনিও Gmail-এ অর্ডার পাবেন।
এই সিস্টেমটি ব্লগ বা ওয়েবসাইটে খুব সহজে ইন্টিগ্রেট করা যায়। বিশেষ করে যারা Blogger ব্যবহার করেন, তাদের জন্য এটি খুবই সুবিধাজনক। এছাড়া, এটি **মোবাইল এবং ডেস্কটপ উভয়ে responsive**, তাই ব্যবহারকারীরা যেকোনো ডিভাইস থেকে অর্ডার করতে পারবেন।
এই ধরনের অর্ডার সিস্টেম ব্যবহার করলে আপনি আপনার অনলাইন ব্যবসার অর্ডার প্রসেসকে স্বয়ংক্রিয় ও কার্যকরী করতে পারবেন। এটি ছোট ব্যবসা থেকে শুরু করে বড় ই-কমার্স সাইটেও ব্যবহার করা যেতে পারে।
Stylish T-Shirt
Price: 500 ৳
🛒 Your Cart
Total: 0 ৳
📦 Checkout Form
````````````````````````````````Code`````````````````````````````````````
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Page</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
padding: 20px;
}
/* Product Card */
.product {
border-radius: 10px;
border: 1px solid rgb(221, 221, 221);
padding: 15px;
text-align: center;
max-width: 400px;
margin: auto;
background: white;
}
.product h3 {
margin-bottom: 10px;
}
.product button {
margin-top: 5px;
}
/* Cart Section */
#cart {
border-radius: 10px;
border: 2px solid rgb(204, 204, 204);
margin: 20px auto;
max-width: 800px;
padding: 15px;
background: white;
}
/* Checkout Popup */
#checkout-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
align-items: center;
justify-content: center;
z-index: 1000;
}
#checkout-popup .popup-content {
background: white;
border-radius: 10px;
max-width: 400px;
width: 90%;
padding: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
#checkout-popup input,
#checkout-popup textarea,
#checkout-popup select {
margin: 5px 0px;
padding: 8px;
width: 100%;
box-sizing: border-box;
}
#checkout-popup button {
cursor: pointer;
border: none;
border-radius: 6px;
color: white;
}
#checkout-popup #place-order {
background: rgb(37, 99, 235);
padding: 10px 15px;
}
#checkout-popup #close-popup {
background: gray;
padding: 10px 15px;
margin-left: 5px;
}
</style>
</head>
<body>
<!-- Product -->
<div class="product">
<h3>Stylish T-Shirt</h3>
<p>Price: <span class="price">500</span> ৳</p>
<label>Color:</label>
<select id="color-select">
<option value="Black">Black</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="White">White</option>
</select><br><br>
<label>Qty:</label>
<input id="qty" type="number" value="1" min="1" /><br><br>
<button id="add-cart" style="background: rgb(34, 197, 94); padding: 8px 12px;">Add to Cart</button>
<button id="buy-now" style="background: rgb(37, 99, 235); padding: 8px 12px;">Buy Now</button>
</div>
<!-- Cart Section -->
<div id="cart">
<h3>🛒 Your Cart</h3>
<ul id="cart-items" style="list-style:none; padding:0;"></ul>
<p><b>Total:</b> <span id="total">0</span> ৳</p>
</div>
<!-- Checkout Popup -->
<div id="checkout-popup">
<div class="popup-content">
<h3>📦 Checkout Form</h3>
<label>Name:</label>
<input id="cname" type="text" />
<label>Phone:</label>
<input id="cphone" type="text" />
<label>Address:</label>
<textarea id="caddress"></textarea>
<label>Product Name:</label>
<input id="cproduct" type="text" readonly />
<br><br>
<button id="place-order">Place Order</button>
<button id="close-popup">Close</button>
</div>
</div>
<script>
let cart = [];
// Add to Cart
document.getElementById("add-cart").addEventListener("click", function(){
let name = document.querySelector(".product h3").innerText;
let price = parseInt(document.querySelector(".price").innerText);
let color = document.getElementById("color-select").value;
let qty = parseInt(document.getElementById("qty").value);
cart.push({name, price, color, qty});
renderCart();
});
// Render Cart
function renderCart(){
let cartItems = document.getElementById("cart-items");
cartItems.innerHTML = "";
let total = 0;
cart.forEach(item=>{
let subtotal = item.price * item.qty;
total += subtotal;
cartItems.innerHTML += `<li>${item.name} - ${item.color} × ${item.qty} = ${subtotal}৳</li>`;
});
document.getElementById("total").innerText = total;
}
// Buy Now - show popup
document.getElementById("buy-now").addEventListener("click", function(){
document.getElementById("checkout-popup").style.display = "flex";
let productName = document.querySelector(".product h3").innerText;
let color = document.getElementById("color-select").value;
let qty = document.getElementById("qty").value;
document.getElementById("cproduct").value = `${productName} - ${color} × ${qty}`;
});
// Close Popup
document.getElementById("close-popup").addEventListener("click", function(){
document.getElementById("checkout-popup").style.display = "none";
});
// Place Order - WhatsApp + Gmail
document.getElementById("place-order").addEventListener("click", function(){
let name = document.getElementById("cname").value;
let phone = document.getElementById("cphone").value;
let address = document.getElementById("caddress").value;
let product = document.getElementById("cproduct").value;
if(!name || !phone || !address){
alert("Please fill all details!");
return;
}
let orderText = `🛍 Order Details:\n${product}\nCustomer: ${name}\nPhone: ${phone}\nAddress: ${address}`;
// WhatsApp
let phoneNum = "8801XXXXXXXXX";
let waUrl = `https://wa.me/${phoneNum}?text=${encodeURIComponent(orderText)}`;
window.open(waUrl,"_blank");
// Gmail
let mailTo = "your-email@gmail.com";
let subject = "New Order from Website";
let body = encodeURIComponent(orderText);
window.open(`mailto:${mailTo}?subject=${encodeURIComponent(subject)}&body=${body}`);
// Close popup
document.getElementById("checkout-popup").style.display = "none";
});
</script>
</body>
</html>`````````````````````````````````````````end
0 Comments:
Post a Comment