# Shopware 6 modal in twig verwenden

**URL:** <https://forum.shopware.com/t/shopware-6-modal-in-twig-verwenden/106001>\
**Category:** Shopware 6 (German)\
**Tags:** general, administration, programming, templates--design, offizielle-shopware-\
**Created:** [30. November 2024 um 03:59 UTC](https://forum.shopware.com/t/shopware-6-modal-in-twig-verwenden/106001 "2024-11-30T03:59:08Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![shopwarer1638](https://avatars.discourse-cdn.com/v4/letter/s/76d3ee/32.png) [@shopwarer1638](https://forum.shopware.com/u/shopwarer1638)\
**Post date:** [30. November 2024 um 03:59 UTC](https://forum.shopware.com/t/shopware-6-modal-in-twig-verwenden/106001/1 "2024-11-30T03:59:08Z")

</div>

Wie kann man einen Inhalt mit Shopware modal in einem Twig-Template präsentieren?

---

<div class="post-metadata">

**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\
**Post date:** [30. November 2024 um 09:57 UTC](https://forum.shopware.com/t/shopware-6-modal-in-twig-verwenden/106001/2 "2024-11-30T09:57:02Z")

</div>

Hallo,

im Frontend beispielsweise so, wie in der Dokumentation beschrieben: [Using a Modal Window | Shopware Documentation](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/using-a-modal-window.html#create-a-modal-manually-from-the-dom-using-bootstrap) .

Grüße  
Sebastian

---

<div class="post-metadata">

**Author:** ![shopwarer1638](https://avatars.discourse-cdn.com/v4/letter/s/76d3ee/32.png) [@shopwarer1638](https://forum.shopware.com/u/shopwarer1638)\
**Post date:** [2. Dezember 2024 um 05:26 UTC](https://forum.shopware.com/t/shopware-6-modal-in-twig-verwenden/106001/3 "2024-12-02T05:26:09Z")

</div>

Ja, ich habe gerade etwas Bootstrap verwendet, danke!

---

<div class="post-metadata">

**Author:** ![shopwarer1638](https://avatars.discourse-cdn.com/v4/letter/s/76d3ee/32.png) [@shopwarer1638](https://forum.shopware.com/u/shopwarer1638)\
**Post date:** [7. Dezember 2024 um 10:18 UTC](https://forum.shopware.com/t/shopware-6-modal-in-twig-verwenden/106001/4 "2024-12-07T10:18:17Z")

</div>

Funktioniert auf dem Desktop. Aber es öffnet sich nicht auf dem Mobile. Weiß jemand, wie man es zum Funktionieren bringt?

---

<div class="post-metadata">

**Author:** ![shopwarer1638](https://avatars.discourse-cdn.com/v4/letter/s/76d3ee/32.png) [@shopwarer1638](https://forum.shopware.com/u/shopwarer1638)\
**Post date:** [19. Dezember 2024 um 19:04 UTC](https://forum.shopware.com/t/shopware-6-modal-in-twig-verwenden/106001/5 "2024-12-19T19:04:51Z")

</div>

Sogar die Verwendung des exakten Codes aus dem Showpare-Tutorial macht das Modal auf dem Handy nicht sichtbar. Kann jemand einen Tipp geben?

---

<div class="post-metadata">

**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\
**Post date:** [19. Dezember 2024 um 21:36 UTC](https://forum.shopware.com/t/shopware-6-modal-in-twig-verwenden/106001/6 "2024-12-19T21:36:15Z")

</div>

Hallo,

bei mir wird die Modalbox, die anhand der offiziellen Dokumentation umgesetzt wurde, auch auf mobilen Endgeräten geöffnet und angezeigt. Somit funktioniert das auch wie beschrieben.

Ohne den Code zu kennen ist es deshalb nur Rätsel raten, woran es liegen könnte.

Grüße  
Sebastian

---

<div class="post-metadata">

**Author:** ![shopwarer1638](https://avatars.discourse-cdn.com/v4/letter/s/76d3ee/32.png) [@shopwarer1638](https://forum.shopware.com/u/shopwarer1638)\
**Post date:** [20. Dezember 2024 um 12:19 UTC](https://forum.shopware.com/t/shopware-6-modal-in-twig-verwenden/106001/7 "2024-12-20T12:19:18Z")

</div>

Hallo,  
Wir erweitern die Beschreibungskomponente um diese:

```auto
    {% block page_product_detail_manufacturer %}
        {% if page.product.manufacturer %}
            <p>HERSTELLER:</p>
            <div class="col-md-auto product-detail-manufacturer">
                {% block page_product_detail_manufacturer_inner %}
                    {% block page_product_detail_manufacturer_link %}
                        <a href="{{ page.product.manufacturer.link }}"
                           class="product-detail-manufacturer-link"
                           data-bs-toggle="modal"
                           data-bs-target="#exampleModal"
                           rel="noreferrer noopener"
                           target="_blank"
                           title="{{ page.product.manufacturer.translated.name }}">
                            {% if page.product.manufacturer.media %}
                                {% block page_product_detail_manufacturer_logo %}
                                    {% set attributes = {
                                        class: 'product-detail-manufacturer-logo',
                                        alt: page.product.manufacturer.translated.name,
                                        title: page.product.manufacturer.translated.name
                                    } %}

                                    {% sw_thumbnails 'product-detail-manufacturer-image-thumbnails' with {
                                        media: page.product.manufacturer.media,
                                        sizes: {
                                            default: '200px'
                                        }
                                    } %}
                                {% endblock %}
                            {% else %}
                                {% block page_product_detail_manufacturer_text %}
                                    {{ page.product.manufacturer.translated.name }}
                                {% endblock %}
                            {% endif %}
                        </a>

                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                          <div class="modal-dialog">
                            <div class="modal-content">
                              <div class="modal-header">
                                <h1 class="modal-title fs-5" id="exampleModalLabel">{{ page.product.manufacturer.translated.name }}</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                              </div>
                              <div class="modal-body">
                                {{ page.product.manufacturer.translated.description|raw }}
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
                              </div>
                            </div>
                          </div>
                        </div>

                    {% endblock %}
                {% endblock %}
            </div>
        {% endif %}
    {% endblock %}

```

Herzliche Grüße

---

<div class="post-metadata">

**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\
**Post date:** [20. Dezember 2024 um 18:21 UTC](https://forum.shopware.com/t/shopware-6-modal-in-twig-verwenden/106001/8 "2024-12-20T18:21:32Z")

</div>

Hallo,

spontan würde ich sagen, weil die Modalbox wahrscheinlich durch CSS-Code in der mobilen Ansicht ausgeblendet wird, der sich ungewollt aus dem Bereich vererbt, wo die Modalbox hinein platziert wurde. Ich würde Sie also einfach testweise in einem Twig-Block wie [shopware/src/Storefront/Resources/views/storefront/element/cms-element-product-description-reviews.html.twig at trunk · shopware/shopware · GitHub](https://github.com/shopware/shopware/blob/trunk/src/Storefront/Resources/views/storefront/element/cms-element-product-description-reviews.html.twig#L1) platzieren und es dann noch einmal testen. Ohne Einschränkungen funktionieren tut die Modalbox auch in der mobilen Ansicht auf jeden Fall.

Grüße  
Sebastian

---

<div class="post-metadata">

**Author:** ![system](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/2/9/29c7587ba660f00e4995d1743162782e5d6d8653.svg) [@system](https://forum.shopware.com/u/system)\
**Post date:** [19. Januar 2025 um 18:21 UTC](https://forum.shopware.com/t/shopware-6-modal-in-twig-verwenden/106001/9 "2025-01-19T18:21:44Z")

</div>

Dieses Thema wurde automatisch 30 Tage nach der letzten Antwort geschlossen. Es sind keine neuen Antworten mehr erlaubt.