Shortcode in submenu

  • Resolved lexvw

    (@lexvw)


    1 month ago

    Hi,

    I am developing a wordpress plugin for the first time and actually a first time wordpress user as well. This plugin is meant to be used by a friend of mine so we have a lot of discussing here and there. He had this idea to use a Max Mega Menu submenu to hold 2 shortcodes we had thought of. Now the shortcodes loaded in to the submenu, all fine until I tried loading the JS and CSS complementary to the shortcode. I have been trying to figure out how to do this for the past few hours. The shortcodes work fine on a page, but just not in the submenu, i can see that the JS and CSS are not loaded with the shortcode in the Network tab. I tried enqueueing via menu items:

    function eta_enqueue_menu_assets() {
        $styles_dir = plugin_dir_url(__FILE__) . '../assets/css/';
        $scripts_dir = plugin_dir_url(__FILE__) . '../assets/js/';

        $menu_locations = get_nav_menu_locations();
        
        if (!empty($menu_locations)) {
            foreach ($menu_locations as $menu_id) {
                $menu_items = wp_get_nav_menu_items($menu_id);
                
                if ($menu_items) {
                    foreach ($menu_items as $menu_item) {
                        if (has_shortcode($menu_item->post_content, 'eta_chatbot')) {
                            eta_enqueue_dynamic_css('chatbot_css', $styles_dir . 'chatbot.css');
                            wp_enqueue_script('chatbot_js', $scripts_dir . 'chatbot.js', array('jquery'), null, true);
                        }

                        if (has_shortcode($menu_item->post_content, 'eta_dropdown')) {
                            wp_enqueue_style('dropdown_css', $styles_dir . 'dropdown.css');
                            wp_enqueue_script('dropdown_js', $scripts_dir . 'dropdown.js', array('jquery'), null, true);
                        }

                        if (has_shortcode($menu_item->post_content, 'eta_license_plate_checker')) {
                            wp_enqueue_style('license_plate_css', $styles_dir . 'license-plate.css');
                            wp_enqueue_script('license_plate_js', $scripts_dir . 'license-plate.js', array('jquery'), null, true);
                        }
                    }
                }
            }
        }
    }

    This did not do the trick, and now I am stuck on this problem. Is this even possible with MMM. Any help and/or tips are greatly appreciated, thank you in advance.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter lexvw

    (@lexvw)

    Extra information: I loaded the shortcodes in via using the custom HTML widget. And by adding this filter to my main php file.

    add_filter('wp_nav_menu_items', 'do_shortcode')
    Plugin Author megamenu

    (@megamenu)

    Hi lexvw,

    Please try outputting this and see what’s there: 

    $menu_item->post_content

    I don’t think that’s correct, I think it should be content rather than post_content.

    Regards,
    Tom

    Thread Starter lexvw

    (@lexvw)

    Hi Tom,

    Thank you for your fast response. Your answer set me in the right direction and I got it working. I went on a deep dive search again and did this:

    function eta_enqueue_menu_assets($items, $args) {
        $styles_dir = plugin_dir_url(__FILE__) . '../assets/css/';
        $scripts_dir = plugin_dir_url(__FILE__) . '../assets/js/';

        // Check if the menu contains any of the shortcodes
        if (strpos($items, '[eta_chatbot]') !== false) {
            eta_enqueue_dynamic_css('chatbot_css', $styles_dir . 'chatbot.css');
            wp_enqueue_script('chatbot_js', $scripts_dir . 'chatbot.js', array('jquery'), null, true);
        }

        if (strpos($items, '[eta_dropdown]') !== false) {
            wp_enqueue_style('dropdown_css', $styles_dir . 'dropdown.css');
            wp_enqueue_script('dropdown_js', $scripts_dir . 'dropdown.js', array('jquery'), null, true);
        }

        if (strpos($items, '[eta_license_plate_checker]') !== false) {
            wp_enqueue_style('license_plate_css', $styles_dir . 'license-plate.css');
            wp_enqueue_script('license_plate_js', $scripts_dir . 'license-plate.js', array('jquery'), null, true);
        }

        return $items;
    }
    function eta_process_menu_shortcodes($items, $args) {
        return do_shortcode($items);
    }

    Then I used those function in my init method like this:

        add_filter('wp_nav_menu_items', 'eta_enqueue_menu_assets', 10, 2);
        add_filter('wp_nav_menu_items', 'eta_process_menu_shortcodes', 10, 2);

    The ‘wp_nav_menu_items’ filters the HTML list contents for menus so we can use the ‘eta_enqueue_menu_assets’ to check if any specific shortcodes (like [eta_chatbot] or [eta_license_plate_checker]) are present in the menu items and then conditionally enqueues the necessary CSS and JavaScript files.

    Now i dont use the $args but i did include them here, this is an object containing additional arguments used by the wp_nav_menu() function (like the menu location, theme location, and other settings). It’s useful if you need context, like whether you’re dealing with a specific menu location, but you don’t always need it.

    And by making a custom function (eta_process_menu_shortcodes) to, for now, only call ‘do_shortcode’ ensures that I can later add some extra functionality I need.

    Now I am not sure if this is the correct/best way to do this. But it works.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.