Issue in Creating Dynamic URL in custom wordpress plugin

Question

I am facing issues in creating dynamic URLs in my custom plugin, which uses an API to fetch details. Post Office by searching through pincodes and location names

Here is the URL: https://local.webrigo.com/pincode/

When it shows the result, the URL will automatically change, but when I use this URL, like https://local.webrigo.com/pincode/110045, separately in my browser, it leads me to a 404 page or redirects me to the homepage.

As I have already verified the.htaccess file and updated Permalinks again, the issue exists. As my main objective is to achieve dynamic links for ranking purposes on SERP for each URL separately

Code for shortcode-functions.php

<?php
// File: shortcode-functions.php

function pincode_search_form() {
    ob_start(); ?>

    <style>
        .pincode-search-form {
            max-width: 600px;
            margin: 0 auto;
        }

        .pincode-results-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .pincode-result {
            width: 48%;
            margin: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            color: black;
            box-sizing: border-box;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('pincode-search-form').addEventListener('submit', function (event) {
                event.preventDefault();

                var pincode = document.getElementById('pincode').value;

                var newUrl = '<?php echo esc_url(home_url('/pincode/')); ?>';

                if (pincode) {
                    newUrl += encodeURIComponent(pincode);
                }

                history.pushState({ pincode: pincode }, null, newUrl);

                // Perform AJAX request
                fetch('<?php echo esc_url(admin_url('admin-ajax.php')); ?>', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: 'action=handle_pincode_search&pincode=' + encodeURIComponent(pincode),
                })
                    .then(response => response.text())
                    .then(html => {
                        document.querySelector('.pincode-results-container').innerHTML = html;
                    })
                    .catch(error => console.error('Error:', error));
            });

            document.getElementById('post-office-search-form').addEventListener('submit', function (event) {
                event.preventDefault();

                var postOfficeName = document.getElementById('post-office-name').value;

                var newUrl = '<?php echo esc_url(home_url('/postoffice/')); ?>';

                if (postOfficeName) {
                    newUrl += encodeURIComponent(postOfficeName);
                }

                history.pushState({ postOfficeName: postOfficeName }, null, newUrl);

                // Perform AJAX request
                fetch('<?php echo esc_url(admin_url('admin-ajax.php')); ?>', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: 'action=handle_post_office_search&postoffice=' + encodeURIComponent(postOfficeName),
                })
                    .then(response => response.text())
                    .then(html => {
                        document.querySelector('.pincode-results-container').innerHTML = html;
                    })
                    .catch(error => console.error('Error:', error));
            });
        });
    </script>

    <div class="pincode-search-form">
        <form id="pincode-search-form">
            <label for="pincode">Enter PINCODE:</label>
            <input type="text" name="pincode" id="pincode">
            <input type="submit" value="Search">
        </form>

        <form id="post-office-search-form">
            <label for="post-office-name">Enter Post Office Name:</label>
            <input type="text" name="post-office-name" id="post-office-name">
            <input type="submit" value="Search">
        </form>

        <div class="pincode-results-container">
            <!-- Results will be displayed here -->
        </div>
    </div>

    <?php
    return ob_get_clean();
}

add_shortcode('pincode_search', 'pincode_search_form');

add_action('wp_ajax_handle_pincode_search', 'handle_pincode_search');
add_action('wp_ajax_nopriv_handle_pincode_search', 'handle_pincode_search');

add_action('wp_ajax_handle_post_office_search', 'handle_post_office_search');
add_action('wp_ajax_nopriv_handle_post_office_search', 'handle_post_office_search');

function handle_pincode_search() {
    if (isset($_POST['pincode'])) {
        $pincode = sanitize_text_field($_POST['pincode']);
        display_pincode_result($pincode);
    }

    wp_die();
}

function handle_post_office_search() {
    if (isset($_POST['postoffice'])) {
        $postOfficeName = sanitize_text_field($_POST['postoffice']);
        display_post_office_result($postOfficeName);
    }

    wp_die();
}

function display_pincode_result($pincode) {
    // Code to fetch and display pincode results
    $api_url = 'https://api.postalpincode.in/pincode/' . rawurlencode($pincode) . '/';
    $response = wp_remote_get($api_url);

    if (!is_wp_error($response) && $response['response']['code'] === 200) {
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);

        if ($data && $data[0]['Status'] === 'Success' && isset($data[0]['PostOffice'])) {
            $post_offices = $data[0]['PostOffice'];

            foreach ($post_offices as $post_office) {
                ?>
                <div class="pincode-result">
                    <h3>Pincode Information for <?php echo esc_html($pincode); ?></h3>
                    <ul>
                        <li>
                            <strong>Post Office Name:</strong> <?php echo esc_html($post_office['Name']); ?><br>
                            <strong>Branch Type:</strong> <?php echo esc_html($post_office['BranchType']); ?><br>
                            <strong>Delivery Status:</strong> <?php echo esc_html($post_office['DeliveryStatus']); ?><br>
                            <!-- Add more fields as needed -->
                        </li>
                    </ul>
                </div>
                <?php
            }
        } else {
            echo '<div class="pincode-results">Error fetching pincode information. Debug info: ' . print_r($data, true) . '</div>';
        }
    } else {
        echo '<div class="pincode-results">Error fetching pincode information. Debug info: ' . print_r($response, true) . '</div>';
    }
}

function display_post_office_result($postOfficeName) {
    // Code to fetch and display post office results based on the API
    $api_url = 'https://api.postalpincode.in/postoffice/' . rawurlencode($postOfficeName) . '/';
    $response = wp_remote_get($api_url);

    if (!is_wp_error($response) && $response['response']['code'] === 200) {
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);

        if ($data && $data[0]['Status'] === 'Success' && isset($data[0]['PostOffice'])) {
            $post_office = $data[0]['PostOffice'][0];

            ?>
            <div class="pincode-result">
                <h3>Post Office Information for <?php echo esc_html($postOfficeName); ?></h3>
                <ul>
                    <li>
                        <strong>Post Office Name:</strong> <?php echo esc_html($post_office['Name']); ?><br>
                        <strong>Branch Type:</strong> <?php echo esc_html($post_office['BranchType']); ?><br>
                        <strong>Delivery Status:</strong> <?php echo esc_html($post_office['DeliveryStatus']); ?><br>
                        <!-- Add more fields as needed -->
                    </li>
                </ul>
            </div>
            <?php
        } else {
            echo '<div class="pincode-results">Error fetching post office information. Debug info: ' . print_r($data, true) . '</div>';
        }
    } else {
        echo '<div class="pincode-results">Error fetching post office information. Debug info: ' . print_r($response, true) . '</div>';
    }
}

Tom J Nowell · Accepted Answer · 2024-02-28 17:39:54Z

0

Since the page does not exist in WordPress Pages that's why 404, you can achieve your goal by using URL Parameter Like: https://example.com/pincode/?pin_code=110045.

And in PHP use:

if( isset( $_GET['pin_code' ) ) {
 //Continue your logic.
}

edited Feb 28, 2024 at 17:39

Tom J Nowell♦

61.6k7 gold badges81 silver badges150 bronze badges

answered Feb 27, 2024 at 12:04

Syed Muhammad Usman

1124 bronze badges

Add a comment |

Stack Exchange Network

Issue in Creating Dynamic URL in custom wordpress plugin

1 Answer 1

Your Answer

Hot Network Questions

Issue in Creating Dynamic URL in custom wordpress plugin

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions