Make any website an e-commerce website Premium Script - Favorite Web

নিচের কোডটি কপি করে আপনার ওয়েবসাইটের </b:skin> ট্যাগের উপরে Past করুন, আপনার থিম অনুযায়ী CSS কাস্টমাইজ করতে হতে পারে।

/* Shop */ .checkout-container { display: none; max-width: 1160px; text-align:right; padding:20px 5px; background: #ffd2d2; position:fixed; top:100px; z-index:1; } .inner-container { position:relative; height:720px; padding:10px; overflow: scroll; } .inner-container { text-align:center; } .checkout-container .inner-checkout{ max-width:1160px; position:relative; text-align:left; display:flex; flex-wrap: wrap; flex-direction: row; } .inner-checkout .yourinfo, .inner-checkout .productinfo { padding: 15px; width: 50%; } @media(max-width:500px){ .checkout-container{ right:0px; } .inner-checkout .yourinfo, .inner-checkout .productinfo { padding: 10px; width: 100%; } .inner-container { height:520px; } .order-btn{ display: block; margin-left: auto; margin-right: auto; } .order-container .price-box, .order-container select{ width:100%; } } .checkout-container .close{ position: fixed; margin: -14px 0px 0 -28px; font-size: 50px; z-index:99; } .inner-checkout .order{ display: block; margin-left: auto; margin-right: auto; cursor: pointer;} .inner-checkout .order:hover{background:#00d08c;} .order-container{ max-width:1160px; color: #fff; background:#111; padding:10px; position:relative; display:flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row; } .order-container select, .order-container input{ color:#111; }

তারপর নিচের কোডটি কপি করে Post Section - এ Past করুন, এবং প্রাইজ, প্যাকেজ অথবা কালার চেইঞ্জ করে নিন।

<div class="order-container"> <div class="price-box"> <p>Price: <span id="price">500</span> BDT</p> <input class="quantity" id="quantity" type="number" value="1" /> <label>Package:</label> <select id="color" name="Package"> <option value="500">Only Code-500 BDT</option> <option value="1500">Complete Installation-1500 BDT</option> </select> </div> <div class="order-btn"> <a class="zbutton Gu" id="buybtn">Buy now</a> </div> </div> <!--Modal for the form--> <div class="checkout-container" id="checkout"> <span class="close">×</span> <div class="inner-container"> <h1>Fill the form carefully<hr /></h1> <p>Give us your name, mobile number, and transaction ID if you have paid us. If you have anything else to say, write in the message.</p> <h5>01853791505 - (BKash, Rocket)<hr /></h5> <form action="https://api.web3forms.com/submit" class="buying_form" name='google-sheet' method="POST"> <input name="access_key" type="hidden" value="1a61bd7a-f7d5-4f7d-ac2f-a5b5cecfb291" /> <div class="inner-checkout"> <div class="yourinfo"> <h4>Persional Info</h4> <input name="from_name" type="hidden" value="Favorite Web" /> <input name="subject" type="hidden" value="New Order" /> <input name="redirect" type="hidden" value="https://favoritewebofficial.blogspot.com/p/thank-you.html" /> <input type="hidden" id="submission_datetime" name="Submission_Date" value="" /> <input id="product_title" name="Product_Title" type="hidden" value="" /> <input id="product_color" name="Package" type="hidden" value="" /> <input id="product_quantity" name="Product_Quantity" type="hidden" value="" /> <input id="product_total_price" name="Total_Price" type="hidden" value="" /> <input id="product_delivery" name="Service_Charge" type="hidden" value="" /> <input id="product_grand_total" name="Grand_Total" type="hidden" value="" /> <label>Name*</label> <input class="buy-input" name="Name" required="" type="text" /> <label>Mobile*</label> <input class="buy-input" name="Mobile" required="" type="text" /> <label>Address*</label> <input class="buy-input" name="Address" required="" type="text" /> <label>Note</label> <textarea class="buy-textarea" name="Note"></textarea> </div> <div class="productinfo"> <!--Dynamically updated product details--> <div id="productDetails"></div> <br /> <label>Communication Medium:</label> <br /> <select id="delivery" required=""> <option value="">Choose an option</option> <option value="20">Phone (20 BDT)</option> <option value="0">Whatsapp (00 BDT)</option> </select> <br /> <label>Payment Method:</label><br /> <input checked="" id="cod" name="Payment_Method" onclick="toggleTrxID()" type="radio" value="After Finishing Work" /> <label>After Finishing Work</label><br /> <input id="mbanking" name="Payment_Method" onclick="toggleTrxID()" type="radio" value="Mobile Banking" /> <label>Mobile Banking</label><br /> <span id="mobileBankingOptions" style="display: none;"> <input id="bkash" name="Payment_Gateway" onclick="updateAmount()" type="radio" value="Bkash" /> <label>Bkash</label><br /> <input id="nagad" name="Payment_Gateway" onclick="updateAmount()" type="radio" value="Nagad" /> <label>Nagad</label><br /> <input id="rocket" name="Payment_Gateway" onclick="updateAmount()" type="radio" value="Rocket" /> <label>Rocket</label><br /> <p>Send Money Amount: <span id="sendAmount"></span> BDT</p> <p>TrxID</p> <input class="buy-input" id="trxid" name="TrxID" type="text" /> <input id="order_status" name="Order_Status" type="hidden" value="Processing" /> </span> </div> <button class="zbutton Gu order" type="submit"> Buy Now </button> </div> </form> <!--This JavaScript For Google Sheet Remove This Code Then Send Mail apiweb3form Server--> <script> const scriptURL = 'https://script.google.com/macros/s/AKfycbxlf_9ug4duDqdBPgBKN_p4ExrBQPdMVODD6m-oL3b0xDSxqUZ7fqkeU_TPkrntNsYr7g/exec' const form = document.forms['google-sheet'] form.addEventListener('submit', e => { e.preventDefault() fetch(scriptURL, { method: 'POST', body: new FormData(form)}) .then(response => location.href = "/p/thank-you.html") .catch(error => console.error('Error!', error.message)) }) </script> </div> </div>

তারপর নিচের কোডটি কপি করে আপনার থিমের </body> - এর উপরে পেস্ট করুন, এবং অবশ্যই আপনার পোস্টের টাইটেলের আইডিটা টাইটেল ভেরিয়েবল এর সিলেক্টর এ বসিয়ে দিন।

<!--Script for Order Collect--> <script> //<![CDATA[ // Variables var quantityInput = document.getElementById("quantity"); var colorInput = document.getElementById("color"); var deliveryInput = document.getElementById("delivery"); var checkout = document.getElementById("checkout"); var buybtn = document.getElementById("buybtn"); var close = document.getElementsByClassName("close")[0]; // Function to calculate and update product details function updateProductDetails() { var quantity = quantityInput.value; var price = parseFloat(colorInput.value); // Get the selected color's price var delivery = parseFloat(deliveryInput.value); var title = document.querySelector(".pTtl").textContent; var total = price * quantity + delivery; // Calculate total // Update the product details dynamically var productDetails = ` <h4>Product Details</h4> Products Name: ${title} <br/> Package: ${colorInput.options[colorInput.selectedIndex].text} <br/> Quantity: ${quantity} <br/> Price per unit: ${price} BDT <br/> Total Price: ${price * quantity} BDT <br/> Communication Service Charge: ${delivery} BDT <br/> Grand Total: ${total} BDT `; document.getElementById("productDetails").innerHTML = productDetails; // Display in the 'productDetails' div // Quantity input validation (ensures it doesn't go below 1) quantityInput.addEventListener("change", function () { if (this.value < 1) { this.value = 1; // Reset to 1 if less than 1 } updateProductDetails(); // Update product details when quantity changes }); // Set values in hidden input fields for submission document.getElementById("product_title").value = title; document.getElementById("product_color").value = colorInput.options[colorInput.selectedIndex].text; document.getElementById("product_quantity").value = quantity; document.getElementById("product_total_price").value = price * quantity; document.getElementById("product_delivery").value = delivery; document.getElementById("product_grand_total").value = total; // Update Send Money Amount if mobile banking is selected if (document.getElementById("mbanking").checked) { updateAmount(); } // Add current datetime var now = new Date().toLocaleString(); document.getElementById("submission_datetime").value = now; } // Function to toggle TrxID visibility function toggleTrxID() { var paymentMethod = document.querySelector('input[name="Payment_Method"]:checked').value; var trxid = document.getElementById("mobileBankingOptions"); if (paymentMethod === 'Mobile Banking') { trxid.style.display = "block"; // Show TrxID if mobile banking is selected } else { trxid.style.display = "none"; // Hide TrxID if cash on delivery is selected } } // Function to update Send Money Amount based on selected gateway function updateAmount() { var total = parseFloat(document.getElementById("product_grand_total").value); document.getElementById("sendAmount").textContent = total; } // Event listeners for real-time updates quantityInput.addEventListener('input', updateProductDetails); colorInput.addEventListener('change', updateProductDetails); deliveryInput.addEventListener('change', updateProductDetails); // Initial call to display default details updateProductDetails(); // Modal open/close functionality buybtn.onclick = function() { checkout.style.display = "block"; } close.onclick = function() { checkout.style.display = "none"; } window.onclick = function(event) { if (event.target == checkout) { checkout.style.display = "none"; } } //]]> </script>

কিভাবে HTML - কন্ট্রাক ফর্মের ডাটা এর ইমেইল অথবা গুগল শিটে রিসিভ করবেন জানতে এখানে ক্লিক করুন।