Wie kann man einen Inhalt mit Shopware modal in einem Twig-Template präsentieren?
Hallo,
im Frontend beispielsweise so, wie in der Dokumentation beschrieben: Using a Modal Window | Shopware Documentation .
Grüße
Sebastian
1 „Gefällt mir“
Ja, ich habe gerade etwas Bootstrap verwendet, danke!
Funktioniert auf dem Desktop. Aber es öffnet sich nicht auf dem Mobile. Weiß jemand, wie man es zum Funktionieren bringt?
Sogar die Verwendung des exakten Codes aus dem Showpare-Tutorial macht das Modal auf dem Handy nicht sichtbar. Kann jemand einen Tipp geben?
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
Hallo,
Wir erweitern die Beschreibungskomponente um diese:
{% 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
1 „Gefällt mir“
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 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
Dieses Thema wurde automatisch 30 Tage nach der letzten Antwort geschlossen. Es sind keine neuen Antworten mehr erlaubt.