Filament•14mo ago

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'),

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>

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

    <!-- 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>

2 Replies

DrByte•14mo ago

Does this discussion, and the solution we came to, help? https://discord.com/channels/883083792112300104/1157105855565676544

Timster8989OP•14mo ago

Amazing, thank you so much @DrByte ! This did indeed solve my dilemma.

Gaming

Programming

Custom Javascript inside widget