<style> .product-box { max-width: 400px; margin: auto; padding: 20px; border: 1px solid #ccc; font-family: Arial, sans-serif; border-radius: 10px; text-align: center; } .product-box img { width: 100%; border-radius: 10px; } .product-title { font-size: 24px; margin-top: 10px; font-weight: bold; } .product-price { font-size: 20px; color: green; margin: 10px 0; } .star-rating span { font-size: 24px; cursor: pointer; color: #ccc; } .star-rating .filled { color: #ffcc00; } .qty-controls { display: flex; justify-content: center; align-items: center; margin: 15px 0; } .qty-controls button { padding: 5px 10px; font-size: 18px; } .qty-controls input { width: 50px; text-align: center; font-size: 18px; margin: 0 5px; } .buy-now-btn { background-color: #25d366; color: white; border: none; padding: 12px 20px; font-size: 18px; border-radius: 5px; cursor: pointer; text-decoration: none; display: inline-block; } </style> <div class="product-box"> <img alt="Product Image" src="https://via.placeholder.com/400x300.png?text=Product+Image"> <div class="product-title" id="product-name">Awesome Product</div> <div class="product-price" id="product-price">₹499</div> <div class="star-rating" id="star-rating"> <span onclick="setRating(1)">★</span> <span onclick="setRating(2)">★</span> <span onclick="setRating(3)">★</span> <span onclick="setRating(4)">★</span> <span onclick="setRating(5)">★</span> </div> <div class="qty-controls"> <button onclick="updateQty(-1)">-</button> <input type="number" id="qty" value="1" min="1"> <button onclick="updateQty(1)">+</button> </div> <a class="buy-now-btn" href="#" id="buy-now-link" target="_blank">Buy Now on WhatsApp</a> </div> <script> let selectedRating = 0; function updateQty(change) { let qtyInput = document.getElementById("qty"); let qty = parseInt(qtyInput.value); if (isNaN(qty)) qty = 1; qty = qty + change; if (qty < 1) qty = 1; qtyInput.value = qty; updateWhatsAppLink(); } function setRating(rating) { selectedRating = rating; let stars = document.querySelectorAll("#star-rating span"); stars.forEach((star, index) => { if (index < rating) { star.classList.add("filled"); } else { star.classList.remove("filled"); } }); updateWhatsAppLink(); } function updateWhatsAppLink() { let name = document.getElementById("product-name").innerText; let price = document.getElementById("product-price").innerText; let qty = document.getElementById("qty").value; let ratingText = selectedRating ? `${selectedRating} star(s)` : "No rating"; let message = `Hello! I'm interested in buying:\n\nProduct: ${name}\nPrice: ${price}\nQuantity: ${qty}\nRating: ${ratingText}`; let encodedMessage = encodeURIComponent(message); let phoneNumber = "918507862021"; // Replace with your WhatsApp number without + or spaces document.getElementById("buy-now-link").href = `https://wa.me/${phoneNumber}?text=${encodedMessage}`; } document.getElementById("qty").addEventListener("input", updateWhatsAppLink); window.onload = updateWhatsAppLink; </script>
No comments:
Post a Comment