Bug with the collection block

  • Resolved mmamld

    (@mmamld)


    4 months ago

    I need help with what seems to be a bug with the collection block of woocommerce.

    Behaviour: when you have multiple page collection and go to next page it loads the new products but not anything else on the page, if you have a floating element, like the complianz cookie pop-up or any other pop-up with html on the page, it will be revealed and the page disfigured. If you reload/refresh the page manually, everything loads correctly.

    How to reproduce the bug: fresh install wordpress, install wooCommerce, add enough products to make a multi-page store-front, go to the store and click next page to load more products. Notice the product results count block not updating. Refresh the page, it now updates until new products are loaded. If any javascript pop-up plugin is installed, it will be shown without css nor javascript executed until manual refresh.

    This behaviour affects every blocks theme that uses the collection block. If you use the block theme with the shortcode, this do not happen until you turn the shortcode to blocks. Tested on these themes: Forst, Neve, Jaxon, Twenty-Twenty-Five, Spectra One, Idea Flow, Raft, Green Shift, Inspiro, Plover, Vene. The next themes only show this behaviour after turning shortcode to blocks: YITH Wonder, Gutenify Base and Store, Blockette, Creativ #name, Bricksby, Variations, Storefront.

    Also tried to put the product results count block inside the collection, it disappears after clicking next page, tried to force page reload with php, but I cannot find a way to not go into a reload loop, I’m not a php programmer.

    I have this site almost ready for a client and need to get rid of this bug. Please help. I’ve tried so many “solutions” and none worked.

    Thank you

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support shahzeen(woo-hc)

    (@shahzeenfarooq)

    4 months ago

    Hi there!

    Thank you for the detailed explanation and for the effort you’ve put into reproducing the issue — it’s very helpful.

    I’ve tried to replicate this on my end and was able to confirm the same behavior: when navigating to the next page in the Collection block, only the products update while other elements (like the Product Results Count block or floating pop-ups) do not refresh properly.

    I will forward this information to our development team so they can investigate further. We’ll get back to you as soon as we have any updates or a potential fix.In the meantime, I would suggest using a shortcode until we fix this issue.

    Thank you for your patience while we look into this.

    Thread Starter mmamld

    (@mmamld)

    4 months ago

    Thanks for the reply Shahzeen.

    After delving on wooCommerce documentation I found that you have a “forcePageReload” flag on woocommerce/product-collection. So I went and tried to use it.

    Next, comparing theme options, I notice that older themes, like Kiosk, have an older version of product collection with the block labelled “beta” and, if I do not update to the new block, it worked with an auto-reload. After trying, and failing, to add the flag to attribute using the code view, I finally found that in the block sidebar-advanced an option labelled “Reload Full Page” was featured on the “Beta” block and active. I tried to find it in the new block, the one on most themes, and there it is, just disabled.

    I’ve enabled it and, so far, it has worked on my tests. I’m using wooCommerce as a catalogue so I cannot attest if this is a solution for a real store, or just a patch. I haven’t tested extensively, just found it.

    How to replicate: Load your test woocommerce wordpress installation as describes in my previous post. Load a block theme, like Neve FSE. Go to the theme editor, select the “store” template. In the editor select the product collection block. On the right bar select “block” menu and the “advanced” accordion. Roll everything down and find the “Reload full Page” switch. Turn it on. Save and visit your store page. If you click next page, the page will now fully reload and everything will update accordingly.

    I don’t know if this is a full solution or not. Just documenting because there is nothing on the internet describing this bug/patch. If there is another solution, I’ll be all ears. Been trying to solution this for 2 weeks already.

    Once again thanks for your time.

    Sai (woo-hc)

    (@saivutukuru)

    4 months ago

    Hi @mmamld,

    Thanks for sharing what you found, that’s actually a really useful discovery.

    You’re absolutely right about what’s happening. The new Product Collection block uses partial page updates when you paginate. That means it only refreshes the product grid area instead of reloading the whole page. Because of that, other elements on the page (like popups, floating banners, results count blocks outside the collection, etc.) don’t get reinitialized, which is why things look broken until you manually refresh.

    The “Reload Full Page” option you found switches pagination back to a traditional full page reload. That forces everything to render again properly, including third-party JS and floating elements. So yes, that’s a valid and supported setting.

    This isn’t really a bug in the shortcode version, which is why it behaves differently. It’s more a limitation of how partial rendering works with some themes and plugins that aren’t built to handle it cleanly yet.

    For a production site, enabling “Reload Full Page” is a perfectly reasonable solution. The only downside is that pagination won’t feel as “instant,” but it’s stable and avoids the layout issues you described.

    Appreciate you documenting this, it’ll definitely help others running into the same thing.

    Thread Starter mmamld

    (@mmamld)

    4 months ago

    Thanks for the reply Sai.

    This is the first time that I’m using Woocommerce and Gutenberg, and I cannot say that this has been a smooth experience. Nevertheless, I’m thankful for your plug-in.

    After a few days away I’m back to the test and pre-production sites and can now add some more feedback:

    • The toggle indeed works with pagination and solves that problem.
    • It all breaks if you use the free integrated filter block that comes with the free plug-in.
    • Every plug-in that uses ajax (whatever it is) breaks woocomerce blocks pages.

    The filter behaviour is the same as the pagination, the load bar appears on top, the filter is applied on the collection block but nothing else updates and everything javascript breaks on the page. I tried to find the same toggle, but it does not exist on the filter block or sub-blocks. Tried then a recommended plug-in with “ajax”. It filtered but broke menus and other blocks. Tried another one with an “ajax off” toggle that – so far – works well with everything.

    I suspect most sites that use Woocommerce are not using block themes or use the “shortcodes” versions on the dedicated store pages. The block version is very cool especially on the customization but don’t play well among themselves with partial rendering.

    For now It seems that things are working in an acceptable state for my case. I hope this helps you or anyone who stumbles upon these querks.

    Thanks for your time and replies.

    LovingBro (woo-hc)

    (@lovingbro)

    4 months ago

    Hi @mmamld,

    It’s great to hear that things are now working in an acceptable state for your use case, and we truly appreciate the time you took to test thoroughly and share your findings with the community. That kind of detailed feedback goes a long way.

    If anything comes up as you continue refining the site, please feel free to open a new topic or reach out in this thread and we’ll be happy to take a closer look.

    And if you found WooCommerce helpful through this process, we’d really appreciate it if you could consider leaving a 5 star review here: https://ww.wp.xz.cn/support/plugin/woocommerce/reviews/#new-post

    It helps others discover WooCommerce and supports the continued improvements to the plugin. Thanks again for your thoughtful contributions.

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

Tags