WordPress

manipulować ceną produktu za pomocą AJAX

  • 15 lipca, 2023
  • 3 min read
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:

Warto przeczytać!  formaty postów — Jak zachować dokładne formatowanie podczas wklejania kopii z Facebooka do WordPress (lub gdzie indziej)?

konsola

wprowadzone ilości

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ę.


Źródło