Filament•3w ago

Custom page external CSS and JS

How do I include external Slick Carousel CSS and JS in the Filament custom page? I have used it directly in a custom filament page, and it is working. I want to know what is the right approach to include CSS and JS of the external Slick JS library so that I can not get a CSS and JS conflict issue. I tried the following code in AppServiceProvider.php, but it does not seem to be working.

<?php 
  //Register css assets     

         FilamentAsset::register([
            asset('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css'),
        ]);

        // Register JavaScript assets
        FilamentAsset::register([
            asset('https://code.jquery.com/jquery-3.6.0.min.js'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'),
        ]);

?>

<?php 
  //Register css assets     

         FilamentAsset::register([
            asset('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css'),
        ]);

        // Register JavaScript assets
        FilamentAsset::register([
            asset('https://code.jquery.com/jquery-3.6.0.min.js'),
            asset('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'),
        ]);

?>

share-and-promote.bl...

4 Replies

LeandroFerreira•3w ago

YourCustomPage.php

use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;

public function mount(): void
{
    FilamentView::registerRenderHook(
        PanelsRenderHook::HEAD_END,
        fn (): string => '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">',
    );

    FilamentView::registerRenderHook(
        PanelsRenderHook::HEAD_END,
        fn (): string => '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css">',
    );

    FilamentView::registerRenderHook(
        PanelsRenderHook::BODY_END,
        fn (): string => '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>',
    );

    FilamentView::registerRenderHook(
        PanelsRenderHook::BODY_END,
        fn (): string => '<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>',
    );
}

use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;

public function mount(): void
{
    FilamentView::registerRenderHook(
        PanelsRenderHook::HEAD_END,
        fn (): string => '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">',
    );

    FilamentView::registerRenderHook(
        PanelsRenderHook::HEAD_END,
        fn (): string => '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css">',
    );

    FilamentView::registerRenderHook(
        PanelsRenderHook::BODY_END,
        fn (): string => '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>',
    );

    FilamentView::registerRenderHook(
        PanelsRenderHook::BODY_END,
        fn (): string => '<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>',
    );
}

your-custom-page.blade.php

<x-filament-panels::page>
    <div class="single-item" x-init="$('.single-item').slick();">
        <div><h3>1</h3></div>
        <div><h3>2</h3></div>
        <div><h3>3</h3></div>
    </div>
</x-filament-panels::page>

<x-filament-panels::page>
    <div class="single-item" x-init="$('.single-item').slick();">
        <div><h3>1</h3></div>
        <div><h3>2</h3></div>
        <div><h3>3</h3></div>
    </div>
</x-filament-panels::page>

SourabhOP•3w ago

Thanks for your revert. I added all the CSS and JS as per your response in my filament custom page. and it is also working in my Livewire component too on initial loading, but when I am filtering data by company. It is not working. I have attached my Livewire component file for your reference. . // filament custom page

<?php
class ShareAndPromote extends Page
{
    public function mount(): void
    {
        FilamentView::registerRenderHook(
            PanelsRenderHook::HEAD_END,
            fn(): string => '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">',
        );

        FilamentView::registerRenderHook(
            PanelsRenderHook::HEAD_END,
            fn(): string => '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css">',
        );

        FilamentView::registerRenderHook(
            PanelsRenderHook::BODY_END,
            fn(): string => '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>',
        );

        FilamentView::registerRenderHook(
            PanelsRenderHook::BODY_END,
            fn(): string => '<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>',
        );
    }

}?>

<?php
class ShareAndPromote extends Page
{
    public function mount(): void
    {
        FilamentView::registerRenderHook(
            PanelsRenderHook::HEAD_END,
            fn(): string => '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">',
        );

        FilamentView::registerRenderHook(
            PanelsRenderHook::HEAD_END,
            fn(): string => '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css">',
        );

        FilamentView::registerRenderHook(
            PanelsRenderHook::BODY_END,
            fn(): string => '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>',
        );

        FilamentView::registerRenderHook(
            PanelsRenderHook::BODY_END,
            fn(): string => '<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>',
        );
    }

}?>

//Filament custom page blade file

<?php
<x-filament-panels::page>
    <livewire:app.reviews.review-widgets/>
</x-filament-panels::page>
?>

<?php
<x-filament-panels::page>
    <livewire:app.reviews.review-widgets/>
</x-filament-panels::page>
?>

ReviewWidgets.php

review-widgets.blade...

toeknee•3w ago

likely because the js isn't re-run on change since the dom has already been loaded I think you need to have and overall watcher and dispatcher in place

SourabhOP•3w ago

Yes, js is not re run on chnage . I have dispatched an event on filter. but still it is not working

<?php
    public function filterReviews() {
        //code 
        $this->dispatch('Changes');
     } 
?>

<?php
    public function filterReviews() {
        //code 
        $this->dispatch('Changes');
     } 
?>

and in the blade file

<?php 
<script>
    window.addEventListener("Changes", function () {       
        $('.single-item').slick('unslick');
        $('.single-item').slick({
            slidesToShow: 3,
            dots: true,
        });
         //or just refresh 
        $('.single-item').slick('refresh');
    });
</script>

?>

<?php 
<script>
    window.addEventListener("Changes", function () {       
        $('.single-item').slick('unslick');
        $('.single-item').slick({
            slidesToShow: 3,
            dots: true,
        });
         //or just refresh 
        $('.single-item').slick('refresh');
    });
</script>

?>

Gaming

Programming

Custom page external CSS and JS