FilamentF
Filament•3y ago•
3 replies
Timster8989

Custom Javascript inside widget

Excuse me for my ignorance, but I'm trying to understand the right way to use custom javascript inside Filament widget. Maybe I'm missing something basic, but I just can't get it to work. Case example here is swiper.js.

I'm loading Swiper library & css in AppServiceProvider:
FilamentAsset::register([
            JS::make('swiper', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js'),
            CSS::make('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css'),


I've tried couple approaches:
1) Init the script inside widget
2) FilamentView::registerRenderHook('panels::body.end'

Now if I render my test code using the renderHook, it works. But inside Livewire component it will not.

Here is how to init the library:
        <script>
                document.addEventListener('DOMContentLoaded', function () {
                const swiper = new Swiper('.swiper', {
                    // Optional parameters
                    direction: 'vertical',
                    loop: true,
    
                    // If we need pagination
                    pagination: {
                        el: '.swiper-pagination',
                    },
    
                    // Navigation arrows
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }
                });
            });
            </script>

Here is a test HTML:
    <!-- also tried with wire:ignore, doesn't make a difference -->
    <div class='swiper'>
        <!-- Additional required wrapper -->
        <div class='swiper-wrapper'>
            <!-- Slides -->
            <div class='swiper-slide'>Hello world!</div>
            <div class='swiper-slide'>Hello world 2!</div>
        </div>

        <div class='swiper-button-prev'></div>
        <div class='swiper-pagination'></div>
        <div class='swiper-button-next'></div>
    </div>
Was this page helpful?