custom/plugins/RHWebCmsElements/src/Resources/views/storefront/element/cms-element-rhweb-cta-banner.html.twig line 1

Open in your IDE?
  1. {% block element_rhweb_cta_banner %}
  2.     {% set config = element.fieldConfig.elements %}
  3.     {% set elementType = config.elementType.value %}
  4.     {% set mediaActive = config.mediaActive.value %}
  5.     {% set videoActive = config.videoActive.value %}
  6.     {% set elementCtaAble = elementType == 'cta' or elementType == 'category' %}
  7.     {% set elementCtaFullclick = element.config.fullClick.value %}
  8.     {% set elementbtnShow = element.config.btnShow.value %}
  9.     {% block element_rhweb_cta_banner_css_variables %}
  10.         {% if config.useMobileFontSize.value %}
  11.             <style>
  12.                 #rhweb{{ element.id }}{
  13.                 {% block element_rhweb_cta_banner_css_variables_inner %}
  14.                 {% if element.config.headlineSizeMobile.value %}
  15.                     --headline-size-sm: {{ element.config.headlineSizeMobile.value }};
  16.                 {% endif %}
  17.                 {% if element.config.headlineSizeTablet.value %}
  18.                     --headline-size-md: {{ element.config.headlineSizeTablet.value }};
  19.                 {% endif %}
  20.                 {% if element.config.headlineSizeLaptop.value %}
  21.                     --headline-size-lg: {{ element.config.headlineSizeLaptop.value }};
  22.                 {% endif %}
  23.                 {% if element.config.headlineSize.value %}
  24.                     --headline-size-xl: {{ element.config.headlineSize.value }};
  25.                 {% endif %}
  26.                 {% if element.config.textSizeMobile.value %}
  27.                     --font-size-sm: {{ element.config.textSizeMobile.value }};
  28.                 {% endif %}
  29.                 {% if element.config.textSizeTablet.value %}
  30.                     --font-size-md: {{ element.config.textSizeTablet.value }};
  31.                 {% endif %}
  32.                 {% if element.config.textSizeLaptop.value %}
  33.                     --font-size-lg: {{ element.config.textSizeLaptop.value }};
  34.                 {% endif %}
  35.                 {% if element.config.textSize.value %}
  36.                     --font-size-xl: {{ element.config.textSize.value }};
  37.                 {% endif %}
  38.                 {% endblock %}
  39.                 }
  40.             </style>
  41.         {% endif %}
  42.     {% endblock %}
  43.     {% block element_rhweb_cta_banner_element %}
  44.         <div class="cms-element-{{ element.type }}
  45.             {% block element_rhweb_cta_banner_element_classes %}
  46.                 {% if element.config.backgroundFixed.value %}
  47.                     bg-fixed
  48.                 {% endif %}
  49.                 {% if isInSidebar %}
  50.                     rhweb-sidebar-element
  51.                 {% endif %}
  52.                 {% if mediaActive and videoActive %}
  53.                     video-active
  54.                 {% else %}
  55.                     video-inactive
  56.                 {% endif %}
  57.                 {% if elementType == 'usp' %}
  58.                     usp-active
  59.                 {% endif %}"
  60.                  style="display:flex;
  61.                  {% block element_rhweb_cta_banner_element_classes_media %}
  62.                      {% if mediaActive and not videoActive and element.data.media %}
  63.                          {% if elementType == 'usp' or elementType == 'custom' %}
  64.                             background-image: unset;
  65.                          {% else %}
  66.                              {% block element_rhweb_cta_banner_element_classes_bgimage_cta %}
  67.                                  background-image: url({{ element.data.media | sw_encode_media_url }});
  68.                                  background-size: cover;
  69.                                  background-position: center;
  70.                              {% endblock %}
  71.                          {% endif %}
  72.                      {% elseif elementType == 'category' and not videoActive %}
  73.                          {% block element_rhweb_cta_banner_element_classes_bgimage_category %}
  74.                              background-image: url({{ element.data.category.media | sw_encode_media_url }});
  75.                              background-size: cover;
  76.                              background-position: center;
  77.                          {% endblock %}
  78.                      {% endif %}
  79.                          height: {{ config.elementHeight.value }};
  80.                          min-height: {{ config.elementHeight.value }};
  81.                          align-items: {{ config.boxVerticalAlign.value }};
  82.                          justify-content: {{ config.boxHorizontalAlign.value }};
  83.                  {% endblock %}
  84.              {% endblock %}
  85.              " id="rhweb{{ element.id }}">
  86.             {% block rhweb_element_rhweb_cta_banner_inner %}
  87.                 {% if elementType == 'category' or elementType == 'cta' %}
  88.                     {% block rhweb_element_rhweb_cta_banner_video %}
  89.                         {% if mediaActive and videoActive %}
  90.                             <video id="video-{{ element.id }}" class="video"
  91.                                     {% block rhweb_element_rhweb_cta_banner_video_settings %}
  92.                                        {% if element.config.videoAutoplay.value %}autoplay playsinline{% endif %}
  93.                                        {% if element.config.videoMute.value %}muted{% endif %}
  94.                                        {% if element.config.videoLoop.value %}loop{% endif %}
  95.                                     {% endblock %}
  96.                             >
  97.                                 {% block rhweb_element_rhweb_cta_banner_video_source %}
  98.                                     <source src="{{ element.data.media | sw_encode_media_url }}" type="{{ element.data.media.mimeType }}">
  99.                                 {% endblock %}
  100.                             </video>
  101.                             {% block rhweb_element_rhweb_cta_banner_video_script %}
  102.                                 <script>
  103.                                     document.getElementById('video-{{ element.id }}').play();
  104.                                 </script>
  105.                             {% endblock %}
  106.                         {% endif %}
  107.                     {% endblock %}
  108.                 {% endif %}
  109.                 {% block rhweb_element_rhweb_cta_banner_overlay %}
  110.                     <div class="overlay"
  111.                          style="
  112.                         {% block rhweb_element_rhweb_cta_banner_overlay_style %}
  113.                              background: {{ config.elementBackground.value }};
  114.                              max-width: {{ config.captionMaxWidth.value }};
  115.                              height: {{ config.boxHeight.value }};
  116.                              {% if config.boxVerticalAlign.value == 'center' %}
  117.                                  display:flex;
  118.                                  align-items: center;
  119.                              {% endif %}
  120.                         {% endblock %}
  121.                                  ">
  122.                         {% block rhweb_element_rhweb_cta_banner_overlay_inner %}
  123.                             <div class="rhweb-cta-banner-inner{% if elementCtaFullclick %} rhweb-cta-fullclick{% endif %}" style="color: {{ config.boxColor.value }};
  124.                                     text-align: {{ config.boxTextAlign.value }};">
  125.                                 {% block rhweb_element_rhweb_cta_banner_full_click %}
  126.                                     {% if elementCtaAble and elementCtaFullclick %}
  127.                                         <a class="rhweb-cta-fullclick-link" href="{{ config.btnUrl.value }}"{% if config.newTab.value %} target="_blank"{% endif %}></a>
  128.                                     {% endif %}
  129.                                 {% endblock %}
  130.                                 {% if elementType == 'cta' %}
  131.                                     {% block rhweb_element_rhweb_cta_banner_content_cta %}
  132.                                         <div class="container-content">
  133.                                             {% if element.config.title.value %}
  134.                                                 {% sw_include '@Storefront/rhweb-custom/element/rhweb-cta-banner/rhweb-cta-banner-headline.html.twig' with {
  135.                                                     title: config.title.value,
  136.                                                     color: config.boxHeadlineColor.value,
  137.                                                     useClass: config.headlineUseClass.value,
  138.                                                     heading: config.headlineType.value
  139.                                                 } %}
  140.                                             {% endif %}
  141.                                             {% if element.config.quote.value %}
  142.                                                 <p class="container-content-text">
  143.                                                     {{ config.quote.value | raw }}
  144.                                                 </p>
  145.                                             {% endif %}
  146.                                             {% if config.btnActive.value and elementbtnShow %}
  147.                                                 {% sw_include '@Storefront/rhweb-custom/element/rhweb-cta-banner/rhweb-cta-banner-button.html.twig' with {
  148.                                                     type: config.btnType.value,
  149.                                                     outline: config.btnOutline.value,
  150.                                                     size: config.btnSize.value,
  151.                                                     block: config.btnBlock.value,
  152.                                                     url: config.btnUrl.value,
  153.                                                     newTab: config.newTab.value,
  154.                                                     text: config.btnText.value
  155.                                                 } %}
  156.                                             {% endif %}
  157.                                         </div>
  158.                                     {% endblock %}
  159.                                 {% elseif elementType == 'custom' %}
  160.                                     {% block rhweb_element_rhweb_cta_banner_content_custom %}
  161.                                         <div class="container-content">
  162.                                             {{ config.content.value|raw }}
  163.                                         </div>
  164.                                     {% endblock %}
  165.                                 {% elseif elementType == 'category' %}
  166.                                     {% block rhweb_element_rhweb_cta_banner_content_category %}
  167.                                         <div class="container-content">
  168.                                             {% block rhweb_element_rhweb_cta_banner_content_category_headline %}
  169.                                                 {% if element.data.category.translated.name %}
  170.                                                     {% sw_include '@Storefront/rhweb-custom/element/rhweb-cta-banner/rhweb-cta-banner-headline.html.twig' with {
  171.                                                         title: element.data.category.translated.name,
  172.                                                         color: config.boxHeadlineColor.value,
  173.                                                         useClass: config.headlineUseClass.value,
  174.                                                         heading: config.headlineType.value
  175.                                                     } %}
  176.                                                 {% endif %}
  177.                                             {% endblock %}
  178.                                             {% block rhweb_element_rhweb_cta_banner_content_category_description %}
  179.                                                 {% if element.data.category.translated.description and config.categoryDescritpionActive.value %}
  180.                                                     <p class="container-content-text">
  181.                                                         {{ element.data.category.translated.description|length > config.contentLength.value ? element.data.category.translated.description | striptags | slice(0, config.contentLength.value) ~ '...' | raw : element.data.category.translated.description | raw  }}
  182.                                                     </p>
  183.                                                 {% endif %}
  184.                                             {% endblock %}
  185.                                             {% block rhweb_element_rhweb_cta_banner_content_category_button %}
  186.                                                 {% if config.btnActive.value and element.data.category.id and elementbtnShow %}
  187.                                                     {% sw_include '@Storefront/rhweb-custom/element/rhweb-cta-banner/rhweb-cta-banner-button.html.twig' with {
  188.                                                         type: config.btnType.value,
  189.                                                         outline: config.btnOutline.value,
  190.                                                         size: config.btnSize.value,
  191.                                                         block: config.btnBlock.value,
  192.                                                         newTab: false,
  193.                                                         url: seoUrl('frontend.navigation.page', { navigationId: element.data.category.id }),
  194.                                                         text: config.btnText.value
  195.                                                     } %}
  196.                                                 {% endif %}
  197.                                             {% endblock %}
  198.                                         </div>
  199.                                     {% endblock %}
  200.                                 {% elseif elementType == 'usp' %}
  201.                                     {% block element_rhweb_cta_banner_usp %}
  202.                                         <div class="container-content {{ config.boxTextAlign.value }}{% if not element.config.quote.value %} usp-no-text{% endif%}">
  203.                                             {% block element_rhweb_cta_banner_usp_icon %}
  204.                                                 {% if element.config.iconActive.value %}
  205.                                                     {% block element_rhweb_cta_banner_usp_icon_value %}
  206.                                                         <i class="{{ element.config.iconClass.value }}"></i>
  207.                                                     {% endblock %}
  208.                                                 {% endif %}
  209.                                             {% endblock %}
  210.                                             <div>
  211.                                                 {% block element_rhweb_cta_banner_usp_title %}
  212.                                                     {% if element.config.title.value %}
  213.                                                         {% block element_rhweb_cta_banner_usp_title_value %}
  214.                                                             <div class="h4" style="color: {{ config.boxHeadlineColor.value }};">{{ config.title.value }}</div>
  215.                                                         {% endblock %}
  216.                                                     {% endif %}
  217.                                                 {% endblock %}
  218.                                                 {% block element_rhweb_cta_banner_usp_text %}
  219.                                                     {% if element.config.quote.value %}
  220.                                                         {% block element_rhweb_cta_banner_usp_text_value %}
  221.                                                             <p>{{ config.quote.value }}</p>
  222.                                                         {% endblock %}
  223.                                                     {% endif %}
  224.                                                 {% endblock %}
  225.                                             </div>
  226.                                         </div>
  227.                                     {% endblock %}
  228.                                 {% endif %}
  229.                             </div>
  230.                         {% endblock %}
  231.                     </div>
  232.                 {% endblock %}
  233.             {% endblock %}
  234.         </div>
  235.     {% endblock %}
  236. {% endblock %}