crosterOverWrites/front/products.tpl

<!-- modules/addons/adminpanel/core/front/products.tpl -->
{debug}
{assign billingcycle "monthly"}
{if $block.sechidden neq "true"}
	{if $block.ptstyle == ''}
		<div id="sec-{$blockkey}" class="sec products{if $block.bgcolor != ""} {$block.bgcolor}{/if}{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}">
			<div class="container">
				{if $block.caption || $block.sectitle || $block.subtitle}
					<div class="sec-description">
						{if $block.caption}
							<div class="sec-caption">
								<span class="rounded">{$block.caption}</span>
							</div>
						{/if}
						{if $block.sectitle}
							<h2 class="sec-title">{$block.sectitle}</h2>
						{/if}
						{if $block.subtitle}
							<div class="sec-subtitle">{$block.subtitle}</div>
						{/if}
					</div>
				{/if}			
				<div class="cros-pricing-container{if $block.itemcounts < "3"} mw-768 mx-auto{/if}">
					{if $block.SbSwitcher && !$block.DisableSwitcher}
						{if $block.switcherCycles !== null && $block.switcherCycles|@count > 1}
							{assign var="cycles" value=$block.switcherCycles}
						{else}
							{assign var="cycles" value=$allCycles}
						{/if}
						{if !$block.bsco}
							{assign var="cycles" value=$cycles|@array_reverse}
						{/if}
						<div class="product-billing-switcher-{$blockkey}">
							<div class="btn-group white border d-none d-sm-inline-block" role="group">						
								{foreach $cycles as $cycle}
									<button type="button" class="btn cycle-change" data-cycle="{$cycle}">
										<span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
									</button>
								{/foreach}
							</div>
							<div class="btn-group white border d-inline-block d-sm-none">
								<span class="px-3 py-1 small text-muted border-right">{$WLANG.orderbillingcycle}</span>
								<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
									<span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycles[0]}}</span>
								</button>					
								<ul class="dropdown-menu">
									{foreach $cycles as $cycle}
										<li class="dropdown-item cycle-change" data-cycle="{$cycle}">
											<span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
										</li>
									{/foreach}								
								</ul>
							</div>
						</div>
					{/if}
					<!-- div class pricing_style_2 -->
					<div class="pricing_style_2">
						<div class="swiper" id="pricing-tables-{$blockkey}">
							<div class="row row-eq-height{if !$block.DisplayInGrid} flex-nowrap{/if} pricing-slider pricing-{$blockkey} swiper-wrapper{if count($block.table) < 3} justify-content-md-center{/if}">
								{if count($block.table) > 0}
								{foreach from=$block.table item=$ditem key=$kk}
									<div class="col-12{if $block.itemcounts == "2"} col-md-6{elseif $block.itemcounts == "3"} col-md-6 col-lg-4 col-xl-4{elseif $block.itemcounts == "4"} col-md-6 col-lg-4 col-xl-3{/if} products-slide">
										<div class="cros-pricing-table overflow-hidden mt-0 mb-4{if $block.ststyle} {$block.ststyle}{/if}{if $block.noshadow} no-shadow{/if}{if $block.tablebg == "light"} light{elseif $block.tablebg == "primary"} bg-primary{elseif $block.tablebg == "dark"} dark{else} white{/if}{if $ditem['Featured']} active{/if}{if $block.centered} centered{/if}">							
											{if $ditem['Graphic']}
												<div class="graphics mb-3">
													{if !$ditem['Graphic']|strstr:"fa-"}
														<img src="{$WEB_ROOT}/{$ditem['Graphic']}" alt="{$ditem.title}" class="img-fluid">
													{else}
														<span class="icon">
															<i class="{$ditem['Graphic']}"></i>
														</span>
													{/if}									
												</div>
											{/if}
											<div class="h4">{$ditem['productdetails']['name']}</div>
											{if $ditem['Featured']}
												{if $block.ststyle}
												<div class="feature-sticker">
													<span class="st-sm">
														{if $block.featured}{$block.featured}{else}{$WLANG.featuredProduct}{/if}
													</span>
												</div>
												{else}
												<div class="sticker-wrapper">
													<div class="sticker">
														{if $block.featured}{$block.featured}{else}{$WLANG.featuredProduct}{/if}
													</div>
												</div>
												{/if}
											{/if}
											
											{if $block.descp == ""}
												{if count($ditem['productdetails']['description']['features']) > 0}
												{if $ditem['productdetails']['description']['featuresdesc']}  
													<div class="desc">{$ditem['productdetails']['description']['featuresdesc']}</div>
												{/if}
												{/if}
											{/if}
											<!-- If Empty -->
											{* {if !empty{$ditem["dropdown"]} && !empty{$ditem['Plan']} && $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher} *}
											{* {if isset($ditem["dropdown"]) && isset($ditem['Plan']) && $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}  *}
											{* {if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher} *}
											{* {if !{$ditem["dropdown"] ?? 'empty'} && !{$ditem['Plan'] ?? 'empty'} && $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}  *}
											{if $block.descp == ""}
												{if $block.bsco}
													{foreach $ditem["dropdown"] as $dropdownkey=>$dropdownprice}
														{$ditem["dropdown"][$dropdownkey] = $dropdownprice|@array_reverse}
													{/foreach}
												{/if}

												{assign var="dropdownprice" value=$ditem["dropdown"][$ditem['Plan']][0] nocache}
												

												{assign var="defaultbilling" value=$dropdownprice['cycle'] nocache}
												{assign var="taxtype" value=$dropdownprice['taxtype'] nocache}	
												{assign var="hasconfigoptions" value=$dropdownprice['hasconfigoptions'] nocache}
												<!-- Assign Var {$defaultbilling} -->
												<!-- Assign Var $dropdownprice {$dropdownprice|print_r} -->
												<!-- Assign Var $block {$block|print_r} -->

												<div class="billing-cycle-pricing float{if $block.descp == "below"} desc_belwo{/if}">
													
													{if !$block.SbSwitcher}
														<div class="btn-group mb-2">
														<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
															<div class="pricing_wrapr">
																{$dropdownprice['billingcycle']} 
																<!-- Save Text auskommentiert -->
																{* {if $dropdownprice['save']}<div class="save_text"><span class="badge badge-primary">{$dropdownprice['save']}</span></div>{/if} *}
															</div>
															<span class="fal fa-angle-down"></span>
														</a>
														<ul class="dropdown-menu">
															<!-- Dropdown Price {$defaultbilling} -->
															{if $ditem["dropdown"][$ditem['Plan']]}										
																{foreach $ditem["dropdown"][$ditem['Plan']] as $dropdownprice}
																<li class="billinging_wrapr" data-ultn-bilcycle="{$dropdownprice['cycle']}">
																	<div class="pricing_wrapr">
																		{$dropdownprice['billingcycle']} @ {if $dropdownprice['save']}<div class="save_text"><span class="badge badge-primary">{$dropdownprice['save']}</span></div>{/if}
																	</div>
																</li>
																{/foreach}										
															{/if}
														</ul>
														</div>
													{/if}
													<!-- if $ditem["dropdown"][$ditem['Plan']] -->
													{if $ditem["dropdown"][$ditem['Plan']]}
													{/if}
												</div>
											{else}
												<div class="product_pricing_single">
													{if $block.DisableBrekdown}
														{if isset($ditem.dropdown) && is_array($ditem.dropdown)}
															{foreach from=$ditem.dropdown item=$dropdown key=$dropdownKey}
																{assign var="firstCycle" value=$dropdown|@end}
																{if $firstCycle.hasconfigoptions}
																	<div class="regular_pricing">
																		<span class="small text-muted">{$WLANG.from}</span>
																	</div>
																{/if}
																<div class="price">
																	<span class="cost">
																		{$firstCycle.prefix}{$firstCycle.price}
																	</span>
																	<span class="suffix">
																		{$firstCycle.suffix}
																	</spn>
																</div>
																<div class="cycle small text-muted">
																	{$firstCycle.cycle|capitalize}
																</div>
															{/foreach}
														{/if}
														
													{else}
													
														{if $ditem["price"] == 'FREE'}
															<span class="badge badge-secondary price-free">{$WLANG.orderfree}</span>										
														{else}
															{if $ditem["productdetails"]['hasconfigoptions']}
																<div class="regular_pricing">
																	<span class="small text-muted">{$WLANG.from}</span>
																</div>
															{/if}
															<div class="price">									
																{assign var="ccurrency" value=$ditem["productdetails"]["price"]["price"]->getCurrency()}
																<span class="cost">{$ditem["productdetails"]["price"]['simple']}</span>
																{if $ccurrency["suffix"]}<span class="suffix">{$ccurrency["suffix"]}</span>{/if}
															</div>
															{if $ditem["billingcycle"] != ""}
																<div class="cycle small text-muted">{$ditem["billingcycle"]}</div>
															{elseif $ditem["productdetails"]["price"]["cycle"] == "onetime"}
																<div class="cycle small text-muted">{$WLANG.orderpaymenttermonetime}</div>
															{/if}
															{if $ditem["productdetails"]["price"]["setupFee"]}
																<div class="setup-fee small text-muted"><span><i class="fal fa-plus"></i></span> {$ditem["productdetails"]["price"]["setupFee"]} {$WLANG.ordersetupfee}</div>
															{/if}												
														{/if}
													{/if}
												</div>
											{/if}
																				
												{if $block.descp == "below" || $block.descp == "1"}
												{if count($ditem['productdetails']['description']['features']) > 0}
												{if $ditem['productdetails']['description']['featuresdesc']}  
													<div class="desc mt-2">{$ditem['productdetails']['description']['featuresdesc']}</div>
												{/if}
												{/if}								
											{/if}
											{*
											{if !$block.orderLinkinLast}
												<div class="product-actions w-100">
													<a href="{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}javascript:void(0){else}{$WEB_ROOT}/{if $ditem["productdetails"]['isMarketConnect']}cart/order/{else}cart.php{/if}?a=add&pid={$ditem['Plan']}{if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}&billingcycle={$defaultbilling}{/if}{/if}" class="btn btn-primary{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']} disabled{/if}">
														{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}{$WLANG.outofstock}{elseif $block.btntext}{$block.btntext}{else}{$WLANG.addtocart}{/if}
													</a>
												</div>
											{/if}
											*}
											{if $block.descp == "2"}
												{if count($ditem['productdetails']['description']['features']) > 0}
												{if $ditem['productdetails']['description']['featuresdesc']}  
													<div class="desc_small mt-3 mb-1">{$ditem['productdetails']['description']['featuresdesc']}</div>
												{/if}
												{/if}								
											{/if}
											
											<!-- Features / Eigenschaften -->
											{if $block.featurescollapsed}
												<!-- Features / Collapsed -->
												{if $ditem['productdetails']['description']}
													{if count($ditem['productdetails']['description']['features']) > 0}
														<ul class="plan-features"> 
														{foreach $ditem['productdetails']['description']['features'] as $feature => $value}
															<li><b>{$feature}</b>{$value}</li>
														{/foreach} 
														</ul>
													{else}
														<div class="plan-features">
															{$ditem['productdetails']['description']['original']}
														</div>
													{/if}
												{/if}
											{else}
												<!-- Features / NOT Collapsed -->
												<p class="PriceList-toggle collapsed" data-toggle="collapse" data-target="#PlanLists{$kk + 1}">
													<span>{$WLANG.clientareaviewdetails}</span>
												</p>
												
												{if $ditem['productdetails']['description']}
													{if count($ditem['productdetails']['description']['features']) > 0}
														<ul class="plan-features collapse" id="PlanLists{$kk + 1}"> 
															<table border="0" style="display: inline-table; table-layout:fixed; width:100%; visibility:visible;" cellpadding="0" cellspacing="5">
																{foreach $ditem['productdetails']['description']['features'] as $feature => $value}
																	<tr>
																		<td><b>{$feature}</b></td>
																		<td>
																															{if $value == "Ja"}
																																	<i class="far fa-check-square" class="td-product-feature-icon"></i>
																																{elseif $value == "Nein"}
																																		<i class="far fa-square" class="td-product-feature-icon"></i>
																																{elseif $value == "Optional"}
																																	<i class="fas fa-plus" class="td-product-feature-icon"></i>
																																{else}
																																		{$value}
																																{/if}
																		</td>
																	</tr>
															{/foreach} 
															</table>
															{*
															{foreach $ditem['productdetails']['description']['features'] as $feature => $value}
															<li><b>{$feature}: </b>{$value}</li>
															{/foreach} 
															*}
														</ul>
													{else}
														<div class="plan-features collapse" id="PlanLists{$kk + 1}">
															{$ditem['productdetails']['description']['original']}
														</div>
													{/if}
												{/if}
											{/if}

											{if !$block.orderLinkinLast}
												<div class="product-actions w-100">
													<a href="{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}javascript:void(0){else}{$WEB_ROOT}/{if $ditem["productdetails"]['isMarketConnect']}cart/order/{else}cart.php{/if}?a=add&pid={$ditem['Plan']}{if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}&billingcycle={$defaultbilling}{/if}{/if}" class="btn btn-primary{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']} disabled{/if}">
														{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}{$WLANG.outofstock}{elseif $block.btntext}{$block.btntext}{else}{$WLANG.addtocart}{/if}
													</a>
												</div>
											{/if}

											
											{if $block.orderLinkinLast}
												<div class="product-actions mt-auto">
													<a href="{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}javascript:void(0){else}{$WEB_ROOT}/{if $ditem["productdetails"]['isMarketConnect']}cart/order/{else}cart.php{/if}?a=add&pid={$ditem['Plan']}{if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}&billingcycle={$defaultbilling}{/if}{/if}" class="btn btn-primary my-3 w-auto{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']} disabled{/if}">
														{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}{$WLANG.outofstock}{elseif $block.btntext}{$block.btntext}{else}{$WLANG.addtocart}{/if}
													</a>
												</div>
											{/if}
											
										</div>
									</div>						
								{/foreach}
								{/if}
							</div>
						</div>
					</div>
					<!-- TD DisplayInGrid -->
					{if !$block.DisplayInGrid}
						{if !$block.slidertype}
							<div class="swiper-pagination pricing-tables_{$blockkey}"></div>
						{else}
							<div class="swiper-button-prev pricing-tables_{$blockkey}_prev">
								<span class="btn_icon_large"><i class="far fa-long-arrow-left"></i></span>				
							</div>
							<div class="swiper-button-next pricing-tables_{$blockkey}_next">
								<span class="btn_icon_large"><i class="far fa-long-arrow-right"></i></span>
							</div>
						{/if}
					{/if}
				</div>
			</div>
		</div>
		<script>
			jQuery(document).ready(function () {
				{if !$block.DisplayInGrid}
					var swiper = new Swiper('#pricing-tables-{$blockkey}', {
					slidesPerView: 1,
					preventClicks: true,
					slideClass: 'products-slide',
					{if !$block.slidertype}
						pagination: {
							el: '.swiper-pagination.pricing-tables_{$blockkey}',
							clickable: true,
						},
					{else}
						navigation: {
							nextEl: '.pricing-tables_{$blockkey}_next',
							prevEl: '.pricing-tables_{$blockkey}_prev',
						},
					{/if}
					breakpoints: {
						0: {
							slidesPerView: 1
						},
						768: {
						slidesPerView: 2
						},
						992: {
						slidesPerView:{if $block.itemcounts == "2"} 2{else} 3{/if}
						},
						1200: {
						slidesPerView:{if $block.itemcounts == ""} 3{else} {$block.itemcounts}{/if}
						},
					}
					
					});
				{/if}
				
				{if $block.SbSwitcher && !$block.DisableSwitcher}
					jQuery("#sec-{$blockkey} .product-billing-switcher-{$blockkey} .dropdown-menu li").click(function(){
					var selText = jQuery(this).html();
					jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText);
					});
					
					jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').on('click', function() {
						var newCycle = jQuery(this).data('cycle');
						var disBtnBilCycle = jQuery(this).data('cycle');
						jQuery('.pricing-{$blockkey} .product_pricing .pricing_main').hide();
						jQuery('.pricing-{$blockkey} .' + newCycle).show();
						jQuery(this).addClass('active').siblings().removeClass('active');
						jQuery('.pricing-{$blockkey} .cros-pricing-table').each(function(index) {
							var disBtnUrlFetch = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table').find('.btn-primary').attr('href');
							var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
							var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv);
							var disBtnUrlFinal = disBtnUrlFinal+'&billingcycle='+disBtnBilCycle;
						
							jQuery(this).find('.btn-primary').attr('href',disBtnUrlFinal);
							if (jQuery(this).find('.' + newCycle).length <= 0) {
								jQuery(this).find('.pricing_main_default').show();
								jQuery(this).find('.btn-primary').addClass('disabled');
							} else {
								jQuery(this).find('.pricing_main_default').hide();
								jQuery(this).find('.btn-primary').removeClass('disabled');
							}
						});
					});
					jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').first().trigger('click');			
				
				{else}
					{if !$block.DisableSwitcher}
						jQuery(".pricing-{$blockkey} .dropdown-menu li").click(function(){
						var selText = jQuery(this).html();
						jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="fal fa-angle-down"></span>');
						});
						
						jQuery('.pricing-{$blockkey} .billinging_wrapr').click(function(){
							var disBtnBilCycle = jQuery(this).attr('data-ultn-bilcycle');
							var disBtnUrlFetch = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table').find('.btn-primary').attr('href');
							var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
							var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv);
							var disBtnUrlFinal = disBtnUrlFinal+'&billingcycle='+disBtnBilCycle;
							
							jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table').find('.btn-primary').attr('href',disBtnUrlFinal);
							var crosPricingTable = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table');
							
							crosPricingTable.find('.pricing_main').each(function() {
								var currentBilCycle = jQuery(this).attr('data-ultn-bilcycle');
								if (currentBilCycle === disBtnBilCycle) {
									jQuery(this).removeClass('w-hidden');
								} else {
									jQuery(this).addClass('w-hidden');
								}
							});				
						});
					{/if}
				{/if}
			
			});
		</script>
	{elseif $block.ptstyle == 'pts_1'}
		<!-- TD pts_1 -->
		<div id="sec-{$blockkey}" class="sec products{if $block.bgcolor != ""} {$block.bgcolor}{/if}{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}">
			<div class="container">
				{if $block.caption || $block.sectitle || $block.subtitle}
					<div class="sec-description">
						{if $block.caption}
							<div class="sec-caption">
								<span class="rounded">{$block.caption}</span>
							</div>
						{/if}
						{if $block.sectitle}
							<h2 class="sec-title">{$block.sectitle}</h2>
						{/if}
						{if $block.subtitle}
							<div class="sec-subtitle">{$block.subtitle}</div>
						{/if}
					</div>
				{/if}
				<!-- Cross Pricing Container -->
				<div class="cros-pricing-container">
					{if $block.SbSwitcher && !$block.DisableSwitcher}
						{if $block.switcherCycles !== null && $block.switcherCycles|@count > 1}
							{assign var="cycles" value=$block.switcherCycles}
						{else}
							{assign var="cycles" value=$allCycles}
						{/if}
						{if !$block.bsco}
							{assign var="cycles" value=$cycles|@array_reverse}
						{/if}
						<div class="product-billing-switcher-{$blockkey}">
							<div class="btn-group white border d-none d-sm-inline-block" role="group">						
								{foreach $cycles as $cycle}
									<button type="button" class="btn cycle-change" data-cycle="{$cycle}">
										<span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
									</button>
								{/foreach}
							</div>
							<div class="btn-group white border d-inline-block d-sm-none">
								<span class="px-3 py-1 small text-muted border-right">{$WLANG.orderbillingcycle}</span>
								<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
									<span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycles[0]}}</span>
								</button>					
								<ul class="dropdown-menu">
									{foreach $cycles as $cycle}
										<li class="dropdown-item cycle-change" data-cycle="{$cycle}">
											<span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
										</li>
									{/foreach}								
								</ul>
							</div>
						</div>
					{/if}
					<!-- TD:Pricing style 2 -->
					<div class="pricing_style_2 pricing-{$blockkey}" id="pricing-tables-{$blockkey}">
						{if count($block.table) > 0}
						{foreach from=$block.table item=$ditem key=$kk}
							<div class="cros-pricing-table{if $block.SbSwitcher} overflow-hidden{/if}{if $block.ststyle} {$block.ststyle}{/if}{if $block.noshadow} no-shadow{/if}{if $block.tablebg == "light"} light{elseif $block.tablebg == "primary"} bg-primary{elseif $block.tablebg == "dark"} dark{else} white{/if} pt_st_5{if $ditem['Featured']} active{/if}">
								<div class="row no-gutters">
									<div class="col-lg-8 col-xl-9">
										<div class="content align-items-lg-center">
											{if $ditem['Graphic']}
												{if !$ditem['Graphic']|strstr:"fa-"}
													<div class="graphics fix-width">
														<img src="{$WEB_ROOT}/{$ditem['Graphic']}" alt="{$ditem.title}" class="img-fluid">
													</div>
												{else}
													<div class="graphics">
														<span class="icon">
															<i class="{$ditem['Graphic']}"></i>
														</span>
													</div>
												{/if}
											{/if}
											<div class="plan-details">
												<div class="h4 plan-name">
													{$ditem['productdetails']['name']}
													{if $ditem['Featured']}
														{if $block.ststyle}
															<span class="st-sm ml-2 fw-400">
																{if $block.featured}{$block.featured}{else}{$WLANG.featuredProduct}{/if}
															</span>
														{/if}
													{/if}
												</div>
												
												{if count($ditem['productdetails']['description']['features']) > 0}
													{if strpos($ditem['productdetails']['description']['featuresdesc'], '<p>') !== false}											
														{$ditem['productdetails']['description']['featuresdesc']}
													{else}
														<p>{$ditem['productdetails']['description']['featuresdesc']}</p>
													{/if}
												{/if}
												<!-- Eigenschaften 1 -->
												{if $ditem['productdetails']['description']}
												<!-- Eigenschaften 2 -->
													{if count($ditem['productdetails']['description']['features']) > 0}
													<!-- Eigenschaften 3 -->
														<ul class="plan-features"> 
															{foreach $ditem['productdetails']['description']['features'] as $feature => $value}
																<li><b>{$feature}</b>{$value}</li>
															{/foreach} 
														</ul>
													{else}
														{$ditem['productdetails']['description']['original']}
													{/if}
												{/if}
											</div>	
										</div>
									</div>
									<div class="col-lg-4 col-xl-3">
										<div class="content{if $block.SbSwitcher && $ditem['Featured'] && !$block.ststyle} mr-0 mr-lg-4{/if}">
											{if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}
												{if $block.bsco}
													{foreach $ditem["dropdown"] as $dropdownkey=>$dropdownprice}							
														{$ditem["dropdown"][$dropdownkey] = $dropdownprice|@array_reverse}
													{/foreach}
												{/if}
												{assign var="dropdownprice" value=$ditem["dropdown"][$ditem['Plan']][0] nocache}
												{assign var="defaultbilling" value=$dropdownprice['cycle'] nocache}
												{assign var="taxtype" value=$dropdownprice['taxtype'] nocache}	
												{assign var="hasconfigoptions" value=$dropdownprice['hasconfigoptions'] nocache}
												<div class="billing-cycle-pricing float{if $block.descp == "below"} desc_belwo{/if}">
													{if !$block.SbSwitcher}
													<div class="btn-group mb-2 mb-lg-0">
														<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
															<div class="pricing_wrapr">
																{$dropdownprice['billingcycle']}
																{* {if $dropdownprice['save']}<div class="save_text"><span class="badge badge-primary">{$dropdownprice['save']}</span></div>{/if} *}
															</div>
															<span class="fal fa-angle-down"></span>
														</a>
														<ul class="dropdown-menu">
															{if $ditem["dropdown"][$ditem['Plan']]}										
																{foreach $ditem["dropdown"][$ditem['Plan']] as $dropdownprice}
																	<li class="billinging_wrapr" data-ultn-bilcycle="{$dropdownprice['cycle']}">
																		<div class="pricing_wrapr">
																			{$dropdownprice['billingcycle']} 
																			{* {if $dropdownprice['save']}<div class="save_text"><span class="badge badge-primary">{$dropdownprice['save']}</span></div>{/if} *}
																		</div>
																	</li>
																{/foreach}										
															{/if}
														</ul>
													</div>
													{/if}
													{if $ditem["dropdown"][$ditem['Plan']]}
													<div class="product_pricing">
														{if $block.SbSwitcher}
															<div class="pricing_main_default{if $defaultbilling eq "{$dropdownprice['cycle']}"} w-hidden{/if}">
																<div class="price">
																	{if $dropdownprice['hasconfigoptions'] || $dropdownprice['save']}
																		<span class="regular_pricing">
																			{if $dropdownprice['hasconfigoptions']}
																				<span class="small text-muted">{$WLANG.from}</span>
																			{/if}																	
																			{if $dropdownprice['save']}
																				{if $dropdownprice['dollar'] && !$block.DisableBrekdown}
																					<span class="savecut text-muted">
																						{$dropdownprice['prefix']}{$dropdownprice['dollar']}.{$dropdownprice['cents']}{$dropdownprice['suffix']}
																					</span>
																				{/if}
																				{* {if $block.SbSwitcher}<span class="badge badge-primary">{$dropdownprice['save']}</span>{/if} *}
																			{/if}																
																		</span>
																	{/if}
																	<span class="cost">
																		{$dropdownprice['prefix']}
																		{if $block.DisableBrekdown}
																			{$dropdownprice['price']}
																		{else}
																			{$dropdownprice['monthlydollar']}.{$dropdownprice['monthlycents']}
																		{/if}
																	</span>
																	{if $dropdownprice['suffix']}
																		<span class="suffix">
																		{$dropdownprice['suffix']}
																		</span>
																	{/if}
																</div>
																<span class="cycle small text-muted">{if $block.DisableBrekdown}{$dropdownprice.cycle|capitalize}{else}{if $dropdownprice['monthlycycle']}{$dropdownprice['monthlycycle']}{else}{$dropdownprice['cycleTerm']}{/if}{/if}</span>
																{if $dropdownprice['setup'] > 0}
																	<div class="small text-muted">
																		<span><i class="fal fa-plus"></i></span>
																		<span>{$dropdownprice['prefix']}</span>
																		{$dropdownprice['setup']}
																		<span>{$dropdownprice['suffix']}</span>
																		{$WLANG.ordersetupfee}
																	</div>
																{/if}				
															</div>
														{/if}												
														{foreach $ditem["dropdown"][$ditem['Plan']] as $dropdownprice}										
															<div class="pricing_main {$dropdownprice['cycle']}{if $defaultbilling neq "{$dropdownprice['cycle']}"} w-hidden{/if}" data-ultn-bilcycle="{$dropdownprice['cycle']}">
																<div class="price">
																	{if $dropdownprice['hasconfigoptions'] || $dropdownprice['save']}
																		<span class="regular_pricing">
																			{if $dropdownprice['hasconfigoptions']}
																				<span class="small text-muted">{$WLANG.from}</span>
																			{/if}																	
																			{if $dropdownprice['save']}
																				{if $dropdownprice['dollar'] && !$block.DisableBrekdown}
																					<span class="savecut text-muted">{$dropdownprice['prefix']}{$dropdownprice['dollar']}.{$dropdownprice['cents']}{$dropdownprice['suffix']}</span>
																				{/if}
																				{if $block.SbSwitcher}<span class="badge badge-primary">{$dropdownprice['save']}</span>{/if}
																			{/if}
																		</span>
																	{/if}											
																	<span class="cost">{$dropdownprice['prefix']}{if $block.DisableBrekdown}{$dropdownprice['price']}{else}{$dropdownprice['monthlydollar']}.{$dropdownprice['monthlycents']}{/if}</span>
																	{if $dropdownprice['suffix']}<span class="suffix">{$dropdownprice['suffix']}</span>{/if}
																</div>
																<span class="cycle small text-muted">
																	{if $block.DisableBrekdown}
																	{$dropdownprice.cycle|capitalize}
																	{else}
																	{if $dropdownprice['monthlycycle']}
																		{$dropdownprice['monthlycycle']}
																	{else}
																		{$dropdownprice['cycleTerm']}
																	{/if}
																	{/if}
																</span>
																{if $dropdownprice['setup'] > 0}
																	<div class="small text-muted">
																		<span><i class="fal fa-plus"></i></span>
																		<span>{$dropdownprice['prefix']}</span>
																		{$dropdownprice['setup']}
																		<span>{$dropdownprice['suffix']}</span>
																		{$WLANG.ordersetupfee}
																	</div>
																{/if}				
															</div>
														{/foreach}
													</div>
													{/if}
												</div>
											{else}
												<div class="product_pricing_single">
													{if $block.DisableBrekdown}
														{if isset($ditem.dropdown) && is_array($ditem.dropdown)}
															{foreach from=$ditem.dropdown item=$dropdown key=$dropdownKey}
																{assign var="firstCycle" value=$dropdown|@end}															
																<div class="price">
																	{if $firstCycle.hasconfigoptions}
																		<span class="regular_pricing">
																			<span class="small text-muted">{$WLANG.from}</span>
																		</span>
																	{/if}											
																	<span class="cost">
																		{$firstCycle.prefix}{$firstCycle.price}
																	</span>
																	<span class="suffix">
																		{$firstCycle.suffix}
																	</spn>
																</div>
																<div class="cycle small text-muted">
																	{$firstCycle.cycle|capitalize}
																</div>
															{/foreach}
														{/if}
													{else}
														{if $ditem["price"] == 'FREE'}
															<div class="d-flex align-items-center justify-content-end">
																<span class="badge badge-secondary price-free">{$WLANG.orderfree}</span>
															</div>
														{else}
															<div class="price">
																{if $ditem["productdetails"]['hasconfigoptions']}
																	<span class="regular_pricing">
																		<span class="small text-muted">{$WLANG.from}</span>
																	</span>
																{/if}														
																{assign var="ccurrency" value=$ditem["productdetails"]["price"]["price"]->getCurrency()}
																<span class="cost">{$ditem["productdetails"]["price"]['simple']}</span>
																{if $ccurrency["suffix"]}<span class="suffix">{$ccurrency["suffix"]}</span>{/if}
															</div>
															{if $ditem["billingcycle"] != ""}
																<div class="cycle small text-muted">{$ditem["billingcycle"]}</div>
															{elseif $ditem["productdetails"]["price"]["cycle"] == "onetime"}
																<div class="cycle small text-muted">{$WLANG.orderpaymenttermonetime}</div>
															{/if}
															{if $ditem["productdetails"]["price"]["setupFee"]}
																<div class="setup-fee small text-muted"><span><i class="fal fa-plus"></i></span> {$ditem["productdetails"]["price"]["setupFee"]} {$WLANG.ordersetupfee}</div>
															{/if}												
														{/if}
													{/if}
												</div>
											{/if}
											<div class="plan-action mt-auto">
												<a href="{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}javascript:void(0){else}{$WEB_ROOT}/{if $ditem["productdetails"]['isMarketConnect']}cart/order/{else}cart.php{/if}?a=add&pid={$ditem['Plan']}{if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}&billingcycle={$defaultbilling}{/if}{/if}" class="btn btn-sm btn-primary mt-2{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']} disabled{/if}">
													{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}{$WLANG.outofstock}{elseif $block.btntext}{$block.btntext}{else}{$WLANG.addtocart}{/if}
												</a>
											</div>										
										</div>
									</div>
								</div>
								{if $ditem['Featured']}
									{if $block.ststyle == ""}
										<div class="sticker-wrapper{if !$block.SbSwitcher} se{/if}">
											<div class="sticker">
												{if $block.featured}{$block.featured}{else}{$WLANG.featuredProduct}{/if}
											</div>
										</div>
									{/if}
								{/if}							
							</div>				
						{/foreach}
						{/if}
					</div>
				</div>
			</div>
		</div>
		<script>
			jQuery(document).ready(function () {
				{if $block.SbSwitcher && !$block.DisableSwitcher}
					jQuery("#sec-{$blockkey} .product-billing-switcher-{$blockkey} .dropdown-menu li").click(function(){
					var selText = jQuery(this).html();
					jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText);
					});
					
					jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').on('click', function() {
						var newCycle = jQuery(this).data('cycle');
						var disBtnBilCycle = jQuery(this).data('cycle');
						jQuery('.pricing-{$blockkey} .product_pricing .pricing_main').hide();
						jQuery('.pricing-{$blockkey} .' + newCycle).show();
						jQuery(this).addClass('active').siblings().removeClass('active');
						jQuery('.pricing-{$blockkey} .cros-pricing-table').each(function(index) {
							var disBtnUrlFetch = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table').find('.btn-primary').attr('href');
							var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
							var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv);
							var disBtnUrlFinal = disBtnUrlFinal+'&billingcycle='+disBtnBilCycle;
						
							jQuery(this).find('.btn-primary').attr('href',disBtnUrlFinal);
							if (jQuery(this).find('.' + newCycle).length <= 0) {
								jQuery(this).find('.pricing_main_default').show();
								jQuery(this).find('.btn-primary').addClass('disabled');
							} else {
								jQuery(this).find('.pricing_main_default').hide();
								jQuery(this).find('.btn-primary').removeClass('disabled');
							}
						});
					});
					jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').first().trigger('click');			
				
				{else}
					{if !$block.DisableSwitcher}
						jQuery(".pricing-{$blockkey} .dropdown-menu li").click(function(){
						var selText = jQuery(this).html();
						jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="fal fa-angle-down"></span>');
						});

						jQuery('.pricing-{$blockkey} .billinging_wrapr').click(function(){
							var disBtnBilCycle = jQuery(this).attr('data-ultn-bilcycle');
							var disBtnUrlFetch = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table').find('.btn-primary').attr('href');
							var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
							var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv);
							var disBtnUrlFinal = disBtnUrlFinal+'&billingcycle='+disBtnBilCycle;
							
							jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table').find('.btn-primary').attr('href',disBtnUrlFinal);
							var crosPricingTable = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table');
							
							crosPricingTable.find('.pricing_main').each(function() {
								var currentBilCycle = jQuery(this).attr('data-ultn-bilcycle');
								if (currentBilCycle === disBtnBilCycle) {
									jQuery(this).removeClass('w-hidden');
								} else {
									jQuery(this).addClass('w-hidden');
								}
							});				
						});
					{/if}
				{/if}
				
			});
		</script>
	{elseif $block.ptstyle == 'pts_2'}
		<div id="sec-{$blockkey}" class="sec products{if $block.bgcolor != ""} {$block.bgcolor}{/if}{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}">
			<div class="section__plan_comparison">
				<div class="container">
					
					{if $block.caption || $block.sectitle || $block.subtitle}
						<div class="sec-description">
							{if $block.caption}
								<div class="sec-caption">
									<span class="rounded">{$block.caption}</span>
								</div>
							{/if}
							{if $block.sectitle}
								<h2 class="sec-title">{$block.sectitle}</h2>
							{/if}
							{if $block.subtitle}
								<div class="sec-subtitle">{$block.subtitle}</div>
							{/if}
						</div>
					{/if}
					
					<div class="cros-pricing-container">
						{if $block.SbSwitcher  && !$block.DisableSwitcher}
							{if $block.switcherCycles !== null && $block.switcherCycles|@count > 1}
								{assign var="cycles" value=$block.switcherCycles}
							{else}
								{assign var="cycles" value=$allCycles}
							{/if}
							{if !$block.bsco}
								{assign var="cycles" value=$cycles|@array_reverse}
							{/if}
							<div class="product-billing-switcher-{$blockkey}">
								<div class="btn-group white border d-none d-sm-inline-block" role="group">						
									{foreach $cycles as $cycle}
										<button type="button" class="btn cycle-change" data-cycle="{$cycle}">
											<span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
										</button>
									{/foreach}
								</div>
								<div class="btn-group white border d-inline-block d-sm-none">
									<span class="px-3 py-1 small text-muted border-right">{$WLANG.orderbillingcycle}</span>
									<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
										<span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycles[0]}}</span>
									</button>					
									<ul class="dropdown-menu">
										{foreach $cycles as $cycle}
											<li class="dropdown-item cycle-change" data-cycle="{$cycle}">
												<span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
											</li>
										{/foreach}								
									</ul>
								</div>
							</div>
						{/if}				
						<div class="cros-pricing-table tables_{$blockkey} no-animation{if $block.noshadow} no-shadow{/if}{if $block.tablebg == "light"} light{elseif $block.tablebg == "primary"} bg-primary{elseif $block.tablebg == "dark"} dark{else} white{/if}">
							<div class="plans_slider__nav border-bottom">
								<div class="swiper-button-next tables_{$blockkey}_next">
									<span class="btn__text text-muted">{$WLANG.tablepagesnext}</span>
									<span class="btn__icon"><i class="far fa-long-arrow-right"></i></span>
								</div>
								<div class="swiper-button-prev tables_{$blockkey}_prev">
									<span class="btn__icon"><i class="far fa-long-arrow-left"></i></span>
									<span class="btn__text text-muted">{$WLANG.tablepagesprevious}</span>
								</div>
							</div>						
							<div class="plan plan-{$blockkey}{if $block.centered} centered{/if}">
								<div class="plan__column plan__column--empty">
									<div class="plan__header d-flex align-items-center{if $block.table[0].Graphic|trim != ""} hg{/if}">
										<span class="h4">{$WLANG['store']['ox']['featuresHeadline']}</span>
									</div>
									<div class="plan__body plan__body--right">
										{foreach from=$block.table|@array_column:'featurelist'|@array_count_values item=count key=featurelist}
											{$featurelist}
										{/foreach}
										<div class="plan__cell plan__cell-last{if $block.SbSwitcher || $block.DisableSwitcher} sb{/if}"></div>
									</div>
								</div>
								<div class="swiper-container" id="plans-slider-{$blockkey}">
									<div class="swiper-wrapper">
										{if count($block.table) > 0}
										{foreach from=$block.table item=$ditem key=$kk}
										<div class="swiper-slide">
											<div class="plan__column">
												<div class="plan__header{if $ditem['Graphic']} hg{/if}">
													{if $ditem['Graphic']}
														<div class="graphics">
															{if !$ditem['Graphic']|strstr:"fa-"}
																<img src="{$WEB_ROOT}/{$ditem['Graphic']}" alt="{$ditem.title}" class="img-fluid">
															{else}
																<span class="icon">
																	<i class="{$ditem['Graphic']}"></i>
																</span>
															{/if}									
														</div>
													{/if}
													<span class="h4">{$ditem['productdetails']['name']}</span>
												</div>
												<div class="plan__body">
													{$ditem['featuresvalues']}
													<div class="plan__cell plan__cell-last{if $block.SbSwitcher || $block.DisableSwitcher} sb{/if}">
														{if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}
									
															{if $block.bsco}
																{foreach $ditem["dropdown"] as $dropdownkey=>$dropdownprice}							
																	{$ditem["dropdown"][$dropdownkey] = $dropdownprice|@array_reverse}
																{/foreach}
															{/if}

															{assign var="dropdownprice" value=$ditem["dropdown"][$ditem['Plan']][0] nocache}
															{assign var="defaultbilling" value=$dropdownprice['cycle'] nocache}
															{assign var="taxtype" value=$dropdownprice['taxtype'] nocache}	
															{assign var="hasconfigoptions" value=$dropdownprice['hasconfigoptions'] nocache}
														
															<div class="billing-cycle-pricing float{if $block.descp == "below"} desc_belwo{/if}">
																
																{if !$block.SbSwitcher}
																<div class="btn-group mb-2 dropup">
																	<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
																		<div class="pricing_wrapr">
																			{$dropdownprice['billingcycle']}
																			{* {if $dropdownprice['save']}<div class="save_text"><span class="badge badge-primary">{$dropdownprice['save']}</span></div>{/if} *}
																		</div>
																		<span class="fal fa-angle-down"></span>
																	</a>
																	<ul class="dropdown-menu">
																		{if $ditem["dropdown"][$ditem['Plan']]}										
																		{foreach $ditem["dropdown"][$ditem['Plan']] as $dropdownprice}
																			<li class="billinging_wrapr" data-ultn-bilcycle="{$dropdownprice['cycle']}">
																				<div class="pricing_wrapr">
																					{$dropdownprice['billingcycle']} 
																					{* {if $dropdownprice['save']}<div class="save_text"><span class="badge badge-primary">{$dropdownprice['save']}</span></div>{/if} *}
																				</div>
																			</li>
																		{/foreach}										
																		{/if}
																	</ul>
																</div>
																{/if}
									
																{if $ditem["dropdown"][$ditem['Plan']]}
																<div class="product_pricing">
																	{if $block.SbSwitcher}
																		<div class="pricing_main_default{if $defaultbilling eq "{$dropdownprice['cycle']}"} w-hidden{/if}">
																			{if $dropdownprice['hasconfigoptions'] || $dropdownprice['save']}
																				<div class="regular_pricing">
																					{if $dropdownprice['hasconfigoptions']}
																						<span class="small text-muted">{$WLANG.from}</span>
																					{/if}																			
																					{if $dropdownprice['save']}
																						{if $dropdownprice['dollar'] && !$block.DisableBrekdown}
																							<span class="savecut text-muted">{$dropdownprice['prefix']}{$dropdownprice['dollar']}.{$dropdownprice['cents']}{$dropdownprice['suffix']}</span>
																						{/if}
																						{if $block.SbSwitcher}<span class="badge badge-primary">{$dropdownprice['save']}</span>{/if}
																					{/if}
																				</div>
																			{/if}											
																			<div class="price">
																				<span class="cost">{$dropdownprice['prefix']}{if $block.DisableBrekdown}{$dropdownprice['price']}{else}{$dropdownprice['monthlydollar']}.{$dropdownprice['monthlycents']}{/if}</span>
																				{if $dropdownprice['suffix']}<span class="suffix">{$dropdownprice['suffix']}</span>{/if}
																			</div>
																			<div class="cycle small text-muted">{if $block.DisableBrekdown}{$dropdownprice.cycle|capitalize}{else}{if $dropdownprice['monthlycycle']}{$dropdownprice['monthlycycle']}{else}{$dropdownprice['cycleTerm']}{/if}{/if}</div>
																			{if $dropdownprice['setup'] > 0}
																				<div class="small text-muted">
																					<span><i class="fal fa-plus"></i></span>
																					<span>{$dropdownprice['prefix']}</span>
																					{$dropdownprice['setup']}
																					<span>{$dropdownprice['suffix']}</span>
																					{$WLANG.ordersetupfee}
																				</div>
																			{/if}				
																		</div>
																	{/if}												
																	{foreach $ditem["dropdown"][$ditem['Plan']] as $dropdownprice}										
																		<div class="pricing_main {$dropdownprice['cycle']}{if $defaultbilling neq "{$dropdownprice['cycle']}"} w-hidden{/if}" data-ultn-bilcycle="{$dropdownprice['cycle']}">
																			{if $dropdownprice['hasconfigoptions'] || $dropdownprice['save']}
																				<div class="regular_pricing">
																					{if $dropdownprice['hasconfigoptions']}
																						<span class="small text-muted">{$WLANG.from}</span>
																					{/if}																			
																					{if $dropdownprice['save']}
																						{if $dropdownprice['dollar'] && !$block.DisableBrekdown}
																							<span class="savecut text-muted">{$dropdownprice['prefix']}{$dropdownprice['dollar']}.{$dropdownprice['cents']}{$dropdownprice['suffix']}</span>
																						{/if}
																						{if $block.SbSwitcher}<span class="badge badge-primary">{$dropdownprice['save']}</span>{/if}
																					{/if}
																				</div>
																			{/if}											
																			<div class="price">
																				<span class="cost">{$dropdownprice['prefix']}{if $block.DisableBrekdown}{$dropdownprice['price']}{else}{$dropdownprice['monthlydollar']}.{$dropdownprice['monthlycents']}{/if}</span>
																				{if $dropdownprice['suffix']}<span class="suffix">{$dropdownprice['suffix']}</span>{/if}
																			</div>
																			<div class="cycle small text-muted">{if $block.DisableBrekdown}{$dropdownprice.cycle|capitalize}{else}{if $dropdownprice['monthlycycle']}{$dropdownprice['monthlycycle']}{else}{$dropdownprice['cycleTerm']}{/if}{/if}</div>
																			{if $dropdownprice['setup'] > 0}
																				<div class="small text-muted">
																					<span><i class="fal fa-plus"></i></span>
																					<span>{$dropdownprice['prefix']}</span>
																					{$dropdownprice['setup']}
																					<span>{$dropdownprice['suffix']}</span>
																					{$WLANG.ordersetupfee}
																				</div>
																			{/if}				
																		</div>
																	{/foreach}
																</div>
																{/if}
															</div>
															<a href="{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}javascript:void(0){else}{$WEB_ROOT}/{if $ditem["productdetails"]['isMarketConnect']}cart/order/{else}cart.php{/if}?a=add&pid={$ditem['Plan']}{if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}{if $ditem["billingcycle"] != ""}&billingcycle={$defaultbilling}{/if}{/if}{/if}" class="btn btn-block btn-primary{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']} disabled{/if}">
																{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}{$WLANG.outofstock}{elseif $block.btntext}{$block.btntext}{else}{$WLANG.addtocart}{/if}
															</a>										
														{else}
															<div class="product_pricing_single d-flex flex-column justify-content-center h-100">
																{if $block.DisableBrekdown}
																	{if isset($ditem.dropdown) && is_array($ditem.dropdown)}
																		{foreach from=$ditem.dropdown item=$dropdown key=$dropdownKey}
																			{assign var="firstCycle" value=$dropdown|@end}
																			{if $firstCycle.hasconfigoptions}
																				<div class="regular_pricing">
																					<span class="small text-muted">{$WLANG.from}</span>
																				</div>
																			{/if}															
																			<div class="price">
																				<span class="cost">
																					{$firstCycle.prefix}{$firstCycle.price}
																				</span>
																				<span class="suffix">
																					{$firstCycle.suffix}
																				</spn>
																			</div>
																			<div class="cycle small text-muted">
																				{$firstCycle.cycle|capitalize}
																			</div>
																		{/foreach}
																	{/if}
																	
																{else}
																
																	{if $ditem["price"] == 'FREE'}
																		<span class="badge badge-secondary price-free">{$WLANG.orderfree}</span>										
																	{else}
																		{if $ditem["productdetails"]['hasconfigoptions']}
																			<div class="regular_pricing">
																				<span class="small text-muted">{$WLANG.from}</span>
																			</div>
																		{/if}
																		<div class="price">									
																			{assign var="ccurrency" value=$ditem["productdetails"]["price"]["price"]->getCurrency()}
																			<span class="cost">{$ditem["productdetails"]["price"]['simple']}</span>
																			{if $ccurrency["suffix"]}<span class="suffix">{$ccurrency["suffix"]}</span>{/if}
																		</div>
																		{if $ditem["billingcycle"] != ""}
																			<div class="cycle small text-muted">{$ditem["billingcycle"]}</div>
																		{elseif $ditem["productdetails"]["price"]["cycle"] == "onetime"}
																			<div class="cycle small text-muted">{$WLANG.orderpaymenttermonetime}</div>
																		{/if}
																		{if $ditem["productdetails"]["price"]["setupFee"]}
																			<div class="setup-fee small text-muted"><span><i class="fal fa-plus"></i></span> {$ditem["productdetails"]["price"]["setupFee"]} {$WLANG.ordersetupfee}</div>
																		{/if}												
																	{/if}
																{/if}
																<a href="{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}javascript:void(0){else}{$WEB_ROOT}/{if $ditem["productdetails"]['isMarketConnect']}cart/order/{else}cart.php{/if}?a=add&pid={$ditem['Plan']}{if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}{if $ditem["billingcycle"] != ""}&billingcycle={$defaultbilling}{/if}{/if}{/if}" class="btn btn-block btn-primary mt-2{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']} disabled{/if}">
																	{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}{$WLANG.outofstock}{elseif $block.btntext}{$block.btntext}{else}{$WLANG.addtocart}{/if}
																</a>											
															</div>
														{/if}

													</div>
												</div>
												
												{if $ditem['Featured']}
													<div class="sticker-wrapper">
														<div class="sticker">
															{if $block.featured}{$block.featured}{else}{$WLANG.featuredProduct}{/if}
														</div>
													</div>
												{/if}
												
											</div>
										</div>
										{/foreach}
										{/if}
									</div>
									
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			jQuery(document).ready(function () {
				var swiper = new Swiper('#plans-slider-{$blockkey}', {
					slidesPerView: 1,
					navigation: {
						nextEl: '.tables_{$blockkey}_next',
						prevEl: '.tables_{$blockkey}_prev',
					},
					breakpoints: {
						0: {
							slidesPerView: 1,
						},
						768: {
						slidesPerView: 2,
						},
						992: {
						slidesPerView: {if $block.itemcounts == "2"} 2{else} 3{/if},
						},
						1200: {
						slidesPerView: {if $block.itemcounts == ""} 3{else} {$block.itemcounts}{/if},
						},
					},
					on: {
						init: function (swiper) {
							toggleSliderNav(swiper);
						},
						slideChange: function (swiper) {
							toggleSliderNav(swiper);
						},
						reachEnd: function (swiper) {
							toggleSliderNav(swiper);
						},
						reachBeginning: function (swiper) {
							toggleSliderNav(swiper);
						},
						resize: function (swiper) {
							toggleSliderNav(swiper);
						}
					}
				});
				
				function toggleSliderNav(swiper) {
					var nav = document.querySelector('.tables_{$blockkey} .plans_slider__nav');
					if (swiper.isBeginning && swiper.isEnd) {
						nav.style.display = 'none';
					} else {
						nav.style.display = 'flex';
					}
				}
				
				{if $block.SbSwitcher && !$block.DisableSwitcher}
					jQuery("#sec-{$blockkey} .product-billing-switcher-{$blockkey} .dropdown-menu li").click(function(){
					var selText = jQuery(this).html();
					jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText);
					});
					
					jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').on('click', function() {
						var newCycle = jQuery(this).data('cycle');
						var disBtnBilCycle = jQuery(this).data('cycle');
						jQuery('.plan-{$blockkey} .pricing_main').hide();
						jQuery('.plan-{$blockkey} .' + newCycle).show();
						jQuery(this).addClass('active').siblings().removeClass('active');
						jQuery('.plan-{$blockkey} .plan__body').each(function(index) {
							var disBtnUrlFetch = jQuery(this).closest('.plan-{$blockkey}').find('.btn-primary').attr('href');
							var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
							var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv);
							var disBtnUrlFinal = disBtnUrlFinal+'&billingcycle='+disBtnBilCycle;
						
							jQuery(this).find('.btn-primary').attr('href',disBtnUrlFinal);
							if (jQuery(this).find('.' + newCycle).length <= 0) {
								jQuery(this).find('.pricing_main_default').show();
								jQuery(this).find('.btn-primary').addClass('disabled');
							} else {
								jQuery(this).find('.pricing_main_default').hide();
								jQuery(this).find('.btn-primary').removeClass('disabled');
							}
						});
					});
					
					jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').first().trigger('click');			
				
				{else}
					{if !$block.DisableSwitcher}
						jQuery(".plan-{$blockkey} .dropdown-menu li").click(function(){
						var selText = jQuery(this).html();
						jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="fal fa-angle-down"></span>');
						});
						
						jQuery('.plan-{$blockkey} .billinging_wrapr').click(function(){
							var disBtnBilCycle = jQuery(this).attr('data-ultn-bilcycle');
							var disBtnUrlFetch = jQuery(this).closest('.plan-{$blockkey} .plan__body').find('.btn-primary').attr('href');
							var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
							var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv);
							var disBtnUrlFinal = disBtnUrlFinal+'&billingcycle='+disBtnBilCycle;
							
							jQuery(this).closest('.plan-{$blockkey} .plan__body').find('.btn-primary').attr('href',disBtnUrlFinal);
							var crosPricingTable = jQuery(this).closest('.plan-{$blockkey} .plan__body');
							
							crosPricingTable.find('.pricing_main').each(function() {
								var currentBilCycle = jQuery(this).attr('data-ultn-bilcycle');
								if (currentBilCycle === disBtnBilCycle) {
									jQuery(this).removeClass('w-hidden');
								} else {
									jQuery(this).addClass('w-hidden');
								}
							});				
						});
					{/if}
				{/if}
		
			});
		</script>
	{elseif $block.ptstyle == 'pts_3'}
		<div id="sec-{$blockkey}" class="sec products{if $block.bgcolor != ""} {$block.bgcolor}{/if}{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}">
			<div class="container">
				
				{if $block.caption || $block.sectitle || $block.subtitle}
					<div class="sec-description">
						{if $block.caption}
							<div class="sec-caption">
								<span class="rounded">{$block.caption}</span>
							</div>
						{/if}
						{if $block.sectitle}
							<h2 class="sec-title">{$block.sectitle}</h2>
						{/if}
						{if $block.subtitle}
							<div class="sec-subtitle">{$block.subtitle}</div>
						{/if}
					</div>
				{/if}
				
				<div class="cros-pricing-container">
					{if $block.SbSwitcher && !$block.DisableSwitcher}
						{if $block.switcherCycles !== null && $block.switcherCycles|@count > 1}
							{assign var="cycles" value=$block.switcherCycles}
						{else}
							{assign var="cycles" value=$allCycles}
						{/if}
						{if !$block.bsco}
							{assign var="cycles" value=$cycles|@array_reverse}
						{/if}
						<div class="product-billing-switcher-{$blockkey}">
							<div class="btn-group white border d-none d-sm-inline-block" role="group">						
								{foreach $cycles as $cycle}
									<button type="button" class="btn cycle-change" data-cycle="{$cycle}">
										<span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
									</button>
								{/foreach}
							</div>
							<div class="btn-group white border d-inline-block d-sm-none">
								<span class="px-3 py-1 small text-muted border-right">{$WLANG.orderbillingcycle}</span>
								<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
									<span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycles[0]}}</span>
								</button>					
								<ul class="dropdown-menu">
									{foreach $cycles as $cycle}
										<li class="dropdown-item cycle-change" data-cycle="{$cycle}">
											<span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
										</li>
									{/foreach}								
								</ul>
							</div>
						</div>
					{/if}
					<div class="pricing_style_2">					
						<div class="swiper" id="pricing-tables-{$blockkey}">
							<div class="row row-eq-height{if !$block.DisplayInGrid} flex-nowrap{/if} pricing-slider swiper-wrapper pricing-{$blockkey}">
								{if count($block.table) > 0}
								{foreach from=$block.table item=$ditem key=$kk}
									<div class="col-12{if $block.itemcounts == "2"} col-md-6{elseif $block.itemcounts == "3"} col-md-6 col-lg-4 col-xl-4{elseif $block.itemcounts == "4"} col-md-6 col-lg-4 col-xl-3{/if} products-slide">
										<div class="cros-pricing-table overflow-hidden mt-0 mb-4 border-0 p-0{if $block.ststyle} {$block.ststyle}{/if}{if $block.noshadow} no-shadow{/if}{if $block.tablebg == "light"} light{elseif $block.tablebg == "primary"} bg-primary{elseif $block.tablebg == "dark"} dark{else} white{/if}{if $ditem['Featured']} active{/if}">							
											{if $ditem['Graphic']}
												<div class="graphics">
													{if !$ditem['Graphic']|strstr:"fa-"}
														<img src="{$WEB_ROOT}/{$ditem['Graphic']}" alt="{$ditem.title}" class="h-rounded img-fluid">
													{/if}
													<div class="d-flex flex-column p-3{if $block.centered} align-items-center{/if}">
														<div class="h4 mb-2">{$ditem['productdetails']['name']}</div>
														{if $ditem['Featured']}
															{if $block.ststyle}
																<div class="feature-sticker mb-2">
																	<span class="st-sm">
																		{if $block.featured}{$block.featured}{else}{$WLANG.featuredProduct}{/if}
																	</span>
																</div>
															{else}
																<div class="sticker-wrapper">
																	<div class="sticker">
																		{if $block.featured}{$block.featured}{else}{$WLANG.featuredProduct}{/if}
																	</div>
																</div>
															{/if}
														{/if}
														{if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}
									
															{if $block.bsco}
																{foreach $ditem["dropdown"] as $dropdownkey=>$dropdownprice}							
																	{$ditem["dropdown"][$dropdownkey] = $dropdownprice|@array_reverse}
																{/foreach}
															{/if}

															{assign var="dropdownprice" value=$ditem["dropdown"][$ditem['Plan']][0] nocache}
															{assign var="defaultbilling" value=$dropdownprice['cycle'] nocache}
															{assign var="taxtype" value=$dropdownprice['taxtype'] nocache}	
															{assign var="hasconfigoptions" value=$dropdownprice['hasconfigoptions'] nocache}
														
															<div class="billing-cycle-pricing mt-0 mb-2 float{if $block.descp == "below"} desc_belwo{/if}">
																{if !$block.SbSwitcher}
																<div class="btn-group dropup">
																	<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
																		<div class="pricing_wrapr">
																			{$dropdownprice['billingcycle']} 
																			{* {if $dropdownprice['save']}<div class="save_text"><span class="badge badge-primary">{$dropdownprice['save']}</span></div>{/if} *}
																		</div>
																		<span class="fal fa-angle-down"></span>
																	</a>
																	<ul class="dropdown-menu">
																		{if $ditem["dropdown"][$ditem['Plan']]}										
																		{foreach $ditem["dropdown"][$ditem['Plan']] as $dropdownprice}
																			<li class="billinging_wrapr" data-ultn-bilcycle="{$dropdownprice['cycle']}">
																				<div class="pricing_wrapr">
																					{$dropdownprice['billingcycle']} 
																					{* {if $dropdownprice['save']}<div class="save_text"><span class="badge badge-primary">{$dropdownprice['save']}</span></div>{/if} *}
																				</div>
																			</li>
																		{/foreach}										
																		{/if}
																	</ul>
																</div>
																{/if}
															</div>
														{/if}
														
														<div class="d-flex align-items-center mt-auto">
															<div class="mr-auto">
																{if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}
																	<div class="billing-cycle-pricing m-0 float{if $block.descp == "below"} desc_belwo{/if}">
																	{if $ditem["dropdown"][$ditem['Plan']]}
																		<div class="product_pricing">
																			{if $block.SbSwitcher}
																				<div class="pricing_main_default{if $defaultbilling eq "{$dropdownprice['cycle']}"} w-hidden{/if}">
																					{if $dropdownprice['hasconfigoptions'] || $dropdownprice['save']}
																						<div class="regular_pricing">
																							{if $dropdownprice['hasconfigoptions']}
																								<span class="small text-muted">{$WLANG.from}</span>
																							{/if}																
																							{if $dropdownprice['save']}
																								{if $dropdownprice['dollar'] && !$block.DisableBrekdown}
																									<span class="savecut text-muted">{$dropdownprice['prefix']}{$dropdownprice['dollar']}.{$dropdownprice['cents']}{$dropdownprice['suffix']}</span>
																								{/if}
																								{if $block.SbSwitcher}<span class="badge badge-primary">{$dropdownprice['save']}</span>{/if}
																							{/if}																
																						</div>
																					{/if}											
																					<div class="price">
																						<span class="cost cost-small">{$dropdownprice['prefix']}{if $block.DisableBrekdown}{$dropdownprice['price']}{else}{$dropdownprice['monthlydollar']}.{$dropdownprice['monthlycents']}{/if}</span>
																						{if $dropdownprice['suffix']}<span class="suffix">{$dropdownprice['suffix']}</span>{/if}
																					</div>
																					<div class="cycle small text-muted">{if $block.DisableBrekdown}{$dropdownprice.cycle|capitalize}{else}{if $dropdownprice['monthlycycle']}{$dropdownprice['monthlycycle']}{else}{$dropdownprice['cycleTerm']}{/if}{/if}</div>
																					{if $dropdownprice['setup'] > 0}
																						<div class="small text-muted">
																							<span><i class="fal fa-plus"></i></span>
																							<span>{$dropdownprice['prefix']}</span>
																							{$dropdownprice['setup']}
																							<span>{$dropdownprice['suffix']}</span>
																							{$WLANG.ordersetupfee}
																						</div>
																					{/if}				
																				</div>
																			{/if}												
																			{foreach $ditem["dropdown"][$ditem['Plan']] as $dropdownprice}										
																				<div class="pricing_main {$dropdownprice['cycle']}{if $defaultbilling neq "{$dropdownprice['cycle']}"} w-hidden{/if}" data-ultn-bilcycle="{$dropdownprice['cycle']}">
																					{if $dropdownprice['hasconfigoptions'] || $dropdownprice['save']}
																						<div class="regular_pricing">
																							{if $dropdownprice['hasconfigoptions']}
																								<span class="small text-muted">{$WLANG.from}</span>
																							{/if}																
																							{if $dropdownprice['save']}
																								{if $dropdownprice['dollar'] && !$block.DisableBrekdown}
																									<span class="savecut text-muted">{$dropdownprice['prefix']}{$dropdownprice['dollar']}.{$dropdownprice['cents']}{$dropdownprice['suffix']}</span>
																								{/if}
																								{if $block.SbSwitcher}<span class="badge badge-primary">{$dropdownprice['save']}</span>{/if}
																							{/if}
																						</div>
																					{/if}											
																					<div class="price">
																						<span class="cost cost-small">{$dropdownprice['prefix']}{if $block.DisableBrekdown}{$dropdownprice['price']}{else}{$dropdownprice['monthlydollar']}.{$dropdownprice['monthlycents']}{/if}</span>
																						{if $dropdownprice['suffix']}<span class="suffix">{$dropdownprice['suffix']}</span>{/if}
																					</div>
																					<div class="cycle small text-muted">{if $block.DisableBrekdown}{$dropdownprice.cycle|capitalize}{else}{if $dropdownprice['monthlycycle']}{$dropdownprice['monthlycycle']}{else}{$dropdownprice['cycleTerm']}{/if}{/if}</div>
																					{if $dropdownprice['setup'] > 0}
																						<div class="small text-muted">
																							<span><i class="fal fa-plus"></i></span>
																							<span>{$dropdownprice['prefix']}</span>
																							{$dropdownprice['setup']}
																							<span>{$dropdownprice['suffix']}</span>
																							{$WLANG.ordersetupfee}
																						</div>
																					{/if}				
																				</div>
																			{/foreach}
																		</div>
																		{/if}
																	</div>
																{else}
																	<div class="product_pricing_single m-0">
																		{if $block.DisableBrekdown}
																			{if isset($ditem.dropdown) && is_array($ditem.dropdown)}
																				{foreach from=$ditem.dropdown item=$dropdown key=$dropdownKey}
																					{assign var="firstCycle" value=$dropdown|@end}
																					{if $firstCycle.hasconfigoptions}
																						<div class="regular_pricing">
																							<span class="small text-muted">{$WLANG.from}</span>
																						</div>
																					{/if}															
																					<div class="price">
																						<span class="cost cost-small">
																							{$firstCycle.prefix}{$firstCycle.price}
																						</span>
																						<span class="suffix">
																							{$firstCycle.suffix}
																						</spn>
																					</div>
																					<div class="cycle small text-muted">
																						{$firstCycle.cycle|capitalize}
																					</div>
																				{/foreach}
																			{/if}
																			
																		{else}
																		
																			{if $ditem["price"] == 'FREE'}
																				<span class="badge badge-secondary price-free">{$WLANG.orderfree}</span>										
																			{else}
																				{if $ditem["productdetails"]['hasconfigoptions']}
																					<div class="regular_pricing">
																						<span class="small text-muted">{$WLANG.from}</span>
																					</div>
																				{/if}
																				<div class="price">									
																					{assign var="ccurrency" value=$ditem["productdetails"]["price"]["price"]->getCurrency()}
																					<span class="cost cost-small">{$ditem["productdetails"]["price"]['simple']}</span>
																					{if $ccurrency["suffix"]}<span class="suffix">{$ccurrency["suffix"]}</span>{/if}
																				</div>
																				{if $ditem["billingcycle"] != ""}
																					<div class="cycle small text-muted">{$ditem["billingcycle"]}</div>
																				{elseif $ditem["productdetails"]["price"]["cycle"] == "onetime"}
																					<div class="cycle small text-muted">{$WLANG.orderpaymenttermonetime}</div>
																				{/if}
																				{if $ditem["productdetails"]["price"]["setupFee"]}
																					<div class="setup-fee small text-muted"><span><i class="fal fa-plus"></i></span> {$ditem["productdetails"]["price"]["setupFee"]} {$WLANG.ordersetupfee}</div>
																				{/if}												
																			{/if}
																		{/if}																		
																	</div>
																{/if}
															</div>
															{if $ditem['ProductLink']}
																<a href="{if $ditem['link'] == 'domainregister'}{$WEB_ROOT}/{if $ditem["productdetails"]['isMarketConnect']}cart/order/{else}cart.php{/if}?a=add&domain=register{elseif $ditem['link'] == 'domaintransfer'}{$WEB_ROOT}/{if $ditem["productdetails"]['isMarketConnect']}cart/order/{else}cart.php{/if}?a=add&domain=transfer{else}{$WEB_ROOT}/{$ditem['link']}{/if}" class="btn btn-sm w-auto mt-0 btn-primary">
																	{if $ditem['ProductbtnText']}{$ditem['ProductbtnText']}{else}{$WLANG.learnmore}{/if}
																</a>															
															{else}
																<a href="{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}javascript:void(0){else}{$WEB_ROOT}/{if $ditem["productdetails"]['isMarketConnect']}cart/order/{else}cart.php{/if}?a=add&pid={$ditem['Plan']}{if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}&billingcycle={$defaultbilling}{/if}{/if}" class="btn btn-sm w-auto mt-0 btn-order-link btn-primary{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']} disabled{/if}">
																	{if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}{$WLANG.outofstock}{elseif $block.btntext}{$block.btntext}{else}{$WLANG.addtocart}{/if}
																</a>
															{/if}
														</div>
													</div>
												</div>												
											{else}
												<div class="d-flex align-items-center justify-content-center p-3 h-100">
													<div class="alert alert-danger text-center">
														Must required graphic for this type of product section.
													</div>
												</div>
											{/if}
										</div>
									</div>				
								{/foreach}
								{/if}
							</div>
						</div>
						{if !$block.DisplayInGrid}
							{if !$block.slidertype}
								<div class="swiper-pagination pricing-tables_{$blockkey}"></div>
							{else}
								<div class="swiper-button-prev pricing-tables_{$blockkey}_prev">
									<span class="btn_icon_large"><i class="far fa-long-arrow-left"></i></span>				
								</div>
								<div class="swiper-button-next pricing-tables_{$blockkey}_next">
									<span class="btn_icon_large"><i class="far fa-long-arrow-right"></i></span>
								</div>
							{/if}
						{/if}
					</div>
				</div>
			</div>
		</div>
		<script>
			jQuery(document).ready(function () {
				{if !$block.DisplayInGrid}
					var swiper = new Swiper('#pricing-tables-{$blockkey}', {
					  slidesPerView: 1,
					  preventClicks: true,
					  slideClass: 'products-slide',
					  {if !$block.slidertype}
						  pagination: {
							el: '.swiper-pagination.pricing-tables_{$blockkey}',
							clickable: true,
						  },
					  {else}
						  navigation: {
							nextEl: '.pricing-tables_{$blockkey}_next',
							prevEl: '.pricing-tables_{$blockkey}_prev',
						  },
					  {/if}
					  breakpoints: {
						0: {
							slidesPerView: 1
						},
						768: {
						  slidesPerView: 2
						},
						992: {
						  slidesPerView:{if $block.itemcounts == "2"} 2{else} 3{/if}
						},
						1200: {
						  slidesPerView:{if $block.itemcounts == ""} 3{else} {$block.itemcounts}{/if}
						},
					  }
					  
					});
				{/if}

				{if $block.SbSwitcher && !$block.DisableSwitcher}
					jQuery("#sec-{$blockkey} .product-billing-switcher-{$blockkey} .dropdown-menu li").click(function(){
					  var selText = jQuery(this).html();
					  jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText);
					});
					
					jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').on('click', function() {
						var newCycle = jQuery(this).data('cycle');
						var disBtnBilCycle = jQuery(this).data('cycle');
						jQuery('.pricing-{$blockkey} .product_pricing .pricing_main').hide();
						jQuery('.pricing-{$blockkey} .' + newCycle).show();
						jQuery(this).addClass('active').siblings().removeClass('active');
						
						jQuery('.pricing-{$blockkey} .cros-pricing-table').each(function(index) {
							var btnOrder = jQuery(this).find('.btn-order-link');
							
							if (btnOrder.length) {
								var disBtnUrlFetch = btnOrder.attr('href');
								var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
								var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv) + '&billingcycle=' + disBtnBilCycle;
								
								btnOrder.attr('href', disBtnUrlFinal);
							}
							
							if (jQuery(this).find('.' + newCycle).length <= 0) {
								jQuery(this).find('.pricing_main_default').show();
								btnOrder.addClass('disabled');
							} else {
								jQuery(this).find('.pricing_main_default').hide();
								btnOrder.removeClass('disabled');
							}
						});
					});
					jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').first().trigger('click');
				
				{else}
					{if !$block.DisableSwitcher}
						jQuery(".pricing-{$blockkey} .dropdown-menu li").click(function(){
						  var selText = jQuery(this).html();
						  jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="fal fa-angle-down"></span>');
						});
						
						jQuery('.pricing-{$blockkey} .billinging_wrapr').click(function(){
							var disBtnBilCycle = jQuery(this).attr('data-ultn-bilcycle');
							var btnOrder = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table').find('.btn-order-link');
							
							if (btnOrder.length) {
								var disBtnUrlFetch = btnOrder.attr('href');
								var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
								var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv) + '&billingcycle=' + disBtnBilCycle;
								
								btnOrder.attr('href', disBtnUrlFinal);
							}

							var crosPricingTable = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table');
							
							crosPricingTable.find('.pricing_main').each(function() {
								var currentBilCycle = jQuery(this).attr('data-ultn-bilcycle');
								if (currentBilCycle === disBtnBilCycle) {
									jQuery(this).removeClass('w-hidden');
								} else {
									jQuery(this).addClass('w-hidden');
								}
							});
						});
					{/if}
				{/if}
			
			});
		</script>	
	{/if}
{/if}