Adding @wordpress/interactivity to Sage 11?

[the_lar]

I’ve started building a new woocommerce site and am trying to add a dynamic sidebar with the default Woocommerce Product filter in - just to have a play and see if I can use it.

When I view my /product-category/ pages I can see the html items - checkboxes, sliders etc, but none of it works!

In my console I can see some error messages:

I’ve installed @wordpress/interactivity via npm install @wordpress/interactivity and rebuilt but I still get the error.

I’m guessing that I’m not enqueuing it or including it somewhere, but having jumped from Sage 9 to Sage 11, I’m not entirely sure how or where I do this now?

Thanks in advance

[ben]

What are the steps to reproduce this?

On a vanilla Sage v11 install with WooCommerce, I’m not able to reproduce any errors with the interactivity API when adding the product filters block

What exact changes did you make to your theme? Post your code

[the_lar]

Hi @ben , maybe it’s the way I’m implementing it then.

First I’m registering a new sidebar in filters.php -

function register() {
    $args = [
        'name'          => 'Product filters',
        'id'            => 'my-product-filters',
        'description'   => 'Test for display product filters in woocommerce on roots/sage',
        'class'         => '',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2>'
    ];
    register_sidebar( $args );
}
add_action( 'widgets_init', '\App\register' );

Then adding a function to render a sidebar with just the registered widget:

function sidebar(){
    return dynamic_sidebar('my-product-filters');
}
add_action('get_sidebar', '\App\sidebar');

Then on views/woocommerce/archive-product.blade.php I have

do_action('get_sidebar', 'shop');

This was already present and is why I called my rendering function in filters.php get_sidebar

Finally I headed to Appearance > Widgets in admin:

I then just add the product filter to the new product filters area:

and ‘Update’

When I now go to my product archive page /product-category/alloy-wheels/ I see the filters below all the product cards, but nothing actually works

[ben]

I feel like widgets aren’t the way to go here. If you don’t want to manage your layout within the page itself, consider going down the FSE route instead?

GitHub - roots/acorn-fse-helper: Bootstrap FSE support in Acorn-based WordPress...

[the_lar]

OK, interesting - I don’t think it’s a widget thing - I’ve just tried editing the shop page and just dropping a Product Filter block on it in the Gutenberg block editor, updated and viewed in a different browser - so I’m logged out. Now it works!

Went back and tried it the Widget way, and this also works - but only if I’m logged out!

Also works if I create a customer account and log into that - so it’s an issue with being logged in to admin pressumably, either Admin account or Editor? Not sure, maybe it’s nothing to do with Sage at all and its a Wordpress/Woocommerce bug

[the_lar]

Just coming back on this issue - I’ve discovered that it’s actually limited to Firefox only - Chrome is fine. Still haven’t found a fix or even that much about it when I google the error - I haven’t tried deploying my dev site yet to a staging environment so maybe that will sort it. I’ll post back here if I do find anything though

[dsturm]

I also ran into this issue (here with the navigation block) and found this ‘quick fix’:

/**
 * Quickfix for script module loading bug on Firefox
 *
 * @see https://wordpress.org/support/topic/importmap-wordpress-interactivity/
 */
remove_action('after_setup_theme', [\wp_script_modules(), 'add_hooks']);
add_action('wp_head', function () {
    wp_script_modules()->print_import_map();
    wp_script_modules()->print_enqueued_script_modules();
    wp_script_modules()->print_script_module_preloads();
    echo "\r\n";
}, 8); // Use a early priority, 9 might be too late.

[ben]

Nice one! I’ll get a guide up for this soon and give you credit

[dsturm]

Just for the record: I just found it - @becleung was the originator of the solution

[ben]

Ah thank you! Still a good find!

[dsturm]

Hello,

I encountered an issue where the initial JavaScript error was resolved in Firefox using the provided quick fix. However, the lightbox functionality of the gallery or image block did not work. So, I had to modify the fix:

add_action('wp_loaded', function (): void {
    $position = wp_is_block_theme() ? 'wp_head' : 'wp_footer';

    add_action($position, [wp_script_modules(), 'print_import_map'], 8);
});

This will print the map twice. I’m not sure if we can really remove it from priority 10, because we might miss some data that will be registered later.