Wordpress Plugin Javascript problem

[LinkDirect04]

Body

Hi
I am busy with my first wordpress plugin. It is a form that is calculation a total price from the woocommerce product id's. I have a first row with cost of blank product which is showing the product variations from the spesified product. I struggle to let the blank product price update the total price dynamically. When the page open it shows only one variations price and once another option is selected from the dropdown it does not change. It only change once a printing system in the next row gets selected. The cost of blank product must update dynamically when opening the page and selecting other options from the dropdown. Here is my full javascript code:

$output .= '<script>
document.addEventListener("DOMContentLoaded", function() {
var totalCostElement = document.getElementById("total_price");
var blankProductCostElement = document.getElementById("blank_product_cost");
var printingSystemElement = document.getElementById("printing_system");
var inkCostRow = document.getElementById("ink_cost_row");
var paperCostRow = document.getElementById("paper_cost_row");
var inkCostElement = document.getElementById("ink_cost");
var ownInkCostElement = document.getElementById("own_ink_cost");
var paperCostElement = document.getElementById("paper_cost");
var paperQuantityElement = document.getElementById("paper_quantity");
var designsPerPageElement = document.getElementById("designs_per_page");
var suggestedPriceElement = document.getElementById("suggested_price");

    // Function to update ink cost dropdown options
    function updateInkCostOptions(optionsHTML) {
        inkCostElement.innerHTML = optionsHTML;
        // Add event listener to clear own ink cost when a product is chosen from dropdown
        inkCostElement.addEventListener("change", function() {
            ownInkCostElement.value = ""; // Clear the own ink cost field
            updateTotalCost(); // Update total cost
        });
    }

    // Update total cost calculation function
    function updateTotalCost() {
        var blankProductCost = parseFloat(blankProductCostElement.value) || 0;
        var selectedInkOption = inkCostElement.options[inkCostElement.selectedIndex];
        var selectedInkOriginalPrice = parseFloat(selectedInkOption.value) || 0;
        var selectedInkDividedPrice = parseFloat(selectedInkOption.dataset.dividedPrice) || 0;
        var inkCost;
        
        var paperCost = parseFloat(paperCostElement.value) || 0;
        var selectedPaperOption = paperCostElement.options[paperCostElement.selectedIndex];
        var selectedPaperOriginalPrice = parseFloat(selectedPaperOption.value) || 0;
        var selectedPaperDividedPrice = parseFloat(selectedPaperOption.dataset.dividedPrice) || 0;
        
        var designsPerPage = parseFloat(designsPerPageElement.value) || 1;
        
        if (ownInkCostElement.value) {
            inkCost = parseFloat(ownInkCostElement.value) || 0;
            // If own amount is entered, clear the product selection dropdown
            inkCostElement.value = "";
        } else {
            inkCost = selectedInkOriginalPrice / 350;
        }
        
        // Divide paperCost by quantity
        var paperCostPerUnit = selectedPaperDividedPrice;
        
        // Calculate the total cost
        var totalPrice = ((blankProductCost + inkCost + paperCostPerUnit) / designsPerPage).toFixed(2);
        
        // Update the total cost element
        totalCostElement.textContent = totalPrice;   
        
        // Update suggested retail price
        suggestedPriceElement.textContent = (parseFloat(totalPrice) * 2.5).toFixed(2); 
    }

    // Add event listeners for input changes
    blankProductCostElement.addEventListener("change", updateTotalCost);
    printingSystemElement.addEventListener("change", function() {
        // Fetch and populate ink cost options when a printing system is selected
        var group_id = printingSystemElement.value;
        if (group_id !== "") {
            jQuery.ajax({
                type: "POST",
                url: "' . admin_url('admin-ajax.php') . '",
                data: {
                    action: "fetch_ink_cost_options",
                    group_id: group_id
                },
                success: function(response) {
                    updateInkCostOptions(response); // Update ink cost dropdown options
                    updateTotalCost(); // Update total cost when ink cost options are populated
                },
                error: function(xhr, status, error) {
                    console.error(error); // Log any errors to the console
                }
            });
            jQuery.ajax({
                type: "POST",
                url: "' . admin_url('admin-ajax.php') . '",
                data: {
                    action: "fetch_paper_cost_options",
                    group_id: group_id
                },
                success: function(response) {
                    paperCostElement.innerHTML = response; // Set fetched paper cost options to the dropdown
                    updateTotalCost(); // Update total cost when paper cost options are populated
                },
                error: function(xhr, status, error) {
                    console.error(error); // Log any errors to the console
                }
            });
        } else {
            // If no printing system is selected, reset the ink and paper cost to 0 and update total cost
            inkCostElement.innerHTML = \'\';
            inkCostElement.value = \'0\';
            paperCostElement.innerHTML = \'\';
            paperCostElement.value = \'0\';
            updateTotalCost();
        }
        // Show/hide ink cost row based on printing system selection
        inkCostRow.style.display = group_id !== "" ? "table-row" : "none";
        // Show/hide paper cost row based on printing system selection
        paperCostRow.style.display = group_id !== "" ? "table-row" : "none";
    });

    // Add event listeners for input changes
    inkCostElement.addEventListener("input", updateTotalCost);
    ownInkCostElement.addEventListener("input", updateTotalCost); // Add event listener for own ink cost input
    paperCostElement.addEventListener("input", updateTotalCost);
    paperQuantityElement.addEventListener("input", updateTotalCost); 
    designsPerPageElement.addEventListener("input", updateTotalCost);
     
    // Trigger change event on page load to update total cost
    updateTotalCost();
});

</script>';

Thanks

Guidelines

• I have read and understood this category's guidelines before making this post.

[ebndev]

Hey @LinkDirect04! Thanks for posting in the GitHub Community.

inkCostElement.addEventListener("change", function() { ownInkCostElement.value = ""; // Clear the own ink cost field updateTotalCost(); // Update total cost });

I don't think this needs to be inside of a function. It's only updating when a printing system in the next row is selected because the current function it's in updateInkCostOptions only gets called inside of the printing system event listener printingSystemElement.addEventListener("change", function() {

So removing it outside of the updateInkCostOptions should give you the flow of events you're hoping for.

[LinkDirect04]

Thank you for your answer but if I move the above line out of the function the drop down for printing system is not working at all. When selecting a printing system the cost of ink and cost of paper dropdowns are displayed.

This is the url to the form https://jgsp.linkdirect.co.za/home/. My problem is that the cost of blank product is not updating dynamically.

[ebndev]

Ohh okay. I saw in the console there's this error: Uncaught TypeError: Cannot read properties of undefined (reading 'value')

It's not getting the value for these 2 variables:

var selectedInkOption = inkCostElement.options[inkCostElement.selectedIndex];
var selectedInkOriginalPrice = parseFloat(selectedInkOption.value) || 0;

var selectedPaperOption = paperCostElement.options[paperCostElement.selectedIndex];
var selectedPaperOriginalPrice = parseFloat(selectedPaperOption.value) || 0;

So you may not be targeting selectedInkOption & selectedPaperOption correctly

[LinkDirect04]

Thank you so much, it fixed the problem. I had to make sure that they exist before trying to read the value.

[ebndev]

Nice!