-1

I’m working on a WordPress site and trying to implement a JavaScript class (MobileUI) from a Webpack compiled module to handle mobile-specific UI changes. However, the class doesn’t seem to work at all. When I refresh the browser, nothing happens, and the alert() statement inside the constructor doesn’t fire. I’ve tested the alert() outside the class, and it works, but when placed inside the constructor, it doesn’t execute. I’ve also removed everything from the class except the constructor, but the issue persists.

Expected Result:

  • The alert() statement inside the constructor should fire when the page loads, indicating that the class is being instantiated.
  • The class should apply changes to the DOM (e.g., hide elements, move elements) based on the screen width.

Actual Result:

  • The alert() statement inside the constructor does not fire.
  • No changes are applied to the DOM.

Code: Here’s the JavaScript class I’m using (/src/mobile_ui_changes.js):

export default class MobileUI { constructor(ui_body, scrW_min, scrW_max) { alert("Hello, I am mobile UI"); // This alert does not fire // Properties this.body = document.querySelector(ui_body); this.sidebar = this.body.querySelector('.sidebar'); this.shoppingMenu = this.body.querySelector('.shopping-menu-wrapper .shopping-menu'); this.shoppingActions = this.shoppingMenu.querySelector('.menu-icon'); this.scrW_min = scrW_min; this.scrW_max = scrW_max; this.prodViews = this.body.querySelectorAll('.child-cat-content .child-cat-header .view-icons .view-icon'); this.targetProdViews = this.body.querySelector('.view-icons #view-stacked, .view-icons #view-tile'); // Methods this.hide_shopping_menu(); this.hide_specified_views(); this.move_shopping_actions(); } hide_specified_views() { this.prodViews.forEach(view => { const viewInvisible = 'viewInvisible'; view.classList.toggle(viewInvisible); }); } move_shopping_actions() { if (!this.sidebar.contains(this.shoppingActions)) { this.sidebar.appendChild(this.shoppingActions); } else { this.body.appendChild(this.shoppingActions); } } hide_shopping_menu() { const screenWidth = window.innerWidth; if (screenWidth >= this.scrW_min && screenWidth <= this.scrW_max) { this.shoppingMenu.classList.add('shopInvisible'); this.hide_specified_views(); this.move_shopping_actions(); } } }

How I’m Using the Class:

  1. I’ve imported the class in my main JavaScript file:

    import MobileUI from './/modules/mobile_ui_changes.js';

  2. I’m instantiating the class after the DOM has loaded:

    document.addEventListener('DOMContentLoaded', () => { const mobileUIChanges = new MobileUI('body', 360, 1080); });

HTML Structure: Here’s the relevant HTML structure:

<body class="tax-product_cat"> <div class="sidebar"><!--sidebar content--></div> <div class="shopping-menu-wrapper"> <div class="shopping-menu"> <div class="menu-icon">Shopping Actions</div> </div> </div> <div class="child-cat-content"> <div class="child-cat-header"> <div class="view-icons"> <div class="view-icons"> <img id="view-stacked" class="view-icon" src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/view-stacked-accent.svg" alt="Stacked View"> <h6 class="view-heading">Stacked</h6> <img id="view-tile" class="view-icon" src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/view-tile.svg" alt="Tile View"> <h6 class="view-heading">Tile</h6> <img id="view-table" class="view-icon" src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/view-table.svg" alt="Table View"> <h6 class="view-heading">Table</h6> </div> </div> </div> </div> </body>

This is how I enqueued the module (along with other modules):

function mainModules () { $args = array( 'strategy' => 'async' ); wp_enqueue_script('main_modules', get_theme_file_uri('/build/index.js'), array(), '1.0.0', $args); } add_action('wp_enqueue_scripts', 'mainModules');

What I’ve Tried:

  1. Placing the alert() statement outside the class: It works.
  2. Placing the alert() statement inside the constructor: It does not work.
  3. Removing everything from the class except the constructor: The alert() still doesn’t fire.
  4. Checking the browser console for errors: No errors are logged.
  5. Ensuring the DOM elements exist: The elements are present in the HTML.

Environment:

  • WordPress version: 6.7.2
  • Theme: custom theme
  • Libraries: Node.JS, WordPress Scripts
  • build tool: Webpack
  • Browser: Mozilla Firefox for ZorinOS 135.0 (64-bit)
  • Operating System: ZorinOS 17.2

Questions:

  1. Why isn’t the constructor firing, and how can I fix it?
  2. Are there any WordPress-specific issues that could prevent the class from working?
  3. How can I ensure the class is instantiated correctly and applies the desired changes to the DOM?

Edit: Interestingly, I can call an alert() statement from the constructor of another module I created in the same src folder earlier.

Improve this question

    1 Answer 1

    Reset to default
    0

    You need to enqueue the script in WordPress, you typically use the wp_enqueue_script() function in your theme or plugin. This function ensures that your scripts are added to your WordPress site in the proper order and only when necessary.

    Here’s the general process for enqueuing a script:

    Open your theme's functions.php file (or the appropriate file in your plugin).

    Use the wp_enqueue_script() function to add your JavaScript file.

    Here’s an example of how to enqueue a script:

    function my_custom_scripts() { // Enqueue a custom JavaScript file wp_enqueue_script( 'my-custom-script', // Handle for the script get_template_directory_uri() . '/js/custom-script.js', // Path to the script array('jquery'), // Dependencies (optional, e.g., jQuery) null, // Version number (optional, set to null to avoid versioning) true // Whether to load the script in the footer (true) or the header (false) ); } add_action('wp_enqueue_scripts', 'my_custom_scripts');

    Breakdown of wp_enqueue_script() parameters:

    Handle: A unique name for the script. In this example, it's 'my-custom-script'. Source: The location of your JavaScript file. In the example above, it’s located in the js folder of the theme directory.

    Dependencies: This is an array of other scripts that need to be loaded before your script. In this case, it’s jQuery (optional).

    Version: You can specify a version number for your script or set it to null to let WordPress handle it automatically.

    In Footer: A true value loads the script in the footer, which is usually preferred for performance reasons, while false would load it in the header.

    Common Tips: Ensure your file path is correct: Use get_template_directory_uri() for the theme or plugin_dir_url(FILE) for a plugin.

    Minify scripts for production: It’s a good practice to minify JavaScript files before enqueuing them on your site for better performance. Let me know if you need help with any specific part of the process!

    Improve this answer
    3
    • I enqueued my script like this: ``` function mainModules () { $args = array( 'strategy' => 'async' ); wp_enqueue_script('main_modules', get_theme_file_uri('/build/index.js'), array(), '1.0.0', $args); } add_action('wp_enqueue_scripts', 'mainModules'); ``` I still have no results however. The interesting thing is that I managed to run an alert() statement from the constructor of another script I wrote after using this enqueueing process. The same does not work for the mobileUI script however.
      – BrigantiumXIX
      CommentedFeb 21 at 18:29
    • See also the edit. I updated my post with some new detail as well.
      – BrigantiumXIX
      CommentedFeb 21 at 18:59
    • add you script inside of this jQuery(document).ready(function($) { //your script code goes here. });
      – Nuno Sarmento
      CommentedFeb 23 at 20:49

    Start asking to get answers

    Find the answer to your question by asking.

    Ask question

    Explore related questions

    See similar questions with these tags.