[Docs] Customizing page title (#210)

Author: loic425

config/packages/sylius_twig_hooks.yaml

@@ -41,5 +41,6 @@ sylius_twig_hooks:
             title:
                 template: '@SyliusBootstrapAdminUi/shared/crud/common/content/header/title_block/title.html.twig'
                 configuration:
+                    title: app.ui.browsing_speakers
                     icon: tabler:users
                     subheader: app.ui.managing_your_speakers

docs/.gitbook/assets/browsing_speakers.png

@@ -1,5 +1,40 @@
 # Customizing the page titles
 
+## Changing the default title for a specific page
+
+<div data-full-width="false">
+
+<figure><img src="../../.gitbook/assets/browsing_speakers.png" alt="Title changed to Browsing speakers"></figure>
+
+</div>
+
+By default, each page has a default title based on both page location and resource name.
+If you're not happy with the preset title for a specific page and would like to customize it, 
+you can easily change it using Twig Hooks.
+
+Search for "title_block" in the call graph of the Symfony debug profiler in the `Twig Hooks` section.
+
+<div data-full-width="false">
+
+<figure><img src="../../.gitbook/assets/title_block_in_profiler.png" alt="Title block in profiler"></figure>
+
+</div>
+
+We're going to reuse this hook and its template in our config file and add a `header` key:
+
+```yaml
+# config/packages/sylius_bootstrap_admin_ui.yaml
+# ...
+sylius_twig_hooks:
+    hooks:
+        # ...
+        'sylius_admin.speaker.index.content.header.title_block':
+            title:
+                template: '@SyliusBootstrapAdminUi/shared/crud/common/content/header/title_block/title.html.twig'
+                configuration:
+                    title: app.ui.browsing_speakers # here is our title override 
+```
+
 ## Adding an icon
 
 <div data-full-width="false">
@@ -10,7 +45,8 @@
 
 To add an icon to the page title, you need to use Twig hooks configuration.
 
-Search the "title_block" in the Symfony debug profiler at the Twig hooks section.
+Search for "title_block" in the call graph of the Symfony debug profiler in the `Twig Hooks` section. 
+We're going to reuse this hook and its template in our config file.
 
 <div data-full-width="false">
 
@@ -79,5 +115,5 @@ sylius_twig_hooks:
                 # We need to reuse the same template as 'sylius_admin.common.index.content.header.title_block'
                 template: '@SyliusBootstrapAdminUi/shared/crud/common/content/header/title_block/title.html.twig'
                 configuration:
-                    subheader: app.ui.managing_your_speakers # you also need add this key on your translations.
+                    subheader: app.ui.managing_your_speakers # you also need to add this key to your translations
 ```

docs/.gitbook/assets/managing_speakers_subheader.png

@@ -1,14 +1,14 @@
 {% macro default(level, header, icon, subheader) %}
     <div class="d-flex gap-3 align-items-center">
         {% if icon %}
-            <div>{{ ux_icon(icon, {'class': 'icon icon-md text-primary'}) }}</div>
+            <div {{ sylius_test_html_attribute('icon', icon) }}>{{ ux_icon(icon, {'class': 'icon icon-md text-primary'}) }}</div>
         {% endif %}
         <div class="d-flex flex-column gap-2">
-            <h{{ level }} class="page-title">
+            <h{{ level }} class="page-title" {{ sylius_test_html_attribute('page-title') }}>
                 {{ header }}
             </h{{ level }}>
             {% if subheader %}
-                <div>{{ subheader }}</div>
+                <div {{ sylius_test_html_attribute('subheader') }}>{{ subheader }}</div>
             {% endif %}
         </div>
     </div>

docs/.gitbook/assets/speakers_icon.png

@@ -46,7 +46,7 @@ public function testShowingBook(): void
         self::assertResponseIsSuccessful();
 
         // Validate Header
-        self::assertSelectorTextContains('h1.page-title', 'Shinning');
+        self::assertSelectorTextContains('[data-test-page-title]', 'Shinning');
 
         // Validate page body
         self::assertSelectorTextContains('[data-test-author-name]', 'Stephen King');
@@ -71,7 +71,7 @@ public function testBrowsingBooks(): void
         self::assertResponseIsSuccessful();
 
         // Validate Header
-        self::assertSelectorTextContains('h1.page-title', 'Books');
+        self::assertSelectorTextContains('[data-test-page-title]', 'Books');
         self::assertSelectorExists('a:contains("Create")');
 
         // Validate Custom Twig Hooks

docs/cookbook/admin_panel/page_titles.md

@@ -52,7 +52,7 @@ public function testBrowsingConferences(): void
         self::assertResponseIsSuccessful();
 
         // Validate Header
-        self::assertSelectorTextContains('h1.page-title', 'Conferences');
+        self::assertSelectorTextContains('[data-test-page-title]', 'Conferences');
         self::assertSelectorExists('a:contains("Create")');
 
         // Validate Table header

src/BootstrapAdminUi/templates/shared/helper/header.html.twig

@@ -35,6 +35,6 @@ public function testDashboard(): void
 
         self::assertResponseIsSuccessful();
 
-        self::assertSelectorTextContains('h1.page-title', 'Dashboard');
+        self::assertSelectorTextContains('[data-test-page-title]', 'Dashboard');
     }
 }

tests/Functional/BookTest.php

@@ -50,7 +50,9 @@ public function testBrowsingSpeakers(): void
         self::assertResponseIsSuccessful();
 
         // Validate Header
-        self::assertSelectorTextContains('h1.page-title', 'Speakers');
+        self::assertSelectorTextContains('[data-test-page-title]', 'Browsing speakers');
+        self::assertSelectorExists('[data-test-icon="tabler:users"]');
+        self::assertSelectorTextContains('[data-test-subheader]', 'Managing your speakers');
         self::assertSelectorExists('a:contains("Create")');
 
         // Validate Table header

tests/Functional/ConferenceTest.php

@@ -57,7 +57,7 @@ public function testBrowsingTalks(): void
         self::assertResponseIsSuccessful();
 
         // Validate Header
-        self::assertSelectorTextContains('h1.page-title', 'Talks');
+        self::assertSelectorTextContains('[data-test-page-title]', 'Talks');
         self::assertSelectorExists('a:contains("Create")');
 
         // Validate Table header

tests/Functional/DashboardTest.php

@@ -73,7 +73,7 @@ public function testBrowsingItems(): void
         self::assertResponseIsSuccessful();
 
         // Validate Header
-        self::assertSelectorTextContains('h1.page-title', 'Livres');
+        self::assertSelectorTextContains('[data-test-page-title]', 'Livres');
 
         // Validate Table header
         self::assertSelectorTextContains('.sylius-table-column-title', 'Titre');

tests/Functional/SpeakerTest.php

@@ -7,6 +7,7 @@ app:
         biz: Biz
         book: Book
         books: Books
+        browsing_speakers: Browsing speakers
         company_name: Company name
         conference: Conference
         conferences: Conferences

tests/Functional/TalkTest.php

@@ -7,6 +7,7 @@ app:
         biz: Biz
         book: Livre
         books: Livres
+        browsing_speakers: Parcourir les Conférencier-e-s
         company_name: Société
         conference: Conférence
         conferences: Conférences