woocommerce / woocommerce-blocks

(Deprecated) This plugin has been merged into woocommerce/woocommerce
https://wordpress.org/plugins/woo-gutenberg-products-block/
GNU General Public License v3.0
406 stars 219 forks source link

JS update woocommerce/filter-wrapper #8725

Closed dan-zakirov closed 1 year ago

dan-zakirov commented 1 year ago

I mean this block

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

What does it look like visually?

  1. When the page loads, the block is loaded 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

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

That is, the block goes to the state 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

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

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
});

??

kmanijak commented 1 year ago

Hi @dan-zakirov, thanks a lot for raising the issue and the whole explanation!

Would you be able to provide us with testing steps, so we could reproduce it on our side?

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”.

Is it one of WooCommerce Blocks filters or do you use another plugin that we could test it with?

I'd like us to try to find a root cause and a fix, before thinking about extending the block API. 🙌

dan-zakirov commented 1 year ago

@kmanijak Hi

Template woodmart and fillers that uses this template. But, that's not what I asked. I need an initialization event “Filter by Stock”

roykho commented 1 year ago

Hi @dan-zakirov - I understand you looking for a trigger to use to initialize the block however it seems the issue and/or question is why is the Filter by Stock block disappearing? Is that not the main culprit?

Aljullu commented 1 year ago

Hey there @dan-zakirov! As we didn't hear back from you for over two weeks, I will proceed closing this issue. But if you want to continue the discussion, feel free to leave a comment and we will reopen it. :slightly_smiling_face: