products.tpl 78 KB

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