forked from shopware/shopware
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
NEXT-34491 - NEXT-14691 - Add pseudo modal twig blocks
fixes shopware#3567
- Loading branch information
1 parent
de6c9d2
commit 4261141
Showing
2 changed files
with
63 additions
and
30 deletions.
There are no files selected for viewing
17 changes: 17 additions & 0 deletions
17
changelog/_unreleased/2024-03-18-add-pseudo-modal-twig-blocks.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| --- | ||
| title: Add pseudo modal twig blocks | ||
| issue: NEXT-14691 | ||
| author: Elias Lackner | ||
| author_email: lackner.elias@gmail.com | ||
| author_github: @lacknere | ||
| --- | ||
| # Storefront | ||
| * Added new blocks to `pseudo-modal.html.twig`: | ||
| - `component_pseudo_modal` | ||
| - `component_pseudo_modal_header` | ||
| - `component_pseudo_modal_title` | ||
| - `component_pseudo_modal_close_btn` | ||
| - `component_pseudo_modal_close_btn_content` | ||
| - `component_pseudo_modal_body` | ||
| - `component_pseudo_modal_back_btn_content` | ||
| * Deprecated block `product_detail_zoom_modal_close_button_content` in `pseudo-modal.html.twig`. Use block `component_pseudo_modal_close_btn_content` instead. |
76 changes: 46 additions & 30 deletions
76
src/Storefront/Resources/views/storefront/component/pseudo-modal.html.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,51 @@ | ||
| <div class="js-pseudo-modal-template"> | ||
| <div class="modal modal-lg fade" | ||
| tabindex="-1" | ||
| role="dialog"> | ||
| <div class="modal-dialog" | ||
| role="document"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header only-close"> | ||
| <div class="modal-title js-pseudo-modal-template-title-element h5"></div> | ||
| {% block component_pseudo_modal %} | ||
| <div class="js-pseudo-modal-template"> | ||
| <div class="modal modal-lg fade" | ||
| tabindex="-1" | ||
| role="dialog"> | ||
| <div class="modal-dialog" | ||
| role="document"> | ||
| <div class="modal-content"> | ||
| {% block component_pseudo_modal_header %} | ||
| <div class="modal-header only-close"> | ||
| {% block component_pseudo_modal_title %} | ||
| <div class="modal-title js-pseudo-modal-template-title-element h5"></div> | ||
| {% endblock %} | ||
|
|
||
| <button type="button" | ||
| class="btn-close close" | ||
| data-bs-dismiss="modal" | ||
| aria-label="Close"> | ||
| {% block product_detail_zoom_modal_close_button_content %} | ||
| {% endblock %} | ||
| </button> | ||
| </div> | ||
| <div class="modal-body js-pseudo-modal-template-content-element"> | ||
| {% block component_pseudo_modal_close_btn %} | ||
| <button type="button" | ||
| class="btn-close close" | ||
| data-bs-dismiss="modal" | ||
| aria-label="Close"> | ||
| {% block component_pseudo_modal_close_btn_content %} | ||
| {# @deprecated tag:v6.7.0 - Block will be removed. Use `component_pseudo_modal_close_btn_content` instead. #} | ||
| {% block product_detail_zoom_modal_close_button_content %}{% endblock %} | ||
| {% endblock %} | ||
| </button> | ||
| {% endblock %} | ||
| </div> | ||
| {% endblock %} | ||
|
|
||
| {% block component_pseudo_modal_body %} | ||
| <div class="modal-body js-pseudo-modal-template-content-element"> | ||
| </div> | ||
| {% endblock %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <template class="js-pseudo-modal-back-btn-template"> | ||
| {# Back button will be rendered by `AjaxModalPlugin` if a `data-prev-url` is given in order to toggle between modals. #} | ||
|
|
||
| {# Attributes `data-url` and `href` will be set automatically by `AjaxModalPlugin`. #} | ||
| {% block component_pseudo_modal_back_btn %} | ||
| <button class="js-pseudo-modal-back-btn btn btn-outline-primary" data-ajax-modal="true" data-url="#" href="#"> | ||
| {% sw_icon 'arrow-left' style { size: 'sm', class: 'me-1' } %} | ||
| {{ 'general.back'|trans }} | ||
| </button> | ||
| {% endblock %} | ||
| </template> | ||
| <template class="js-pseudo-modal-back-btn-template"> | ||
| {# Back button will be rendered by `AjaxModalPlugin` if a `data-prev-url` is given in order to toggle between modals. #} | ||
|
|
||
| {# Attributes `data-url` and `href` will be set automatically by `AjaxModalPlugin`. #} | ||
| {% block component_pseudo_modal_back_btn %} | ||
| <button class="js-pseudo-modal-back-btn btn btn-outline-primary" data-ajax-modal="true" data-url="#" href="#"> | ||
| {% block component_pseudo_modal_back_btn_content %} | ||
| {% sw_icon 'arrow-left' style { size: 'sm', class: 'me-1' } %} | ||
| {{ 'general.back'|trans }} | ||
| {% endblock %} | ||
| </button> | ||
| {% endblock %} | ||
| </template> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% endblock %} |