Swiper not working (ReferenceError: Swiper is not defined)

  • NOTE: I have the brand logos carousel in a syncd-pattern, i think the check in enqueue_assets() only anticipates blocks directly on the page, but doesn’t follow the patterns. See https://github.com/WordPress/gutenberg/issues/18272

    In an earlier support post you had suggested ‘make sure swiper is enabled in settings’. But I have no settings on the plugin that i can see.

    “frontend.js?ver=722b6c4…:1 Uncaught ReferenceError: Swiper is not defined at frontend.js?ver=722b…3593f2d194f5c:1:226 at NodeList.forEach (<anonymous>) at frontend.js?ver=722b…3593f2d194f5c:1:136”

    is shown on my home page (where i have a brand logos carousel), and, this in turn is from below, where new Swiper() fails, Swiper being undef. I don’t see any js enqueued, should I?

    window.addEventListener("DOMContentLoaded", (()=>{
     const e = document.querySelectorAll(".wp-block-gutsliders-logo-carousel");
     e.length > 0 && e.forEach((e=>{
     const o = e.querySelector(".swiper")
     , t = e.dataset.swiperOptions
     , r = JSON.parse(t);
     new Swiper(o,r)
     }
    ))
    }
    ));
    • This topic was modified 3 months, 4 weeks ago by donbowman.
    • This topic was modified 3 months, 4 weeks ago by donbowman.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter donbowman

    (@donbowman)

    see also https://kybernaut.cz/en/clanky/problem-solved-check-for-has_block-inside-reusable-blocks/

    note this is super inneficient in this code base since you call it multiple times, and its very slow. So i think you would instead look for gutsliders/*, or use a single regexp rather than multiple block_parse/walks.

    if( ! is_admin() && ( GutSlider_Assets::enhanced_has_block( ‘gutsliders/content-slider’ ) || GutSlider_Assets::enhanced_has_block( ‘gutsliders/any-content’ ) || GutSlider_Assets::enhanced_has_block( ‘gutsliders/testimonial-slider’ ) || GutSlider_Assets::enhanced_has_block( ‘gutsliders/post-slider’ ) || GutSlider_Assets::enhanced_has_block( ‘gutsliders/photo-carousel’ ) || GutSlider_Assets::enhanced_has_block( ‘gutsliders/logo-carousel’ ) || GutSlider_Assets::enhanced_has_block( ‘gutsliders/videos-carousel’ ) ) ) {

    Plugin Author Binsaifullah

    (@binsaifullah)

    Hi,

    We have removed the setting option for swiper, because most of the time users become confused. However, are you using any caching plugin and minify js option is enabled?

    Thread Starter donbowman

    (@donbowman)

    you can see i have diagnosed it above.

    I have the carousell in a reusable block.

    You have code calling has_blocks(gutslider/logos…).

    has_block does not look into reusable blocks, so your check fails.

    To fix it, you will need a helper function in gutslider_assets to check by calling parse_blocks.

    Plugin Author Binsaifullah

    (@binsaifullah)

    Hi,

    I will fix the matter in the next update. thanks for your investigation.

    bluebeekris

    (@bluebeekris)

    I have an interesting update for you, if this helps at all @binsaifullah.

    We’ve replicated this issue, but only on templates rather than pages (it’s displaying auxiliary content on a post archive template). Does that help understand the issue a little more? The same exact block works fine on single posts and pages.

    Plugin Author Binsaifullah

    (@binsaifullah)

    We are testing the issues on templates and patterns, I found that the issue is related to has_block() function. We have used has_block() function to check our blocks existence so that we can load the script only on that pages where our blocks are used. However, we are working on finding a better alternative solution for it.

    thanks

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