Online Product Order System on Blogger
আপনি যদি আপনার ছোট ব্যবসা, ফেসবুক শপ, বা ব্যক্তিগত অনলাইন স্টোরের জন্য একটি সহজ, কার্যকরী এবং ঝামেলামুক্ত অর্ডার সিস্টেম তৈরি করতে চান, তাহলে এই টিউটোরিয়ালটি আপনার জন্য একটি সম্পূর্ণ সমাধান হতে পারে। এখানে এমন একটি স্মার্ট অর্ডার সিস্টেম দেখানো হয়েছে যা ব্যবহারকারীকে প্রোডাক্ট নির্বাচন থেকে শুরু করে সরাসরি অর্ডার পাঠানো পর্যন্ত একটি সহজ ও দ্রুত অভিজ্ঞতা প্রদান করে।
এই সিস্টেমে ক্রেতারা প্রথমে প্রোডাক্টের কালার নির্বাচন করতে পারে এবং প্রয়োজন অনুযায়ী পরিমাণ নির্ধারণ করতে পারে। এরপর তারা চাইলে প্রোডাক্টটি কার্টে যোগ করতে পারে, যেখানে মোট টাকার হিসাব স্বয়ংক্রিয়ভাবে আপডেট হয়। এতে ক্রেতারা অর্ডার করার আগে তাদের নির্বাচিত পণ্যের সারাংশ এবং মোট মূল্য পরিষ্কারভাবে দেখতে পারে, যা তাদের সিদ্ধান্ত নেওয়া আরও সহজ করে তোলে।
Buy Now বাটনে ক্লিক করলে একটি সুন্দর ও ব্যবহারবান্ধব Checkout Form পপআপ আকারে প্রদর্শিত হয়। এই পপআপ ফর্মের মাধ্যমে গ্রাহক তার নাম, ফোন নাম্বার, ঠিকানা এবং নির্বাচিত প্রোডাক্টের বিস্তারিত দেখতে ও নিশ্চিত করতে পারে। এতে অর্ডার প্রক্রিয়াটি দ্রুত ও সরাসরি হয়ে যায়, এবং আলাদা কোনো পেজে রিডাইরেক্ট হওয়ার প্রয়োজন পড়ে না। ফলে ব্যবহারকারীর অভিজ্ঞতা আরও মসৃণ ও পেশাদার মনে হয়।
এই অর্ডার সিস্টেমে দুটি জনপ্রিয় মাধ্যম ব্যবহার করা হয়েছে—WhatsApp এবং Gmail। ক্রেতারা চাইলে সরাসরি WhatsApp-এর মাধ্যমে অর্ডার পাঠাতে পারে, যা দ্রুত যোগাযোগের জন্য অত্যন্ত কার্যকর। একই সঙ্গে Gmail-এর মাধ্যমে অর্ডারের তথ্য আপনার ইমেইলে পৌঁছে যাবে, ফলে আপনি সহজেই অর্ডার সংরক্ষণ, ট্র্যাকিং এবং ম্যানেজ করতে পারবেন। এতে ম্যানুয়াল ডাটা এন্ট্রির প্রয়োজন কমে যায় এবং অর্ডার ব্যবস্থাপনা আরও সুশৃঙ্খল হয়।
এই সিস্টেমটি ব্লগ বা যেকোনো সাধারণ ওয়েবসাইটে খুব সহজেই ইন্টিগ্রেট করা যায়। বিশেষ করে যারা Blogger ব্যবহার করেন, তাদের জন্য এটি অত্যন্ত উপযোগী, কারণ আলাদা সার্ভার বা ডাটাবেস ছাড়াই এটি কাজ করে। শুধুমাত্র HTML, CSS এবং JavaScript ব্যবহার করে পুরো সিস্টেমটি তৈরি করা হয়েছে, তাই এটি লাইটওয়েট এবং দ্রুত লোড হয়।
ডিজাইনটি সম্পূর্ণভাবে মোবাইল ও ডেস্কটপ রেসপনসিভ, যার ফলে ব্যবহারকারীরা যেকোনো ডিভাইস থেকে সহজে অর্ডার করতে পারে। বর্তমান সময়ে অধিকাংশ গ্রাহক মোবাইল ব্যবহার করে কেনাকাটা করেন, তাই রেসপনসিভ ডিজাইন আপনার ব্যবসার জন্য একটি বড় সুবিধা এনে দিতে পারে।
এই ধরনের অর্ডার সিস্টেম ব্যবহার করলে আপনি আপনার অনলাইন ব্যবসার অর্ডার গ্রহণ প্রক্রিয়াকে আরও স্বয়ংক্রিয়, দ্রুত এবং পেশাদার করতে পারবেন। ছোট ব্যবসা, হোম-বেজড শপ, ড্রপশিপিং স্টোর কিংবা বড় ই-কমার্স প্ল্যাটফর্ম—সব ক্ষেত্রেই এটি কার্যকরভাবে ব্যবহার করা যায়। খুব কম খরচে এবং কম টেকনিক্যাল জ্ঞান দিয়েই আপনি একটি কার্যকর অর্ডার ম্যানেজমেন্ট সিস্টেম তৈরি করতে পারবেন, যা আপনার ব্যবসার বিশ্বাসযোগ্যতা এবং গ্রাহক সন্তুষ্টি দুটোই বৃদ্ধি করবে।
Stylish T-Shirt
Price: 500 ৳
🛒 Your Cart
Total: 0 ৳
📦 Checkout Form
````````````````````````````````Code`````````````````````````````````````
<title>Product Page</title>
<style>
/* 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 {
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>
<!-- 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>
<button onclick="clearCart()"
style="background:black;color:white;padding:6px 12px;border:none;border-radius:6px;cursor:pointer;">
Clear Cart
</button>
</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, index)=>{
let subtotal = item.price * item.qty;
total += subtotal;
cartItems.innerHTML += `
<li style="margin-bottom:8px;">
${item.name} - ${item.color} × ${item.qty} = ${subtotal}৳
<button onclick="removeItem(${index})"
style="margin-left:10px;background:red;color:white;border:none;padding:3px 6px;border-radius:4px;cursor:pointer;">
❌
</button>
</li>
`;
});
document.getElementById("total").innerText = total;
}
// Remove Item
function removeItem(index){
cart.splice(index, 1);
renderCart();
}
// Clear Cart
function clearCart(){
cart = [];
renderCart();
}
// Buy Now
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 - Only WhatsApp
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:
${product}
Customer: ${name}
Phone: ${phone}
Address: ${address}`;
let phoneNum = "8801783070172"; // আপনার WhatsApp নাম্বার
let waUrl = `https://wa.me/${phoneNum}?text=${encodeURIComponent(orderText)}`;
window.location.href = waUrl;
});
</script>
`````````````````````````````````````````end
0 Comments:
Post a Comment