PHP code example of viezel / filament-tour

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

viezel / filament-tour example snippets

 return [    
    'only_visible_once' => true,
    'enable_css_selector' => false,
    'tour_prefix_id' => 'tour_',
    'highlight_prefix_id' => 'highlight_',
];

use Viezel\FilamentTour\FilamentTourPlugin;

public function panel(Panel $panel) {
	return $panel->default()
		->[...]
		->plugins([ FilamentTourPlugin::make() ]);
}  

// default  : true  
FilamentTourPlugin::make()->onlyVisibleOnce(false)  

use Viezel\FilamentTour\FilamentTourPlugin;
use Viezel\FilamentTour\Tour\Enums\TourHistoryType;

public function panel(Panel $panel) {
	return $panel->default()
		->[...]
		->plugins([ 
		    FilamentTourPlugin::make() 
		        ->historyType(TourHistoryType::Database),  
        ]);
} 

  
namespace App\Filament\Pages;  
  
use Viezel\FilamentTour\Tour\HasTour;
  
class Dashboard extends FilamentDashboard 
{
    use HasTour;
    // ...  

	public function tours(): array
	{    
		return []; 
	}
}

use Viezel\FilamentTour\Tour\Step;
use Viezel\FilamentTour\Tour\Tour;

public function tours(): array 
{
    return [
       Tour::make('dashboard')
           ->steps(        
               Step::make()
                   ->title("Welcome to your Dashboard !")
                   ->description(view('tutorial.dashboard.introduction')),
    
               Step::make('.fi-avatar')
                   ->title('Woaw ! Here is your avatar !')
                   ->description('You look nice !')
                   ->icon('heroicon-o-user-circle')
                   ->iconColor('primary')
           ),
    ];
}

->route('/admin')

use App\Models\Post;
use Illuminate\Support\Facades\Config;
use Livewire\Attributes\On;

/**
 * Renders the first tour.
 *
 * @param boolean $only_visible_once Whether the tour should only be visible once.
 * @param array   $tours             Tours to render.
 * @param array   $highlights        Highlights to render.
 *
 * @return void
 */
#[On('filament-tour::loaded-elements')]
public function renderPostTour(bool $only_visible_once, array $tours, array $highlights): void
{
    // If there are posts, don't show this tour
    if (Post::count() > 0) {
        return;
    }

    // Get the tour prefix value
    $prefix = Config::get('filament-tour.tour_prefix_id');

    // Remove the prefix
    $firstTourID = substr($tours[0]['id'], strlen($prefix));

    // Dispatch the event to open the tour
    $this->dispatch('filament-tour::open-tour', $firstTourID);
}

use Viezel\FilamentTour\Tour\Step;
use Viezel\FilamentTour\Tour\Tour;
use Livewire\Attributes\On;

#[On('dashboard-tour-completed')]
public function completed($params): void
{
    // your logic here
}

#[On('dashboard-tour-dismissed')]
public function dismissed($params): void
{
    // your logic here
}

public function tours(): array 
{
    return [
       Tour::make('dashboard')
           ->route('/dashboard')
           ->alwaysShow(false)
           ->dispatchOnComplete('dashboard-tour-completed', [
                'foo' => 'bar',
            ])
            ->dispatchOnDismiss('dashboard-tour-dismissed', [
                'foo' => 'bar',
            ])
           ->steps(        
               Step::make()
                   ->title("Welcome to your Dashboard !")
                   ->description(view('tutorial.dashboard.introduction')),
               Step::make('.fi-avatar')
                   ->title('Woaw ! Here is your avatar !')
                   ->description('You look nice !'),
           ),
    ];
}

use Viezel\FilamentTour\Tour\Tour;

public function tours(): array {
    return [
       Tour::make(url: "https://example.com/tour-dashboard.json")
    ];
}

use Viezel\FilamentTour\Tour\Tour;
use Illuminate\Support\Facades\Storage;

public function tours(): array {
    return [
       Tour::make(json: Storage::disk('local')->get("TourDashboard.json"))
    ];
}

Tour::make('dashboard')
    ->popoverClass('my-custom-popover-class')

use Viezel\FilamentTour\Tour\Tour;

// Instantiate a tour, and provide an id, to trigger it later
Tour::make(string $id)

// Since 3.1.0.1, JSON Support update
Tour::make(... $params)

    // Define a custom url to trigger your tour 
    ->route(string $route)
    
    //Register the steps of your tour
    ->steps(Step ...$steps)
    
    // Define a color of your highlight overlay for the dark and light theme of your filament panel
    ->colors(string $light, string $dark)
    
    //Set the tour as always visible, even is already viewed by the user.
    ->alwaysShow(bool|Closure $alwaysShow = true)
    
    //Show or hide the progress indicator
    ->showProgress(bool $showProgress = true)
    
    //Override the default progress text: "{{current}} of {{total}}"
    ->progressText(string $progressText)
    
     //Set a custom class for custom theming
    ->popoverClass(string $popoverClass)
    
    // Set the tour visible or not
    ->visible(bool|Closure $visible = true)
    
    // Set the 'Next' button label
    ->nextButtonLabel(string $label)
    
    // Set the 'Previous' button label
    ->previousButtonLabel(string $label)
    
    // Set the 'Done' button label
    ->doneButtonLabel(string $label)
    
    // Set the whole steps of the tour as uncloseable
    ->uncloseable(bool|Closure $uncloseable = true)
    
    // Disable all tour steps events
    ->disableEvents(bool|Closure $disableEvents = true)
    
    // Dispatch an event like `$dispatch()` when the user completes the tour
    ->dispatchOnComplete(string $name, ...$args)
    
    // Dispatch an event like `$dispatch()` when the user dismisses the tour
    ->dispatchOnDismiss(string $name, ...$args)
    
    // Should tour be marked as completed if user dismisses it
    ->shouldCompleteOnDismiss(bool $shouldCompleteOnDismiss = true)
    
    // Should tour be marked as completed if user dismisses it
    // Maybe useless, but who knows ?
    ->ignoreRoutes(bool|Closure $ignoreRoutes = true)

use Viezel\FilamentTour\Tour\Step;

// If no element provided, the step act like a modal
Step::make(string $element = null)

    // Define the title of your step
    // Mandatory
    ->title(string|Closure $title)
    
    // Define the description of your step
    // Also accept HTML
    // Mandatory
    ->description(string|Closure|HtmlString|View $description)
    
    // Define an icon next to your step title
    ->icon(string $icon)
    
    // Define the color of the title icon
    ->iconColor(string $color)
    
    // Step your step closeable or not
    // Default: true
    ->uncloseable(bool|Closure $uncloseable = true)
    
    //Simulate a click on a CSS selected element when you press the next button
    ->clickOnNext(string|Closure $selector)
    
    // Send a notification when you press the next button
    ->notifyOnNext(Notification $notification)
    
    //Redirect you to a custom url or a route() when you press the next button
    ->redirectOnNext(string $url, bool $newTab = false)
    
    // Dispatch an event like `$dispatch()` when you press the next button
    ->dispatchOnNext(string $name, ...$args)

namespace App\Filament\Pages;  
  
use Viezel\FilamentTour\Highlight\HasHighlight;  
  
class Dashboard extends FilamentDashboard {

    use HasHighlight;
  
    public function highlights(): array 
    {    
	    return []; 
    }
}

use Viezel\FilamentTour\Highlight\Highlight;

public function highlights(): array 
{
    return [
	 
        Highlight::make('.fi-header-heading')
            ->element('.fi-header-heading')
            ->title('Whoaw ! You highlighted the title of the page !')
            ->description('"Dashboard"'),
	
        Highlight::make('.fi-avatar')
            ->element('.fi-avatar')
            ->title("Pssst ! That's your avatar")
            ->icon('heroicon-o-user-circle')
            ->iconColor('primary'), 	
    ];
}

use Viezel\FilamentTour\Highlight\Highlight;

// Instantiate a highlight with a CSS select of the element where the icon button is next to
Highlight::make(string $parent)

    // Define the element to be highlighted
    ->element(string $element)

    // Set the title of your highlight
    ->title(string|Closure $title)

    // Set the description of your highlight
    ->description(string|Closure|HtmlString|View $description)

    // Define a custom icon for your highlight button
    // Default: heroicon-m-question-mark-circle
    ->icon(string $icon)

    // Define the color of the highlight icon button
    // Default: gray
    ->iconColor(string $color)

    // Define a color of your highlight overlay for the dark and light theme of your filament panel
    ->colors(string $light, string $dark)

    // Set the position of your icon button around the parent
    // Default: top-left
    // Available: top-left, top-right, bottom-left, bottom-right
    ->position(string $position)

// Filament Action Button
Action::make('open_tour_btn')
    ->label('Show Dashboard tour')
    ->icon('heroicon-o-play-circle')
    ->dispatch('filament-tour::open-tour', ['dashboard']),

bash 
php artisan vendor:publish --tag="filament-tour-config"
php artisan vendor:publish --tag="filament-tour-views"
php artisan vendor:publish --tag="filament-tour-migrations"

bash
php artisan vendor:publish --tag="filament-tour-migrations"