manipulować ceną produktu za pomocą AJAX
moim celem jest możliwość dynamicznego manipulowania ceną produktu za pomocą jego parametrów (= dane wejściowe z formularza, np. ilość). Gdy klient zmieni parametr, cena zostanie przeliczona i musi to nastąpić po stronie serwera. Formuły obliczeniowe będą dość skomplikowane i będą wykorzystywały, oprócz dynamicznych danych wejściowych od klienta, wiele danych statycznych (zapisanych w bazie danych, w pliku csv itp.) oraz funkcje matematyczne. Przyjrzałem się niektórym wtyczkom, ale żadna nie wydaje się być w stanie obsłużyć złożoności. Więc chciałbym spróbować zrobić to sam w kodzie.
Zaznaczam, że jest to mój pierwszy projekt na WordPressie. Nie jestem pewien, czy jest to właściwy sposób, ale do tego doprowadziły mnie moje badania. Byłem w stanie pojąć (do pewnego stopnia) koncepcję haków, akcji i filtrów i stwierdziłem, że aby móc odczytać dane wejściowe z formularza bez przeładowywania strony, muszę użyć AJAX. Oto co udało mi się do tej pory złożyć:
mam to w funkcje.php:
<?php
// functions.php
global $formData;
wp_register_script( 'ajax-form', admin_url('js/jz_skripty/ajax-form.js'), array('jquery') );
wp_localize_script('ajax-form', 'ajax_object', array('ajaxurl' => admin_url('admin-ajax.php')));
wp_enqueue_script( 'jquery' );
wp_enqueue_script('ajax-form');
add_action('wp_ajax_yReadFormData', 'yReadFormData');
add_action('wp_ajax_nopriv_yReadFormData', 'yReadFormData');
function yReadFormData() {
global $formData;
$formData = $_POST; // get the values from the form
print_r($formData);
wp_die(); // end the ajax request
}
/**
* Manipulate prices
*/
// Variable
add_filter('woocommerce_product_variation_get_price', 'yCalculatePrice' , 99, 2 );
function yCalculatePrice( $price, $product ) {
// Delete product cached price (if needed)
wc_delete_product_transients($product->get_id());
global $formData;
$quantity = $formData['quantity'];
$price = $price * log($quantity);
return $price;
}
// Variations (of a variable product)
add_filter('woocommerce_variation_prices_price', 'yCalculatePrice_variants', 99, 3 );
function yCalculatePrice_variants( $price, $variation, $product ) {
// Delete product cached price (if needed)
wc_delete_product_transients($variation->get_id());
global $formData;
$quantity = $formData['quantity'];
$price = $price * log($quantity);
return $price;
}
To jest AJAX:
// ajax-form.js
jQuery(document).ready(function ($) {
var prevQuantity = 0; // initialize a variable to store the previous quantity value
$('.input-text.qty.text').change(function (e) {
e.preventDefault(); // prevent default form submission
var quantity = $(this).val(); // get the value of the input field
if (quantity != prevQuantity) { // check if the quantity value has changed
$.ajax({
type: 'POST',
url: ajax_object.ajaxurl, // use the localized variable
//dataType: 'json',
data: {
action: 'yReadFormData',
quantity: quantity
}, // send the action and the input value
success: function (response) {
console.log(response); // display the response from the server
}
});
prevQuantity = quantity; // update the previous quantity value
}
});
// trigger the change event on page load
$('.input-text.qty.text').trigger('change');
});
Jeśli załaduję stronę i sprawdzę konsolę, wyświetli ona pewne dane. Kiedy zmieniam ilość w formularzu, zmienia to dane wyjściowe. Więc to działa:
Ale jednocześnie otrzymuję ostrzeżenie: Ostrzeżenie: próba uzyskania dostępu do przesunięcia tablicy na wartość typu null w functions.php w linii 41 (i podobnie dla innych linii – jest to odniesienie do linii z $quantity = $formData['quantity'];
). w funkcji yReadFormData()
wygląda na to, że w tablicy jest zawartość $formData
, ale w innych funkcjach jest null. Dlaczego? czego mi brakuje?
Wszelkie wskazówki będą bardzo mile widziane. Dziękuję.