pincode checker with area selection option ?

[Harry75]

i want Pincode checker on shopify product page with coding . 

[Rukhsana]

First, make the duplicate of your theme.
Now Navigate to Shopify theme customizer > Product page > Add HTML block and paste the below code.

<div class="pincode-checker">
    <h3>Check Delivery Availability</h3>
    <form>
        <label for="area-select">Select your area:</label>
        <select id="area-select">
            <option value="" disabled selected>Select an area</option>
            <option value="Gurgaon Haryana">Gurgaon Haryana</option>
            <option value="Noida">Noida</option>
            <option value="Faridabad">Faridabad</option>
            <option value="New Delhi">New Delhi</option>
        </select>
        <br>
        <label for="pincode-input">Enter your pincode:</label>
        <input type="text" id="pincode-input" placeholder="Enter your pincode" />
        <button type="button" id="check-pincode-btn">Check Delivery</button>
    </form>
</div>

<script>
    // Define the areas and their associated pin codes
    const deliveryAreas = {
        "Gurgaon Haryana": ["122001", "122018", "122022"],  // Sample pin codes for Gurgaon
        "Noida": ["201301", "201303", "201304"],            // Sample pin codes for Noida
        "Faridabad": ["121001", "121002", "121003"],         // Sample pin codes for Faridabad
        "New Delhi": ["110001", "110011", "110019"]          // Sample pin codes for New Delhi
    };

    // Function to check if the entered pincode is available for delivery
    function checkPincode() {
        let enteredPincode = document.getElementById("pincode-input").value.trim();
        let selectedArea = document.getElementById("area-select").value;

        if (!enteredPincode || !selectedArea) {
            alert("Please enter a valid pincode and select an area.");
            return;
        }

        // Check if the entered pincode exists in the selected area
        if (deliveryAreas[selectedArea].includes(enteredPincode)) {
            alert("Delivery is available in your area!");
        } else {
            alert("Sorry, delivery is not available for this pincode in your selected area.");
        }
    }

    // Attach event listener to the check button
    document.getElementById("check-pincode-btn").addEventListener("click", checkPincode);

    // Styling for the pincode checker
    const style = document.createElement('style');
    style.innerHTML = `
        .pincode-checker {
            padding: 20px;
            background-color: #f1f1f1;
            border-radius: 8px;
            margin-top: 20px;
        }

        .pincode-checker h3 {
            font-size: 18px;
            font-weight: bold;
        }

        .pincode-checker form {
            display: flex;
            flex-direction: column;
        }

        .pincode-checker select,
        .pincode-checker input,
        .pincode-checker button {
            margin: 10px 0;
            padding: 10px;
            font-size: 16px;
        }
    `;
    document.head.appendChild(style);
</script>