products.tpl 81 KB

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