products.tpl 75 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530
  1. <!-- modules/addons/adminpanel/core/front/products.tpl -->
  2. {assign billingcycle "monthly"}
  3. {if $block.sechidden neq "true"}
  4. {if $block.ptstyle == ''}
  5. <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}">
  6. <div class="container">
  7. {if $block.caption || $block.sectitle || $block.subtitle}
  8. <div class="sec-description">
  9. {if $block.caption}
  10. <div class="sec-caption">
  11. <span class="rounded">{$block.caption}</span>
  12. </div>
  13. {/if}
  14. {if $block.sectitle}
  15. <h2 class="sec-title">{$block.sectitle}</h2>
  16. {/if}
  17. {if $block.subtitle}
  18. <div class="sec-subtitle">{$block.subtitle}</div>
  19. {/if}
  20. </div>
  21. {/if}
  22. <div class="cros-pricing-container{if $block.itemcounts < "3"} mw-768 mx-auto{/if}">
  23. {if $block.SbSwitcher && !$block.DisableSwitcher}
  24. {if $block.switcherCycles !== null && $block.switcherCycles|@count > 1}
  25. {assign var="cycles" value=$block.switcherCycles}
  26. {else}
  27. {assign var="cycles" value=$allCycles}
  28. {/if}
  29. {if !$block.bsco}
  30. {assign var="cycles" value=$cycles|@array_reverse}
  31. {/if}
  32. <div class="product-billing-switcher-{$blockkey}">
  33. <div class="btn-group white border d-none d-sm-inline-block" role="group">
  34. {foreach $cycles as $cycle}
  35. <button type="button" class="btn cycle-change" data-cycle="{$cycle}">
  36. <span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
  37. </button>
  38. {/foreach}
  39. </div>
  40. <div class="btn-group white border d-inline-block d-sm-none">
  41. <span class="px-3 py-1 small text-muted border-right">{$WLANG.orderbillingcycle}</span>
  42. <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
  43. <span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycles[0]}}</span>
  44. </button>
  45. <ul class="dropdown-menu">
  46. {foreach $cycles as $cycle}
  47. <li class="dropdown-item cycle-change" data-cycle="{$cycle}">
  48. <span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
  49. </li>
  50. {/foreach}
  51. </ul>
  52. </div>
  53. </div>
  54. {/if}
  55. <!-- div class pricing_style_2 -->
  56. <div class="pricing_style_2">
  57. <div class="swiper" id="pricing-tables-{$blockkey}">
  58. <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}">
  59. {if count($block.table) > 0}
  60. {foreach from=$block.table item=$ditem key=$kk}
  61. <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">
  62. <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}">
  63. {if $ditem['Graphic']}
  64. <div class="graphics mb-3" style="min-height: 105px;">
  65. {if !$ditem['Graphic']|strstr:"fa-"}
  66. <img src="{$WEB_ROOT}/{$ditem['Graphic']}" alt="{$ditem.title}" class="img-fluid" style="max-height: 100px">
  67. {else}
  68. <span class="icon">
  69. <i class="{$ditem['Graphic']}"></i>
  70. </span>
  71. {/if}
  72. </div>
  73. {/if}
  74. <div class="h4">{$ditem['productdetails']['name']}</div>
  75. {if $ditem['Featured']}
  76. {if $block.ststyle}
  77. <div class="feature-sticker">
  78. <span class="st-sm">
  79. {if $block.featured}{$block.featured}{else}{$WLANG.featuredProduct}{/if}
  80. </span>
  81. </div>
  82. {else}
  83. <div class="sticker-wrapper">
  84. <div class="sticker">
  85. {if $block.featured}{$block.featured}{else}{$WLANG.featuredProduct}{/if}
  86. </div>
  87. </div>
  88. {/if}
  89. {/if}
  90. {if $block.descp == ""}
  91. {if count($ditem['productdetails']['description']['features']) > 0}
  92. {if $ditem['productdetails']['description']['featuresdesc']}
  93. <div class="desc" style="min-height: 80px;height:80px; overflow:hidden;">{$ditem['productdetails']['description']['featuresdesc']}</div>
  94. {/if}
  95. {/if}
  96. {/if}
  97. <div class="product_pricing_single">
  98. {if $block.DisableBrekdown}
  99. {if isset($ditem.dropdown) && is_array($ditem.dropdown)}
  100. {foreach from=$ditem.dropdown item=$dropdown key=$dropdownKey}
  101. {assign var="firstCycle" value=$dropdown|@end}
  102. {if $firstCycle.hasconfigoptions}
  103. <!--
  104. <div class="regular_pricing">
  105. <span class="small text-muted">ab</span>
  106. </div>
  107. -->
  108. {/if}
  109. <div class="price">
  110. <span class="cost" style="color:#1B5F8F">
  111. {$firstCycle.prefix}{$firstCycle.price}
  112. </span>
  113. <span class="suffix">
  114. {$firstCycle.suffix}
  115. </spn>
  116. </div>
  117. <div class="cycle small text-muted">
  118. {$firstCycle.cycle|capitalize}
  119. </div>
  120. {/foreach}
  121. {/if}
  122. {else}
  123. {if $ditem["price"] == 'FREE'}
  124. <span class="badge badge-secondary price-free">{$WLANG.orderfree}</span>
  125. {else}
  126. {if $ditem["productdetails"]['hasconfigoptions']}
  127. <div class="regular_pricing">
  128. <span class="small text-muted">ab</span>
  129. </div>
  130. {/if}
  131. <div class="price">
  132. {assign var="ccurrency" value=$ditem["productdetails"]["price"]["price"]->getCurrency()}
  133. <span class="cost">{$ditem["productdetails"]["price"]['simple']}</span>
  134. {if $ccurrency["suffix"]}<span class="suffix">{$ccurrency["suffix"]}</span>{/if}
  135. </div>
  136. {if $ditem["billingcycle"] != ""}
  137. <div class="cycle small text-muted">{$ditem["billingcycle"]}</div>
  138. {elseif $ditem["productdetails"]["price"]["cycle"] == "onetime"}
  139. <div class="cycle small text-muted">{$WLANG.orderpaymenttermonetime}</div>
  140. {/if}
  141. {if $ditem["productdetails"]["price"]["setupFee"]}
  142. <div class="setup-fee small text-muted"><span><i class="fal fa-plus"></i></span> {$ditem["productdetails"]["price"]["setupFee"]} {$WLANG.ordersetupfee}</div>
  143. {/if}
  144. {/if}
  145. {/if}
  146. </div>
  147. {if $block.descp == "below" || $block.descp == "1"}
  148. {if count($ditem['productdetails']['description']['features']) > 0}
  149. {if $ditem['productdetails']['description']['featuresdesc']}
  150. <div class="desc mt-2">{$ditem['productdetails']['description']['featuresdesc']}</div>
  151. {/if}
  152. {/if}
  153. {/if}
  154. {*
  155. {if !$block.orderLinkinLast}
  156. <div class="product-actions w-100">
  157. <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}">
  158. {if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}{$WLANG.outofstock}{elseif $block.btntext}{$block.btntext}{else}{$WLANG.addtocart}{/if}
  159. </a>
  160. </div>
  161. {/if}
  162. *}
  163. {if $block.descp == "2"}
  164. {if count($ditem['productdetails']['description']['features']) > 0}
  165. {if $ditem['productdetails']['description']['featuresdesc']}
  166. <div class="desc_small mt-3 mb-1">{$ditem['productdetails']['description']['featuresdesc']}</div>
  167. {/if}
  168. {/if}
  169. {/if}
  170. <!-- Features / Eigenschaften -->
  171. {if $block.featurescollapsed}
  172. <!-- Features / Collapsed -->
  173. {if $ditem['productdetails']['description']}
  174. {if count($ditem['productdetails']['description']['features']) > 0}
  175. <ul class="plan-features">
  176. {foreach $ditem['productdetails']['description']['features'] as $feature => $value}
  177. <li><b>{$feature}</b>{$value}</li>
  178. {/foreach}
  179. </ul>
  180. {else}
  181. <div class="plan-features">
  182. {$ditem['productdetails']['description']['original']}
  183. </div>
  184. {/if}
  185. {/if}
  186. {else}
  187. <!-- Features / NOT Collapsed -->
  188. <p class="PriceList-toggle collapsed" data-toggle="collapse" data-target="#PlanLists{$kk + 1}">
  189. <span>{$WLANG.clientareaviewdetails}</span>
  190. </p>
  191. {if $ditem['productdetails']['description']}
  192. {if count($ditem['productdetails']['description']['features']) > 0}
  193. <ul class="plan-features collapse" id="PlanLists{$kk + 1}">
  194. <table border="0" style="display: inline-table; table-layout:fixed; width:100%; visibility:visible;" cellpadding="0" cellspacing="5">
  195. {foreach $ditem['productdetails']['description']['features'] as $feature => $value}
  196. <tr>
  197. <td><b>{$feature}</b></td>
  198. <td>
  199. {if $value == "Ja"}
  200. <i class="far fa-check-square" class="td-product-feature-icon"></i>
  201. {elseif $value == "Nein"}
  202. <i class="far fa-square" class="td-product-feature-icon"></i>
  203. {elseif $value == "Optional"}
  204. <i class="fas fa-plus" class="td-product-feature-icon"></i>
  205. {else}
  206. {$value}
  207. {/if}
  208. </td>
  209. </tr>
  210. {/foreach}
  211. </table>
  212. {*
  213. {foreach $ditem['productdetails']['description']['features'] as $feature => $value}
  214. <li><b>{$feature}: </b>{$value}</li>
  215. {/foreach}
  216. *}
  217. </ul>
  218. {else}
  219. <div class="plan-features collapse" id="PlanLists{$kk + 1}">
  220. {$ditem['productdetails']['description']['original']}
  221. </div>
  222. {/if}
  223. {/if}
  224. {/if}
  225. {if !$block.orderLinkinLast}
  226. <div class="product-actions w-100">
  227. <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}">
  228. {if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}{$WLANG.outofstock}{elseif $block.btntext}{$block.btntext}{else}{$WLANG.addtocart}{/if}
  229. </a>
  230. </div>
  231. {/if}
  232. {if $block.orderLinkinLast}
  233. <div class="product-actions mt-auto">
  234. <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}">
  235. {if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}{$WLANG.outofstock}{elseif $block.btntext}{$block.btntext}{else}{$WLANG.addtocart}{/if}
  236. </a>
  237. </div>
  238. {/if}
  239. </div>
  240. </div>
  241. {/foreach}
  242. {/if}
  243. </div>
  244. </div>
  245. </div>
  246. <!-- TD DisplayInGrid -->
  247. {if !$block.DisplayInGrid}
  248. {if !$block.slidertype}
  249. <div class="swiper-pagination pricing-tables_{$blockkey}"></div>
  250. {else}
  251. <div class="swiper-button-prev pricing-tables_{$blockkey}_prev">
  252. <span class="btn_icon_large"><i class="far fa-long-arrow-left"></i></span>
  253. </div>
  254. <div class="swiper-button-next pricing-tables_{$blockkey}_next">
  255. <span class="btn_icon_large"><i class="far fa-long-arrow-right"></i></span>
  256. </div>
  257. {/if}
  258. {/if}
  259. </div>
  260. </div>
  261. </div>
  262. <script>
  263. jQuery(document).ready(function () {
  264. {if !$block.DisplayInGrid}
  265. var swiper = new Swiper('#pricing-tables-{$blockkey}', {
  266. slidesPerView: 1,
  267. preventClicks: true,
  268. slideClass: 'products-slide',
  269. {if !$block.slidertype}
  270. pagination: {
  271. el: '.swiper-pagination.pricing-tables_{$blockkey}',
  272. clickable: true,
  273. },
  274. {else}
  275. navigation: {
  276. nextEl: '.pricing-tables_{$blockkey}_next',
  277. prevEl: '.pricing-tables_{$blockkey}_prev',
  278. },
  279. {/if}
  280. breakpoints: {
  281. 0: {
  282. slidesPerView: 1
  283. },
  284. 768: {
  285. slidesPerView: 2
  286. },
  287. 992: {
  288. slidesPerView:{if $block.itemcounts == "2"} 2{else} 3{/if}
  289. },
  290. 1200: {
  291. slidesPerView:{if $block.itemcounts == ""} 3{else} {$block.itemcounts}{/if}
  292. },
  293. }
  294. });
  295. {/if}
  296. {if $block.SbSwitcher && !$block.DisableSwitcher}
  297. jQuery("#sec-{$blockkey} .product-billing-switcher-{$blockkey} .dropdown-menu li").click(function(){
  298. var selText = jQuery(this).html();
  299. jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText);
  300. });
  301. jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').on('click', function() {
  302. var newCycle = jQuery(this).data('cycle');
  303. var disBtnBilCycle = jQuery(this).data('cycle');
  304. jQuery('.pricing-{$blockkey} .product_pricing .pricing_main').hide();
  305. jQuery('.pricing-{$blockkey} .' + newCycle).show();
  306. jQuery(this).addClass('active').siblings().removeClass('active');
  307. jQuery('.pricing-{$blockkey} .cros-pricing-table').each(function(index) {
  308. var disBtnUrlFetch = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table').find('.btn-primary').attr('href');
  309. var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
  310. var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv);
  311. var disBtnUrlFinal = disBtnUrlFinal+'&billingcycle='+disBtnBilCycle;
  312. jQuery(this).find('.btn-primary').attr('href',disBtnUrlFinal);
  313. if (jQuery(this).find('.' + newCycle).length <= 0) {
  314. jQuery(this).find('.pricing_main_default').show();
  315. jQuery(this).find('.btn-primary').addClass('disabled');
  316. } else {
  317. jQuery(this).find('.pricing_main_default').hide();
  318. jQuery(this).find('.btn-primary').removeClass('disabled');
  319. }
  320. });
  321. });
  322. jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').first().trigger('click');
  323. {else}
  324. {if !$block.DisableSwitcher}
  325. jQuery(".pricing-{$blockkey} .dropdown-menu li").click(function(){
  326. var selText = jQuery(this).html();
  327. jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="fal fa-angle-down"></span>');
  328. });
  329. jQuery('.pricing-{$blockkey} .billinging_wrapr').click(function(){
  330. var disBtnBilCycle = jQuery(this).attr('data-ultn-bilcycle');
  331. var disBtnUrlFetch = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table').find('.btn-primary').attr('href');
  332. var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
  333. var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv);
  334. var disBtnUrlFinal = disBtnUrlFinal+'&billingcycle='+disBtnBilCycle;
  335. jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table').find('.btn-primary').attr('href',disBtnUrlFinal);
  336. var crosPricingTable = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table');
  337. crosPricingTable.find('.pricing_main').each(function() {
  338. var currentBilCycle = jQuery(this).attr('data-ultn-bilcycle');
  339. if (currentBilCycle === disBtnBilCycle) {
  340. jQuery(this).removeClass('w-hidden');
  341. } else {
  342. jQuery(this).addClass('w-hidden');
  343. }
  344. });
  345. });
  346. {/if}
  347. {/if}
  348. });
  349. </script>
  350. {elseif $block.ptstyle == 'pts_1'}
  351. <!-- TD pts_1 -->
  352. <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}">
  353. <div class="container">
  354. {if $block.caption || $block.sectitle || $block.subtitle}
  355. <div class="sec-description">
  356. {if $block.caption}
  357. <div class="sec-caption">
  358. <span class="rounded">{$block.caption}</span>
  359. </div>
  360. {/if}
  361. {if $block.sectitle}
  362. <h2 class="sec-title">{$block.sectitle}</h2>
  363. {/if}
  364. {if $block.subtitle}
  365. <div class="sec-subtitle">{$block.subtitle}</div>
  366. {/if}
  367. </div>
  368. {/if}
  369. <!-- Cross Pricing Container -->
  370. <div class="cros-pricing-container">
  371. {if $block.SbSwitcher && !$block.DisableSwitcher}
  372. {if $block.switcherCycles !== null && $block.switcherCycles|@count > 1}
  373. {assign var="cycles" value=$block.switcherCycles}
  374. {else}
  375. {assign var="cycles" value=$allCycles}
  376. {/if}
  377. {if !$block.bsco}
  378. {assign var="cycles" value=$cycles|@array_reverse}
  379. {/if}
  380. <div class="product-billing-switcher-{$blockkey}">
  381. <div class="btn-group white border d-none d-sm-inline-block" role="group">
  382. {foreach $cycles as $cycle}
  383. <button type="button" class="btn cycle-change" data-cycle="{$cycle}">
  384. <span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
  385. </button>
  386. {/foreach}
  387. </div>
  388. <div class="btn-group white border d-inline-block d-sm-none">
  389. <span class="px-3 py-1 small text-muted border-right">{$WLANG.orderbillingcycle}</span>
  390. <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
  391. <span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycles[0]}}</span>
  392. </button>
  393. <ul class="dropdown-menu">
  394. {foreach $cycles as $cycle}
  395. <li class="dropdown-item cycle-change" data-cycle="{$cycle}">
  396. <span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
  397. </li>
  398. {/foreach}
  399. </ul>
  400. </div>
  401. </div>
  402. {/if}
  403. <!-- TD:Pricing style 2 -->
  404. <div class="pricing_style_2 pricing-{$blockkey}" id="pricing-tables-{$blockkey}">
  405. {if count($block.table) > 0}
  406. {foreach from=$block.table item=$ditem key=$kk}
  407. <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}">
  408. <div class="row no-gutters">
  409. <div class="col-lg-8 col-xl-9">
  410. <div class="content align-items-lg-center">
  411. {if $ditem['Graphic']}
  412. {if !$ditem['Graphic']|strstr:"fa-"}
  413. <div class="graphics fix-width">
  414. <img src="{$WEB_ROOT}/{$ditem['Graphic']}" alt="{$ditem.title}" class="img-fluid">
  415. </div>
  416. {else}
  417. <div class="graphics">
  418. <span class="icon">
  419. <i class="{$ditem['Graphic']}"></i>
  420. </span>
  421. </div>
  422. {/if}
  423. {/if}
  424. <div class="plan-details">
  425. <div class="h4 plan-name">
  426. {$ditem['productdetails']['name']}
  427. {if $ditem['Featured']}
  428. {if $block.ststyle}
  429. <span class="st-sm ml-2 fw-400">
  430. {if $block.featured}{$block.featured}{else}{$WLANG.featuredProduct}{/if}
  431. </span>
  432. {/if}
  433. {/if}
  434. </div>
  435. {if count($ditem['productdetails']['description']['features']) > 0}
  436. {if strpos($ditem['productdetails']['description']['featuresdesc'], '<p>') !== false}
  437. {$ditem['productdetails']['description']['featuresdesc']}
  438. {else}
  439. <p>{$ditem['productdetails']['description']['featuresdesc']}</p>
  440. {/if}
  441. {/if}
  442. <!-- Eigenschaften 1 -->
  443. {if $ditem['productdetails']['description']}
  444. <!-- Eigenschaften 2 -->
  445. {if count($ditem['productdetails']['description']['features']) > 0}
  446. <!-- Eigenschaften 3 -->
  447. <ul class="plan-features">
  448. {foreach $ditem['productdetails']['description']['features'] as $feature => $value}
  449. <li><b>{$feature}</b>{$value}</li>
  450. {/foreach}
  451. </ul>
  452. {else}
  453. {$ditem['productdetails']['description']['original']}
  454. {/if}
  455. {/if}
  456. </div>
  457. </div>
  458. </div>
  459. <div class="col-lg-4 col-xl-3">
  460. <div class="content{if $block.SbSwitcher && $ditem['Featured'] && !$block.ststyle} mr-0 mr-lg-4{/if}">
  461. {if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}
  462. {if $block.bsco}
  463. {foreach $ditem["dropdown"] as $dropdownkey=>$dropdownprice}
  464. {$ditem["dropdown"][$dropdownkey] = $dropdownprice|@array_reverse}
  465. {/foreach}
  466. {/if}
  467. {assign var="dropdownprice" value=$ditem["dropdown"][$ditem['Plan']][0] nocache}
  468. {assign var="defaultbilling" value=$dropdownprice['cycle'] nocache}
  469. {assign var="taxtype" value=$dropdownprice['taxtype'] nocache}
  470. {assign var="hasconfigoptions" value=$dropdownprice['hasconfigoptions'] nocache}
  471. <div class="billing-cycle-pricing float{if $block.descp == "below"} desc_belwo{/if}">
  472. {if !$block.SbSwitcher}
  473. <div class="btn-group mb-2 mb-lg-0">
  474. <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  475. <div class="pricing_wrapr">
  476. {$dropdownprice['billingcycle']}
  477. {* {if $dropdownprice['save']}<div class="save_text"><span class="badge badge-primary">{$dropdownprice['save']}</span></div>{/if} *}
  478. </div>
  479. <span class="fal fa-angle-down"></span>
  480. </a>
  481. <ul class="dropdown-menu">
  482. {if $ditem["dropdown"][$ditem['Plan']]}
  483. {foreach $ditem["dropdown"][$ditem['Plan']] as $dropdownprice}
  484. <li class="billinging_wrapr" data-ultn-bilcycle="{$dropdownprice['cycle']}">
  485. <div class="pricing_wrapr">
  486. {$dropdownprice['billingcycle']}
  487. {* {if $dropdownprice['save']}<div class="save_text"><span class="badge badge-primary">{$dropdownprice['save']}</span></div>{/if} *}
  488. </div>
  489. </li>
  490. {/foreach}
  491. {/if}
  492. </ul>
  493. </div>
  494. {/if}
  495. {if $ditem["dropdown"][$ditem['Plan']]}
  496. <div class="product_pricing">
  497. {if $block.SbSwitcher}
  498. <div class="pricing_main_default{if $defaultbilling eq "{$dropdownprice['cycle']}"} w-hidden{/if}">
  499. <div class="price">
  500. {if $dropdownprice['hasconfigoptions'] || $dropdownprice['save']}
  501. <span class="regular_pricing">
  502. {if $dropdownprice['hasconfigoptions']}
  503. <span class="small text-muted">ab</span>
  504. {/if}
  505. {if $dropdownprice['save']}
  506. {if $dropdownprice['dollar'] && !$block.DisableBrekdown}
  507. <span class="savecut text-muted">
  508. {$dropdownprice['prefix']}{$dropdownprice['dollar']}.{$dropdownprice['cents']}{$dropdownprice['suffix']}
  509. </span>
  510. {/if}
  511. {* {if $block.SbSwitcher}<span class="badge badge-primary">{$dropdownprice['save']}</span>{/if} *}
  512. {/if}
  513. </span>
  514. {/if}
  515. <span class="cost">
  516. {$dropdownprice['prefix']}
  517. {if $block.DisableBrekdown}
  518. {$dropdownprice['price']}
  519. {else}
  520. {$dropdownprice['monthlydollar']}.{$dropdownprice['monthlycents']}
  521. {/if}
  522. </span>
  523. {if $dropdownprice['suffix']}
  524. <span class="suffix">
  525. {$dropdownprice['suffix']}
  526. </span>
  527. {/if}
  528. </div>
  529. <span class="cycle small text-muted">{if $block.DisableBrekdown}{$dropdownprice.cycle|capitalize}{else}{if $dropdownprice['monthlycycle']}{$dropdownprice['monthlycycle']}{else}{$dropdownprice['cycleTerm']}{/if}{/if}</span>
  530. {if $dropdownprice['setup'] > 0}
  531. <div class="small text-muted">
  532. <span><i class="fal fa-plus"></i></span>
  533. <span>{$dropdownprice['prefix']}</span>
  534. {$dropdownprice['setup']}
  535. <span>{$dropdownprice['suffix']}</span>
  536. {$WLANG.ordersetupfee}
  537. </div>
  538. {/if}
  539. </div>
  540. {/if}
  541. {foreach $ditem["dropdown"][$ditem['Plan']] as $dropdownprice}
  542. <div class="pricing_main {$dropdownprice['cycle']}{if $defaultbilling neq "{$dropdownprice['cycle']}"} w-hidden{/if}" data-ultn-bilcycle="{$dropdownprice['cycle']}">
  543. <div class="price">
  544. {if $dropdownprice['hasconfigoptions'] || $dropdownprice['save']}
  545. <span class="regular_pricing">
  546. {if $dropdownprice['hasconfigoptions']}
  547. <span class="small text-muted">ab</span>
  548. {/if}
  549. {if $dropdownprice['save']}
  550. {if $dropdownprice['dollar'] && !$block.DisableBrekdown}
  551. <span class="savecut text-muted">{$dropdownprice['prefix']}{$dropdownprice['dollar']}.{$dropdownprice['cents']}{$dropdownprice['suffix']}</span>
  552. {/if}
  553. {if $block.SbSwitcher}<span class="badge badge-primary">{$dropdownprice['save']}</span>{/if}
  554. {/if}
  555. </span>
  556. {/if}
  557. <span class="cost">{$dropdownprice['prefix']}{if $block.DisableBrekdown}{$dropdownprice['price']}{else}{$dropdownprice['monthlydollar']}.{$dropdownprice['monthlycents']}{/if}</span>
  558. {if $dropdownprice['suffix']}<span class="suffix">{$dropdownprice['suffix']}</span>{/if}
  559. </div>
  560. <span class="cycle small text-muted">
  561. {if $block.DisableBrekdown}
  562. {$dropdownprice.cycle|capitalize}
  563. {else}
  564. {if $dropdownprice['monthlycycle']}
  565. {$dropdownprice['monthlycycle']}
  566. {else}
  567. {$dropdownprice['cycleTerm']}
  568. {/if}
  569. {/if}
  570. </span>
  571. {if $dropdownprice['setup'] > 0}
  572. <div class="small text-muted">
  573. <span><i class="fal fa-plus"></i></span>
  574. <span>{$dropdownprice['prefix']}</span>
  575. {$dropdownprice['setup']}
  576. <span>{$dropdownprice['suffix']}</span>
  577. {$WLANG.ordersetupfee}
  578. </div>
  579. {/if}
  580. </div>
  581. {/foreach}
  582. </div>
  583. {/if}
  584. </div>
  585. {else}
  586. <div class="product_pricing_single">
  587. {if $block.DisableBrekdown}
  588. {if isset($ditem.dropdown) && is_array($ditem.dropdown)}
  589. {foreach from=$ditem.dropdown item=$dropdown key=$dropdownKey}
  590. {assign var="firstCycle" value=$dropdown|@end}
  591. <div class="price">
  592. {if $firstCycle.hasconfigoptions}
  593. <span class="regular_pricing">
  594. <span class="small text-muted">ab</span>
  595. </span>
  596. {/if}
  597. <span class="cost">
  598. {$firstCycle.prefix}{$firstCycle.price}
  599. </span>
  600. <span class="suffix">
  601. {$firstCycle.suffix}
  602. </spn>
  603. </div>
  604. <div class="cycle small text-muted">
  605. {$firstCycle.cycle|capitalize}
  606. </div>
  607. {/foreach}
  608. {/if}
  609. {else}
  610. {if $ditem["price"] == 'FREE'}
  611. <div class="d-flex align-items-center justify-content-end">
  612. <span class="badge badge-secondary price-free">{$WLANG.orderfree}</span>
  613. </div>
  614. {else}
  615. <div class="price">
  616. {if $ditem["productdetails"]['hasconfigoptions']}
  617. <span class="regular_pricing">
  618. <span class="small text-muted">ab</span>
  619. </span>
  620. {/if}
  621. {assign var="ccurrency" value=$ditem["productdetails"]["price"]["price"]->getCurrency()}
  622. <span class="cost">{$ditem["productdetails"]["price"]['simple']}</span>
  623. {if $ccurrency["suffix"]}<span class="suffix">{$ccurrency["suffix"]}</span>{/if}
  624. </div>
  625. {if $ditem["billingcycle"] != ""}
  626. <div class="cycle small text-muted">{$ditem["billingcycle"]}</div>
  627. {elseif $ditem["productdetails"]["price"]["cycle"] == "onetime"}
  628. <div class="cycle small text-muted">{$WLANG.orderpaymenttermonetime}</div>
  629. {/if}
  630. {if $ditem["productdetails"]["price"]["setupFee"]}
  631. <div class="setup-fee small text-muted"><span><i class="fal fa-plus"></i></span> {$ditem["productdetails"]["price"]["setupFee"]} {$WLANG.ordersetupfee}</div>
  632. {/if}
  633. {/if}
  634. {/if}
  635. </div>
  636. {/if}
  637. <div class="plan-action mt-auto">
  638. <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}">
  639. {if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}{$WLANG.outofstock}{elseif $block.btntext}{$block.btntext}{else}{$WLANG.addtocart}{/if}
  640. </a>
  641. </div>
  642. </div>
  643. </div>
  644. </div>
  645. {if $ditem['Featured']}
  646. {if $block.ststyle == ""}
  647. <div class="sticker-wrapper{if !$block.SbSwitcher} se{/if}">
  648. <div class="sticker">
  649. {if $block.featured}{$block.featured}{else}{$WLANG.featuredProduct}{/if}
  650. </div>
  651. </div>
  652. {/if}
  653. {/if}
  654. </div>
  655. {/foreach}
  656. {/if}
  657. </div>
  658. </div>
  659. </div>
  660. </div>
  661. <script>
  662. jQuery(document).ready(function () {
  663. {if $block.SbSwitcher && !$block.DisableSwitcher}
  664. jQuery("#sec-{$blockkey} .product-billing-switcher-{$blockkey} .dropdown-menu li").click(function(){
  665. var selText = jQuery(this).html();
  666. jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText);
  667. });
  668. jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').on('click', function() {
  669. var newCycle = jQuery(this).data('cycle');
  670. var disBtnBilCycle = jQuery(this).data('cycle');
  671. jQuery('.pricing-{$blockkey} .product_pricing .pricing_main').hide();
  672. jQuery('.pricing-{$blockkey} .' + newCycle).show();
  673. jQuery(this).addClass('active').siblings().removeClass('active');
  674. jQuery('.pricing-{$blockkey} .cros-pricing-table').each(function(index) {
  675. var disBtnUrlFetch = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table').find('.btn-primary').attr('href');
  676. var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
  677. var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv);
  678. var disBtnUrlFinal = disBtnUrlFinal+'&billingcycle='+disBtnBilCycle;
  679. jQuery(this).find('.btn-primary').attr('href',disBtnUrlFinal);
  680. if (jQuery(this).find('.' + newCycle).length <= 0) {
  681. jQuery(this).find('.pricing_main_default').show();
  682. jQuery(this).find('.btn-primary').addClass('disabled');
  683. } else {
  684. jQuery(this).find('.pricing_main_default').hide();
  685. jQuery(this).find('.btn-primary').removeClass('disabled');
  686. }
  687. });
  688. });
  689. jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').first().trigger('click');
  690. {else}
  691. {if !$block.DisableSwitcher}
  692. jQuery(".pricing-{$blockkey} .dropdown-menu li").click(function(){
  693. var selText = jQuery(this).html();
  694. jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="fal fa-angle-down"></span>');
  695. });
  696. jQuery('.pricing-{$blockkey} .billinging_wrapr').click(function(){
  697. var disBtnBilCycle = jQuery(this).attr('data-ultn-bilcycle');
  698. var disBtnUrlFetch = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table').find('.btn-primary').attr('href');
  699. var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
  700. var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv);
  701. var disBtnUrlFinal = disBtnUrlFinal+'&billingcycle='+disBtnBilCycle;
  702. jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table').find('.btn-primary').attr('href',disBtnUrlFinal);
  703. var crosPricingTable = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table');
  704. crosPricingTable.find('.pricing_main').each(function() {
  705. var currentBilCycle = jQuery(this).attr('data-ultn-bilcycle');
  706. if (currentBilCycle === disBtnBilCycle) {
  707. jQuery(this).removeClass('w-hidden');
  708. } else {
  709. jQuery(this).addClass('w-hidden');
  710. }
  711. });
  712. });
  713. {/if}
  714. {/if}
  715. });
  716. </script>
  717. {elseif $block.ptstyle == 'pts_2'}
  718. <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}">
  719. <div class="section__plan_comparison">
  720. <div class="container">
  721. {if $block.caption || $block.sectitle || $block.subtitle}
  722. <div class="sec-description">
  723. {if $block.caption}
  724. <div class="sec-caption">
  725. <span class="rounded">{$block.caption}</span>
  726. </div>
  727. {/if}
  728. {if $block.sectitle}
  729. <h2 class="sec-title">{$block.sectitle}</h2>
  730. {/if}
  731. {if $block.subtitle}
  732. <div class="sec-subtitle">{$block.subtitle}</div>
  733. {/if}
  734. </div>
  735. {/if}
  736. <div class="cros-pricing-container">
  737. {if $block.SbSwitcher && !$block.DisableSwitcher}
  738. {if $block.switcherCycles !== null && $block.switcherCycles|@count > 1}
  739. {assign var="cycles" value=$block.switcherCycles}
  740. {else}
  741. {assign var="cycles" value=$allCycles}
  742. {/if}
  743. {if !$block.bsco}
  744. {assign var="cycles" value=$cycles|@array_reverse}
  745. {/if}
  746. <div class="product-billing-switcher-{$blockkey}">
  747. <div class="btn-group white border d-none d-sm-inline-block" role="group">
  748. {foreach $cycles as $cycle}
  749. <button type="button" class="btn cycle-change" data-cycle="{$cycle}">
  750. <span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
  751. </button>
  752. {/foreach}
  753. </div>
  754. <div class="btn-group white border d-inline-block d-sm-none">
  755. <span class="px-3 py-1 small text-muted border-right">{$WLANG.orderbillingcycle}</span>
  756. <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
  757. <span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycles[0]}}</span>
  758. </button>
  759. <ul class="dropdown-menu">
  760. {foreach $cycles as $cycle}
  761. <li class="dropdown-item cycle-change" data-cycle="{$cycle}">
  762. <span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
  763. </li>
  764. {/foreach}
  765. </ul>
  766. </div>
  767. </div>
  768. {/if}
  769. <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}">
  770. <div class="plans_slider__nav border-bottom">
  771. <div class="swiper-button-next tables_{$blockkey}_next">
  772. <span class="btn__text text-muted">{$WLANG.tablepagesnext}</span>
  773. <span class="btn__icon"><i class="far fa-long-arrow-right"></i></span>
  774. </div>
  775. <div class="swiper-button-prev tables_{$blockkey}_prev">
  776. <span class="btn__icon"><i class="far fa-long-arrow-left"></i></span>
  777. <span class="btn__text text-muted">{$WLANG.tablepagesprevious}</span>
  778. </div>
  779. </div>
  780. <div class="plan plan-{$blockkey}{if $block.centered} centered{/if}">
  781. <div class="plan__column plan__column--empty">
  782. <div class="plan__header d-flex align-items-center{if $block.table[0].Graphic|trim != ""} hg{/if}">
  783. <span class="h4">{$WLANG['store']['ox']['featuresHeadline']}</span>
  784. </div>
  785. <div class="plan__body plan__body--right">
  786. {foreach from=$block.table|@array_column:'featurelist'|@array_count_values item=count key=featurelist}
  787. {$featurelist}
  788. {/foreach}
  789. <div class="plan__cell plan__cell-last{if $block.SbSwitcher || $block.DisableSwitcher} sb{/if}"></div>
  790. </div>
  791. </div>
  792. <div class="swiper-container" id="plans-slider-{$blockkey}">
  793. <div class="swiper-wrapper">
  794. {if count($block.table) > 0}
  795. {foreach from=$block.table item=$ditem key=$kk}
  796. <div class="swiper-slide">
  797. <div class="plan__column">
  798. <div class="plan__header{if $ditem['Graphic']} hg{/if}">
  799. {if $ditem['Graphic']}
  800. <div class="graphics">
  801. {if !$ditem['Graphic']|strstr:"fa-"}
  802. <img src="{$WEB_ROOT}/{$ditem['Graphic']}" alt="{$ditem.title}" class="img-fluid">
  803. {else}
  804. <span class="icon">
  805. <i class="{$ditem['Graphic']}"></i>
  806. </span>
  807. {/if}
  808. </div>
  809. {/if}
  810. <span class="h4">{$ditem['productdetails']['name']}</span>
  811. </div>
  812. <div class="plan__body">
  813. {$ditem['featuresvalues']}
  814. <div class="plan__cell plan__cell-last{if $block.SbSwitcher || $block.DisableSwitcher} sb{/if}">
  815. {if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}
  816. {if $block.bsco}
  817. {foreach $ditem["dropdown"] as $dropdownkey=>$dropdownprice}
  818. {$ditem["dropdown"][$dropdownkey] = $dropdownprice|@array_reverse}
  819. {/foreach}
  820. {/if}
  821. {assign var="dropdownprice" value=$ditem["dropdown"][$ditem['Plan']][0] nocache}
  822. {assign var="defaultbilling" value=$dropdownprice['cycle'] nocache}
  823. {assign var="taxtype" value=$dropdownprice['taxtype'] nocache}
  824. {assign var="hasconfigoptions" value=$dropdownprice['hasconfigoptions'] nocache}
  825. <div class="billing-cycle-pricing float{if $block.descp == "below"} desc_belwo{/if}">
  826. {if !$block.SbSwitcher}
  827. <div class="btn-group mb-2 dropup">
  828. <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  829. <div class="pricing_wrapr">
  830. {$dropdownprice['billingcycle']}
  831. {* {if $dropdownprice['save']}<div class="save_text"><span class="badge badge-primary">{$dropdownprice['save']}</span></div>{/if} *}
  832. </div>
  833. <span class="fal fa-angle-down"></span>
  834. </a>
  835. <ul class="dropdown-menu">
  836. {if $ditem["dropdown"][$ditem['Plan']]}
  837. {foreach $ditem["dropdown"][$ditem['Plan']] as $dropdownprice}
  838. <li class="billinging_wrapr" data-ultn-bilcycle="{$dropdownprice['cycle']}">
  839. <div class="pricing_wrapr">
  840. {$dropdownprice['billingcycle']}
  841. {* {if $dropdownprice['save']}<div class="save_text"><span class="badge badge-primary">{$dropdownprice['save']}</span></div>{/if} *}
  842. </div>
  843. </li>
  844. {/foreach}
  845. {/if}
  846. </ul>
  847. </div>
  848. {/if}
  849. {if $ditem["dropdown"][$ditem['Plan']]}
  850. <div class="product_pricing">
  851. {if $block.SbSwitcher}
  852. <div class="pricing_main_default{if $defaultbilling eq "{$dropdownprice['cycle']}"} w-hidden{/if}">
  853. {if $dropdownprice['hasconfigoptions'] || $dropdownprice['save']}
  854. <div class="regular_pricing">
  855. {if $dropdownprice['hasconfigoptions']}
  856. <span class="small text-muted">ab</span>
  857. {/if}
  858. {if $dropdownprice['save']}
  859. {if $dropdownprice['dollar'] && !$block.DisableBrekdown}
  860. <span class="savecut text-muted">{$dropdownprice['prefix']}{$dropdownprice['dollar']}.{$dropdownprice['cents']}{$dropdownprice['suffix']}</span>
  861. {/if}
  862. {if $block.SbSwitcher}<span class="badge badge-primary">{$dropdownprice['save']}</span>{/if}
  863. {/if}
  864. </div>
  865. {/if}
  866. <div class="price">
  867. <span class="cost">{$dropdownprice['prefix']}{if $block.DisableBrekdown}{$dropdownprice['price']}{else}{$dropdownprice['monthlydollar']}.{$dropdownprice['monthlycents']}{/if}</span>
  868. {if $dropdownprice['suffix']}<span class="suffix">{$dropdownprice['suffix']}</span>{/if}
  869. </div>
  870. <div class="cycle small text-muted">{if $block.DisableBrekdown}{$dropdownprice.cycle|capitalize}{else}{if $dropdownprice['monthlycycle']}{$dropdownprice['monthlycycle']}{else}{$dropdownprice['cycleTerm']}{/if}{/if}</div>
  871. {if $dropdownprice['setup'] > 0}
  872. <div class="small text-muted">
  873. <span><i class="fal fa-plus"></i></span>
  874. <span>{$dropdownprice['prefix']}</span>
  875. {$dropdownprice['setup']}
  876. <span>{$dropdownprice['suffix']}</span>
  877. {$WLANG.ordersetupfee}
  878. </div>
  879. {/if}
  880. </div>
  881. {/if}
  882. {foreach $ditem["dropdown"][$ditem['Plan']] as $dropdownprice}
  883. <div class="pricing_main {$dropdownprice['cycle']}{if $defaultbilling neq "{$dropdownprice['cycle']}"} w-hidden{/if}" data-ultn-bilcycle="{$dropdownprice['cycle']}">
  884. {if $dropdownprice['hasconfigoptions'] || $dropdownprice['save']}
  885. <div class="regular_pricing">
  886. {if $dropdownprice['hasconfigoptions']}
  887. <span class="small text-muted">ab</span>
  888. {/if}
  889. {if $dropdownprice['save']}
  890. {if $dropdownprice['dollar'] && !$block.DisableBrekdown}
  891. <span class="savecut text-muted">{$dropdownprice['prefix']}{$dropdownprice['dollar']}.{$dropdownprice['cents']}{$dropdownprice['suffix']}</span>
  892. {/if}
  893. {if $block.SbSwitcher}<span class="badge badge-primary">{$dropdownprice['save']}</span>{/if}
  894. {/if}
  895. </div>
  896. {/if}
  897. <div class="price">
  898. <span class="cost">{$dropdownprice['prefix']}{if $block.DisableBrekdown}{$dropdownprice['price']}{else}{$dropdownprice['monthlydollar']}.{$dropdownprice['monthlycents']}{/if}</span>
  899. {if $dropdownprice['suffix']}<span class="suffix">{$dropdownprice['suffix']}</span>{/if}
  900. </div>
  901. <div class="cycle small text-muted">{if $block.DisableBrekdown}{$dropdownprice.cycle|capitalize}{else}{if $dropdownprice['monthlycycle']}{$dropdownprice['monthlycycle']}{else}{$dropdownprice['cycleTerm']}{/if}{/if}</div>
  902. {if $dropdownprice['setup'] > 0}
  903. <div class="small text-muted">
  904. <span><i class="fal fa-plus"></i></span>
  905. <span>{$dropdownprice['prefix']}</span>
  906. {$dropdownprice['setup']}
  907. <span>{$dropdownprice['suffix']}</span>
  908. {$WLANG.ordersetupfee}
  909. </div>
  910. {/if}
  911. </div>
  912. {/foreach}
  913. </div>
  914. {/if}
  915. </div>
  916. <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}">
  917. {if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}{$WLANG.outofstock}{elseif $block.btntext}{$block.btntext}{else}{$WLANG.addtocart}{/if}
  918. </a>
  919. {else}
  920. <div class="product_pricing_single d-flex flex-column justify-content-center h-100">
  921. {if $block.DisableBrekdown}
  922. {if isset($ditem.dropdown) && is_array($ditem.dropdown)}
  923. {foreach from=$ditem.dropdown item=$dropdown key=$dropdownKey}
  924. {assign var="firstCycle" value=$dropdown|@end}
  925. {if $firstCycle.hasconfigoptions}
  926. <div class="regular_pricing">
  927. <span class="small text-muted">ab</span>
  928. </div>
  929. {/if}
  930. <div class="price">
  931. <span class="cost">
  932. {$firstCycle.prefix}{$firstCycle.price}
  933. </span>
  934. <span class="suffix">
  935. {$firstCycle.suffix}
  936. </spn>
  937. </div>
  938. <div class="cycle small text-muted">
  939. {$firstCycle.cycle|capitalize}
  940. </div>
  941. {/foreach}
  942. {/if}
  943. {else}
  944. {if $ditem["price"] == 'FREE'}
  945. <span class="badge badge-secondary price-free">{$WLANG.orderfree}</span>
  946. {else}
  947. {if $ditem["productdetails"]['hasconfigoptions']}
  948. <div class="regular_pricing">
  949. <span class="small text-muted">ab</span>
  950. </div>
  951. {/if}
  952. <div class="price">
  953. {assign var="ccurrency" value=$ditem["productdetails"]["price"]["price"]->getCurrency()}
  954. <span class="cost">{$ditem["productdetails"]["price"]['simple']}</span>
  955. {if $ccurrency["suffix"]}<span class="suffix">{$ccurrency["suffix"]}</span>{/if}
  956. </div>
  957. {if $ditem["billingcycle"] != ""}
  958. <div class="cycle small text-muted">{$ditem["billingcycle"]}</div>
  959. {elseif $ditem["productdetails"]["price"]["cycle"] == "onetime"}
  960. <div class="cycle small text-muted">{$WLANG.orderpaymenttermonetime}</div>
  961. {/if}
  962. {if $ditem["productdetails"]["price"]["setupFee"]}
  963. <div class="setup-fee small text-muted"><span><i class="fal fa-plus"></i></span> {$ditem["productdetails"]["price"]["setupFee"]} {$WLANG.ordersetupfee}</div>
  964. {/if}
  965. {/if}
  966. {/if}
  967. <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}">
  968. {if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}{$WLANG.outofstock}{elseif $block.btntext}{$block.btntext}{else}{$WLANG.addtocart}{/if}
  969. </a>
  970. </div>
  971. {/if}
  972. </div>
  973. </div>
  974. {if $ditem['Featured']}
  975. <div class="sticker-wrapper">
  976. <div class="sticker">
  977. {if $block.featured}{$block.featured}{else}{$WLANG.featuredProduct}{/if}
  978. </div>
  979. </div>
  980. {/if}
  981. </div>
  982. </div>
  983. {/foreach}
  984. {/if}
  985. </div>
  986. </div>
  987. </div>
  988. </div>
  989. </div>
  990. </div>
  991. </div>
  992. </div>
  993. <script>
  994. jQuery(document).ready(function () {
  995. var swiper = new Swiper('#plans-slider-{$blockkey}', {
  996. slidesPerView: 1,
  997. navigation: {
  998. nextEl: '.tables_{$blockkey}_next',
  999. prevEl: '.tables_{$blockkey}_prev',
  1000. },
  1001. breakpoints: {
  1002. 0: {
  1003. slidesPerView: 1,
  1004. },
  1005. 768: {
  1006. slidesPerView: 2,
  1007. },
  1008. 992: {
  1009. slidesPerView: {if $block.itemcounts == "2"} 2{else} 3{/if},
  1010. },
  1011. 1200: {
  1012. slidesPerView: {if $block.itemcounts == ""} 3{else} {$block.itemcounts}{/if},
  1013. },
  1014. },
  1015. on: {
  1016. init: function (swiper) {
  1017. toggleSliderNav(swiper);
  1018. },
  1019. slideChange: function (swiper) {
  1020. toggleSliderNav(swiper);
  1021. },
  1022. reachEnd: function (swiper) {
  1023. toggleSliderNav(swiper);
  1024. },
  1025. reachBeginning: function (swiper) {
  1026. toggleSliderNav(swiper);
  1027. },
  1028. resize: function (swiper) {
  1029. toggleSliderNav(swiper);
  1030. }
  1031. }
  1032. });
  1033. function toggleSliderNav(swiper) {
  1034. var nav = document.querySelector('.tables_{$blockkey} .plans_slider__nav');
  1035. if (swiper.isBeginning && swiper.isEnd) {
  1036. nav.style.display = 'none';
  1037. } else {
  1038. nav.style.display = 'flex';
  1039. }
  1040. }
  1041. {if $block.SbSwitcher && !$block.DisableSwitcher}
  1042. jQuery("#sec-{$blockkey} .product-billing-switcher-{$blockkey} .dropdown-menu li").click(function(){
  1043. var selText = jQuery(this).html();
  1044. jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText);
  1045. });
  1046. jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').on('click', function() {
  1047. var newCycle = jQuery(this).data('cycle');
  1048. var disBtnBilCycle = jQuery(this).data('cycle');
  1049. jQuery('.plan-{$blockkey} .pricing_main').hide();
  1050. jQuery('.plan-{$blockkey} .' + newCycle).show();
  1051. jQuery(this).addClass('active').siblings().removeClass('active');
  1052. jQuery('.plan-{$blockkey} .plan__body').each(function(index) {
  1053. var disBtnUrlFetch = jQuery(this).closest('.plan-{$blockkey}').find('.btn-primary').attr('href');
  1054. var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
  1055. var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv);
  1056. var disBtnUrlFinal = disBtnUrlFinal+'&billingcycle='+disBtnBilCycle;
  1057. jQuery(this).find('.btn-primary').attr('href',disBtnUrlFinal);
  1058. if (jQuery(this).find('.' + newCycle).length <= 0) {
  1059. jQuery(this).find('.pricing_main_default').show();
  1060. jQuery(this).find('.btn-primary').addClass('disabled');
  1061. } else {
  1062. jQuery(this).find('.pricing_main_default').hide();
  1063. jQuery(this).find('.btn-primary').removeClass('disabled');
  1064. }
  1065. });
  1066. });
  1067. jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').first().trigger('click');
  1068. {else}
  1069. {if !$block.DisableSwitcher}
  1070. jQuery(".plan-{$blockkey} .dropdown-menu li").click(function(){
  1071. var selText = jQuery(this).html();
  1072. jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="fal fa-angle-down"></span>');
  1073. });
  1074. jQuery('.plan-{$blockkey} .billinging_wrapr').click(function(){
  1075. var disBtnBilCycle = jQuery(this).attr('data-ultn-bilcycle');
  1076. var disBtnUrlFetch = jQuery(this).closest('.plan-{$blockkey} .plan__body').find('.btn-primary').attr('href');
  1077. var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
  1078. var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv);
  1079. var disBtnUrlFinal = disBtnUrlFinal+'&billingcycle='+disBtnBilCycle;
  1080. jQuery(this).closest('.plan-{$blockkey} .plan__body').find('.btn-primary').attr('href',disBtnUrlFinal);
  1081. var crosPricingTable = jQuery(this).closest('.plan-{$blockkey} .plan__body');
  1082. crosPricingTable.find('.pricing_main').each(function() {
  1083. var currentBilCycle = jQuery(this).attr('data-ultn-bilcycle');
  1084. if (currentBilCycle === disBtnBilCycle) {
  1085. jQuery(this).removeClass('w-hidden');
  1086. } else {
  1087. jQuery(this).addClass('w-hidden');
  1088. }
  1089. });
  1090. });
  1091. {/if}
  1092. {/if}
  1093. });
  1094. </script>
  1095. {elseif $block.ptstyle == 'pts_3'}
  1096. <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}">
  1097. <div class="container">
  1098. {if $block.caption || $block.sectitle || $block.subtitle}
  1099. <div class="sec-description">
  1100. {if $block.caption}
  1101. <div class="sec-caption">
  1102. <span class="rounded">{$block.caption}</span>
  1103. </div>
  1104. {/if}
  1105. {if $block.sectitle}
  1106. <h2 class="sec-title">{$block.sectitle}</h2>
  1107. {/if}
  1108. {if $block.subtitle}
  1109. <div class="sec-subtitle">{$block.subtitle}</div>
  1110. {/if}
  1111. </div>
  1112. {/if}
  1113. <div class="cros-pricing-container">
  1114. {if $block.SbSwitcher && !$block.DisableSwitcher}
  1115. {if $block.switcherCycles !== null && $block.switcherCycles|@count > 1}
  1116. {assign var="cycles" value=$block.switcherCycles}
  1117. {else}
  1118. {assign var="cycles" value=$allCycles}
  1119. {/if}
  1120. {if !$block.bsco}
  1121. {assign var="cycles" value=$cycles|@array_reverse}
  1122. {/if}
  1123. <div class="product-billing-switcher-{$blockkey}">
  1124. <div class="btn-group white border d-none d-sm-inline-block" role="group">
  1125. {foreach $cycles as $cycle}
  1126. <button type="button" class="btn cycle-change" data-cycle="{$cycle}">
  1127. <span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
  1128. </button>
  1129. {/foreach}
  1130. </div>
  1131. <div class="btn-group white border d-inline-block d-sm-none">
  1132. <span class="px-3 py-1 small text-muted border-right">{$WLANG.orderbillingcycle}</span>
  1133. <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
  1134. <span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycles[0]}}</span>
  1135. </button>
  1136. <ul class="dropdown-menu">
  1137. {foreach $cycles as $cycle}
  1138. <li class="dropdown-item cycle-change" data-cycle="{$cycle}">
  1139. <span class="btn-text">{lang key={'pricingCycleLong.'|cat:$cycle}}</span>
  1140. </li>
  1141. {/foreach}
  1142. </ul>
  1143. </div>
  1144. </div>
  1145. {/if}
  1146. <div class="pricing_style_2">
  1147. <div class="swiper" id="pricing-tables-{$blockkey}">
  1148. <div class="row row-eq-height{if !$block.DisplayInGrid} flex-nowrap{/if} pricing-slider swiper-wrapper pricing-{$blockkey}">
  1149. {if count($block.table) > 0}
  1150. {foreach from=$block.table item=$ditem key=$kk}
  1151. <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">
  1152. <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}">
  1153. {if $ditem['Graphic']}
  1154. <div class="graphics">
  1155. {if !$ditem['Graphic']|strstr:"fa-"}
  1156. <img src="{$WEB_ROOT}/{$ditem['Graphic']}" alt="{$ditem.title}" class="h-rounded img-fluid">
  1157. {/if}
  1158. <div class="d-flex flex-column p-3{if $block.centered} align-items-center{/if}">
  1159. <div class="h4 mb-2">{$ditem['productdetails']['name']}</div>
  1160. {if $ditem['Featured']}
  1161. {if $block.ststyle}
  1162. <div class="feature-sticker mb-2">
  1163. <span class="st-sm">
  1164. {if $block.featured}{$block.featured}{else}{$WLANG.featuredProduct}{/if}
  1165. </span>
  1166. </div>
  1167. {else}
  1168. <div class="sticker-wrapper">
  1169. <div class="sticker">
  1170. {if $block.featured}{$block.featured}{else}{$WLANG.featuredProduct}{/if}
  1171. </div>
  1172. </div>
  1173. {/if}
  1174. {/if}
  1175. {if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}
  1176. {if $block.bsco}
  1177. {foreach $ditem["dropdown"] as $dropdownkey=>$dropdownprice}
  1178. {$ditem["dropdown"][$dropdownkey] = $dropdownprice|@array_reverse}
  1179. {/foreach}
  1180. {/if}
  1181. {assign var="dropdownprice" value=$ditem["dropdown"][$ditem['Plan']][0] nocache}
  1182. {assign var="defaultbilling" value=$dropdownprice['cycle'] nocache}
  1183. {assign var="taxtype" value=$dropdownprice['taxtype'] nocache}
  1184. {assign var="hasconfigoptions" value=$dropdownprice['hasconfigoptions'] nocache}
  1185. <div class="billing-cycle-pricing mt-0 mb-2 float{if $block.descp == "below"} desc_belwo{/if}">
  1186. {if !$block.SbSwitcher}
  1187. <div class="btn-group dropup">
  1188. <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  1189. <div class="pricing_wrapr">
  1190. {$dropdownprice['billingcycle']}
  1191. {* {if $dropdownprice['save']}<div class="save_text"><span class="badge badge-primary">{$dropdownprice['save']}</span></div>{/if} *}
  1192. </div>
  1193. <span class="fal fa-angle-down"></span>
  1194. </a>
  1195. <ul class="dropdown-menu">
  1196. {if $ditem["dropdown"][$ditem['Plan']]}
  1197. {foreach $ditem["dropdown"][$ditem['Plan']] as $dropdownprice}
  1198. <li class="billinging_wrapr" data-ultn-bilcycle="{$dropdownprice['cycle']}">
  1199. <div class="pricing_wrapr">
  1200. {$dropdownprice['billingcycle']}
  1201. {* {if $dropdownprice['save']}<div class="save_text"><span class="badge badge-primary">{$dropdownprice['save']}</span></div>{/if} *}
  1202. </div>
  1203. </li>
  1204. {/foreach}
  1205. {/if}
  1206. </ul>
  1207. </div>
  1208. {/if}
  1209. </div>
  1210. {/if}
  1211. <div class="d-flex align-items-center mt-auto">
  1212. <div class="mr-auto">
  1213. {if $ditem["dropdown"][$ditem['Plan']]|@count > "1" && !$block.DisableSwitcher}
  1214. <div class="billing-cycle-pricing m-0 float{if $block.descp == "below"} desc_belwo{/if}">
  1215. {if $ditem["dropdown"][$ditem['Plan']]}
  1216. <div class="product_pricing">
  1217. {if $block.SbSwitcher}
  1218. <div class="pricing_main_default{if $defaultbilling eq "{$dropdownprice['cycle']}"} w-hidden{/if}">
  1219. {if $dropdownprice['hasconfigoptions'] || $dropdownprice['save']}
  1220. <div class="regular_pricing">
  1221. {if $dropdownprice['hasconfigoptions']}
  1222. <span class="small text-muted">ab</span>
  1223. {/if}
  1224. {if $dropdownprice['save']}
  1225. {if $dropdownprice['dollar'] && !$block.DisableBrekdown}
  1226. <span class="savecut text-muted">{$dropdownprice['prefix']}{$dropdownprice['dollar']}.{$dropdownprice['cents']}{$dropdownprice['suffix']}</span>
  1227. {/if}
  1228. {if $block.SbSwitcher}<span class="badge badge-primary">{$dropdownprice['save']}</span>{/if}
  1229. {/if}
  1230. </div>
  1231. {/if}
  1232. <div class="price">
  1233. <span class="cost cost-small">{$dropdownprice['prefix']}{if $block.DisableBrekdown}{$dropdownprice['price']}{else}{$dropdownprice['monthlydollar']}.{$dropdownprice['monthlycents']}{/if}</span>
  1234. {if $dropdownprice['suffix']}<span class="suffix">{$dropdownprice['suffix']}</span>{/if}
  1235. </div>
  1236. <div class="cycle small text-muted">{if $block.DisableBrekdown}{$dropdownprice.cycle|capitalize}{else}{if $dropdownprice['monthlycycle']}{$dropdownprice['monthlycycle']}{else}{$dropdownprice['cycleTerm']}{/if}{/if}</div>
  1237. {if $dropdownprice['setup'] > 0}
  1238. <div class="small text-muted">
  1239. <span><i class="fal fa-plus"></i></span>
  1240. <span>{$dropdownprice['prefix']}</span>
  1241. {$dropdownprice['setup']}
  1242. <span>{$dropdownprice['suffix']}</span>
  1243. {$WLANG.ordersetupfee}
  1244. </div>
  1245. {/if}
  1246. </div>
  1247. {/if}
  1248. {foreach $ditem["dropdown"][$ditem['Plan']] as $dropdownprice}
  1249. <div class="pricing_main {$dropdownprice['cycle']}{if $defaultbilling neq "{$dropdownprice['cycle']}"} w-hidden{/if}" data-ultn-bilcycle="{$dropdownprice['cycle']}">
  1250. {if $dropdownprice['hasconfigoptions'] || $dropdownprice['save']}
  1251. <div class="regular_pricing">
  1252. {if $dropdownprice['hasconfigoptions']}
  1253. <span class="small text-muted">ab</span>
  1254. {/if}
  1255. {if $dropdownprice['save']}
  1256. {if $dropdownprice['dollar'] && !$block.DisableBrekdown}
  1257. <span class="savecut text-muted">{$dropdownprice['prefix']}{$dropdownprice['dollar']}.{$dropdownprice['cents']}{$dropdownprice['suffix']}</span>
  1258. {/if}
  1259. {if $block.SbSwitcher}<span class="badge badge-primary">{$dropdownprice['save']}</span>{/if}
  1260. {/if}
  1261. </div>
  1262. {/if}
  1263. <div class="price">
  1264. <span class="cost cost-small">{$dropdownprice['prefix']}{if $block.DisableBrekdown}{$dropdownprice['price']}{else}{$dropdownprice['monthlydollar']}.{$dropdownprice['monthlycents']}{/if}</span>
  1265. {if $dropdownprice['suffix']}<span class="suffix">{$dropdownprice['suffix']}</span>{/if}
  1266. </div>
  1267. <div class="cycle small text-muted">{if $block.DisableBrekdown}{$dropdownprice.cycle|capitalize}{else}{if $dropdownprice['monthlycycle']}{$dropdownprice['monthlycycle']}{else}{$dropdownprice['cycleTerm']}{/if}{/if}</div>
  1268. {if $dropdownprice['setup'] > 0}
  1269. <div class="small text-muted">
  1270. <span><i class="fal fa-plus"></i></span>
  1271. <span>{$dropdownprice['prefix']}</span>
  1272. {$dropdownprice['setup']}
  1273. <span>{$dropdownprice['suffix']}</span>
  1274. {$WLANG.ordersetupfee}
  1275. </div>
  1276. {/if}
  1277. </div>
  1278. {/foreach}
  1279. </div>
  1280. {/if}
  1281. </div>
  1282. {else}
  1283. <div class="product_pricing_single m-0">
  1284. {if $block.DisableBrekdown}
  1285. {if isset($ditem.dropdown) && is_array($ditem.dropdown)}
  1286. {foreach from=$ditem.dropdown item=$dropdown key=$dropdownKey}
  1287. {assign var="firstCycle" value=$dropdown|@end}
  1288. {if $firstCycle.hasconfigoptions}
  1289. <div class="regular_pricing">
  1290. <span class="small text-muted">ab</span>
  1291. </div>
  1292. {/if}
  1293. <div class="price">
  1294. <span class="cost cost-small">
  1295. {$firstCycle.prefix}{$firstCycle.price}
  1296. </span>
  1297. <span class="suffix">
  1298. {$firstCycle.suffix}
  1299. </spn>
  1300. </div>
  1301. <div class="cycle small text-muted">
  1302. {$firstCycle.cycle|capitalize}
  1303. </div>
  1304. {/foreach}
  1305. {/if}
  1306. {else}
  1307. {if $ditem["price"] == 'FREE'}
  1308. <span class="badge badge-secondary price-free">{$WLANG.orderfree}</span>
  1309. {else}
  1310. {if $ditem["productdetails"]['hasconfigoptions']}
  1311. <div class="regular_pricing">
  1312. <span class="small text-muted">ab</span>
  1313. </div>
  1314. {/if}
  1315. <div class="price">
  1316. {assign var="ccurrency" value=$ditem["productdetails"]["price"]["price"]->getCurrency()}
  1317. <span class="cost cost-small">{$ditem["productdetails"]["price"]['simple']}</span>
  1318. {if $ccurrency["suffix"]}<span class="suffix">{$ccurrency["suffix"]}</span>{/if}
  1319. </div>
  1320. {if $ditem["billingcycle"] != ""}
  1321. <div class="cycle small text-muted">{$ditem["billingcycle"]}</div>
  1322. {elseif $ditem["productdetails"]["price"]["cycle"] == "onetime"}
  1323. <div class="cycle small text-muted">{$WLANG.orderpaymenttermonetime}</div>
  1324. {/if}
  1325. {if $ditem["productdetails"]["price"]["setupFee"]}
  1326. <div class="setup-fee small text-muted"><span><i class="fal fa-plus"></i></span> {$ditem["productdetails"]["price"]["setupFee"]} {$WLANG.ordersetupfee}</div>
  1327. {/if}
  1328. {/if}
  1329. {/if}
  1330. </div>
  1331. {/if}
  1332. </div>
  1333. {if $ditem['ProductLink']}
  1334. <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">
  1335. {if $ditem['ProductbtnText']}{$ditem['ProductbtnText']}{else}{$WLANG.learnmore}{/if}
  1336. </a>
  1337. {else}
  1338. <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}">
  1339. {if $ditem['stockControlEnabled'] && !$ditem['quantityInStock']}{$WLANG.outofstock}{elseif $block.btntext}{$block.btntext}{else}{$WLANG.addtocart}{/if}
  1340. </a>
  1341. {/if}
  1342. </div>
  1343. </div>
  1344. </div>
  1345. {else}
  1346. <div class="d-flex align-items-center justify-content-center p-3 h-100">
  1347. <div class="alert alert-danger text-center">
  1348. Must required graphic for this type of product section.
  1349. </div>
  1350. </div>
  1351. {/if}
  1352. </div>
  1353. </div>
  1354. {/foreach}
  1355. {/if}
  1356. </div>
  1357. </div>
  1358. {if !$block.DisplayInGrid}
  1359. {if !$block.slidertype}
  1360. <div class="swiper-pagination pricing-tables_{$blockkey}"></div>
  1361. {else}
  1362. <div class="swiper-button-prev pricing-tables_{$blockkey}_prev">
  1363. <span class="btn_icon_large"><i class="far fa-long-arrow-left"></i></span>
  1364. </div>
  1365. <div class="swiper-button-next pricing-tables_{$blockkey}_next">
  1366. <span class="btn_icon_large"><i class="far fa-long-arrow-right"></i></span>
  1367. </div>
  1368. {/if}
  1369. {/if}
  1370. </div>
  1371. </div>
  1372. </div>
  1373. </div>
  1374. <script>
  1375. jQuery(document).ready(function () {
  1376. {if !$block.DisplayInGrid}
  1377. var swiper = new Swiper('#pricing-tables-{$blockkey}', {
  1378. slidesPerView: 1,
  1379. preventClicks: true,
  1380. slideClass: 'products-slide',
  1381. {if !$block.slidertype}
  1382. pagination: {
  1383. el: '.swiper-pagination.pricing-tables_{$blockkey}',
  1384. clickable: true,
  1385. },
  1386. {else}
  1387. navigation: {
  1388. nextEl: '.pricing-tables_{$blockkey}_next',
  1389. prevEl: '.pricing-tables_{$blockkey}_prev',
  1390. },
  1391. {/if}
  1392. breakpoints: {
  1393. 0: {
  1394. slidesPerView: 1
  1395. },
  1396. 768: {
  1397. slidesPerView: 2
  1398. },
  1399. 992: {
  1400. slidesPerView:{if $block.itemcounts == "2"} 2{else} 3{/if}
  1401. },
  1402. 1200: {
  1403. slidesPerView:{if $block.itemcounts == ""} 3{else} {$block.itemcounts}{/if}
  1404. },
  1405. }
  1406. });
  1407. {/if}
  1408. {if $block.SbSwitcher && !$block.DisableSwitcher}
  1409. jQuery("#sec-{$blockkey} .product-billing-switcher-{$blockkey} .dropdown-menu li").click(function(){
  1410. var selText = jQuery(this).html();
  1411. jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText);
  1412. });
  1413. jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').on('click', function() {
  1414. var newCycle = jQuery(this).data('cycle');
  1415. var disBtnBilCycle = jQuery(this).data('cycle');
  1416. jQuery('.pricing-{$blockkey} .product_pricing .pricing_main').hide();
  1417. jQuery('.pricing-{$blockkey} .' + newCycle).show();
  1418. jQuery(this).addClass('active').siblings().removeClass('active');
  1419. jQuery('.pricing-{$blockkey} .cros-pricing-table').each(function(index) {
  1420. var btnOrder = jQuery(this).find('.btn-order-link');
  1421. if (btnOrder.length) {
  1422. var disBtnUrlFetch = btnOrder.attr('href');
  1423. var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
  1424. var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv) + '&billingcycle=' + disBtnBilCycle;
  1425. btnOrder.attr('href', disBtnUrlFinal);
  1426. }
  1427. if (jQuery(this).find('.' + newCycle).length <= 0) {
  1428. jQuery(this).find('.pricing_main_default').show();
  1429. btnOrder.addClass('disabled');
  1430. } else {
  1431. jQuery(this).find('.pricing_main_default').hide();
  1432. btnOrder.removeClass('disabled');
  1433. }
  1434. });
  1435. });
  1436. jQuery('#sec-{$blockkey} .product-billing-switcher-{$blockkey} .cycle-change').first().trigger('click');
  1437. {else}
  1438. {if !$block.DisableSwitcher}
  1439. jQuery(".pricing-{$blockkey} .dropdown-menu li").click(function(){
  1440. var selText = jQuery(this).html();
  1441. jQuery(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="fal fa-angle-down"></span>');
  1442. });
  1443. jQuery('.pricing-{$blockkey} .billinging_wrapr').click(function(){
  1444. var disBtnBilCycle = jQuery(this).attr('data-ultn-bilcycle');
  1445. var btnOrder = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table').find('.btn-order-link');
  1446. if (btnOrder.length) {
  1447. var disBtnUrlFetch = btnOrder.attr('href');
  1448. var disBtnUrlRemv = disBtnUrlFetch.indexOf('&billingcycle');
  1449. var disBtnUrlFinal = disBtnUrlFetch.substring(0, disBtnUrlRemv) + '&billingcycle=' + disBtnBilCycle;
  1450. btnOrder.attr('href', disBtnUrlFinal);
  1451. }
  1452. var crosPricingTable = jQuery(this).closest('.pricing-{$blockkey} .cros-pricing-table');
  1453. crosPricingTable.find('.pricing_main').each(function() {
  1454. var currentBilCycle = jQuery(this).attr('data-ultn-bilcycle');
  1455. if (currentBilCycle === disBtnBilCycle) {
  1456. jQuery(this).removeClass('w-hidden');
  1457. } else {
  1458. jQuery(this).addClass('w-hidden');
  1459. }
  1460. });
  1461. });
  1462. {/if}
  1463. {/if}
  1464. });
  1465. </script>
  1466. {/if}
  1467. {/if}