JS Carousels not working in partials past app.blade in Sage 10 Bud

sage
,
1

re: Sage 10 Bud

I’m yarn installing the following javascript carousel package from: Siema - Lightweight and simple carousel with no dependencies and its failing if the blade include is placed in any other view past app.blade.php eg. content-page.blade.php

I have also tried this with a different javascript package called embla carousel and similar thing happens.

I have tried with fresh install of bud sage (and also bedrock with acorn installed).

My app.js is as follows.

import {domReady} from '@roots/sage/client';
import Siema from 'siema';

/**
 * app.main
 */
const main = async (err) => {
  if (err) {
    // handle hmr errors
    console.error(err);
  }
};

// fire up Siema Carousel
const mySiema = new Siema({
  selector: '.siema',
});

All installs correctly, and if I add the blade include …

@include('partials.sliders.siema')

<div class="siema">
  <div>Hi, I'm slide 1</div>
  <div>Hi, I'm slide 2</div>
  <div>Hi, I'm slide 3</div>
</div>

to app.blade.php:

@include('sections.header')

  <main id="main" class="main">
    @yield('content')
  </main>

  @include('partials.sliders.siema')

  @hasSection('sidebar')
    <aside class="sidebar">
      @yield('sidebar')
    </aside>
  @endif

@include('sections.footer')

the carousel works as expected with no issues or errors.

Problem is, if I try to move the blade include into any other view apart from app.blade eg.

partials > content-page.blade:

@php(the_content())

@include('partials.sliders.siema')

{!! wp_link_pages(['echo' => 0, 'before' => '<nav class="page-nav"><p>' . __('Pages:', 'sage'), 'after' => '</p></nav>']) !!}

then it stops working and throws an error in console:

Uncaught Error: Something wrong with your selector 😭

Anyone else experience this issue with latest version of Bud?

Thanks

2

It’s unlikely this is related to Bud or Sage. Have you checked the rendered HTML to see if the selector is on the page when you get the error?

1 Like
3

Think the issue is that its only loading the script on specific blade partials where include for carousel is actually added, and then throwing the error on other partials/templates where it isn’t.

Possibly need a condition added for this in scripts.

I will post if I find solution.

Thanks for reply @alwaysblank and debug option :+1:

4

So, found a javascript fix for this … I just wrapped the selector variable within a conditional statement:

if(document.getElementById("carousel")){
  const mySiema = new Siema({
    selector: '.siema',
    },
  });
} else {
  console.log("Siema does not exist");
}