This has been driving me crazy. I’ve been trying to make an ajax call via php thats connected to frontend javascript on wordpress.

Here’s the javascript:

document.addEventListener('DOMContentLoaded', function () {
        const skincareKitBuilder = {
            ajax_url: '<?php echo admin_url('admin-ajax.php'); ?>',
            nonce: '<?php echo wp_create_nonce('skincare_kit_builder_nonce'); ?>'
        };

Do i Need to just ditch the frontend js and make a js file and upload it with the php as a plugin or is there a syntax or permissions/file location error going on here?

I tried this in the php file thinking it would work but didnt do a thing if parsing was the issue…

// Register and enqueue the scripts and styles for the frontend
function skincare_kit_builder_enqueue_scripts() {
    wp_enqueue_script('skincare-kit-builder-js', plugin_dir_url(__FILE__) . 'js/skincare-kit-builder.js', array('jquery'), null, true);
    wp_localize_script('skincare-kit-builder-js', 'skincareKitBuilder', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('skincare_kit_builder_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'skincare_kit_builder_enqueue_scripts');