Download the PHP package viezel/filament-tour without Composer
On this page you can find all versions of the php package viezel/filament-tour. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download viezel/filament-tour
More information about viezel/filament-tour
Files in viezel/filament-tour
Package filament-tour
Short Description Bring the power of DriverJs to your Filament panels and start a tour !
License MIT
Homepage https://github.com/viezel/filament-tour
Informations about the package filament-tour
Bring the power of DriverJs to your Filament panels
With the power of DriverJS bring to your users an elegant way to discover your panels. Original work done by JibayMcs.
Installation
You can install this filament plugin via composer:
For Filament v3.x
For Filament v2.x
You can publish the config/views/migrations file with:
This is the contents of the published config file:
Usage
You can also enable or disable the check on the local storage if the current user have already completed the tour.
Tour History Storage
By default, the Tour plugin uses local storage, which works great for both authenticated users and guest users as it will store a tour completion locally in the users' browser. This options gets you started quickly.
However, sometimes you want to opt-in for at more robust solution to ensure that users does not experience the tour twice. In this situation you might want to use the database option. It will kept record of completed tours in the database. This option only works for authenticated users.
Remember to publish the migrations in order to use the database option.
Start a tour !
Let's follow this example to add a tour to your dashboard page.
If you don't already have a customized dashboard, please refer to the following tutorial: FIlamentPHP - Dashboard - Customizing the dashboard page
Use the correct trait to registers your tours !
Create a simple tour !
Displaying your tour !
In order to display your tour, its important to remember to pass in the route for the given path you'd like to have the tour show up on - if you'd like to render the tour on the main admin panels dashboard, set the route to:
Alternatively, you may want to show tours based on more complex logic, for example if a user hasn't created a specific
type of content. In order to show a tour you will need to create an event listener in your livewire component.
Continuing with the Dashboard example, let's show a tour only if the user hasn't created a new Post yet. We can write
a query to see if the user has no posts, and if so, fire an open-tour
event to show the Tour:
Use Events for your custom business logic
Sometimes you want to run business logic in when certain lifecycle event like completed and dismissed occurs. Here is how to:
You can also bring up tours for users when they click on a button. See more in the (Event)[#events] section.
Create a JSON tour !
- From a direct URL
- From your Storage
[!IMPORTANT]
UsingTour::make(url: "")
orTour::make(json: "")
is the same thing, so don't worry about the name of your parameter if you've got the wrong type.
BUT
If you useTour::make('my-tour')
it's equal toTour::make(id: 'my-tour')
And here you need to construct all your steps. No JSON reading here.
JSON example file (click to expand)
Custom Theming
In order to create a custom theme for the tour, please set the popoverClass
property.
More info in the theme section of Driver.js
Tour.php
Tour methods reference
Step.php
Step methods reference
Highlights
Same as tour, use the HasHighlight
trait.
- Create a simple highlight element !
Highlight.php
Highlight methods reference
Events
Available events:
filament-tour::open-highlight
string id
Open a specific highlight by its id.
filament-tour::open-tour
string id
Open a specific tour by its id.
filament-tour::tour-completed
string id Occurs when tour has completed
filament-tour::tour-dismisses
string id Occurs when user closes the tour before its completed
Filament Tour, dispatch some event to show tours and highlights. So you can trigger them from your own code.
Basically, if you want a custom button to trigger a tour or a highlight, you can do something like this:
Development Tool
[!IMPORTANT]
This tool is always disabled in production mode.APP_ENV=production
Filament Tour embed a simple tool to help you to develop your tours and highlights.
Let me show you how to use it !
Enable the tool
To enable the tool, simply use FilamentTourPlugin::make()->enableCssSelector()
in your plugin declaration.
Keyboard shortcuts
Ctrl|Cmd + Space To open the tool.
Escape To exit the tool.
Ctrl|Cmd + C To copy the CSS Selector of the highlighted element.
CSS Selector Tool Utilisation Preview
Extra Resources
DriverJS
- DriverJS Website
- DriverJS GitHub (Give some 🩵 to the author !)
The core of this plugin !
Don't hesitate to check the documentation to learn more about the possibilities of this plugin.
I don't implemented all the features of DriverJS, at this time, but I'm working on it !
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security Vulnerabilities
Please review our security policy on how to report security vulnerabilities.
Credits
License
The MIT License (MIT). Please see License File for more information.
All versions of filament-tour with dependencies
filament/filament Version ^3.0
spatie/laravel-package-tools Version ^1.15.0
illuminate/contracts Version ^10.0|^11.0