Skip to content

Commit e5e94f2

Browse files
mnoconmnocon
committed
Product tour doc skeleton
1 parent 30a5c72 commit e5e94f2

File tree

11 files changed

+637
-6
lines changed

11 files changed

+637
-6
lines changed

‎TODO‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
TODO:
2+
1) PHP API reference + links
3+
2) Arcade video
4+
1) Czy typ image działa? Chyba nie?
5+
5) Screenshoty
6+
6) Custom block type?
7+
8+
---
9+
description: Customize product tour scenarios by creating custom step blocks
10+
edition: lts-update
11+
month_change: false
12+
---
13+
14+
# Create custom step blocks
15+
16+
TODO: This is not possible
17+
18+
When creating [product tour scenarios](integrated_help.md#product-tours) you're not limited to the [built-in step blocks](configure_product_tour.md#block-types).
19+
You can create custom block types, allowing you create reusable blocks that can be shared between scenarios.
20+
21+
It's a more customizable alternative the [custom Twig block](configure_product_tour.md#custom-twig-template-block), as you can pass custom variables and add additional logic before rendering the template.
22+
23+
The following example creates a custom `tip` block, a reusable component that you can use in different steps to provide tips to the user.
24+
25+
To create a custom step block, start by creating a class implementing the `Ibexa\Contracts\IntegratedHelp\Builder\Block\BlockBuilderInterface` interface.
26+
This class is responsbile for converting the YAML configuration into PHP objects.
27+
28+
``` php
29+
```
30+
31+
Register it as a Symfony service and use the `ibexa.product_tour.block_factory` service tag to register is as a custom block configuration option:
32+
33+
``` yaml
34+
```
35+
36+
Then, create a class responsible for rendering the block:
37+
38+
``` php
39+
```
40+
41+
Register it as a Symfony service and use the `ibexa.product_tour.block_renderer` service tag to mark the class as a custom block renderer.
42+
43+
``` yaml
44+
45+
```

‎code_samples/back_office/product_tour/config/general_scenario.yaml‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
ibexa:
2+
system:
3+
default:
4+
product_tour:
5+
my_general_scenario:
6+
type: 'general'
7+
steps:
8+
welcome_step:
9+
step_title_translation_key: title
10+
background_image: build/images/headless.png
11+
blocks:
12+
- type: title
13+
params:
14+
text_translation_key: subtitle
15+
- type: text
16+
params:
17+
text_translation_key: tour.step.description
18+
- type: link
19+
params:
20+
url: https://doc.ibexa.co
21+
text_translation_key: tour.link.documentation
22+
- type: image
23+
params:
24+
src: /bundles/ibexaadminui/img/feature-screenshot.jpg
25+
alt_translation_key: tour.image.alt
26+
- type: video
27+
params:
28+
# 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
29+
url: https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4
30+
- type: list
31+
params:
32+
title_translation_key: tour.list.title
33+
items_translation_keys:
34+
- tour.list.item1
35+
- tour.list.item2
36+
- tour.list.item3
37+
- type: twig_template
38+
params:
39+
template: custom_template.html.twig

‎code_samples/back_office/product_tour/config/targetable_scenario.yaml‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
ibexa:
2+
system:
3+
default:
4+
product_tour:
5+
targetable_dashboard_scenario:
6+
type: 'targetable'
7+
steps:
8+
dashboard_options:
9+
step_title_translation_key: Open Dashboard options
10+
target: ".ibexa-db-header__more"
11+
# No interaction_mode specified or the value is set to null
12+
blocks:
13+
- type: text
14+
params:
15+
text_translation_key: Learn how to customize the blocks displayed on your dashboard
16+
open_dashboard_options:
17+
step_title_translation_key: Open Dashboard options
18+
target: '.ibexa-db-header__more'
19+
interaction_mode: clickable
20+
blocks:
21+
- type: text
22+
params:
23+
text_translation_key: Click here to customize your dashboard
24+
customize_dashboard:
25+
step_title_translation_key: Customize Dashboard
26+
target: '.ibexa-db-actions-popup-menu'
27+
interaction_mode: clickable
28+
blocks:
29+
- type: text
30+
params:
31+
text_translation_key: Choose "Customize dashboard"
32+
drag_and_drop_step:
33+
step_title_translation_key: Drag-and-drop blocks
34+
target: ".c-pb-toolbox-blocks-group__blocks > * .c-pb-toolbox-block__content:first-of-type"
35+
interaction_mode: draggable
36+
blocks:
37+
- type: text
38+
params:
39+
text_translation_key: Drag-and-drop blocks from the sidebar to the dashboard to customize it

‎code_samples/back_office/product_tour/src/EventSubscriber/NotificationScenarioSubscriber.php‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
namespace App\EventSubscriber;
6+
7+
use Ibexa\Contracts\Core\Repository\NotificationService;
8+
use Ibexa\Contracts\IntegratedHelp\Event\RenderProductTourScenarioEvent;
9+
use Ibexa\IntegratedHelp\ProductTour\Block\LinkBlock;
10+
use Ibexa\IntegratedHelp\ProductTour\Block\TextBlock;
11+
use Ibexa\IntegratedHelp\ProductTour\ProductTourStep;
12+
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
13+
14+
final class NotificationScenarioSubscriber implements EventSubscriberInterface
15+
{
16+
private NotificationService $notificationService;
17+
18+
public function __construct(NotificationService $notificationService)
19+
{
20+
$this->notificationService = $notificationService;
21+
}
22+
23+
public static function getSubscribedEvents(): array
24+
{
25+
return [
26+
RenderProductTourScenarioEvent::class => ['onRenderScenario'],
27+
];
28+
}
29+
30+
public function onRenderScenario(RenderProductTourScenarioEvent $event): void
31+
{
32+
$scenario = $event->getScenario();
33+
$steps = $scenario->getSteps();
34+
35+
if ($scenario->getIdentifier() !== 'notifications') {
36+
return;
37+
}
38+
39+
foreach ($steps as $step) {
40+
$scenario->removeStep($step);
41+
}
42+
43+
if (!$this->hasUnreadNotifications()) {
44+
return;
45+
}
46+
47+
$customStep = new ProductTourStep();
48+
$customStep->setIdentifier('custom_step_identifier');
49+
$customStep->setInteractionMode('clickable');
50+
$customStep->setTarget('.ibexa-header-user-menu__notifications-toggler');
51+
$customStep->setTitle('You have unread notifications');
52+
$customStep->addBlock(new TextBlock('Click here to preview your unread notifications.'));
53+
$customStep->addBlock(new LinkBlock(
54+
'https://doc.ibexa.co/projects/userguide/en/latest/getting_started/notifications/',
55+
'Learn more about notifications'
56+
));
57+
58+
$scenario->addStep($customStep);
59+
}
60+
61+
private function hasUnreadNotifications(): bool
62+
{
63+
return $this->notificationService->getPendingNotificationCount() > 0;
64+
}
65+
}

‎composer.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,8 @@
7575
"ibexa/messenger": "~4.6.x-dev",
7676
"ibexa/collaboration": "~4.6.x-dev",
7777
"ibexa/share": "~4.6.x-dev",
78-
"ibexa/phpstan": "~4.6.-dev"
78+
"ibexa/phpstan": "~4.6.-dev",
79+
"ibexa/integrated-help": "dev-dev as 4.6.x-dev"
7980
},
8081
"scripts": {
8182
"fix-cs": "php-cs-fixer fix --config=.php-cs-fixer.php -v --show-progress=dots",

0 commit comments

Comments
 (0)