WordPress

ajax — Problem z tworzeniem dynamicznego adresu URL w niestandardowej wtyczce WordPress

  • 26 lutego, 2024
  • 5 min read
ajax — Problem z tworzeniem dynamicznego adresu URL w niestandardowej wtyczce WordPress


Mam problemy z tworzeniem dynamicznych adresów URL w mojej niestandardowej wtyczce, która korzysta z interfejsu API do pobierania szczegółów. Poczta, przeszukując kody PIN i nazwy lokalizacji

Oto adres URL:

Kiedy wyświetli wynik, adres URL zostanie automatycznie zmieniony, ale gdy użyję tego adresu URL, np. 110045, osobno w mojej przeglądarce, prowadzi mnie to do strony 404 lub przekierowuje do strony głównej.

Ponieważ zweryfikowałem już plik .htaccess i ponownie zaktualizowałem Permalinks, problem istnieje. Ponieważ moim głównym celem jest uzyskanie dynamicznych linków do celów rankingowych w SERP dla każdego adresu URL osobno

Kod dla shortcode-functions.php

<?php

// Plik: shortcode-functions.php

funkcja 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(’wyszukiwanie kodu PIN’, 'forma_wyszukiwania kodu PIN’);

Warto przeczytać!  Daniel Kossmann – Wiadomości WordPress

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’);

funkcja handle_pincode_search() { if (isset($_POST[’pincode’])) { $pincode = sanitize_text_field($_POST[’pincode’]); display_pincode_result($kod PIN); }

wp_die();

}

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

wp_die();

}

funkcja display_pincode_result($pincode) { // Kod do pobrania i wyświetlenia wyników kodu PIN $api_url=” .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>';
}

}

funkcja display_post_office_result($postOfficeName) { // Kod do pobierania i wyświetlania wyników poczty w oparciu o API $api_url=” .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>';
}

}


Źródło

Warto przeczytać!  Jak zmodyfikować główne zapytanie, aby wyświetlało pola ACF