Symfony Profiler

{% sw_extends '@Storefront/storefront/base.html.twig' %}
{% block base_head %}
{% sw_include '@Storefront/storefront/page/product-detail/meta.html.twig' %}
{% endblock %}
{% block base_content %}
{% block page_product_detail %}
<div class="product-detail" style="max-width: 1400px; margin: 0 auto; margin-top: 30px;" itemscope itemtype="https://schema.org/Product">
{% block page_product_detail_inner %}
{% block page_product_detail_content %}
<div class="product-detail-content">
{# {% block page_product_detail_headline %}
<div class="row align-items-center product-detail-headline">
{% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %}
</div>
{% endblock %} #}
{% set mediaItems = page.product.media.media %}
{% block page_product_detail_main %}
{% block component_product_box %}
{% if page.product %}
{% set anytechdata = false %}
{% if page.product.customFields is not empty %}
{% for key, value in page.product.customFields %}
{% if key starts with 'ev_wallboxdaten' %}
{% set anytechdata = true %}
{% endif %}
{% endfor %}
{% endif %}
{% set name = page.product.translated.name %}
{% set productNumber = page.product.productNumber %}
{% set id = page.product.id %}
{% set cover = page.product.cover.media %}
{% set variation = page.product.variation %}
{% set displayParent = page.product.variantListingConfig.displayParent and page.product.parentId === null %}
{% set ev_wallbox_kw = page.product.customFields.ev_wallboxdaten_chargingPowersWatt %}
{% set ev_wallbox_stecker = page.product.customFields.ev_wallboxdaten_chargingConnectorTypes %}
{% set ev_wallbox_app = page.product.customFields.ev_wallboxdaten_smartphoneControllable %}
{% set bulletpoint1 = page.product.customFields.ev_produktdaten_bulletpoint1 %}
{% set bulletpoint2 = page.product.customFields.ev_produktdaten_bulletpoint2 %}
{% set bulletpoint3 = page.product.customFields.ev_produktdaten_bulletpoint3 %}
{% set bulletpoint4 = page.product.customFields.ev_produktdaten_bulletpoint4 %}
{% set ev_wallboxdaten_anwendungsbereich = page.product.customFields.ev_wallboxdaten_anwendungsereich %}
{% set solar = page.product.customFields.ev_produktdaten_produkttyp %}
{% set producttype = page.product.customFields.ev_produktdaten_produkttyp %}
{% set gesamtleistung = page.product.customFields.ev_wallboxdaten_gesamtleistung %}
{% set modulleistung = page.product.customFields.ev_wallboxdaten_modulleistung %}
{% set anzmodule = page.product.customFields.ev_wallboxdaten_anzmodule %}
{% set producteindgeschafen = page.product.customFields.ev_produktdaten_euganschaften %}
{% set weight = page.product.weight %}
{% set width = page.product.width %}
{% set height = page.product.height %}
{% set length = page.product.length %}
{% set durchmesser = page.product.customFields.ev_wallboxdaten_durchmesser %}
{% set ev_category = page.header.navigation.active.customFields.custom_emova_category_maintype %}
{% if not ev_category %}
{% set ev_category = product.customFields.custom_emova_category_maintype %}
{% endif %}
{# <label>{{page.product.customFields.ev_wallboxdaten_anzmodule|trans|sw_sanitize}}</label> #}
<div class="productItem card product-box box-{{ layout }}" style="border:none !important; border-color: transparent !important; background-color: transparent !important;">
{% block component_product_box_content %}
{% block component_product_box_image %}
{# fallback if display mode is not set #}
{% set displayMode = displayMode ?: 'standard' %}
{# set display mode 'cover' for box-image with standard display mode #}
{% if layout == 'image' and displayMode == 'standard' %}
{% set displayMode = 'cover' %}
{% endif %}
{% block component_product_box_image_link %}
<div class="checkout-main checkout-summary-container">
<div style="margin-bottom:3px">
<div style="padding:20px; background:white;">
<div class="col-md-12 product-detail-media">
{% sw_include '@Storefront/storefront/element/cms-element-image-gallery-new.html.twig' with {
'mediaItems': mediaItems,
'zoom': true,
'zoomModal': true,
'magnifierOverGallery': true,
'displayMode': 'contain',
'gutter': 0,
'minHeight': '430px',
'navigationArrows': 'inside',
'navigationDots': 'inside',
'galleryPosition': 'underneath',
'isProduct': true,
'fallbackImageTitle': page.product.translated.name,
'startIndexThumbnails': 1,
'startIndexSlider': 1,
'keepAspectRatioOnZoom': false
} %}
</div>
</div>
{% if page.MillProductDownloadsTab.files %}
<div style="padding:20px; background:white; margin-top:3px;color:black">
<div
style="background-color: white; margin-top:3px; padding: 10px; width: 100%">
{# <div onclick="openUl(this)" class="collapsible"> #}
<div class="collapsible almarenaRegular" style="font-size: 20px">
<h2 style="color:black;font-size:20px;">{{ "emova.label.downloads"|trans|striptags }}</h2>
<div>
<svg onclick="openUl(this)" style="cursor: pointer; transition: transform 0.5s;" version='1.0' xmlns='http://www.w3.org/2000/svg' width='20.000000pt' height='40.000000pt' viewbox='0 0 70.000000 51.000000' preserveaspectratio='xMidYMid meet'>
<g transform='translate(0.000000,51.000000) scale(0.100000,-0.100000)' fill='#000000' stroke='none'>
<path d='M110 374 c-12 -13 -2 -27 70 -99 79 -79 85 -83 102 -68 10 9 18 21 18 27 0 18 -143 156 -162 156 -8 0 -21 -7 -28 -16z'/>
<path d='M420 255 l-115 -115 23 -22 22 -23 117 117 c116 116 117 117 98 138 -10 11 -21 20 -24 20 -4 0 -58 -52 -121 -115z'/>
</g>
</svg>
</div>
</div>
<div style="display:none;">
{% block page_product_detail_tabs %}
<div class="product-detail-tabs">
{% sw_include '@Storefront/storefront/page/product-detail/tabs.html.twig' %}
</div>
{% endblock %}
</div>
</div>
</div>
{% endif %}
{% if page.product.translated.description is defined and page.product.translated.description is not empty %}
<div style="padding:20px; background:white; margin-top:3px;color:black">
<div
style="background-color: white; margin-top:3px; padding: 10px; width: 100%">
{# <div onclick="openUl(this)" class="collapsible"> #}
<div class="collapsible almarenaRegular" style="font-size: 20px">
<h2 style="color:black;font-size:20px;">{{ "emova.label.produktinfo"|trans|striptags }}</h2>
<div>
<svg onclick="openUl(this)" style="cursor: pointer; transition: transform 0.5s;" version='1.0' xmlns='http://www.w3.org/2000/svg' width='20.000000pt' height='40.000000pt' viewbox='0 0 70.000000 51.000000' preserveaspectratio='xMidYMid meet'>
<g transform='translate(0.000000,51.000000) scale(0.100000,-0.100000)' fill='#000000' stroke='none'>
<path d='M110 374 c-12 -13 -2 -27 70 -99 79 -79 85 -83 102 -68 10 9 18 21 18 27 0 18 -143 156 -162 156 -8 0 -21 -7 -28 -16z'/>
<path d='M420 255 l-115 -115 23 -22 22 -23 117 117 c116 116 117 117 98 138 -10 11 -21 20 -24 20 -4 0 -58 -52 -121 -115z'/>
</g>
</svg>
</div>
</div>
<div style="display:none;">
<p>{{ page.product.translated.description|raw }}</p>
</div>
</div>
</div>
{% endif %}
{% if page.product.translated.customFields.ev_produktdaten_longdesc is defined and page.product.translated.customFields.ev_produktdaten_longdesc is not empty %}
<div style="padding:20px; background:white; margin-top:3px;color:black">
<div
style="background-color: white; margin-top:3px; padding: 10px; width: 100%">
{# <div onclick="openUl(this)" class="collapsible"> #}
<div class="collapsible almarenaRegular" style="font-size: 20px">
<h2 style="color:black;font-size:20px;">{{ "emova.label.produktbeschreibung"|trans|striptags }}</h2>
<div>
<svg onclick="openUl(this)" style="cursor: pointer; transition: transform 0.5s;" version='1.0' xmlns='http://www.w3.org/2000/svg' width='20.000000pt' height='40.000000pt' viewbox='0 0 70.000000 51.000000' preserveaspectratio='xMidYMid meet'>
<g transform='translate(0.000000,51.000000) scale(0.100000,-0.100000)' fill='#000000' stroke='none'>
<path d='M110 374 c-12 -13 -2 -27 70 -99 79 -79 85 -83 102 -68 10 9 18 21 18 27 0 18 -143 156 -162 156 -8 0 -21 -7 -28 -16z'/>
<path d='M420 255 l-115 -115 23 -22 22 -23 117 117 c116 116 117 117 98 138 -10 11 -21 20 -24 20 -4 0 -58 -52 -121 -115z'/>
</g>
</svg>
</div>
</div>
<div style="display:none;">
<p>{{ page.product.translated.customFields.ev_produktdaten_longdesc|raw }}</p>
</div>
</div>
</div>
{% endif %}
{% if page.product.translated.customFields.ev_produktdaten_euganschaften is defined and page.product.translated.customFields.ev_produktdaten_euganschaften is not empty %}
<div style="padding:20px; background:white; margin-top:3px;color:black">
<div
style="background-color: white; margin-top:3px; padding: 10px; width: 100%">
{# <div onclick="openUl(this)" class="collapsible"> #}
<div class="collapsible almarenaRegular" style="font-size: 20px">
<h2 style="color:black;font-size:20px;">{{ "emova.label.produkteigenschaften"|trans|striptags }}</h2>
<div>
<svg onclick="openUl(this)" style="cursor: pointer; transition: transform 0.5s;" version='1.0' xmlns='http://www.w3.org/2000/svg' width='20.000000pt' height='40.000000pt' viewbox='0 0 70.000000 51.000000' preserveaspectratio='xMidYMid meet'>
<g transform='translate(0.000000,51.000000) scale(0.100000,-0.100000)' fill='#000000' stroke='none'>
<path d='M110 374 c-12 -13 -2 -27 70 -99 79 -79 85 -83 102 -68 10 9 18 21 18 27 0 18 -143 156 -162 156 -8 0 -21 -7 -28 -16z'/>
<path d='M420 255 l-115 -115 23 -22 22 -23 117 117 c116 116 117 117 98 138 -10 11 -21 20 -24 20 -4 0 -58 -52 -121 -115z'/>
</g>
</svg>
</div>
</div>
<div style="display:none;">
<p>{{ page.product.translated.customFields.ev_produktdaten_euganschaften|raw }}</p>
</div>
</div>
</div>
{% endif %}
{% if 'wallbox' in solar or 'solar' in solar or 'oilfox' in solar %}
<div style="padding:20px; background:white; margin-top:3px;color:black">
{% else %}
<div style="padding:20px; background:white; margin-top:3px;color:black;display:none !important;">
{% endif %}
<div
style="background-color: white; margin-top:3px; padding: 10px; width: 100%">
{# <div onclick="openUl(this)" class="collapsible"> #}
<div class="collapsible almarenaRegular" style="font-size: 20px">
<h2 style="color:black;font-size:20px;">{{ "emova.label.ablauf"|trans|striptags }}</h2>
<div>
<svg onclick="openUl(this)" style="cursor: pointer; transition: transform 0.5s;" version='1.0' xmlns='http://www.w3.org/2000/svg' width='20.000000pt' height='40.000000pt' viewbox='0 0 70.000000 51.000000' preserveaspectratio='xMidYMid meet'>
<g transform='translate(0.000000,51.000000) scale(0.100000,-0.100000)' fill='#000000' stroke='none'>
<path d='M110 374 c-12 -13 -2 -27 70 -99 79 -79 85 -83 102 -68 10 9 18 21 18 27 0 18 -143 156 -162 156 -8 0 -21 -7 -28 -16z'/>
<path d='M420 255 l-115 -115 23 -22 22 -23 117 117 c116 116 117 117 98 138 -10 11 -21 20 -24 20 -4 0 -58 -52 -121 -115z'/>
</g>
</svg>
</div>
</div>
<div style="display:none; margin-top:30px">
{% set pack = 'default' %}
{% set namespace = 'EmovaWbTheme' %}
{% if 'solar' in solar %}
<div class="ablauf-main-list">
{% set icon = source('@' ~ namespace ~ '/assets/icon/'~ pack ~'/homesun.svg', ignore_missing = true) %}
{{ icon|sw_icon_cache|raw }}
<span>Wählen Sie einen Standort aus und prüfen diesen auf dessen Eignung. Es sollte genug Platz und entsprechende Installationsmöglichkeiten vorhanden sein. Zudem benötigen Sie eine Steckdose in der Nähe. Des Weiteren sollten Sie einen möglichst sonnigen Standort auswählen.</span>
</div>
<div style="width:1px; background:grey; height:50px; margin:15px 25px"></div>
<div class="ablauf-main-list">
{% set icon = source('@' ~ namespace ~ '/assets/icon/'~ pack ~'/speech-bubbles-people.svg', ignore_missing = true) %}
{{ icon|sw_icon_cache|raw }}
<span>Halten Sie Rücksprache mit Ihrem Vermieter oder der Eigentümergesellschaft. Gegebenenfalls kann eine Erlaubnis der Installation notwendig sein, da die äußerliche Erscheinung des Gebäudes verändert wird. (Entfällt bei Hausbesitzern)</span>
</div>
<div style="width:1px; background:grey; height:50px; margin:15px 25px"></div>
<div class="ablauf-main-list">
{% set icon = source('@' ~ namespace ~ '/assets/icon/'~ pack ~'/basket.svg', ignore_missing = true) %}
{{ icon|sw_icon_cache|raw }}
<span>Wählen Sie hier im Online-Store ein passende Mini-Solaranlage aus.</span>
</div>
<div style="width:1px; background:grey; height:50px; margin:15px 25px"></div>
<div class="ablauf-main-list">
{% set icon = source('@' ~ namespace ~ '/assets/icon/'~ pack ~'/sunsolar.svg', ignore_missing = true) %}
{{ icon|sw_icon_cache|raw }}
<span style="padding-left:15px">Ihre neue Mini-Solaranlage ist auf den Weg zu Ihnen!</span>
</div>
<div style="width:1px; background:grey; height:50px; margin:15px 25px"></div>
<div class="ablauf-main-list">
{% set icon = source('@' ~ namespace ~ '/assets/icon/'~ pack ~'/document-view.svg', ignore_missing = true) %}
{{ icon|sw_icon_cache|raw }}
<span style="padding-left:15px">Melden Sie Ihre Mini-Solaranlage im Marktstammdatenregister an. Unser Partner priwatt übernimmt die Anmeldung bereits kostenfrei. Alle Informationen hierzu erhalten Sie nach der Bestellung per Mail.</span>
</div>
<div style="width:1px; background:grey; height:50px; margin:15px 25px"></div>
<div class="ablauf-main-list">
{% set icon = source('@' ~ namespace ~ '/assets/icon/'~ pack ~'/installation.svg', ignore_missing = true) %}
{{ icon|sw_icon_cache|raw }}
<span style="padding-left:15px">Montieren Sie die Mini-Solaranlage anhand der Vorgaben aus der Bedienungsanleitung und nehmen Sie diese in Betrieb, wenn alle Voraussetzungen dafür erfüllt sind.</span>
</div>
<div style="width:1px; background:grey; height:50px; margin:15px 25px"></div>
<div class="ablauf-main-list">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="32pt" height="32pt" viewbox="0 0 134.000000 124.000000" preserveaspectratio="xMidYMid meet">
<g transform="translate(0.000000,124.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M850 1161 c-38 -12 -91 -41 -128 -69 -33 -25 -34 -25 -60 -8 -122 79
-271 92 -385 34 -51 -26 -120 -97 -146 -151 -28 -58 -43 -142 -35 -197 9 -61
40 -144 62 -163 16 -15 20 -15 39 -2 l22 15 -27 52 c-40 78 -43 176 -7 256 49
110 137 167 256 166 54 0 79 -6 131 -32 35 -17 74 -42 87 -56 l23 -25 56 46
c82 67 131 86 206 81 109 -7 195 -68 247 -173 29 -60 31 -71 27 -142 -3 -53
-12 -92 -26 -120 -20 -38 -487 -543 -503 -543 -3 0 -26 21 -50 48 -24 26 -112
119 -196 206 l-154 160 -21 -22 -22 -21 70 -73 c38 -40 135 -142 215 -226 80
-83 152 -152 161 -152 16 0 98 82 367 365 200 211 226 255 226 385 0 74 -4 93
-31 150 -37 79 -111 157 -178 190 -53 25 -178 37 -226 21z"/>
</g>
</svg>
<span style="padding-left:15px">Prima, Ihre neue Mini-Solaranlage ist einsatzbereit.</span>
</div>
{% elseif 'oilfox' in solar %}
<div class="ablauf-main-list">
{% set icon = source('@' ~ namespace ~ '/assets/icon/'~ pack ~'/oilfox-Warenkorb.svg', ignore_missing = true) %}
{{ icon|sw_icon_cache|raw }}
<span>Wählen Sie hier im Online-Store ein passenden Oilfox aus.</span>
</div>
<div style="width:1px; background:grey; height:50px; margin:15px 25px"></div>
<div class="ablauf-main-list">
{% set icon = source('@' ~ namespace ~ '/assets/icon/'~ pack ~'/oilfox-Lieferwagen.svg', ignore_missing = true) %}
{{ icon|sw_icon_cache|raw }}
<span>Ihre neuer Oilfox ist auf dem Weg zu Ihnen!</span>
</div>
<div style="width:1px; background:grey; height:50px; margin:15px 25px"></div>
<div class="ablauf-main-list">
{% set icon = source('@' ~ namespace ~ '/assets/icon/'~ pack ~'/oilfox-Verwaltung.svg', ignore_missing = true) %}
{{ icon|sw_icon_cache|raw }}
<span>Der Oilfox wird ganz unkompliziert über Ihr Smartphone eingerichtet. Hierzu benötigen Sie die kostenlose FoxMobile App aus dem iOS App Store (für iPhones) oder dem Google PlayStore (für Android Geräte).</span>
</div>
<div style="width:1px; background:grey; height:50px; margin:15px 25px"></div>
<div class="ablauf-main-list">
{% set icon = source('@' ~ namespace ~ '/assets/icon/'~ pack ~'/oilfox-Download.svg', ignore_missing = true) %}
{{ icon|sw_icon_cache|raw }}
<span>Starten Sie den Download über www.foxmobile.app oder scannen Sie einfach den untenstehenden QR Code mit Ihrer Smartphone Kamera.</span>
</div>
<div style="width:1px; background:grey; height:50px; margin:15px 25px"></div>
<div class="ablauf-main-list">
{% set icon = source('@' ~ namespace ~ '/assets/icon/'~ pack ~'/oilfox-Profil.svg', ignore_missing = true) %}
{{ icon|sw_icon_cache|raw }}
<span>Nach der für die Verifizierung notwendigen Eingabe Ihrer E-Mail-Adresse führt Sie die FoxMobile App durch die einzelnen Schritte zur Installation des Füllstandmesser.</span>
</div>
<div style="width:1px; background:grey; height:50px; margin:15px 25px"></div>
<div class="ablauf-main-list">
{% set icon = source('@' ~ namespace ~ '/assets/icon/'~ pack ~'/oilfox-Favoriten.svg', ignore_missing = true) %}
{{ icon|sw_icon_cache|raw }}
<span>Prima, Ihr Oilfox ist einsatzbereit!</span>
</div>
{% elseif 'wallbox' in solar %}
<div class="ablauf-main-list">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="32pt" height="32pt" viewbox="0 0 134.000000 124.000000" preserveaspectratio="xMidYMid meet">
<g transform="translate(0.000000,124.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M108 1215 c-6 -14 -9 -27 -7 -30 3 -2 52 -24 110 -47 l104 -43 23
-70 c13 -39 41 -151 62 -250 22 -99 42 -190 45 -203 5 -19 10 -21 33 -16 15 4
29 8 31 10 2 2 -13 72 -33 156 -20 84 -36 156 -36 161 0 4 169 7 375 7 206 0
375 -3 375 -7 0 -5 -25 -99 -57 -210 l-57 -203 -288 0 -288 0 0 -30 0 -30 313
0 314 0 75 268 75 267 -427 3 -427 2 -11 38 c-6 20 -18 62 -27 94 l-16 56
-102 43 c-56 23 -106 46 -111 51 -18 15 -36 8 -48 -17z"/>
<path d="M635 353 c-32 -8 -84 -51 -101 -85 -20 -39 -14 -110 13 -147 70 -93
212 -82 264 22 39 76 11 152 -71 195 -43 22 -65 25 -105 15z m99 -85 c58 -53
21 -148 -58 -148 -44 0 -84 34 -92 77 -5 27 -1 37 24 63 38 38 89 41 126 8z"/>
<path d="M933 341 c-76 -36 -108 -118 -75 -193 36 -82 137 -116 213 -72 167
98 36 346 -138 265z m135 -86 c60 -70 -18 -166 -106 -130 -35 15 -52 42 -52
82 1 77 104 109 158 48z"/>
</g>
</svg>
<span>1. Wählen Sie hier im Online-Store ein passendes Modell inkl. Zubehör aus.</span>
</div>
<div style="width:1px; background:grey; height:50px; margin:15px 25px"></div>
<div class="ablauf-main-list">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="32pt" height="32pt" viewbox="0 0 136.000000 124.000000" preserveaspectratio="xMidYMid meet">
<g transform="translate(0.000000,124.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M580 1185 l0 -35 345 0 345 0 -1 -162 0 -163 -41 -32 -40 -33 -158 0
c-128 0 -160 -3 -170 -15 -7 -8 -19 -15 -26 -15 -8 0 -14 7 -14 15 0 12 -17
15 -90 15 l-90 0 0 135 0 135 -35 0 -35 0 0 -165 0 -164 93 -3 92 -3 5 -52 5
-51 74 54 73 54 155 0 154 0 55 48 54 47 0 213 0 212 -375 0 -375 0 0 -35z"/>
<path d="M800 1100 c-29 -29 -27 -94 2 -114 32 -23 71 -20 96 7 29 31 28 72
-3 102 -29 30 -68 32 -95 5z m60 -60 c0 -21 -15 -27 -25 -10 -7 12 2 30 16 30
5 0 9 -9 9 -20z"/>
<path d="M1075 1080 c-20 -20 -32 -27 -40 -20 -8 7 -18 4 -30 -10 -18 -20 -18
-21 11 -50 l30 -30 49 50 49 50 -20 20 -20 20 -29 -30z"/>
<path d="M802 934 c-29 -20 -31 -85 -2 -114 42 -42 120 -7 120 55 0 59 -69 94
-118 59z m62 -60 c10 -26 7 -34 -14 -34 -13 0 -20 7 -20 18 0 33 23 44 34 16z"/>
<path d="M1000 915 c-10 -12 -10 -18 0 -30 10 -12 10 -18 0 -30 -18 -21 16
-61 37 -44 10 9 17 8 28 -1 13 -10 19 -10 35 5 15 14 17 21 8 35 -9 14 -9 22
0 33 9 11 8 18 -8 32 -16 15 -22 16 -35 5 -12 -10 -19 -10 -27 -2 -16 16 -23
15 -38 -3z"/>
<path d="M197 729 c-52 -43 -95 -109 -111 -171 -8 -34 -19 -54 -30 -56 -13 -3
-16 -16 -16 -65 l0 -62 73 -22 c55 -16 109 -23 227 -27 147 -5 159 -4 233 20
l77 26 0 63 c0 53 -3 63 -19 68 -12 3 -20 17 -24 43 -9 56 -35 97 -97 160
l-54 54 -111 0 c-109 0 -111 -1 -148 -31z m213 -34 c0 -3 -13 -34 -29 -69
l-29 -64 25 -11 c37 -17 39 -15 63 44 12 30 26 55 30 55 22 0 70 -89 70 -130
0 -11 -7 -20 -16 -20 -11 0 -14 -8 -12 -32 2 -28 8 -34 33 -38 29 -6 29 -6
-19 -23 -68 -23 -292 -24 -359 -1 -51 17 -62 34 -22 34 21 0 25 5 25 29 0 16
-5 31 -11 33 -18 6 -2 74 25 105 l24 27 26 -52 26 -52 30 15 29 15 -29 64
c-15 35 -26 67 -23 70 8 7 143 8 143 1z"/>
<path d="M570 323 c-23 -4 -25 -8 -22 -43 18 -189 -232 -285 -355 -135 -33 40
-58 115 -48 146 4 12 2 19 -7 19 -7 0 -23 3 -36 6 -21 6 -22 3 -22 -41 0 -70
19 -121 64 -172 149 -169 417 -100 466 121 10 47 6 108 -8 105 -4 -1 -18 -4
-32 -6z"/>
</g>
</svg>
<span>2. Bevor die Wallbox installiert wird, sollte ein Profi die Gegebenheiten bei Ihnen überprüfen.</span>
</div>
<div style="width:1px; background:grey; height:50px; margin:15px 25px"></div>
<div class="ablauf-main-list">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="32pt" height="32pt" viewbox="0 0 134.000000 124.000000" preserveaspectratio="xMidYMid meet">
<g transform="translate(0.000000,124.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M100 760 l0 -240 30 0 30 0 0 210 0 210 345 0 345 0 0 -250 0 -250
-173 0 c-153 0 -177 2 -212 20 -50 25 -90 25 -138 0 -29 -16 -56 -20 -132 -20
l-95 0 0 -30 0 -30 78 0 77 0 0 -49 c0 -111 118 -181 212 -126 44 26 76 87 71
136 l-4 39 196 0 196 0 -4 -39 c-3 -28 3 -52 18 -79 74 -131 265 -81 265 69 0
43 3 51 23 56 12 3 31 17 42 30 17 22 20 41 20 143 0 114 -1 119 -49 255 -27
76 -59 147 -70 159 -21 21 -28 21 -546 24 l-525 3 0 -241z m1037 172 c12 -7
33 -52 47 -99 7 -22 5 -23 -63 -23 l-71 0 0 -85 0 -85 95 0 96 0 -3 -97 c-3
-98 -3 -98 -29 -101 -15 -2 -44 6 -65 17 -49 26 -100 27 -142 1 -18 -11 -46
-20 -62 -20 l-30 0 0 250 0 250 108 0 c59 0 112 -4 119 -8z m81 -197 c20 -43
16 -46 -50 -43 -51 2 -63 6 -66 21 -7 36 6 47 56 47 43 0 50 -3 60 -25z m-765
-335 c34 -27 43 -70 23 -109 -39 -75 -139 -68 -166 13 -28 85 71 152 143 96z
m681 -11 c35 -41 34 -83 -3 -120 -61 -60 -151 -24 -151 61 0 56 34 90 89 90
32 0 44 -6 65 -31z"/>
</g>
</svg>
<span>3. Ihre neue Wallbox ist auf dem Weg zu Ihnen! Haben Sie sich auch für
<br>
unseren Installationsservice entschieden, übernimmt unser Fachpartner
<br>
die Installation und Inbetriebnahme bei Ihnen vor Ort.</span>
</div>
<div style="width:1px; background:grey; height:50px; margin:15px 25px"></div>
<div>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="32pt" height="32pt" viewbox="0 0 134.000000 124.000000" preserveaspectratio="xMidYMid meet">
<g transform="translate(0.000000,124.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M850 1161 c-38 -12 -91 -41 -128 -69 -33 -25 -34 -25 -60 -8 -122 79
-271 92 -385 34 -51 -26 -120 -97 -146 -151 -28 -58 -43 -142 -35 -197 9 -61
40 -144 62 -163 16 -15 20 -15 39 -2 l22 15 -27 52 c-40 78 -43 176 -7 256 49
110 137 167 256 166 54 0 79 -6 131 -32 35 -17 74 -42 87 -56 l23 -25 56 46
c82 67 131 86 206 81 109 -7 195 -68 247 -173 29 -60 31 -71 27 -142 -3 -53
-12 -92 -26 -120 -20 -38 -487 -543 -503 -543 -3 0 -26 21 -50 48 -24 26 -112
119 -196 206 l-154 160 -21 -22 -22 -21 70 -73 c38 -40 135 -142 215 -226 80
-83 152 -152 161 -152 16 0 98 82 367 365 200 211 226 255 226 385 0 74 -4 93
-31 150 -37 79 -111 157 -178 190 -53 25 -178 37 -226 21z"/>
</g>
</svg>
<span style="padding-left:15px">4. Prima, Ihre neue Wallbox ist einsatzbereit!</span>
</div>
{% endif %}
</div>
</div>
</div>
{% if anytechdata %}
<div style="padding:20px; background:white; margin-top:3px;color:black">
{% else %}
<div style="padding:20px; background:white; margin-top:3px;color:black;display:none !important;">
{% endif %}
<div
style="background-color: white; margin-top:3px; padding: 10px; width: 100%">
{# <div onclick="openUl(this)" class="collapsible"> #}
<div class="collapsible almarenaRegular" style="font-size: 20px">
<h2 style="color:black;font-size:20px;">{{ "emova.label.technischedaten"|trans|striptags }}</h2>
<div>
<svg onclick="openUl(this)" style="cursor: pointer; transition: transform 0.5s;" version='1.0' xmlns='http://www.w3.org/2000/svg' width='20.000000pt' height='40.000000pt' viewbox='0 0 70.000000 51.000000' preserveaspectratio='xMidYMid meet'>
<g transform='translate(0.000000,51.000000) scale(0.100000,-0.100000)' fill='#000000' stroke='none'>
<path d='M110 374 c-12 -13 -2 -27 70 -99 79 -79 85 -83 102 -68 10 9 18 21 18 27 0 18 -143 156 -162 156 -8 0 -21 -7 -28 -16z'/>
<path d='M420 255 l-115 -115 23 -22 22 -23 117 117 c116 116 117 117 98 138 -10 11 -21 20 -24 20 -4 0 -58 -52 -121 -115z'/>
</g>
</svg>
</div>
</div>
<ul class="listItemsUl" style="list-style-type: none; padding-left:15px !important; padding-right:15px !important">
{% for field, data in page.customFieldTranslated %}
{% set translatedLabel = data.label %}
{% if( field != 'ev_wallboxdaten_anzmodule' ) %}
<li>
<span class="almarenaBold" style="font-size: 16px">
{{ translatedLabel|default(data.label) }}
</span>
<span class="almarenaRegular" style="font-size: 16px; display: flex; margin-left:10px">
{% if data.values is iterable %}
{% for item, dataValue in data.values %}
{{ dataValue|join(', ') }}
{% endfor %}
{% elseif data.type == 'bool' %}
<input class="custom-checkbox-custom-symbol" type="checkbox" {% if data.values %}checked{% endif %} disabled>
{% else %}
{{ data.values }}
{% endif %}
</span>
{% set tailTranslationKey = field ~ '.tail' %}
{% set tailTranslation = tailTranslationKey|trans %}
{% if tailTranslation != tailTranslationKey %}
<span style="margin-left:10px">{{ tailTranslation|trim }}</span>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="prod-details-buy">
{% if ev_category =="energy" %}
<div class="mobile-view-inline" style="background: radial-gradient(circle at bottom right, #364CA4 53%, #5F8E89 90%); background-color: white; padding: 25px; margin-bottom:3px;">
{% elseif ev_category == "heat" %}
<div class="mobile-view-inline" style="background: radial-gradient(circle at top right, #883569 53%, #AE773D 90%); background-color: white; padding: 25px; margin-bottom:3px;">
{% elseif ev_category == "lubricant" %}
<div class="mobile-view-inline" style="background: radial-gradient(circle at top right, #883569 53%, #AE773D 90%); background-color: white; padding: 25px; margin-bottom:3px;">
{% elseif ev_category == "consulting" %}
<div class="mobile-view-inline" style="background: radial-gradient(circle at bottom right, #364CA4 53%, #5F8E89 90%); background-color: white; padding: 25px; margin-bottom:3px;">
{% elseif ev_category == "mobility" %}
<div class="mobile-view-inline" style="background: radial-gradient(circle at bottom right, #364CA4 53%, #5F8E89 90%); background-color: white; padding: 25px; margin-bottom:3px;">
{% elseif ev_category == "emobility" %}
<div class="mobile-view-inline" style="background: radial-gradient(circle at bottom right, #364CA4 53%, #5F8E89 90%); background-color: white; padding: 25px; margin-bottom:3px;">
{% else %}
<div class="mobile-view-inline" style="background: radial-gradient(circle at bottom right, #364CA4 53%, #5F8E89 90%); background-color: white; padding: 25px; margin-bottom:3px;">
{% endif %}
<h1 class="h2" style="font-size:40px !important;">{{name}}</h1>
</div>
{% if 'solar' in producttype and ev_wallboxdaten_anwendungsbereich is not null %}
<div style="background-color: white; margin-top: 3px; padding: 25px 25px !important; display:flex; margin-bottom:3px">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 48 48" style="width: 30px;">
<style>.st2{fill:#141412}</style>
<path d="M23.4 18.9h1.3v17.2h-1.3zM23.4 12h1.3v3.7h-1.3z" class="st2"></path><path d="M4.2 35.2C2.3 31.8 1.3 27.9 1.3 24 1.3 11.5 11.5 1.3 24 1.3S46.7 11.5 46.7 24 36.5 46.7 24 46.7c-5.7 0-11.2-2.1-15.4-6l-.9.9C12.2 45.7 17.9 48 24 48c13.2 0 24-10.8 24-24S37.2 0 24 0 0 10.8 0 24c0 4.2 1.1 8.2 3.1 11.8l1.1-.6z" class="st2"></path></svg>
<div style="display:grid; margin-left:10px; line-height:20px">
<span style="color: black;font-size: 15px; font-weight:bold">Anwendungsbereiche</span>
<span style="color: black;font-size: 15px;">
{% if ev_wallboxdaten_anwendungsbereich is not null %}
{{ev_wallboxdaten_anwendungsbereich|join(', ')}}
{% endif %}
</span>
</div>
</div>
{% endif %}
<div class="mobile-view-inline" style="background-color: white; padding: 25px; margin-bottom:3px;">
<div
style="border-left: 1px solid black; text-align: start; display: table;">
{# {% if bulletpoints is not empty %}
{{bulletpoints|raw}}
{% endif %} #}
{% if bulletpoint1 is not empty or bulletpoint2 is not empty or
bulletpoint3 is not empty or bulletpoint4 is not empty %}
<ul class="almarenaRegular" style="padding-left: 25px; font-size:15px; display: table-cell; color:black;">
{% if bulletpoint1 is not empty %}
<li>{{bulletpoint1}}</li>
{% endif %}
{% if bulletpoint2 is not empty %}
<li>{{bulletpoint2}}</li>
{% endif %}
{% if bulletpoint3 is not empty %}
<li>{{bulletpoint3}}</li>
{% endif %}
{% if bulletpoint4 is not empty %}
<li>{{bulletpoint4}}</li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
{% set showMainTechBlock = false %}
{% if 'solar' in producttype %}
{% if gesamtleistung is not null or modulleistung is not null or anzmodule is not null %}
{% set showMainTechBlock = true %}
{% endif %}
{% endif %}
{% if 'wallbox' in producttype %}
{% if ev_wallbox_kw is not null or ev_wallbox_stecker is not null or ev_wallbox_app is not null %}
{% set showMainTechBlock = true %}
{% endif %}
{% endif %}
{% if showMainTechBlock %}
<div class="mobile-view-inline" style="background-color: white; padding: 25px; margin-bottom:3px">
<div class="product-details-technics" style="color:black">
{% block component_product_box_info %}
<div id="productInfo_{{id}}" class="product-info" style="text-align: left;">
{% if 'solar' in producttype %}
{% set pack = 'default' %}
{% set namespace = 'EmovaWbTheme' %}
{% if gesamtleistung is not empty %}
<div class="almarenaBold" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr; align-items: center;">
<div>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30pt" height="30pt" viewbox="50 0 40 80" preserveaspectratio="xMidYMid meet">
<g transform="translate(0.000000,80.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M366 513 c-10 -49 -19 -96 -22 -105 -4 -15 1 -18 30 -18 34 0 36 -2
36 -35 0 -24 5 -35 15 -35 11 0 15 12 15 45 0 45 0 45 -36 45 -29 0 -34 3 -30
18 3 9 10 45 17 80 l12 62 74 0 74 0 -30 -54 c-17 -29 -31 -56 -31 -60 0 -3
13 -6 29 -6 l30 0 -52 -85 c-33 -54 -58 -85 -69 -85 -15 0 -18 -9 -18 -47 0
-29 4 -43 9 -38 5 6 46 70 90 143 l81 132 -30 0 c-16 0 -30 3 -30 8 0 4 14 30
30 57 16 28 30 53 30 58 0 4 -47 7 -104 7 l-103 0 -17 -87z"/>
</g>
</svg>
</div>
<div>
{{gesamtleistung}} Gesamtleistung
</div>
</div>
{% else %}
<div class="almarenaBold" style="font-size: 20px ; margin-left:-24px">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30pt" height="30pt" viewbox="0 0 41 80" enable-background="new 0 0 91 80" xml:space="preserve">
<image id="image0" width="85" height="80" x="0" y="0"/></svg>
</div>
{% endif %}
{% if modulleistung is not empty %}
<div class="almarenaBold" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr; align-items: center;">
<div>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30pt" height="30pt" viewbox="50 0 40 80" preserveaspectratio="xMidYMid meet">
<g transform="translate(0.000000,80.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M366 513 c-10 -49 -19 -96 -22 -105 -4 -15 1 -18 30 -18 34 0 36 -2
36 -35 0 -24 5 -35 15 -35 11 0 15 12 15 45 0 45 0 45 -36 45 -29 0 -34 3 -30
18 3 9 10 45 17 80 l12 62 74 0 74 0 -30 -54 c-17 -29 -31 -56 -31 -60 0 -3
13 -6 29 -6 l30 0 -52 -85 c-33 -54 -58 -85 -69 -85 -15 0 -18 -9 -18 -47 0
-29 4 -43 9 -38 5 6 46 70 90 143 l81 132 -30 0 c-16 0 -30 3 -30 8 0 4 14 30
30 57 16 28 30 53 30 58 0 4 -47 7 -104 7 l-103 0 -17 -87z"/>
</g>
</svg>
</div>
<div>
{{modulleistung}} pro Modul
</div>
</div>
{% else %}
<div class="almarenaBold" style="font-size: 20px ; margin-left:-24px">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30pt" height="30pt" viewbox="0 0 41 80" enable-background="new 0 0 91 80" xml:space="preserve">
<image id="image0" width="85" height="80" x="0" y="0"/></svg>
</div>
{% endif %}
{% if anzmodule is not empty %}
<div class="almarenaBold anzmodule" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr;height: 39px;align-items: center;">
<div>{% set icon = source('@' ~ namespace ~ '/assets/icon/'~ pack ~'/view-grid.svg', ignore_missing = true) %}
{{ icon|sw_icon_cache|raw }}</div>
<div>
{{anzmodule}} Module
</div>
</div>
{% else %}
<div class="almarenaBold" style="font-size: 20px ; margin-left:-24px">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30pt" height="30pt" viewbox="0 0 41 80" enable-background="new 0 0 91 80" xml:space="preserve">
<image id="image0" width="85" height="80" x="0" y="0"/></svg>
</div>
{% endif %}
{% else %}
{% if ev_wallbox_kw is not empty %}
<div class="almarenaRegular" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr; align-items: center;">
<div>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30pt" height="30pt" viewbox="50 0 40 80" preserveaspectratio="xMidYMid meet">
<g transform="translate(0.000000,80.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M366 513 c-10 -49 -19 -96 -22 -105 -4 -15 1 -18 30 -18 34 0 36 -2
36 -35 0 -24 5 -35 15 -35 11 0 15 12 15 45 0 45 0 45 -36 45 -29 0 -34 3 -30
18 3 9 10 45 17 80 l12 62 74 0 74 0 -30 -54 c-17 -29 -31 -56 -31 -60 0 -3
13 -6 29 -6 l30 0 -52 -85 c-33 -54 -58 -85 -69 -85 -15 0 -18 -9 -18 -47 0
-29 4 -43 9 -38 5 6 46 70 90 143 l81 132 -30 0 c-16 0 -30 3 -30 8 0 4 14 30
30 57 16 28 30 53 30 58 0 4 -47 7 -104 7 l-103 0 -17 -87z"/>
</g>
</svg>
</div>
<div>
{{ev_wallbox_kw|map(x => x / 1000)|join(', ')}}
kW
</div>
</div>
{% else %}
<div class="almarenaRegular" style="font-size: 20px ; margin-left:-24px">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30pt" height="30pt" viewbox="0 0 41 80" enable-background="new 0 0 91 80" xml:space="preserve">
<image id="image0" width="85" height="80" x="0" y="0"/></svg>
</div>
{% endif %}
{% if ev_wallbox_stecker is not empty %}
<div class="almarenaRegular" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr; align-items: center;">
<div>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30pt" height="30pt" viewbox="50 0 40 89" preserveaspectratio="xMidYMid meet">
<g transform="translate(0.000000,89.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M310 595 c0 -18 -5 -25 -20 -25 -11 0 -20 -4 -20 -9 0 -14 63 -20
183 -18 l107 2 0 -53 c0 -32 -7 -65 -16 -82 -35 -58 -111 -76 -181 -44 -41 20
-59 45 -68 97 -10 49 -31 43 -27 -8 5 -53 33 -89 92 -117 47 -22 49 -24 50
-65 0 -31 4 -43 15 -43 11 0 15 11 15 43 0 42 1 44 39 56 77 23 121 94 121
194 0 42 -2 46 -27 49 -20 2 -29 9 -31 26 -3 18 -10 22 -42 22 -32 0 -39 -4
-42 -22 -2 -18 -10 -23 -33 -23 -23 0 -31 5 -33 23 -3 18 -10 22 -43 22 -35 0
-39 -3 -39 -25z m60 -10 c0 -8 -7 -15 -15 -15 -8 0 -15 7 -15 15 0 8 7 15 15
15 8 0 15 -7 15 -15z m150 0 c0 -8 -7 -15 -15 -15 -8 0 -15 7 -15 15 0 8 7 15
15 15 8 0 15 -7 15 -15z"/>
</g>
</svg>
</div>
<div>
Typ 2{# ev_wallbox_stecker|join(' ')#}</div>
</div>
{% else %}
<div class="almarenaRegular" style="font-size: 20px ; margin-left:-24px">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30pt" height="30pt" viewbox="0 0 41 80" enable-background="new 0 0 91 80" xml:space="preserve">
<image id="image0" width="85" height="80" x="0" y="0"/></svg>
</div>
{% endif %}
{% if ev_wallbox_app is not empty %}
<div class="almarenaRegular" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr; align-items: center;">
<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30pt" height="30pt" viewbox="50 0 40 80" enable-background="new 0 0 91 80" xml:space="preserve">
<image id="image0" width="85" height="80" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFsAAABQCAQAAADc+MHRAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
cwAADsMAAA7DAcdvqGQAAAAHdElNRQfnBBIXBSp3oDAoAAABYklEQVRo3u3ZQUvCcBjH8a9pBRlp
saIo0F6B3jp66CYU9QpWCJ3z3EF6Bb6EegcdegWdim69hIGUREc7NJCnSxdTcrb/cIPfZ4eBzO27
+YBsAxEREREREaEerBiRllUrN+ddC4Dv+WExYjSG7Vu9Ne9moOSVwpw1zT+ZeoL4bxuG4Sy78P+v
loEBO+xN3bIKLLkqjptdBfpOY6JbmNNxlZ0hyla2slNF2cpWdqooW9nKTpUYN2VnwCHDg+vnTGWf
fzi+r51BRocko9kxhuTG47W3OIywpfHIIC3Zt8ATX05zosrokMTObtE5Jff30sl1+tvpyh7V3eoO
S4Yd2eWF2z2PijHbk7R/1vdJNpPQbBddX42ks2vUKPDJOpVEs2NclocJn728k+/22OW4neicxP41
+/z+w2mPPacPgDDJs5hFw2uEyzO8u9m0Shre3QCsBfnI2Vd2l5ZsEREREREREZFx33/nj40uG53m
AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIzLTA0LTE4VDIzOjA1OjQyKzAwOjAwgWHuqAAAACV0RVh0
ZGF0ZTptb2RpZnkAMjAyMy0wNC0xOFQyMzowNTo0MiswMDowMPA8VhQAAAAASUVORK5CYII="/>
</svg>
</div>
<div>
APP-Steuerung</div>
</div>
{% else %}
<div class="almarenaRegular" style="font-size: 20px ; margin-left:-24px">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30pt" height="30pt" viewbox="0 0 41 80" enable-background="new 0 0 91 80" xml:space="preserve">
<image id="image0" width="85" height="80" x="0" y="0"/></svg>
</div>
{% endif %}
{% endif %}
</div>
{% endblock %}
</div>
</div>
{% endif %}
{% block page_product_detail_configurator_include %}
{% if page.product.parentId and page.configuratorSettings|length > 0 %}
<div class="product-detail-configurator-container">
{% sw_include '@Storefront/storefront/page/product-detail/configurator.html.twig' %}
</div>
{% endif %}
{% endblock %}
<div class="mobile-view-inline" id="productActions_{{id}}" style="background-color: white; padding: 25px;">
{% block component_product_box_price %}
{% set real = page.product.calculatedPrice %}
{% if page.product.calculatedPrices.count > 0 %}
{% set real = page.product.calculatedPrices.last %}
{% endif %}
<div class="product-price-wrapper" style="width:100%">
{% set price = real %}
{% set calcedTax = (price.calculatedTaxes.elements|first) %}
{% set tax = calcedTax.tax %}
{% set isListPrice = price.listPrice.percentage > 0 %}
{% set isRegulationPrice = price.regulationPrice != null %}
<div class="almarenaRegular" style="width:100%; color:black; display:flex; font-size:18px;">
<div class="width-50">
(netto)
</div>
<div class="width-50" style="text-align: end;">
{{ (price.totalPrice-tax)|currency(decimals=2) }}
</div>
</div>
<div class="almarenaBold" style="width:100%; color:black; display:flex; font-size:24px; margin-bottom:40px;">
<div class="width-50">
Preis
</div>
<div class="width-50" style="text-align: end;">
{{ (price.totalPrice)|currency(decimals=2) }}
</div>
</div>
{% if page.product.deliveryTime.name %}
<div class="almarenaRegular" style="width:100%; color:black; display:flex; font-size:18px; margin-bottom:40px;">
<div class="width-50">
Lieferzeit
</div>
<div class="width-50" style="text-align: end;">
{{ page.product.deliveryTime.name }}
</div>
</div>
{% endif %}
</div>
{% endblock %}
{% set isVariantOptionView = 'isVariantOptionView' %}
{% block component_product_box_action %}
{% sw_include '@Storefront/storefront/component/product/card/action.html.twig' with {
'isVariantOptionView': isVariantOptionView
} %}
{% endblock %}
<button onclick="window.history.go(-1); return false;"
type="button"
class="btn btn-block btn-buy custom-buy-btn
{% if ev_category == 'mobility' %} mobility-hover
{% elseif ev_category == 'energy' %} energy-hover
{% elseif ev_category == 'emobility' %} emobility-hover
{% elseif ev_category == 'lubricant' %} lubricant-hover
{% elseif ev_category == 'consulting' %} consulting-hover
{% elseif ev_category == 'heat' %} heat-hover {% endif %} " style="width:100%; margin-top:20px;">WEITER EINKAUFEN</button>
</div>
</div>
</div>
<script>
function openUl(toggleButton) {
var div = toggleButton.closest('.collapsible');
var ul = div.nextElementSibling;
if (ul.style.display === "none" || ul.style.display === "") {
ul.style.display = "block";
div.style.borderBottom = "1px solid black";
toggleButton.style.transform = 'rotate(180deg)';
} else {
ul.style.display = "none";
div.style.borderBottom = "none";
toggleButton.style.transform = 'rotate(0deg)';
}
}
</script>
{% endblock %}
{% endblock %}
{% endblock %}
</div>
{% endif %}
{% endblock %}
{% endblock %}
</div>
{% endblock %}
{% endblock %}
</div>
{% endblock %}
<style>
.anzmodule svg {
width: 15px;
height: 24px;
}
.anzmodule svg use {
fill: black;
}
.ablauf-main-list {
display: grid;
align-items: center;
grid-template-columns: 50px 1fr;
}
.ablauf-main-list svg{
width:50px;
height:50px;
}
.ablauf-main-list svg use{
fill:black;
}
.ablauf-main-list span {
padding-left: 15px;
}
.width-50 {
width: 50%;
}
.font-size32 {
font-size: 32px;
}
.font-size25 {
font-size: 25px;
}
.font-size16 {
font-size: 16px;
}
.font-size14 {
font-size: 14px;
}
.font-weight-bold {
font-weight: bold;
}
.bottom-left {
color: black;
font: normal normal normal 20px / 22px Almarena W05;
padding: 10px 10px 0;
}
.top-mid {
position: absolute;
margin-top: 20px;
font: normal normal normal 32px / 34px Almarena W05;
width: 100%;
text-align: center;
z-index: 1;
}
.inline-div {
display: flex;
}
.p-0 {
padding-left: 0 0 0 0 !important;
}
.imgTopRightRadius {
border-top-right-radius: 3px;
object-fit: contain !important;
}
.f-size-14 {
font-size: 14px;
}
.f-size-20 {
font-size: 20px;
}
.f-size-25 {
font-size: 25px;
}
.horizontal-lignment {
display: flex;
flex-direction: row;
align-items: center;
}
.product-image {
max-height: 240px !important;
}
.product-description {
height: auto !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: -webkit-box !important;
-webkit-line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
font-size: 20px !important;
line-height: 20px !important;
}
.product-details-title {
font-size: 40px;
}
.product-details-number {
font-size: 16px;
}
.carousel-container {
display: flex;
flex-direction: column;
align-items: center;
}
.main-image img {
width: 287px;
height: 287px;
}
.preview-images {
display: flex;
justify-content: center;
margin-top: 10px;
}
.preview-images img {
width: 40px;
margin: 0 5px;
cursor: pointer;
}
.preview-images img:hover {
border: 2px solid #007bff;
}
.arrow {
font-size: 24px;
cursor: pointer;
margin: 0 10px;
display: flex;
align-items: center;
}
.collapsible {
user-select: none;
margin: 0 -10px;
height: 50px;
display: flex;
align-items: center;
padding: 0;
justify-content: space-between;
}
.listItemsUl {
display: none;
}
.listItemsUl li {
display: flex;
align-items: center;
height: auto;
min-height: 50px;
border-bottom: 1px solid black;
}
.listItemsUl li:last-child {
border-bottom: none;
}
</style>
{% endblock %}

custom/plugins/EmovaWbTheme/src/Resources/views/storefront/page/product-detail/index.html.twig line 1