From a91c974dd4b9b6dd6839f4fe61e70e89c8e2b54f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Noco=C5=84?= Date: Tue, 17 Jun 2025 09:53:20 +0200 Subject: [PATCH 1/4] Added Priority for YAML configuration --- code_samples/back_office/components/twig_components.yaml | 2 ++ docs/templating/components.md | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/code_samples/back_office/components/twig_components.yaml b/code_samples/back_office/components/twig_components.yaml index bfcfc70e1e..1728d934b3 100644 --- a/code_samples/back_office/components/twig_components.yaml +++ b/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: 'Hello world!' custom-template-component: type: template + priority: 50 arguments: template: '@ibexadesign/ui/component/user_thumbnail/user_thumbnail.html.twig' parameters: diff --git a/docs/templating/components.md b/docs/templating/components.md index adcd682604..498030b886 100644 --- a/docs/templating/components.md +++ b/docs/templating/components.md @@ -44,11 +44,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. From b3f176a1b05709d95001c7696268d4ec1dbbda1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Noco=C5=84?= Date: Thu, 3 Jul 2025 14:47:04 +0200 Subject: [PATCH 2/4] Added doc for storefront groups --- docs/templating/components.md | 7 +++++-- .../layout/customize_storefront_layout.md | 18 ++++++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/docs/templating/components.md b/docs/templating/components.md index 498030b886..b303668df9 100644 --- a/docs/templating/components.md +++ b/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 diff --git a/docs/templating/layout/customize_storefront_layout.md b/docs/templating/layout/customize_storefront_layout.md index 9b288790d5..4b96e4630c 100644 --- a/docs/templating/layout/customize_storefront_layout.md +++ b/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). +This 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/cart/src/bundle/Resources/views/themes/standard/cart/component/add_to_cart/add_to_cart.html.twig` | +| `storefront-after-add-to-cart` | `vendor/ibexa/cart/src/bundle/Resources/views/themes/standard/cart/component/add_to_cart/add_to_cart.html.twig` | +| `storefront-before-summary` | `vendor/ibexa/cart/src/bundle/Resources/views/themes/standard/cart/component/summary/summary.html.twig` | +| `storefront-after-summary` | `vendor/ibexa/cart/src/bundle/Resources/views/themes/standard/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. From bef9c6d4c37e3f5ba7420d7ddae27cf3a2dbd207 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Noco=C5=84?= Date: Thu, 10 Jul 2025 15:48:02 +0200 Subject: [PATCH 3/4] Adjusted paths --- docs/templating/layout/customize_storefront_layout.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/templating/layout/customize_storefront_layout.md b/docs/templating/layout/customize_storefront_layout.md index 4b96e4630c..fdec3ccf33 100644 --- a/docs/templating/layout/customize_storefront_layout.md +++ b/docs/templating/layout/customize_storefront_layout.md @@ -24,10 +24,10 @@ The available groups for the storefront are: | `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/cart/src/bundle/Resources/views/themes/standard/cart/component/add_to_cart/add_to_cart.html.twig` | -| `storefront-after-add-to-cart` | `vendor/ibexa/cart/src/bundle/Resources/views/themes/standard/cart/component/add_to_cart/add_to_cart.html.twig` | -| `storefront-before-summary` | `vendor/ibexa/cart/src/bundle/Resources/views/themes/standard/cart/component/summary/summary.html.twig` | -| `storefront-after-summary` | `vendor/ibexa/cart/src/bundle/Resources/views/themes/standard/cart/component/summary/summary.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 From 223368bf4d904991d7663c622cc7ff4990352458 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Noco=C5=84?= Date: Wed, 16 Jul 2025 09:15:25 +0200 Subject: [PATCH 4/4] Update docs/templating/layout/customize_storefront_layout.md Co-authored-by: julitafalcondusza <117284672+julitafalcondusza@users.noreply.github.com> --- docs/templating/layout/customize_storefront_layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/templating/layout/customize_storefront_layout.md b/docs/templating/layout/customize_storefront_layout.md index fdec3ccf33..15fc0deea1 100644 --- a/docs/templating/layout/customize_storefront_layout.md +++ b/docs/templating/layout/customize_storefront_layout.md @@ -14,7 +14,7 @@ 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). -This allows you to inject your own widgets, extending the storefront behavior. +It allows you to inject your own widgets, extending the storefront behavior. The available groups for the storefront are: