{% block element_rhweb_cta_banner %}
{% set config = element.fieldConfig.elements %}
{% set elementType = config.elementType.value %}
{% set mediaActive = config.mediaActive.value %}
{% set videoActive = config.videoActive.value %}
{% set elementCtaAble = elementType == 'cta' or elementType == 'category' %}
{% set elementCtaFullclick = element.config.fullClick.value %}
{% set elementbtnShow = element.config.btnShow.value %}
{% block element_rhweb_cta_banner_css_variables %}
{% if config.useMobileFontSize.value %}
<style>
#rhweb{{ element.id }}{
{% block element_rhweb_cta_banner_css_variables_inner %}
{% if element.config.headlineSizeMobile.value %}
--headline-size-sm: {{ element.config.headlineSizeMobile.value }};
{% endif %}
{% if element.config.headlineSizeTablet.value %}
--headline-size-md: {{ element.config.headlineSizeTablet.value }};
{% endif %}
{% if element.config.headlineSizeLaptop.value %}
--headline-size-lg: {{ element.config.headlineSizeLaptop.value }};
{% endif %}
{% if element.config.headlineSize.value %}
--headline-size-xl: {{ element.config.headlineSize.value }};
{% endif %}
{% if element.config.textSizeMobile.value %}
--font-size-sm: {{ element.config.textSizeMobile.value }};
{% endif %}
{% if element.config.textSizeTablet.value %}
--font-size-md: {{ element.config.textSizeTablet.value }};
{% endif %}
{% if element.config.textSizeLaptop.value %}
--font-size-lg: {{ element.config.textSizeLaptop.value }};
{% endif %}
{% if element.config.textSize.value %}
--font-size-xl: {{ element.config.textSize.value }};
{% endif %}
{% endblock %}
}
</style>
{% endif %}
{% endblock %}
{% block element_rhweb_cta_banner_element %}
<div class="cms-element-{{ element.type }}
{% block element_rhweb_cta_banner_element_classes %}
{% if element.config.backgroundFixed.value %}
bg-fixed
{% endif %}
{% if isInSidebar %}
rhweb-sidebar-element
{% endif %}
{% if mediaActive and videoActive %}
video-active
{% else %}
video-inactive
{% endif %}
{% if elementType == 'usp' %}
usp-active
{% endif %}"
style="display:flex;
{% block element_rhweb_cta_banner_element_classes_media %}
{% if mediaActive and not videoActive and element.data.media %}
{% if elementType == 'usp' or elementType == 'custom' %}
background-image: unset;
{% else %}
{% block element_rhweb_cta_banner_element_classes_bgimage_cta %}
background-image: url({{ element.data.media | sw_encode_media_url }});
background-size: cover;
background-position: center;
{% endblock %}
{% endif %}
{% elseif elementType == 'category' and not videoActive %}
{% block element_rhweb_cta_banner_element_classes_bgimage_category %}
background-image: url({{ element.data.category.media | sw_encode_media_url }});
background-size: cover;
background-position: center;
{% endblock %}
{% endif %}
height: {{ config.elementHeight.value }};
min-height: {{ config.elementHeight.value }};
align-items: {{ config.boxVerticalAlign.value }};
justify-content: {{ config.boxHorizontalAlign.value }};
{% endblock %}
{% endblock %}
" id="rhweb{{ element.id }}">
{% block rhweb_element_rhweb_cta_banner_inner %}
{% if elementType == 'category' or elementType == 'cta' %}
{% block rhweb_element_rhweb_cta_banner_video %}
{% if mediaActive and videoActive %}
<video id="video-{{ element.id }}" class="video"
{% block rhweb_element_rhweb_cta_banner_video_settings %}
{% if element.config.videoAutoplay.value %}autoplay playsinline{% endif %}
{% if element.config.videoMute.value %}muted{% endif %}
{% if element.config.videoLoop.value %}loop{% endif %}
{% endblock %}
>
{% block rhweb_element_rhweb_cta_banner_video_source %}
<source src="{{ element.data.media | sw_encode_media_url }}" type="{{ element.data.media.mimeType }}">
{% endblock %}
</video>
{% block rhweb_element_rhweb_cta_banner_video_script %}
<script>
document.getElementById('video-{{ element.id }}').play();
</script>
{% endblock %}
{% endif %}
{% endblock %}
{% endif %}
{% block rhweb_element_rhweb_cta_banner_overlay %}
<div class="overlay"
style="
{% block rhweb_element_rhweb_cta_banner_overlay_style %}
background: {{ config.elementBackground.value }};
max-width: {{ config.captionMaxWidth.value }};
height: {{ config.boxHeight.value }};
{% if config.boxVerticalAlign.value == 'center' %}
display:flex;
align-items: center;
{% endif %}
{% endblock %}
">
{% block rhweb_element_rhweb_cta_banner_overlay_inner %}
<div class="rhweb-cta-banner-inner{% if elementCtaFullclick %} rhweb-cta-fullclick{% endif %}" style="color: {{ config.boxColor.value }};
text-align: {{ config.boxTextAlign.value }};">
{% block rhweb_element_rhweb_cta_banner_full_click %}
{% if elementCtaAble and elementCtaFullclick %}
<a class="rhweb-cta-fullclick-link" href="{{ config.btnUrl.value }}"{% if config.newTab.value %} target="_blank"{% endif %}></a>
{% endif %}
{% endblock %}
{% if elementType == 'cta' %}
{% block rhweb_element_rhweb_cta_banner_content_cta %}
<div class="container-content">
{% if element.config.title.value %}
{% sw_include '@Storefront/rhweb-custom/element/rhweb-cta-banner/rhweb-cta-banner-headline.html.twig' with {
title: config.title.value,
color: config.boxHeadlineColor.value,
useClass: config.headlineUseClass.value,
heading: config.headlineType.value
} %}
{% endif %}
{% if element.config.quote.value %}
<p class="container-content-text">
{{ config.quote.value | raw }}
</p>
{% endif %}
{% if config.btnActive.value and elementbtnShow %}
{% sw_include '@Storefront/rhweb-custom/element/rhweb-cta-banner/rhweb-cta-banner-button.html.twig' with {
type: config.btnType.value,
outline: config.btnOutline.value,
size: config.btnSize.value,
block: config.btnBlock.value,
url: config.btnUrl.value,
newTab: config.newTab.value,
text: config.btnText.value
} %}
{% endif %}
</div>
{% endblock %}
{% elseif elementType == 'custom' %}
{% block rhweb_element_rhweb_cta_banner_content_custom %}
<div class="container-content">
{{ config.content.value|raw }}
</div>
{% endblock %}
{% elseif elementType == 'category' %}
{% block rhweb_element_rhweb_cta_banner_content_category %}
<div class="container-content">
{% block rhweb_element_rhweb_cta_banner_content_category_headline %}
{% if element.data.category.translated.name %}
{% sw_include '@Storefront/rhweb-custom/element/rhweb-cta-banner/rhweb-cta-banner-headline.html.twig' with {
title: element.data.category.translated.name,
color: config.boxHeadlineColor.value,
useClass: config.headlineUseClass.value,
heading: config.headlineType.value
} %}
{% endif %}
{% endblock %}
{% block rhweb_element_rhweb_cta_banner_content_category_description %}
{% if element.data.category.translated.description and config.categoryDescritpionActive.value %}
<p class="container-content-text">
{{ 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 }}
</p>
{% endif %}
{% endblock %}
{% block rhweb_element_rhweb_cta_banner_content_category_button %}
{% if config.btnActive.value and element.data.category.id and elementbtnShow %}
{% sw_include '@Storefront/rhweb-custom/element/rhweb-cta-banner/rhweb-cta-banner-button.html.twig' with {
type: config.btnType.value,
outline: config.btnOutline.value,
size: config.btnSize.value,
block: config.btnBlock.value,
newTab: false,
url: seoUrl('frontend.navigation.page', { navigationId: element.data.category.id }),
text: config.btnText.value
} %}
{% endif %}
{% endblock %}
</div>
{% endblock %}
{% elseif elementType == 'usp' %}
{% block element_rhweb_cta_banner_usp %}
<div class="container-content {{ config.boxTextAlign.value }}{% if not element.config.quote.value %} usp-no-text{% endif%}">
{% block element_rhweb_cta_banner_usp_icon %}
{% if element.config.iconActive.value %}
{% block element_rhweb_cta_banner_usp_icon_value %}
<i class="{{ element.config.iconClass.value }}"></i>
{% endblock %}
{% endif %}
{% endblock %}
<div>
{% block element_rhweb_cta_banner_usp_title %}
{% if element.config.title.value %}
{% block element_rhweb_cta_banner_usp_title_value %}
<div class="h4" style="color: {{ config.boxHeadlineColor.value }};">{{ config.title.value }}</div>
{% endblock %}
{% endif %}
{% endblock %}
{% block element_rhweb_cta_banner_usp_text %}
{% if element.config.quote.value %}
{% block element_rhweb_cta_banner_usp_text_value %}
<p>{{ config.quote.value }}</p>
{% endblock %}
{% endif %}
{% endblock %}
</div>
</div>
{% endblock %}
{% endif %}
</div>
{% endblock %}
</div>
{% endblock %}
{% endblock %}
</div>
{% endblock %}
{% endblock %}