JS update woocommerce/filter-wrapper

Hello @alexodiy,

Glad to hear you’re enjoying WooCommerce blocks. : )

I’m not sure if I understand what you mean by “woocommerce/filter-wrapper” block, can you please attach some screenshots that describe the problem?

You can upload them using Snipboard.

Look forward to hearing back from you.

Hello @babylon1999,

I mean this block https://img.alexodlw.beget.tech/2023-03-08_185140.png

The block is called “Filter by Stock”.

Let’s break down step by step how it is loaded

1. The page is loaded
2. When the page loads, this file /wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/stock-filter-wrapper-frontend.js is called (or a file from your plugin)
3. After processing the file this block appears https://img.alexodlw.beget.tech/2023-03-08_185140.png

What does it look like visually?

1. When the page loads, the block is loaded https://img.alexodlw.beget.tech/2023-03-08_190129.png and something from the stock-filter-wrapper-frontend.js file is called
2. After the stock-filter-wrapper-frontend.js file runs, the block appears as https://img.alexodlw.beget.tech/2023-03-08_185140.png

What is my problem?

I have other filters on my site, and when they work an ajax request occurs, which for some reason erases the HTML structure “Filter by Stock”. It goes like this https://img.alexodlw.beget.tech/bag.gif

That is, the block goes to the state https://img.alexodlw.beget.tech/2023-03-08_190129.png and further does not load

How I temporarily solved the problem?

I decided to call this block after AJAX request was loaded:

jQuery(document).ajaxStop(function() {
// here I call the code from your plugin
// woo-gutenberg-products-block/build/filter-wrapper-frontend.js
});

And magic… Everything works fine, but it looks terrible in the code https://img.alexodlw.beget.tech/2023-03-08_193517.png

What do I want to end up with?

Either way there should be a “Filter by Stock” initialization call or some kind of trigger or JS event that re-builds the HTML, it also works if I call all the code from the file

For example, on woocommerce there are such triggers https://img.alexodlw.beget.tech/2023-03-08_194047.png

In any case there should be some event on initialization of “Filter by Stock” so I can call it here:

jQuery(document).ajaxStop(function() {
// I want to trigger an event here that will display the block
});

Hi @alexodiy,

I appreciate the detailed explanation of the issue and how you were able to resolve it.

This sounds like a good enhancement request for the WooCommerce Blocks plugin.

Can you please open a GitHub request here such that the developers can take a look and loop into the discussion?

Thanks! ??

Hi @alexodiy

I’ve sent your feedback to the product team, but apparently what you’re experiencing is a potential conflict. The filter-wrapper block is necessary for rendering all the filter blocks

Could you please share a copy of your site’s System Status? You can find it via WooCommerce > Status. Select “Get system report” and then “Copy for support”.? Once you’ve done that, paste it here in your response.

With this information we can have a better picture of your environment.

Best,