Twig Component follow ups (#2792)

* Added Priority for YAML configuration

* Added doc for storefront groups

* Adjusted paths

* Update docs/templating/layout/customize_storefront_layout.md

Co-authored-by: julitafalcondusza <[email protected]>

---------

Co-authored-by: julitafalcondusza <[email protected]>

Author: mnocon

code_samples/back_office/components/twig_components.yaml

@@ -2,10 +2,12 @@ ibexa_twig_components:
     admin-ui-user-menu:
         custom-html-component:
             type: html
+            priority: 0
             arguments:
                 content: '<b>Hello world!</b>'
         custom-template-component:
             type: template
+            priority: 50
             arguments:
                 template: '@ibexadesign/ui/component/user_thumbnail/user_thumbnail.html.twig'
                 parameters:

docs/templating/components.md

@@ -8,9 +8,12 @@ month_change: true
 Twig Components are widgets (for example, **My dashboard** blocks from Headless edition) and HTML code (for example, a tag for loading JS or CSS files) that you can inject into the existing templates to customize and extend the user interface.
 They are combined into groups that are rendered in designated templates.
 
-Built-in Twig Component groups are available for the [back office](custom_components.md), but you can create your own for use anywhere.
+Twig Component groups are available for:
 
-To learn which groups are available in a given view, use the [integration with Symfony Profiler](#symfony-profiler-integration).
+- [back office](custom_components.md)
+- [storefront](customize_storefront_layout.md)
+
+To learn which groups are available in a given view, use the [integration Symfony Profiler](#symfony-profiler-integration).
 
 ## Create Twig Component
 
@@ -44,11 +47,12 @@ ibexa_twig_components:
         # Component name
         google_tag_manager:
             type: script
+            priority: 50
             arguments:
                 src: 'https://...'
 ```
 
-The Component priority cannot be specified when using the YAML configuration, but it allows you to use the built-in components to quickly achieve common goals.
+YAML configuration allows you to use the built-in components to quickly achieve common goals.
 
 You can use an unique group name when creating a Twig Component to create your own group.
 

docs/templating/layout/customize_storefront_layout.md

@@ -11,6 +11,24 @@ To customize your shop, you can override either whole templates, or specific com
 The built-in templates belong to the `storefront` [theme](design_engine.md).
 To override any of them, copy its directory structure in your template directory.
 
+## Customize with Twig Components
+
+You can customize parts of the storefront by using [Twig components](components.md).
+It allows you to inject your own widgets, extending the storefront behavior.
+
+The available groups for the storefront are:
+
+| Group name | Template file |
+|---|---|
+| `storefront-before-maincart` | `vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/cart/component/maincart/maincart.html.twig` |
+| `storefront-after-maincart` | `vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/cart/component/maincart/maincart.html.twig` |
+| `storefront-before-minicart` | `vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/cart/component/minicart/minicart.html.twig` |
+| `storefront-after-minicart` | `vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/cart/component/minicart/minicart.html.twig` |
+| `storefront-before-add-to-cart` | `vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/cart/component/add_to_cart/add_to_cart.html.twig` |
+| `storefront-after-add-to-cart` | `vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/cart/component/add_to_cart/add_to_cart.html.twig` |
+| `storefront-before-summary` | `vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/cart/component/summary/summary.html.twig` |
+| `storefront-after-summary` | `vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/cart/component/summary/summary.html.twig` |
+
 ## Template customization example
 
 As an example, to change the cart display when it contains no products, you need to override `vendor/ibexa/storefront/src/bundle/Resources/views/themes/storefront/cart/component/maincart/maincart_empty_cart.html.twig` template.