crosterOverWrites/front/banner_domain.tpl

<!-- templates/croster/overwrites/front/banner_domain.tpl -->


{if $block.sechidden neq "true"}
	<!-- sechidden not true -->
	{assign var="extensions" value=["mp4", "webm"]}
	{assign var="bgExtension" value=""}
	{if $block.bggraphic|strrpos:'.' !== false}
		{assign var="dotPosition" value=$block.bggraphic|strrpos:'.'}
		{if $dotPosition + 1 < $block.bggraphic|strlen}
			{assign var="bgExtension" value=$block.bggraphic|substr:($dotPosition + 1)|lower}
		{/if}
	{/if}
	
	{assign var="graphicsExtension" value=""}
	{if $block.graphic|strrpos:'.' !== false}
		{assign var="dotPosition" value=$block.graphic|strrpos:'.'}
		{if $dotPosition + 1 < $block.graphic|strlen}
			{assign var="graphicsExtension" value=$block.graphic|substr:($dotPosition + 1)|lower}
		{/if}
	{/if}	
	
	{if $block.type == 1}
	<!-- block.type == 1 -->
			
	<div id="sec-{$blockkey}" class="sec site-banner-domain{if $block.SecOverlay} section-overlap{/if}{if $block.bgcolor == "" || $block.bgcolor == "light"}{if $block.borders} {$block.borders}{/if}{/if}{if $block.bgcolor} {$block.bgcolor} centered{if $block.bgcolor eq "graphics"}{if !$block.bgopacity} bg-opacity{elseif $block.bgopacity eq "1"} bg-opacity-light{/if}{if !$block.textcolor} inverse{/if}{/if}{/if}{if $block.toppadding == "1"} inner-t-60{elseif $block.toppadding == "2"} inner-t-30{elseif $block.toppadding == "3"} no-padding-top{/if}{if $block.bottompadding == "1"} inner-b-60{elseif $block.bottompadding == "2"} inner-b-30{elseif $block.bottompadding == "3"} no-padding-bottom{/if}"{if $block.bgcolor == "graphics" && $block.bggraphic && !in_array($bgExtension, $extensions)} style="background-image:url('{$WEB_ROOT}/{$block.bggraphic}');"{/if}>
		<div class="banner-content-container">
			<div class="container">
				<div class="banner_content">
				
					{if $block.caption || $block.sectitle || $block.subtitle}
						<div class="sec-description mb-0">
							{if $block.caption}
								<div class="sec-caption">
									<span class="rounded">{$block.caption}</span>
								</div>
							{/if}
							{if $blockkey == 0}
								{if $block.sectitle}
									<h1 class="sec-title">{$block.sectitle}</h1>
								{/if}
							{else}
								{if $block.sectitle}
									<h2 class="sec-title">{$block.sectitle}</h2>
								{/if}
							{/if}
							{if $block.subtitle}
								<div class="sec-subtitle">{$block.subtitle}</div>
							{/if}
						</div>
					{/if}
					
					<div class="domain-hero mt-3">
						<div class="d-flex flex-column align-items-center">
							<div class="tab-content">
								{if $block.formtype == 2}
									<div class="d-flex align-items-center justify-content-center">
										<ul class="nav" role="tablist">
											<li class="nav-item" role="presentation">
												<a class="nav-link active" id="domain-register-tab" data-toggle="tab" href="#domain_register-{$blockkey}" role="tab" aria-controls="domain_register-{$blockkey}" aria-selected="true">
													{$WLANG.navdomainsearch}
												</a>
											</li>
											<li class="nav-item" role="presentation">
												<a class="nav-link" id="domain-transfer-tab" data-toggle="tab" href="#domain_transfer-{$blockkey}" role="tab" aria-controls="domain_transfer-{$blockkey}" aria-selected="false">
													{$WLANG.domaintransfer}
												</a>
											</li>
										</ul>
									</div>
								{/if}

								<div class="tab-pane fade show active" id="{if $block.formtype == 2}domain_register-{$blockkey}{else}domain-check{/if}" role="tabpanel">
									<form class="form-search" action="domainchecker.php" method="post">
										{if $block.formtype == 1}
											<input type="hidden" name="transfer" value="1" />
										{/if}
										<div class="search-form input-group">
											<i class="input-group-icon fad fa-search"></i>
											<input type="text" name="domain" placeholder="{$WLANG.domaincheckerdomainexample}" class="form-control search-query" autocapitalize="none" data-toggle="tooltip" title="{lang key='orderForm.required'}" required />
											<span class="input-group-btn btn-group">
												<button type="submit" class="btn btn-primary btn_loader search">
													<span class="btn_text">{if $block.formtype == 1}{$WLANG.domainstransfer}{else}{$WLANG.search}{/if}</span>
												</button>
											</span>
										</div>
									</form>
								</div>

								{if $block.formtype == 2}
									<div class="tab-pane fade" id="domain_transfer-{$blockkey}" role="tabpanel" aria-labelledby="domain-transfer-tab">
										<form class="form-search" action="domainchecker.php" method="post">
											<input type="hidden" name="transfer" value="1" />
											<div class="search-form input-group">
												<i class="input-group-icon fad fa-search"></i>
												<input type="text" name="domain" placeholder="{$WLANG.domaincheckerdomainexample}" class="form-control search-query" autocapitalize="none" data-toggle="tooltip" title="{lang key='orderForm.required'}" required />
												<span class="input-group-btn btn-group">
													<button type="submit" class="btn btn-primary btn_loader search">
														<span class="btn_text">{$WLANG.domainstransfer}</span>
													</button>
												</span>
											</div>
										</form>
									</div>
								{/if}
							</div>
						</div>
						{if count($block.table) > 0}
							<div class="domain-tlds">
								<div class="swiper" id="banner-tlds-{$blockkey}">
									<div class="swiper-wrapper featured-tlds">
										{foreach from=$block.table item=$ditem}
											<div class="swiper-slide justify-content-center tld-container">
												<span class="tld-item">
													<span class="dots">.</span>
													<span class="tld">{$ditem['tld']|substr:1}</span>
												</span>
												<span class="tld-price">
													{if $block.formtype == 1}
														{$ditem['pricing']['transfer'][1]|formatCurrency}/{$WLANG.pricingCycleShort.annually}
													{else}
														{$ditem['pricing']['register'][1]|formatCurrency}/{$WLANG.pricingCycleShort.annually}
													{/if}
												</span>
											</div>	
										{/foreach}
									</div>
								</div>
							</div>
						{/if}
					</div>
				</div>
			</div>
		</div>
		{if $block.bgcolor eq "graphics" && in_array($bgExtension, $extensions)}
			<div class="banner-bg-video-container">
				<video class="banner-bg-video" aria-hidden="true" playsinline muted loop autoplay>
					<source src="{$WEB_ROOT}/{$block.bggraphic}" type="video/{$bgExtension}">
					Your browser does not support the video tag.
				</video>
			</div>
		{/if}		
	</div>
	
	{if count($block.table) > 0}
	<script>
		jQuery(document).ready(function () {
			var swiperOptions = {
				slidesPerView: 2,
				spaceBetween: 1,
				loop: {if $block.autoplay}true{else}false{/if},
				breakpoints: {
					0: {
						slidesPerView: 2
					},
					768: {
						slidesPerView: 3
					},					
					1200: {
						slidesPerView: 5
					},
				}				
			};
			{if $block.autoplay}
			swiperOptions.autoplay = {
				delay: 5000,
			};
			{/if}
			var swiper = new Swiper('#banner-tlds-{$blockkey}', swiperOptions);
		});
	</script>
	{/if}	
		
	{elseif $block.type == 2}
	<!-- block.type == 2 -->

	<div id="sec-{$blockkey}" class="sec site-banner-domain compact{if $block.borders} {$block.borders}{/if}{if $block.toppadding == "1"} inner-t-60{elseif $block.toppadding == "2"} inner-t-30{elseif $block.toppadding == "3"} no-padding-top{/if}{if $block.bottompadding == "1"} inner-b-60{elseif $block.bottompadding == "2"} inner-b-30{elseif $block.bottompadding == "3"} no-padding-bottom{/if}" style="background-color: #1B5F8F;>
		<div class="banner-content-container">
			<div class="container">
				<div class="banner_content">
					<div class="domain-hero">
						<div class="row row-eq-height align-items-center">
							<div class="col-md-6 order-md-2">
								<div class="tab-content mb-3 mb-md-0">
									<div class="tab-pane show active">
										<!--- before block.formtype == 2 -->
										{if $block.formtype == 2}
										<!-- block.formtype == 2 -->
											<form class="form-search" action="domainchecker.php" method="post" id="dualForm_{$blockkey}">
												<div class="search-form input-group no-shadow">
													<i class="input-group-icon fad fa-search"></i>
													<input type="text" name="domain" placeholder="{$WLANG.domaincheckerdomainexample}" class="form-control search-query" autocapitalize="none" data-toggle="tooltip" title="{lang key='orderForm.required'}" required />
													<span class="input-group-btn btn-group">
														<!-- Formtype == 2 Buttons -->
														<button type="submit" class="btn btn-primary btn_action btn_loader search" data-transfer="false" style="background-color: #F08228;">
															<span class="btn_text">{$WLANG.search}</span>
														</button>
														<button type="submit" class="btn btn-default btn_action btn_loader search" data-transfer="true">
															<span class="btn_text">{$WLANG.domainstransfer}</span>
														</button>
													</span>
												</div>
											</form>											
										{else}
    										<!-- block.formtype != 2 -->
											<form class="form-search" action="domainchecker.php" method="post">
												{if $block.formtype == 1}
													<input type="hidden" name="transfer" value="1" />
												{/if}
												<div class="search-form input-group no-shadow">
													<i class="input-group-icon fad fa-search"></i>
													<input type="text" name="domain" placeholder="{$WLANG.domaincheckerdomainexample}" class="form-control search-query" autocapitalize="none" data-toggle="tooltip" title="{lang key='orderForm.required'}" required />
													<span class="input-group-btn btn-group">
														<!-- Formtype !=2 Buttons -->
														<button type="submit" class="btn btn-primary btn_loader search" style="background: #F08228;">
															<span class="btn_text">{if $block.formtype == 1}{$WLANG.domainstransfer}{else}{$WLANG.search}{/if}</span>
														</button>
													</span>
												</div>
											</form>										
										{/if}
										
									</div>
								</div>
							</div>
							<!-- thurdata addon -->
							<div class="col-md-6 order-md-1">
							    <p style="font-size: 24px; font-weight: 700; color: white;">
								    Jetzt eine Domain kaufen
							    </p>
							</div>
							{*
							{if count($block.table) > 0}
							<!-- count($block.table) > 0 -->
								<div class="col-md-6 order-md-1">
									<div class="domain-tlds m-0">
										<div class="swiper" id="banner-tlds-{$blockkey}">
											<div class="swiper-wrapper featured-tlds">
												{foreach from=$block.table item=$ditem}
													<div class="swiper-slide justify-content-center tld-container">
														<span class="tld-item">
															<span class="dots">.</span>
															<span class="tld">{$ditem['tld']|substr:1}</span>
														</span>
														<span class="tld-price">
															{if $block.formtype == 1}
																{$ditem['pricing']['transfer'][1]|formatCurrency}/{$WLANG.pricingCycleShort.annually}
															{else}
																{$ditem['pricing']['register'][1]|formatCurrency}/{$WLANG.pricingCycleShort.annually}
															{/if}
														</span>
													</div>	
												{/foreach}
											</div>
										</div>
									</div>
								</div>
							{/if}
							*}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	{if count($block.table) > 0}
	<script>
		jQuery(document).ready(function () {
			var swiperOptions = {
				slidesPerView: 2,
				spaceBetween: 1,
				loop: {if $block.autoplay}true{else}false{/if},
				breakpoints: {
					0: {
						slidesPerView: 2
					},
					1200: {
						slidesPerView: 3
					},
				}				
			};
			{if $block.autoplay}
			swiperOptions.autoplay = {
				delay: 5000,
			};
			{/if}
			var swiper = new Swiper('#banner-tlds-{$blockkey}', swiperOptions);
		});
		
		{if $block.formtype == 2}
			jQuery('#dualForm_{$blockkey} .btn_action').on('click', function(event) {
				event.preventDefault();
				const domainInput = jQuery('#dualForm_{$blockkey} input[name="domain"]');
				if (!domainInput.val().trim()) {
					domainInput.focus(); 
					domainInput.tooltip('show');
					return;
				}
				jQuery('#dualForm_{$blockkey} input[name="transfer"]').remove();

				if (jQuery(this).data('transfer') === true) {
					jQuery('<input>').attr({
						type: 'hidden',
						name: 'transfer',
						value: '1'
					}).appendTo('#dualForm_{$blockkey}');
				}
				document.getElementById('dualForm_{$blockkey}').submit();
			});
		{/if}		
	</script>
	{/if}

	{else}
	    <!-- sectype else -->
					
	<div id="sec-{$blockkey}" class="sec site-banner-domain{if $block.SecOverlay} section-overlap{/if}{if $block.bgcolor == "" || $block.bgcolor == "light"}{if $block.borders} {$block.borders}{/if}{/if}{if $block.bgcolor} {$block.bgcolor} centered{if $block.bgcolor eq "graphics"}{if !$block.bgopacity} bg-opacity{elseif $block.bgopacity eq "1"} bg-opacity-light{/if}{if !$block.textcolor} inverse{/if}{/if}{/if}{if $block.toppadding == "1"} inner-t-60{elseif $block.toppadding == "2"} inner-t-30{elseif $block.toppadding == "3"} no-padding-top{/if}{if $block.bottompadding == "1"} inner-b-60{elseif $block.bottompadding == "2"} inner-b-30{elseif $block.bottompadding == "3"} no-padding-bottom{/if}"{if $block.bgcolor == "graphics" && $block.bggraphic && !in_array($bgExtension, $extensions)} style="background-image:url('{$WEB_ROOT}/{$block.bggraphic}');"{/if}>
		<div class="banner-content-container">
			<div class="container">
				<div class="row row-eq-height align-items-center">
					<div class="col-md-6 mb-5 mb-md-0{if !$block.graphicposition} order-md-2{/if}">
						{if in_array($graphicsExtension, $extensions)}
							<video class="banner-bg-video w-100 rounded" aria-hidden="true" playsinline muted loop autoplay>
								<source src="{$WEB_ROOT}/{$block.graphic}" type="video/{$graphicsExtension}">
								Your browser does not support the video tag.
							</video>
							<button class="btn btn-outline-light" id="enableSoundButton">
								<span class="btn-text">
									Click for Sound
								</span>
								<span class="fas fa-fw fa-volume-mute"></span>
							</button>							
						{else}
							{if $block.graphic}
								<div class="banner_background_graphic">
									<div class="banner_graphic justify-content-md-{if !$block.graphicposition}end{else}start{/if}">
										<img src="{$WEB_ROOT}/{$block.graphic}" alt="{$block.sectitle}" class="img-fluid">
									</div>
								</div>
							{/if}
						{/if}
					</div>
					<div class="col-md-6 text-center text-md-left{if !$block.graphicposition} order-md-1{/if}">	
						<div class="banner_content">
							{if $block.caption}
								<div class="sec-caption">
									<span class="rounded">{$block.caption}</span>
								</div>
							{/if}
							{if $blockkey == 0}
								{if $block.sectitle}
									<h1 class="sec-title">{$block.sectitle}</h1>
								{/if}
							{else}
								{if $block.sectitle}
									<h2 class="sec-title">{$block.sectitle}</h2>
								{/if}
							{/if}
							{if $block.subtitle}
								<div class="sec-subtitle">{$block.subtitle}</div>
							{/if}
							
							<div class="domain-hero mt-3">
								<div class="d-flex flex-column align-items-center">
									<div class="tab-content">
										{if $block.formtype == 2}
											<div class="d-flex align-items-center justify-content-left">
												<ul class="nav" role="tablist">
													<li class="nav-item" role="presentation">
														<a class="nav-link active" id="domain-register-tab" data-toggle="tab" href="#domain_register-{$blockkey}" role="tab" aria-controls="domain_register-{$blockkey}" aria-selected="true">
															{$WLANG.navdomainsearch}
														</a>
													</li>
													<li class="nav-item" role="presentation">
														<a class="nav-link" id="domain-transfer-tab" data-toggle="tab" href="#domain_transfer-{$blockkey}" role="tab" aria-controls="domain_transfer-{$blockkey}" aria-selected="false">
															{$WLANG.domaintransfer}
														</a>
													</li>
												</ul>
											</div>
										{/if}

										<div class="tab-pane fade show active" id="{if $block.formtype == 2}domain_register-{$blockkey}{else}domain-check{/if}" role="tabpanel">
											<form class="form-search" action="domainchecker.php" method="post">
												{if $block.formtype == 1}
													<input type="hidden" name="transfer" value="1" />
												{/if}
												<div class="search-form input-group">
													<i class="input-group-icon fad fa-search"></i>
													<input type="text" name="domain" placeholder="{$WLANG.domaincheckerdomainexample}" class="form-control search-query" autocapitalize="none" data-toggle="tooltip" title="{lang key='orderForm.required'}" required />
													<span class="input-group-btn btn-group">
														<button type="submit" class="btn btn-primary btn_loader search">
															<span class="btn_text">{if $block.formtype == 1}{$WLANG.domainstransfer}{else}{$WLANG.search}{/if}</span>
														</button>
													</span>
												</div>
											</form>
										</div>

										{if $block.formtype == 2}
											<div class="tab-pane fade" id="domain_transfer-{$blockkey}" role="tabpanel" aria-labelledby="domain-transfer-tab">
												<form class="form-search" action="domainchecker.php" method="post">
													<input type="hidden" name="transfer" value="1" />
													<div class="search-form input-group">
														<i class="input-group-icon fad fa-search"></i>
														<input type="text" name="domain" placeholder="{$WLANG.domaincheckerdomainexample}" class="form-control search-query" autocapitalize="none" data-toggle="tooltip" title="{lang key='orderForm.required'}" required />
														<span class="input-group-btn btn-group">
															<button type="submit" class="btn btn-primary btn_loader search">
																<span class="btn_text">{$WLANG.domainstransfer}</span>
															</button>
														</span>
													</div>
												</form>
											</div>
										{/if}
									</div>

								</div>
								{if count($block.table) > 0}
									<div class="domain-tlds">
										<div class="swiper" id="banner-tlds-{$blockkey}">
											<div class="swiper-wrapper featured-tlds">
												{foreach from=$block.table item=$ditem}
													<div class="swiper-slide tld-container">
														<span class="tld-item">
															<span class="dots">.</span>
															<span class="tld">{$ditem['tld']|substr:1}</span>
														</span>
														<span class="tld-price">
															{if $block.formtype == 1}
																{$ditem['pricing']['transfer'][1]|formatCurrency}/{$WLANG.pricingCycleShort.annually}
															{else}
																{$ditem['pricing']['register'][1]|formatCurrency}/{$WLANG.pricingCycleShort.annually}
															{/if}
														</span>
													</div>	
												{/foreach}
											</div>
										</div>
									</div>
								{/if}
							</div>							
							
						</div>
					</div>
				</div>
			</div>
		</div>
		{if $block.bgcolor eq "graphics" && in_array($bgExtension, $extensions)}
			<div class="banner-bg-video-container">
				<video class="banner-bg-video" aria-hidden="true" playsinline muted loop autoplay>
					<source src="{$WEB_ROOT}/{$block.bggraphic}" type="video/{$bgExtension}">
					Your browser does not support the video tag.
				</video>
			</div>
		{/if}		
	</div>

	{if count($block.table) > 0}
	<script>
		jQuery(document).ready(function () {
			var swiperOptions = {
				slidesPerView: 2,
				spaceBetween: 1,
				loop: {if $block.autoplay}true{else}false{/if},
				breakpoints: {
					0: {
						slidesPerView: 2
					},
					1200: {
						slidesPerView: 3
					},
				}				
			};
			{if $block.autoplay}
			swiperOptions.autoplay = {
				delay: 5000,
			};
			{/if}
			var swiper = new Swiper('#banner-tlds-{$blockkey}', swiperOptions);
		});
	</script>
	{/if}
	
	{/if}
	
{/if}