Форма Wordpress Ajax CSV Запрос цены

Я создаю форму калькулятора карт, в которой вы можете выбрать тип карты и выбрать количество, а цена будет возвращена.

Я использую CSV-файл для ценообразования, и у меня все отлично работает. как простая HTML-форма, отображаемая через шорткод в WordPress.

<?php
// Get CSV 
$ch = fopen($standard_csv, "r");
$header_row = fgetcsv($ch);

// Get array of rows
$rows = array_map('str_getcsv', file($standard_csv));

// Remove first row (header row) as we already have this separately
unset( $rows[0] );
?>


<!-- The Form -->
<form action = "" method = "post" name = "calc" id = "calc">

    Type: 
    <select name = "card" id = "card">
    <option value = "">Please Select</option>
    <?php
        // Remove first blank cell from $header
        unset( $header_row[0] );
        foreach ( $header_row as $key => $card ){
            echo '<option value = "' . $key . '">' . $card . '</option>';
        }
    ?>
    </select>


    Quantity: 
    <select name = "quantity" id = "quantity">
    <option value = "">Please Select</option>
    <?php
        foreach ( $rows as $key => $row ){
            echo '<option value = "' . $key . '">' . $row[0] . '</option>';
        }
    ?>

    </select>


    <input type = "submit" name = "get-price" value = "Get Price!">

</form>

<?php

if ( isset( $_POST['get-price'] ) ){
    $card = $_POST['card'];
    $quantity = $_POST['quantity'];
    echo 'Price: £' . $rows[$quantity][$card];
}
?>

Это здорово, но я хочу отображать возвращенную цену с помощью AJAX, поэтому мне не нужно обновлять страницу, когда пользователь запрашивает цену для выбранной карты и количество.

У меня есть мои сценарии в очереди так:

wp_enqueue_script( 'custom_script', plugin_dir_url( __FILE__ ) . 'js/custom.js', array('jquery'), '1.0' );
wp_localize_script( 'custom_script-script', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ),

add_action('wp_ajax_get_price', 'get_price');
add_action('wp_ajax_nopriv_get_price', 'get_price');



function get_price(){

        $card = $_POST['card'];
        $quantity = $_POST['quantity'];
        return 'Price: £' . $rows[$quantity][$card];

}

У меня есть это в моем файле Javascript

$('#calc').submit(function (event) {
            event.preventDefault();
            var card = jQuery('#card').val();
            var quantity = jQuery('#quantity').val();

            jQuery.ajax({
                type: 'POST',
                url: ajax_object.ajax_url,
                data: {
                    action: 'get_price',
                    card: card,
                    quantity: quantity
                },
                success: function (data) {
                    console.info(data);
                },
                error: function (errorThrown) {
                    console.info(data);
                    alert(errorThrown);
                }
            });
    });

Я полностью запутался, и я пытался следовать многим учебникам, но я просто не могу выработать правильную логику, чтобы иметь возможность выводить цену из файла CSV с помощью AJAX без перезагрузки страницы.

Я знаю, что этот код совершенно неверен, но, пожалуйста, любая помощь, чтобы установить меня в правильном направлении, будет очень признательна.

Мне просто нужна помощь в понимании логики того, как обрабатывать передачу переменных и цен между ajax и функцией php, чтобы вернуть цену из файла CSV.

Спасибо.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
36
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Не возвращаться из ajax - выйти.

Заменить return 'Price: £' . $rows[$quantity][$card];

с участием

wp_die('Price: £' . $rows[$quantity][$card]);

С наилучшими пожеланиями, Митчелл

Привет, Митчелл, и спасибо за любезную помощь. Я попробовал это, и у меня есть прогресс! Однако в моей функции успеха я записываю данные в консоль, console.info(data); но по какой-то причине он регистрирует всю страницу HTML в консоли?

Brian Revie 30.05.2019 18:24

1) Пожалуйста, примите ответ. 2) Я не уверен, почему console.info(data) будет отображать что-либо, кроме возвращаемого значения.

WhereDidMyBrainGo 30.05.2019 19:54

Я приму ответ, поскольку вы направили меня в правильном направлении, Митчелл, так что спасибо, что нашли время, это много значит. Сейчас разобрался и все заработало :)

Brian Revie 30.05.2019 20:04

Спасибо. Хотел бы я понять проблему console.info().

WhereDidMyBrainGo 30.05.2019 20:07

Другие вопросы по теме