custom/plugins/EmovaWbTheme/src/Resources/views/storefront/component/product/card/box-standard.html.twig line 1

Open in your IDE?
  1. {% block component_product_box %}
  2.     {% if product %}
  3.         {% set name = product.translated.name %}
  4.         {% set id = product.id %}
  5.         {% set cover = product.cover.media %}
  6.         {% set variation = product.variation %}
  7.         {% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %}
  8.         {% set bulletpoint1 = product.customFields.ev_produktdaten_bulletpoint1 %}
  9.         {% set bulletpoint2 = product.customFields.ev_produktdaten_bulletpoint2 %}
  10.         {% set bulletpoint3 = product.customFields.ev_produktdaten_bulletpoint3 %}
  11.         {% set bulletpoint4 = product.customFields.ev_produktdaten_bulletpoint4 %}
  12.         {% set disableCompare = product.customFields.custom_emova_category_removecompare %}
  13.         {% set producttype = product.customFields.ev_produktdaten_produkttyp %}
  14.         {% set gesamtleistung = product.customFields.ev_wallboxdaten_gesamtleistung %}
  15.         {% set modulleistung = product.customFields.ev_wallboxdaten_modulleistung %}
  16.         {% set anzmodule = product.customFields.ev_wallboxdaten_anzmodule %}
  17.         {% set ev_wallbox_kw = product.customFields.ev_wallboxdaten_chargingPowersWatt %}
  18.         {% set ev_wallbox_stecker = product.customFields.ev_wallboxdaten_chargingConnectorTypes %}
  19.         {% set ev_wallbox_app = product.customFields.ev_wallboxdaten_smartphoneControllable %}
  20.         {% set ev_wallboxdaten_anwendungsbereich = product.customFields.ev_wallboxdaten_anwendungsereich %}
  21.         <div class="productItem card product-box box-{{ layout }}" style="border:none !important; border-color: transparent !important; background-color: transparent !important;">
  22.             {% block component_product_box_content %}
  23.                 {% block component_product_box_image %}
  24.                     {# fallback if display mode is not set #}
  25.                     {% set displayMode = displayMode ?: 'standard' %}
  26.                     {# set display mode 'cover' for box-image with standard display mode #}
  27.                     {% if layout == 'image' and displayMode == 'standard' %}
  28.                         {% set displayMode = 'cover' %}
  29.                     {% endif %}
  30.           {% set ev_category = page.header.navigation.active.customFields.custom_emova_category_maintype %}
  31.                   {% if not ev_category %}
  32.                     {% set ev_category = product.customFields.custom_emova_category_maintype %}
  33.                     {% endif %}
  34.                     {% block component_product_box_image_link %}
  35.                         <div class="container-box-image" onclick="openDetails(event, '{{ seoUrl('frontend.detail.page', { 'productId': id }) }}')" style="cursor:pointer;">
  36.                             <div id="imageContainer_{{id}}" class="col-12 p-0 main-image-container" style=" position: relative; text-align: center; color: white;">
  37.                                 <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}">
  38.                                     {% if ev_category =="energy" %}
  39.                                             <div class="container-box-image" style="background: radial-gradient(circle at bottom right, #364CA4 53%, #5F8E89 90%);"></div>
  40.                                     {% elseif ev_category == "heat" %}
  41.                                             <div class="container-box-image" style="background: radial-gradient(circle at top right, #883569 53%, #AE773D 90%);"></div>
  42.                                     {% elseif ev_category == "lubricant" %}
  43.                                             <div class="container-box-image" style="background: radial-gradient(circle at top right, #883569 53%, #AE773D 90%);"></div>
  44.                                     {% elseif ev_category == "consulting" %}
  45.                                             <div class="container-box-image" style="background: radial-gradient(circle at bottom right, #364CA4 53%, #5F8E89 90%);"></div>
  46.                                     {% elseif ev_category == "mobility" %}
  47.                                             <div class="container-box-image" style="background: radial-gradient(circle at bottom right, #364CA4 53%, #5F8E89 90%);"></div>
  48.                                     {% elseif ev_category == "emobility" %}
  49.                                             <div class="container-box-image" style="background: radial-gradient(circle at bottom right, #364CA4 53%, #5F8E89 90%);"></div>
  50.                                     {% else %}
  51.                                         <div class="container-box-image" style="background: radial-gradient(circle at bottom right, #364CA4 53%, #5F8E89 90%);"></div>
  52.                                     {% endif %}
  53.                                 </a>
  54.                                 {% if 'picfullblack' in producttype or 'picfullwhite' in producttype %}
  55.                                     <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}" title="{{ name }}" class="product-image-link is-{{ displayMode }}" style="opacity: .9; width:100%; margin:0 auto;">
  56.                                 {% else %}
  57.                                     <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}" title="{{ name }}" class="product-image-link is-{{ displayMode }}" style="opacity: .9; width:50%; margin:0 auto;">
  58.                                 {% endif %}
  59.                                 {% if 'picfullblack' in producttype or 'picfullwhite' in producttype %}
  60.                                     <div>
  61.                                 {% else %}
  62.                                     <div style="width: 50%; height: 75%; position: absolute; margin-bottom:75%;">
  63.                                 {% endif %}
  64.                                     {% block component_product_box_image_link_inner %}
  65.                                         {% if cover.url %}
  66.                                         {% if 'picfullblack' in producttype or 'picfullwhite' in producttype %}
  67.                                             {% set attributes = {
  68.                                                 'class': 'box-img',
  69.                                                 'alt': (cover.translated.alt ?: name),
  70.                                                 'title': (cover.translated.title ?: name)
  71.                                             } %}
  72.                                         {% else %}
  73.                                             {% set attributes = {
  74.                                                 'class': 'box-img',
  75.                                                 'alt': (cover.translated.alt ?: name),
  76.                                                 'title': (cover.translated.title ?: name)
  77.                                             } %}
  78.                                         {% endif %}
  79.                                             {% if displayMode == 'cover' or displayMode == 'contain' %}
  80.                                                 {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  81.                                             {% endif %}
  82.                                             {% block component_product_box_image_thumbnail %}
  83.                                                 {% sw_thumbnails 'product-image-thumbnails' with {
  84.                                                     media: cover,
  85.                                                     sizes: sizes
  86.                                                 } %}
  87.                                             {% endblock %}
  88.                                         {% else %}
  89.                                             {% block component_product_box_image_placeholder %}
  90.                                                 <div class="product-image-placeholder">
  91.                                                     {% sw_icon 'placeholder' style {
  92.                                                         'size': 'fluid'
  93.                                                     } %}
  94.                                                 </div>
  95.                                             {% endblock %}
  96.                                         {% endif %}
  97.                                     {% endblock %}
  98.                                     </div>
  99.                                 </a>
  100.                                 <div style="position: absolute; bottom:0; margin-left:25px;">
  101.                                     <div class="horizontal-lignment f-size-14" style="padding: 10px;">
  102.                                         {% if 'picfullblack' in producttype %}
  103.                                             <div style="margin-right: 10px; text-align: end; color:black">PRODUKT
  104.                                                 <br>
  105.                                                 INFO
  106.                                             </div>
  107.                                         {% else %}
  108.                                             <div style="margin-right: 10px; text-align: end;">PRODUKT
  109.                                                 <br>
  110.                                                 INFO
  111.                                             </div>
  112.                                         {% endif %}
  113.                                         <div
  114.                                             id="shortDetailsArrowRight_{{id}}" class="details-btn details-btn-arrow" title="{{ name }}" class="product-image-link is-{{ displayMode }}">
  115.                                             {# <svg id="svgDetails_{{id}}" xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="black" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
  116.                                                                                                                                                                                                                                 <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
  117.                                                                                                                                                                                                                             </svg> #}
  118.                                             {% if 'picfullblack' in producttype %}
  119.                                                 <svg class="details-btn-arrow" id="svgDetails_{{id}}" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 50 50">
  120.                                                     <g fill="none" stroke="black" stroke-width="1.5">
  121.                                                         <circle cx="25" cy="25" r="25" stroke="none"/>
  122.                                                         <circle cx="25" cy="25" r="24.25" fill="none"/>
  123.                                                     </g>
  124.                                                     <g>
  125.                                                         <g>
  126.                                                             <path fill="black" d="m30.222 17 5.945 5.353-1.137 1.263-5.946-5.353z"></path>
  127.                                                         </g>
  128.                                                         <path fill="black" d="M12.667 24.961H37.29v1.373l-7.293 6.483-1.1-1.185 5.578-5.007H12.669Z"></path>
  129.                                                     </g>
  130.                                                 </svg>
  131.                                             {% else %}
  132.                                                 <svg class="details-btn-arrow" id="svgDetails_{{id}}" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 50 50">
  133.                                                     <g fill="none" stroke="white" stroke-width="1.5">
  134.                                                         <circle cx="25" cy="25" r="25" stroke="none"/>
  135.                                                         <circle cx="25" cy="25" r="24.25" fill="none"/>
  136.                                                     </g>
  137.                                                     <g>
  138.                                                         <g>
  139.                                                             <path fill="white" d="m30.222 17 5.945 5.353-1.137 1.263-5.946-5.353z"></path>
  140.                                                         </g>
  141.                                                         <path fill="white" d="M12.667 24.961H37.29v1.373l-7.293 6.483-1.1-1.185 5.578-5.007H12.669Z"></path>
  142.                                                     </g>
  143.                                                 </svg>
  144.                                             {% endif %}
  145.                                         </div>
  146.                                     </div>
  147.                                 </div>
  148.                             </div>
  149.                         </div>
  150.                         <script>
  151.                             function openDetails(event, url){
  152.                                 if (event.target.classList.contains('details-btn-arrow') || event.target.closest('.details-btn-arrow')) {
  153.                                 } else {
  154.                                     window.location.href = url;
  155.                                 }
  156.                             }
  157.                         </script>
  158.                     {% endblock %}
  159.                 {% endblock %}
  160.                 <div id="descriptionDetailsContent_{{id}}" class="description-details-content" style="height: 335px; width: 100%; overflow-y: auto; display: none; background-color: #EBECECFD; padding: 10px 25px;">
  161.                     <p>{{ product.translated.description|raw }}</p>
  162.                     <style>
  163.                     /* width */
  164.                     ::-webkit-scrollbar {
  165.                         width: 3px;
  166.                     }
  167.                     /* Track */
  168.                     ::-webkit-scrollbar-track {
  169.                         box-shadow: inset 0 0 5px grey;
  170.                         border-radius: 10px;
  171.                     }
  172.                     /* Handle */
  173.                     ::-webkit-scrollbar-thumb {
  174.                         background: #246FDC;
  175.                         border-radius: 10px;
  176.                     }
  177.                 </style>
  178.             </div>
  179.             <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}">
  180.                 <div style="background-color: white; margin-top: 3px; padding: 10px 25px !important; color:black;">
  181.                     <h2 class="top-mid almarenaDisplayRegular" style="color:black;font-size=32px;">{{name}}</h2>
  182.                 </div>
  183.             </a>
  184.             {% if 'solar' in producttype and ev_wallboxdaten_anwendungsbereich is not null %}
  185.                 <div style="background-color: white; margin-top: 3px; padding: 25px; display:grid;grid-template-columns: 30px 1fr;align-items: center">
  186.                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width: 100%">
  187.                     <path d="M23.4 18.9h1.3v17.2h-1.3zM23.4 12h1.3v3.7h-1.3z" fill="#141412"></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" fill="#141412"></path></svg>
  188.                     <div style="display:flex; margin-left:10px; line-height:20px; height: 60px; flex-direction: column;justify-content: center">
  189.                         <span style="color: black;font-size: 15px; font-weight:bold">Anwendungsbereiche</span>
  190.                         <span style="color: black;font-size: 15px;">
  191.                             {% if ev_wallboxdaten_anwendungsbereich is not null %}
  192.                                 {{ev_wallboxdaten_anwendungsbereich|join(', ')}}
  193.                             {% endif %}
  194.                         </span>
  195.                     </div>
  196.                 </div>
  197.             {% endif %}
  198.             <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}">
  199.                 <div style="background-color: white; margin-top: 3px; padding: 25px 25px !important; margin-bottom:3px">
  200.                     <div
  201.                         style="border-left: 1px solid black; text-align: start; display: table;">
  202.                         {# {% if bulletpoints is not empty %}
  203.                                                                                                                                                                         {{bulletpoints|raw}}
  204.                                                                                                                                                                     {% endif %} #}
  205.                         {% if bulletpoint1 is not empty or bulletpoint2 is not empty or
  206.                                 bulletpoint3 is not empty or bulletpoint4 is not empty %}
  207.                             <ul class="almarenaRegular" style="padding-left: 25px; font-size:15px; display: table-cell; color:black;">
  208.                                 {% if bulletpoint1 is not empty %}
  209.                                     <li>{{bulletpoint1}}</li>
  210.                                 {% endif %}
  211.                                 {% if bulletpoint2 is not empty %}
  212.                                     <li>{{bulletpoint2}}</li>
  213.                                 {% endif %}
  214.                                 {% if bulletpoint3 is not empty %}
  215.                                     <li>{{bulletpoint3}}</li>
  216.                                 {% endif %}
  217.                                 {% if bulletpoint4 is not empty %}
  218.                                     <li>{{bulletpoint4}}</li>
  219.                                 {% endif %}
  220.                             </ul>
  221.                         {% endif %}
  222.                     </div>
  223.                 </div>
  224.             </a>
  225.             {% set showMainTechBlock = false %}
  226.               {% if 'solar' in producttype %}
  227.                 {% if gesamtleistung is not null or modulleistung is not null or anzmodule is not null %}
  228.                    {% set showMainTechBlock = true %}
  229.                 {% endif %}
  230.               {% endif %}
  231.               {% if 'wallbox' in producttype %}
  232.                  {% if ev_wallbox_kw is not null or ev_wallbox_stecker is not null or ev_wallbox_app is not null %}
  233.                      {% set showMainTechBlock = true %}
  234.                  {% endif %}
  235.               {% endif %}
  236.                               {% if showMainTechBlock %}
  237.                 <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}">
  238.                 <div class="mobile-view-inline" style="background-color: white; padding: 25px; margin-bottom:3px">
  239.                     <div class="product-details-technics" style="color:black">
  240.                         {% block component_product_box_info %}
  241.                             <div id="productInfo_{{id}}" class="product-info" style="text-align: left;">
  242.                                 {% if 'solar' in producttype %}
  243.                                     {% set pack = 'default' %}
  244.                                     {% set namespace = 'EmovaWbTheme' %}
  245.                                     {% if gesamtleistung is not empty %}
  246.                                         <div class="almarenaBold" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr; align-items: center;">
  247.                                             <div>
  248.                                             <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30pt" height="30pt" viewbox="50 0 40 80" preserveaspectratio="xMidYMid meet">
  249.                                                 <g transform="translate(0.000000,80.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
  250.                                                     <path d="M366 513 c-10 -49 -19 -96 -22 -105 -4 -15 1 -18 30 -18 34 0 36 -2
  251.                                                                                                                                                                                                                                                                                                                 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
  252.                                                                                                                                                                                                                                                                                                                 18 3 9 10 45 17 80 l12 62 74 0 74 0 -30 -54 c-17 -29 -31 -56 -31 -60 0 -3
  253.                                                                                                                                                                                                                                                                                                                 13 -6 29 -6 l30 0 -52 -85 c-33 -54 -58 -85 -69 -85 -15 0 -18 -9 -18 -47 0
  254.                                                                                                                                                                                                                                                                                                                 -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
  255.                                                                                                                                                                                                                                                                                                                 30 57 16 28 30 53 30 58 0 4 -47 7 -104 7 l-103 0 -17 -87z"/>
  256.                                                 </g>
  257.                                             </svg>
  258.                                             </div>
  259.                                             <div>
  260.                                             {{gesamtleistung}} Gesamtleistung
  261.                                             </div>
  262.                                         </div>
  263.                                     {% else %}
  264.                                         <div class="almarenaBold" style="font-size: 20px ; margin-left:-24px">
  265.                                             <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">
  266.                                                 <image id="image0" width="85" height="80" x="0" y="0"/></svg>
  267.                                         </div>
  268.                                     {% endif %}
  269.                                     {% if modulleistung is not empty %}
  270.                                         <div class="almarenaBold" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr; align-items: center;">
  271.                                         <div>
  272.                                             <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30pt" height="30pt" viewbox="50 0 40 80" preserveaspectratio="xMidYMid meet">
  273.                                                 <g transform="translate(0.000000,80.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
  274.                                                     <path d="M366 513 c-10 -49 -19 -96 -22 -105 -4 -15 1 -18 30 -18 34 0 36 -2
  275.                                                                                                                                                                                                                                                                                                                 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
  276.                                                                                                                                                                                                                                                                                                                 18 3 9 10 45 17 80 l12 62 74 0 74 0 -30 -54 c-17 -29 -31 -56 -31 -60 0 -3
  277.                                                                                                                                                                                                                                                                                                                 13 -6 29 -6 l30 0 -52 -85 c-33 -54 -58 -85 -69 -85 -15 0 -18 -9 -18 -47 0
  278.                                                                                                                                                                                                                                                                                                                 -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
  279.                                                                                                                                                                                                                                                                                                                 30 57 16 28 30 53 30 58 0 4 -47 7 -104 7 l-103 0 -17 -87z"/>
  280.                                                 </g>
  281.                                             </svg>
  282.                                             </div>
  283.                                             <div>
  284.                                             {{modulleistung}} pro Modul
  285.                                             </div>
  286.                                         </div>
  287.                                     {% else %}
  288.                                         <div class="almarenaBold" style="font-size: 20px ; margin-left:-24px">
  289.                                             <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">
  290.                                                 <image id="image0" width="85" height="80" x="0" y="0"/></svg>
  291.                                         </div>
  292.                                     {% endif %}
  293.                                     {% if anzmodule is not empty %}
  294.                                         <div class="almarenaBold anzmodule" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr;height: 39px;align-items: center;">
  295.                                             <div>{% set icon = source('@' ~ namespace ~ '/assets/icon/'~ pack ~'/view-grid.svg', ignore_missing = true) %}
  296.                                                 {{ icon|sw_icon_cache|raw }}</div>
  297.                                             <div>
  298.                                                 {{anzmodule}} Module
  299.                                             </div>
  300.                                         </div>
  301.                                     {% else %}
  302.                                         <div class="almarenaBold" style="font-size: 20px ; margin-left:-24px">
  303.                                             <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">
  304.                                                 <image id="image0" width="85" height="80" x="0" y="0"/></svg>
  305.                                         </div>
  306.                                     {% endif %}
  307.                                 {% else %}
  308.                                     {% if ev_wallbox_kw is not empty %}
  309.                                         <div class="almarenaRegular" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr; align-items: center;">
  310.                                         <div>
  311.                                             <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30pt" height="30pt" viewbox="50 0 40 80" preserveaspectratio="xMidYMid meet">
  312.                                             <g transform="translate(0.000000,80.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
  313.                                                 <path d="M366 513 c-10 -49 -19 -96 -22 -105 -4 -15 1 -18 30 -18 34 0 36 -2
  314.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             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
  315.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             18 3 9 10 45 17 80 l12 62 74 0 74 0 -30 -54 c-17 -29 -31 -56 -31 -60 0 -3
  316.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             13 -6 29 -6 l30 0 -52 -85 c-33 -54 -58 -85 -69 -85 -15 0 -18 -9 -18 -47 0
  317.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             -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
  318.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             30 57 16 28 30 53 30 58 0 4 -47 7 -104 7 l-103 0 -17 -87z"/>
  319.                                             </g>
  320.                                         </svg>
  321.                                         </div>
  322.                                         <div>
  323.                                         {{ev_wallbox_kw|map(x => x / 1000)|join(', ')}}
  324.                                         kW
  325.                                         </div>
  326.                                     </div>
  327.                                     {% else %}
  328.                                     <div class="almarenaRegular" style="font-size: 20px ; margin-left:-24px">
  329.                                         <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">
  330.                                             <image id="image0" width="85" height="80" x="0" y="0"/></svg>
  331.                                     </div>
  332.                                     {% endif %}
  333.                                     {% if ev_wallbox_stecker is not empty %}
  334.                                     <div class="almarenaRegular" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr; align-items: center;">
  335.                                     <div>
  336.                                         <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30pt" height="30pt" viewbox="50 0 40 89" preserveaspectratio="xMidYMid meet">
  337.                                             <g transform="translate(0.000000,89.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
  338.                                                 <path d="M310 595 c0 -18 -5 -25 -20 -25 -11 0 -20 -4 -20 -9 0 -14 63 -20
  339.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             183 -18 l107 2 0 -53 c0 -32 -7 -65 -16 -82 -35 -58 -111 -76 -181 -44 -41 20
  340.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             -59 45 -68 97 -10 49 -31 43 -27 -8 5 -53 33 -89 92 -117 47 -22 49 -24 50
  341.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             -65 0 -31 4 -43 15 -43 11 0 15 11 15 43 0 42 1 44 39 56 77 23 121 94 121
  342.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             194 0 42 -2 46 -27 49 -20 2 -29 9 -31 26 -3 18 -10 22 -42 22 -32 0 -39 -4
  343.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             -42 -22 -2 -18 -10 -23 -33 -23 -23 0 -31 5 -33 23 -3 18 -10 22 -43 22 -35 0
  344.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             -39 -3 -39 -25z m60 -10 c0 -8 -7 -15 -15 -15 -8 0 -15 7 -15 15 0 8 7 15 15
  345.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             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
  346.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             15 15 8 0 15 -7 15 -15z"/>
  347.                                             </g>
  348.                                         </svg>
  349.                                         </div>
  350.                                         <div>
  351.                                         Typ 2{# ev_wallbox_stecker|join(' ')#}</div>
  352.                                         </div>
  353.                                     {% else %}
  354.                                     <div class="almarenaRegular" style="font-size: 20px ; margin-left:-24px">
  355.                                         <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">
  356.                                             <image id="image0" width="85" height="80" x="0" y="0"/></svg>
  357.                                     </div>
  358.                                     {% endif %}
  359.                                     {% if ev_wallbox_app is not empty %}
  360.                                     <div class="almarenaRegular" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr; align-items: center;">
  361.                                     <div>
  362.                                         <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">
  363.                                             <image id="image0" width="85" height="80" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFsAAABQCAQAAADc+MHRAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
  364.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
  365.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 cwAADsMAAA7DAcdvqGQAAAAHdElNRQfnBBIXBSp3oDAoAAABYklEQVRo3u3ZQUvCcBjH8a9pBRlp
  366.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 saIo0F6B3jp66CYU9QpWCJ3z3EF6Bb6EegcdegWdim69hIGUREc7NJCnSxdTcrb/cIPfZ4eBzO27
  367.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 +YBsAxEREREREaEerBiRllUrN+ddC4Dv+WExYjSG7Vu9Ne9moOSVwpw1zT+ZeoL4bxuG4Sy78P+v
  368.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 loEBO+xN3bIKLLkqjptdBfpOY6JbmNNxlZ0hyla2slNF2cpWdqooW9nKTpUYN2VnwCHDg+vnTGWf
  369.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 fzi+r51BRocko9kxhuTG47W3OIywpfHIIC3Zt8ATX05zosrokMTObtE5Jff30sl1+tvpyh7V3eoO
  370.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 S4Yd2eWF2z2PijHbk7R/1vdJNpPQbBddX42ks2vUKPDJOpVEs2NclocJn728k+/22OW4neicxP41
  371.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 +/z+w2mPPacPgDDJs5hFw2uEyzO8u9m0Shre3QCsBfnI2Vd2l5ZsEREREREREZFx33/nj40uG53m
  372.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIzLTA0LTE4VDIzOjA1OjQyKzAwOjAwgWHuqAAAACV0RVh0
  373.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 ZGF0ZTptb2RpZnkAMjAyMy0wNC0xOFQyMzowNTo0MiswMDowMPA8VhQAAAAASUVORK5CYII="/>
  374.                                         </svg>
  375.                                         </div>
  376.                                         <div>
  377.                                         APP-Steuerung</div>
  378.                                         </div>
  379.                                     {% else %}
  380.                                     <div class="almarenaRegular" style="font-size: 20px ; margin-left:-24px">
  381.                                         <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">
  382.                                             <image id="image0" width="85" height="80" x="0" y="0"/></svg>
  383.                                     </div>
  384.                                     {% endif %}
  385.                                 {% endif %}
  386.                             </div>
  387.                         {% endblock %}
  388.                     </div>
  389.                 </div>
  390.                 </a>
  391.             {% endif %}
  392.             <div id="productActions_{{id}}" style="background-color: white; padding: 32px 25px;">
  393.                 {% if disableCompare is not true %}
  394.                     {% block component_product_box_action_add_to_compare_button %}
  395.                         {% sw_include '@Storefront/storefront/component/product/card/compare-button.html.twig' %}
  396.                     {% endblock %}
  397.                     {% else %}
  398.                         <div class="compare-button" style="margin-bottom:20px; height:40px"></div>
  399.                     {% endif %}
  400.                     {% block component_product_box_price %}
  401.                         {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
  402.                     {% endblock %}
  403.                 {% block component_product_box_action %}
  404.                     {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %}
  405.                 {% endblock %}
  406.             </div>
  407.             {% endblock %}
  408.         </div>
  409.     {% endif %}
  410.     {#      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  411.      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  412.      <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
  413.      <script>
  414.         $("#shortDetailsArrowRight_{{id}}").click(function(){
  415.             $("#shortDetailsArrowRight_{{id}}").css('display', 'none');
  416.             $("#shortDetailsArrowDown_{{id}}").css('display', 'block');
  417.             $("#descriptionDetailsContent_{{id}}").css('display', 'block');
  418.             $("#productInfo_{{id}}").css('display', 'none');
  419.             $("#productActions_{{id}}").css('display', 'none');
  420.         });
  421.          $("#shortDetailsArrowDown_{{id}}").click(function(){
  422.             $("#shortDetailsArrowDown_{{id}}").css('display', 'none');
  423.             $("#shortDetailsArrowRight_{{id}}").css('display', 'block');
  424.             $("#descriptionDetailsContent_{{id}}").css('display', 'none');
  425.             $("#productInfo_{{id}}").css('display', 'block');
  426.             $("#productActions_{{id}}").css('display', 'block');
  427.         });
  428.     </script>
  429. #}
  430. {% endblock %}
  431.     <style>
  432. a{
  433.     text-decoration: none !important;
  434. }
  435. .anzmodule svg {
  436.     width: 15px;
  437.     height: 24px;
  438. }
  439. .anzmodule svg use {
  440.     fill: black;
  441. }
  442. {
  443.     # @media screen and(max-width: 768px) {
  444.         .productItem {
  445.             width: 100% !important;
  446.         }
  447.     } #
  448. }
  449. .bottom-left {
  450.     color: black;
  451.     font: normal normal normal 20px / 22px Almarena W05;
  452.     padding: 10px 10px 0;
  453. }
  454. .top-mid {
  455.     font: normal normal normal 32px / 34px Almarena W05;
  456.     width: 100%;
  457.     text-align: start !important;
  458.     z-index: 1;
  459.     height: 102px !important;
  460.     overflow: hidden;
  461.     text-overflow: ellipsis;
  462.     display: -webkit-box;
  463.     -webkit-line-clamp: 3;
  464.     -webkit-box-orient: vertical;
  465. }
  466. .inline-div {
  467.     display: flex;
  468. }
  469. .p-0 {
  470.     padding-left: 0 0 0 0 !important;
  471. }
  472. .imgTopRightRadius {
  473.     border-top-right-radius: 3px;
  474.     object-fit: cover !important;
  475. }
  476. .f-size-14 {
  477.     font-size: 14px;
  478. }
  479. .f-size-20 {
  480.     font-size: 20px;
  481. }
  482. .f-size-25 {
  483.     font-size: 25px;
  484. }
  485. .horizontal-lignment {
  486.     display: flex;
  487.     flex-direction: row;
  488.     align-items: center;
  489. }
  490. .product-image {
  491.     max-height: 240px !important;
  492. }
  493. .product-description {
  494.     height: auto !important;
  495.     overflow: hidden !important;
  496.     text-overflow: ellipsis !important;
  497.     display: -webkit-box !important;
  498.     -webkit-line-clamp: 4 !important;
  499.     -webkit-box-orient: vertical !important;
  500.     font-size: 20px !important;
  501.     line-height: 20px !important;
  502. }</style>