Keine Beschreibung
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

main.js 42KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451
  1. (function ($) {
  2. "use strict";
  3. /*--
  4. Menu Stick
  5. -----------------------------------*/
  6. var header = $('.sticky-bar');
  7. var win = $(window);
  8. let ele_page = $("body").hasClass("product_pg");
  9. if(ele_page == true){
  10. }
  11. function naChanges(){
  12. $("body.product_pg").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#000");
  13. }
  14. setTimeout(naChanges, 1000);
  15. win.on('scroll', function() {
  16. var scroll = win.scrollTop();
  17. if (scroll < 100) {
  18. header.removeClass('stick');
  19. $(".header-bottom.sticky-bar.stick").removeClass("sticky-bar stick");
  20. let img_src = `./dist/assets/imgs/anwi-logo-2.png`;
  21. $(".logo-menu-wrap").find("a img").attr("src",img_src);
  22. $(".main-menu").find("nav ul li a").addClass("text-white");
  23. debugger;
  24. $("body.product_pg").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#fff");
  25. $('.header-bottom-flex').find('svg path').attr('fill','#fff')
  26. } else {
  27. header.addClass('stick');
  28. debugger;
  29. $(".header-bottom").addClass("sticky-bar stick");
  30. let src = `./dist/assets/imgs/anwi-logo-1.png`;
  31. $(".logo-menu-wrap").find("a img").attr("src",src);
  32. $(".main-menu").find("nav ul li a").removeClass("text-white");
  33. $("body.product_pg").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#000");
  34. $('.header-bottom-flex').find('svg path').attr('fill','#000')
  35. }
  36. });
  37. /*--------------------------------
  38. Slider active 1
  39. -----------------------------------*/
  40. $('.slider-active-1').slick({
  41. slidesToShow: 1,
  42. slidesToScroll: 1,
  43. fade: true,
  44. loop: true,
  45. dots: false,
  46. arrows: true,
  47. prevArrow: '<span class="slider-icon slider-icon-prev"><i class="icofont-simple-left"></i></span>',
  48. nextArrow: '<span class="slider-icon slider-icon-next"><i class="icofont-simple-right"></i></span>',
  49. responsive: [{
  50. breakpoint: 1500,
  51. settings: {
  52. slidesToShow: 1,
  53. slidesToScroll: 1,
  54. }
  55. },
  56. {
  57. breakpoint: 1199,
  58. settings: {
  59. slidesToShow: 1,
  60. slidesToScroll: 1,
  61. }
  62. },
  63. {
  64. breakpoint: 991,
  65. settings: {
  66. slidesToShow: 1,
  67. slidesToScroll: 1,
  68. }
  69. },
  70. {
  71. breakpoint: 767,
  72. settings: {
  73. autoplay: false,
  74. slidesToShow: 1,
  75. slidesToScroll: 1,
  76. }
  77. }
  78. ]
  79. });
  80. /*--------------------------------
  81. Slider active 2
  82. -----------------------------------*/
  83. $('.slider-active-2').slick({
  84. slidesToShow: 1,
  85. slidesToScroll: 1,
  86. fade: true,
  87. loop: true,
  88. dots: true,
  89. arrows: false,
  90. prevArrow: '<span class="slider-icon slider-icon-prev"><i class="icofont-simple-left"></i></span>',
  91. nextArrow: '<span class="slider-icon slider-icon-next"><i class="icofont-simple-right"></i></span>',
  92. responsive: [{
  93. breakpoint: 1500,
  94. settings: {
  95. slidesToShow: 1,
  96. slidesToScroll: 1,
  97. }
  98. },
  99. {
  100. breakpoint: 1199,
  101. settings: {
  102. slidesToShow: 1,
  103. slidesToScroll: 1,
  104. }
  105. },
  106. {
  107. breakpoint: 991,
  108. settings: {
  109. slidesToShow: 1,
  110. slidesToScroll: 1,
  111. }
  112. },
  113. {
  114. breakpoint: 767,
  115. settings: {
  116. autoplay: false,
  117. slidesToShow: 1,
  118. slidesToScroll: 1,
  119. }
  120. }
  121. ]
  122. });
  123. /*--
  124. Slider active 3
  125. -----------------------------------*/
  126. $('.slider-active-3').slick({
  127. arrows: false,
  128. infinite: true,
  129. slidesToShow: 1,
  130. dots: true,
  131. fade: true,
  132. autoplay: false,
  133. autoplaySpeed: 5000,
  134. customPaging : function(slider, i) {
  135. var thumb = $(slider.$slides[i]).data('thumb');
  136. return '<button class="overlay"><img src="'+thumb+'"></button>';
  137. },
  138. responsive: [
  139. {
  140. breakpoint: 767,
  141. settings: {
  142. dots: true,
  143. autoplay: false,
  144. autoplaySpeed: 5000,
  145. }
  146. }
  147. ]
  148. });
  149. /*--------------------------------
  150. slider active 4
  151. -----------------------------------*/
  152. $('.slider-active-4').slick({
  153. slidesToShow: 1,
  154. slidesToScroll: 1,
  155. fade: true,
  156. loop: true,
  157. dots: true,
  158. arrows: false,
  159. prevArrow: '<span class="slider-icon slider-icon-prev"><i class="icofont-simple-left"></i></span>',
  160. nextArrow: '<span class="slider-icon slider-icon-next"><i class="icofont-simple-right"></i></span>',
  161. responsive: [{
  162. breakpoint: 1500,
  163. settings: {
  164. slidesToShow: 1,
  165. slidesToScroll: 1,
  166. }
  167. },
  168. {
  169. breakpoint: 1199,
  170. settings: {
  171. slidesToShow: 1,
  172. slidesToScroll: 1,
  173. }
  174. },
  175. {
  176. breakpoint: 991,
  177. settings: {
  178. slidesToShow: 1,
  179. slidesToScroll: 1,
  180. }
  181. },
  182. {
  183. breakpoint: 767,
  184. settings: {
  185. autoplay: false,
  186. slidesToShow: 1,
  187. slidesToScroll: 1,
  188. }
  189. }
  190. ]
  191. });
  192. /*--------------------------------
  193. Slider active 5
  194. -----------------------------------*/
  195. $('.slider-active-5').slick({
  196. slidesToShow: 1,
  197. slidesToScroll: 1,
  198. fade: true,
  199. loop: true,
  200. dots: true,
  201. arrows: false,
  202. prevArrow: '<span class="slider-icon slider-icon-prev"><i class="icofont-simple-left"></i></span>',
  203. nextArrow: '<span class="slider-icon slider-icon-next"><i class="icofont-simple-right"></i></span>',
  204. });
  205. /*--------------------------------
  206. Product slider active 1
  207. -----------------------------------*/
  208. $('.product-slider-active-1').slick({
  209. slidesToShow: 3,
  210. slidesToScroll: 1,
  211. loop: true,
  212. dots: false,
  213. arrows: false,
  214. responsive: [{
  215. breakpoint: 1500,
  216. settings: {
  217. slidesToShow: 3,
  218. slidesToScroll: 1,
  219. }
  220. },
  221. {
  222. breakpoint: 1199,
  223. settings: {
  224. slidesToShow: 3,
  225. slidesToScroll: 1,
  226. }
  227. },
  228. {
  229. breakpoint: 991,
  230. settings: {
  231. slidesToShow: 2,
  232. slidesToScroll: 1,
  233. }
  234. },
  235. {
  236. breakpoint: 767,
  237. settings: {
  238. autoplay: false,
  239. slidesToShow: 2,
  240. slidesToScroll: 1,
  241. }
  242. },
  243. {
  244. breakpoint: 575,
  245. settings: {
  246. autoplay: false,
  247. slidesToShow: 1,
  248. slidesToScroll: 1,
  249. }
  250. }
  251. ]
  252. });
  253. /*--------------------------------
  254. Product slider active 2
  255. -----------------------------------*/
  256. $('.product-slider-active-2').slick({
  257. slidesToShow: 6,
  258. slidesToScroll: 1,
  259. loop: true,
  260. dots: false,
  261. arrows: false,
  262. responsive: [{
  263. breakpoint: 1500,
  264. settings: {
  265. slidesToShow: 6,
  266. slidesToScroll: 1,
  267. }
  268. },
  269. {
  270. breakpoint: 1199,
  271. settings: {
  272. slidesToShow: 4,
  273. slidesToScroll: 1,
  274. }
  275. },
  276. {
  277. breakpoint: 991,
  278. settings: {
  279. slidesToShow: 3,
  280. slidesToScroll: 1,
  281. }
  282. },
  283. {
  284. breakpoint: 767,
  285. settings: {
  286. autoplay: false,
  287. slidesToShow: 2,
  288. slidesToScroll: 1,
  289. }
  290. },
  291. {
  292. breakpoint: 575,
  293. settings: {
  294. autoplay: false,
  295. slidesToShow: 1,
  296. slidesToScroll: 1,
  297. }
  298. }
  299. ]
  300. });
  301. /*--------------------------------
  302. Product slider active 3
  303. -----------------------------------*/
  304. $('.product-slider-active-3').slick({
  305. slidesToShow: 2,
  306. slidesToScroll: 1,
  307. loop: true,
  308. dots: false,
  309. arrows: false,
  310. responsive: [{
  311. breakpoint: 1500,
  312. settings: {
  313. slidesToShow: 2,
  314. slidesToScroll: 1,
  315. }
  316. },
  317. {
  318. breakpoint: 1199,
  319. settings: {
  320. slidesToShow: 1,
  321. slidesToScroll: 1,
  322. }
  323. },
  324. {
  325. breakpoint: 991,
  326. settings: {
  327. slidesToShow: 1,
  328. slidesToScroll: 1,
  329. }
  330. },
  331. {
  332. breakpoint: 767,
  333. settings: {
  334. autoplay: false,
  335. slidesToShow: 1,
  336. slidesToScroll: 1,
  337. }
  338. },
  339. {
  340. breakpoint: 575,
  341. settings: {
  342. autoplay: false,
  343. slidesToShow: 1,
  344. slidesToScroll: 1,
  345. }
  346. }
  347. ]
  348. });
  349. /*--------------------------------
  350. Product slider active 4
  351. -----------------------------------*/
  352. $('.product-slider-active-4').slick({
  353. slidesToShow: 4,
  354. slidesToScroll: 1,
  355. loop: true,
  356. dots: false,
  357. arrows: false,
  358. responsive: [{
  359. breakpoint: 1500,
  360. settings: {
  361. slidesToShow: 4,
  362. slidesToScroll: 1,
  363. }
  364. },
  365. {
  366. breakpoint: 1199,
  367. settings: {
  368. slidesToShow: 3,
  369. slidesToScroll: 1,
  370. }
  371. },
  372. {
  373. breakpoint: 991,
  374. settings: {
  375. slidesToShow: 2,
  376. slidesToScroll: 1,
  377. }
  378. },
  379. {
  380. breakpoint: 767,
  381. settings: {
  382. autoplay: false,
  383. slidesToShow: 2,
  384. slidesToScroll: 1,
  385. }
  386. },
  387. {
  388. breakpoint: 575,
  389. settings: {
  390. autoplay: false,
  391. slidesToShow: 1,
  392. slidesToScroll: 1,
  393. }
  394. }
  395. ]
  396. });
  397. /*--------------------------------
  398. Brand logo active
  399. -----------------------------------*/
  400. $('.brand-logo-active , .brand-logo-active-2').slick({
  401. slidesToShow: 6,
  402. slidesToScroll: 1,
  403. loop: true,
  404. dots: false,
  405. arrows: false,
  406. responsive: [{
  407. breakpoint: 1500,
  408. settings: {
  409. slidesToShow: 6,
  410. slidesToScroll: 1,
  411. }
  412. },
  413. {
  414. breakpoint: 1199,
  415. settings: {
  416. slidesToShow: 5,
  417. slidesToScroll: 1,
  418. }
  419. },
  420. {
  421. breakpoint: 991,
  422. settings: {
  423. slidesToShow: 4,
  424. slidesToScroll: 1,
  425. }
  426. },
  427. {
  428. breakpoint: 767,
  429. settings: {
  430. autoplay: false,
  431. slidesToShow: 3,
  432. slidesToScroll: 1,
  433. }
  434. },
  435. {
  436. breakpoint: 575,
  437. settings: {
  438. autoplay: false,
  439. slidesToShow: 2,
  440. slidesToScroll: 1,
  441. }
  442. }
  443. ]
  444. });
  445. /*--------------------------------
  446. Brand logo active 3
  447. -----------------------------------*/
  448. $('.brand-logo-active-3').slick({
  449. slidesToShow: 6,
  450. slidesToScroll: 1,
  451. loop: true,
  452. dots: true,
  453. arrows: false,
  454. responsive: [{
  455. breakpoint: 1500,
  456. settings: {
  457. slidesToShow: 6,
  458. slidesToScroll: 1,
  459. }
  460. },
  461. {
  462. breakpoint: 1199,
  463. settings: {
  464. slidesToShow: 5,
  465. slidesToScroll: 1,
  466. }
  467. },
  468. {
  469. breakpoint: 991,
  470. settings: {
  471. slidesToShow: 4,
  472. slidesToScroll: 1,
  473. }
  474. },
  475. {
  476. breakpoint: 767,
  477. settings: {
  478. autoplay: false,
  479. slidesToShow: 3,
  480. slidesToScroll: 1,
  481. }
  482. },
  483. {
  484. breakpoint: 575,
  485. settings: {
  486. autoplay: false,
  487. slidesToShow: 2,
  488. slidesToScroll: 1,
  489. }
  490. }
  491. ]
  492. });
  493. /*---------------------
  494. Countdown 1
  495. --------------------- */
  496. $('.timer-1 [data-countdown]').each(function() {
  497. var $this = $(this),
  498. finalDate = $(this).data('countdown');
  499. $this.countdown(finalDate, function(event) {
  500. $this.html(event.strftime('<span class="cdown day"> <span>%-D </span><p>Days</p></span> <span class="cdown hour"> <span> %-H</span> <p>Hours</p></span> <span class="cdown minutes"><span>%M</span> <p>Minutes</p> </span>'));
  501. });
  502. });
  503. $('.timer-2 [data-countdown]').each(function() {
  504. var $this = $(this),
  505. finalDate = $(this).data('countdown');
  506. $this.countdown(finalDate, function(event) {
  507. $this.html(event.strftime('<span class="cdown day"> <span>%-D </span><p>Day</p></span> <span class="cdown hour"> <span> %-H</span> <p>Hour</p></span> <span class="cdown minutes"><span>%M</span> <p>Minute</p> </span> <span class="cdown second"><span>%S</span> <p>Second</p> </span>'));
  508. });
  509. });
  510. $('.timer-3 [data-countdown]').each(function() {
  511. var $this = $(this),
  512. finalDate = $(this).data('countdown');
  513. $this.countdown(finalDate, function(event) {
  514. $this.html(event.strftime('<span class="cdown hour"> <span> %-H</span> <p>Hour</p></span> <span class="cdown minutes"><span>%M</span> <p>Minute</p> </span> <span class="cdown second"><span>%S</span> <p>Second</p> </span>'));
  515. });
  516. });
  517. /*---------------------
  518. svg img color
  519. --------------------- */
  520. // Elements to inject
  521. var mySVGsToInject = document.querySelectorAll('img.inject-me');
  522. // Do the injection
  523. SVGInjector(mySVGsToInject);
  524. /*------ Wow Active ----*/
  525. new WOW().init();
  526. /*------------
  527. ScrollUp
  528. ------------------ */
  529. // $.scrollUp({
  530. // scrollText: '<i class="icofont-arrow-up"></i>',
  531. // easingType: 'linear',
  532. // scrollSpeed: 900,
  533. // animation: 'fade'
  534. // });
  535. /*----------------------------
  536. Cart Plus Minus Button
  537. ------------------------------ */
  538. var CartPlusMinus = $('.cart-plus-minus');
  539. CartPlusMinus.prepend('<div class="dec qtybutton">-</div>');
  540. CartPlusMinus.append('<div class="inc qtybutton">+</div>');
  541. $(".qtybutton").on("click", function() {
  542. var $button = $(this);
  543. var oldValue = $button.parent().find("input").val();
  544. if ($button.text() === "+") {
  545. var newVal = parseFloat(oldValue) + 1;
  546. } else {
  547. // Don't allow decrementing below zero
  548. if (oldValue > 0) {
  549. var newVal = parseFloat(oldValue) - 1;
  550. } else {
  551. newVal = 1;
  552. }
  553. }
  554. $button.parent().find("input").val(newVal);
  555. });
  556. /*------- Color active -----*/
  557. $('.pro-details-color-content').on('click', 'a', function(e){
  558. e.preventDefault();
  559. $(this).addClass('active').parent().siblings().children('a').removeClass('active');
  560. });
  561. /*--------------------------------
  562. Cart active
  563. -----------------------------------*/
  564. if ($('.pro-details-action').length) {
  565. var $body = $('body'),
  566. $cartWrap = $('.pro-details-action'),
  567. $cartContent = $cartWrap.find('.product-dec-social');
  568. $cartWrap.on('click', '.social', function(e) {
  569. e.preventDefault();
  570. var $this = $(this);
  571. if (!$this.parent().hasClass('show')) {
  572. $this.siblings('.product-dec-social').addClass('show').parent().addClass('show');
  573. } else {
  574. $this.siblings('.product-dec-social').removeClass('show').parent().removeClass('show');
  575. }
  576. });
  577. /*Close When Click Outside*/
  578. $body.on('click', function(e) {
  579. var $target = e.target;
  580. if (!$($target).is('.pro-details-action') && !$($target).parents().is('.pro-details-action') && $cartWrap.hasClass('show')) {
  581. $cartWrap.removeClass('show');
  582. $cartContent.removeClass('show');
  583. }
  584. });
  585. }
  586. /* Language-dropdown */
  587. $(".language-dropdown-active").on("click", function(e) {
  588. e.preventDefault();
  589. $(this).parent().find('.language-dropdown').slideToggle('medium');
  590. })
  591. /* NiceSelect */
  592. $('.nice-select').niceSelect();
  593. /*--------------------------------
  594. Testimonial active
  595. -----------------------------------*/
  596. $('.testimonial-active , .testimonial-active-2').slick({
  597. slidesToShow: 1,
  598. slidesToScroll: 1,
  599. loop: true,
  600. dots: false,
  601. arrows: false,
  602. responsive: [{
  603. breakpoint: 1500,
  604. settings: {
  605. slidesToShow: 1,
  606. slidesToScroll: 1,
  607. }
  608. },
  609. {
  610. breakpoint: 1199,
  611. settings: {
  612. slidesToShow: 1,
  613. slidesToScroll: 1,
  614. }
  615. },
  616. {
  617. breakpoint: 991,
  618. settings: {
  619. slidesToShow: 1,
  620. slidesToScroll: 1,
  621. }
  622. },
  623. {
  624. breakpoint: 767,
  625. settings: {
  626. autoplay: false,
  627. slidesToShow: 1,
  628. slidesToScroll: 1,
  629. }
  630. },
  631. {
  632. breakpoint: 575,
  633. settings: {
  634. autoplay: false,
  635. slidesToShow: 1,
  636. slidesToScroll: 1,
  637. }
  638. }
  639. ]
  640. });
  641. /*====== SidebarCart ======*/
  642. function miniCart() {
  643. var navbarTrigger = $('.cart-active'),
  644. endTrigger = $('.cart-close'),
  645. container = $('.sidebar-cart-active'),
  646. wrapper2 = $('.main-wrapper');
  647. wrapper2.prepend('<div class="body-overlay"></div>');
  648. navbarTrigger.on('click', function(e) {
  649. e.preventDefault();
  650. container.addClass('inside');
  651. wrapper2.addClass('overlay-active');
  652. });
  653. endTrigger.on('click', function() {
  654. container.removeClass('inside');
  655. wrapper2.removeClass('overlay-active');
  656. });
  657. $('.body-overlay').on('click', function() {
  658. container.removeClass('inside');
  659. wrapper2.removeClass('overlay-active');
  660. });
  661. };
  662. miniCart();
  663. /*-------------------------------
  664. Header Search Toggle
  665. -----------------------------------*/
  666. var searchToggle = $('.search-toggle');
  667. searchToggle.on('click', function(e){
  668. e.preventDefault();
  669. if($(this).hasClass('open')){
  670. $(this).removeClass('open');
  671. $(this).siblings('.search-wrap-3').removeClass('open');
  672. }else{
  673. $(this).addClass('open');
  674. $(this).siblings('.search-wrap-3').addClass('open');
  675. }
  676. })
  677. /*====== Sidebar Active ======*/
  678. function sidebarActive() {
  679. var navbarTrigger = $('.sidebar-active'),
  680. endTrigger = $('.sidebar-close'),
  681. container = $('.clickalbe-sidebar-wrapper-active'),
  682. wrapper3 = $('.main-wrapper-2');
  683. wrapper3.prepend('<div class="body-overlay-2"></div>');
  684. navbarTrigger.on('click', function(e) {
  685. e.preventDefault();
  686. container.addClass('sidebar-visible');
  687. wrapper3.addClass('overlay-active-2');
  688. });
  689. endTrigger.on('click', function() {
  690. container.removeClass('sidebar-visible');
  691. wrapper3.removeClass('overlay-active-2');
  692. });
  693. $('.body-overlay-2').on('click', function() {
  694. container.removeClass('sidebar-visible');
  695. wrapper3.removeClass('overlay-active-2');
  696. });
  697. };
  698. sidebarActive();
  699. /*====== clickable Main Menu active ======*/
  700. var $clickableMainMenu = $('.clickable-mainmenu-wrap'),
  701. $clickableSubMenu = $clickableMainMenu.find('.sub-menu-2');
  702. /*Add Toggle Button in Off Canvas Sub Menu*/
  703. $clickableSubMenu.siblings('a').append('<span class="menu-expand"><i class="fa-solid fa-plus"></i></span>');
  704. /*Close Off Canvas Sub Menu*/
  705. $clickableSubMenu.slideUp();
  706. /*Category Sub Menu Toggle*/
  707. $clickableMainMenu.on('click', 'li a, li .menu-expand', function(e) {
  708. var $this = $(this);
  709. if ($this.parent('li').hasClass('has-sub-menu') || ($this.attr('href') === '#' || $this.hasClass('menu-expand'))) {
  710. e.preventDefault();
  711. if ($this.siblings('ul:visible').length) {
  712. $this.parent('li').removeClass('active').children('ul').slideUp().siblings('a').find('.menu-expand svg').removeClass('fa-minus').addClass('fa-plus');
  713. $this.parent('li').siblings('li').removeClass('active').find('ul:visible').slideUp().siblings('a').find('.menu-expand isvg').removeClass('fa-minus').addClass(' fa-plus ');
  714. } else {
  715. $this.parent('li').addClass('active').children('ul').slideDown().siblings('a').find('.menu-expand svg').removeClass(' fa-plus ').addClass('fa-minus');
  716. $this.parent('li').siblings('li').removeClass('active').find('ul:visible').slideUp().siblings('a').find('.menu-expand svg').removeClass('fa-minus').addClass(' fa-plus ');
  717. }
  718. }
  719. });
  720. /*====== Sidebar menu Active ======*/
  721. function mobileMenuActive() {
  722. var navbarTrigger = $('.mobile-menu-button-active'),
  723. endTrigger = $('.sidebar-close'),
  724. container = $('.mobile-menu-active'),
  725. wrapper4 = $('.main-wrapper-3');
  726. wrapper4.prepend('<div class="body-overlay-3"></div>');
  727. navbarTrigger.on('click', function(e) {
  728. e.preventDefault();
  729. container.addClass('sidebar-visible');
  730. wrapper4.addClass('overlay-active-3');
  731. });
  732. endTrigger.on('click', function() {
  733. container.removeClass('sidebar-visible');
  734. wrapper4.removeClass('overlay-active-3');
  735. });
  736. $('.body-overlay-3').on('click', function() {
  737. container.removeClass('sidebar-visible');
  738. wrapper4.removeClass('overlay-active-3');
  739. });
  740. };
  741. mobileMenuActive();
  742. /*--- Language currency active ----*/
  743. $('.mobile-language-active').on('click', function(e) {
  744. e.preventDefault();
  745. $('.lang-dropdown-active').slideToggle(900);
  746. });
  747. /*------------------------------------
  748. Testimonial img slider active
  749. -----------------------------------*/
  750. $('.testimonial-img-slider-active').slick({
  751. slidesToShow: 1,
  752. slidesToScroll: 1,
  753. arrows: false,
  754. draggable: false,
  755. fade: false,
  756. asNavFor: '.testimonial-active-3',
  757. });
  758. /*--------------------------------
  759. Testimonial active 3
  760. -----------------------------------*/
  761. $('.testimonial-active-3').slick({
  762. slidesToShow: 1,
  763. slidesToScroll: 1,
  764. asNavFor: '.testimonial-img-slider-active , .testimonial-img-slider-active-3',
  765. dots: true,
  766. focusOnSelect: true,
  767. fade: true,
  768. arrows: false
  769. });
  770. /*----------------------------------------------------------
  771. Testimonial img slider active 3 ( home mega fashion )
  772. --------------------------------------------------------------*/
  773. $('.testimonial-img-slider-active-3').on('init afterChange',function(){
  774. const titleImg = document.querySelector('.testimonial-next-img img');
  775. const activeSlide = document.querySelector('.testimonial-img-slider.slick-current');
  776. titleImg.src = activeSlide.nextSibling.querySelector('img').src;
  777. });
  778. $('.testimonial-img-slider-active-3').slick({
  779. slidesToShow: 1,
  780. slidesToScroll: 1,
  781. arrows: false,
  782. draggable: false,
  783. fade: false,
  784. asNavFor: '.testimonial-active-3'
  785. });
  786. // Isotope active
  787. // $('.grid').imagesLoaded(function() {
  788. // // init Isotope
  789. // var $grid = $('.grid').isotope({
  790. // itemSelector: '.grid-item',
  791. // percentPosition: true,
  792. // layoutMode: 'masonry',
  793. // masonry: {
  794. // // use outer width of grid-sizer for columnWidth
  795. // columnWidth: '.grid-item',
  796. // }
  797. // });
  798. // });
  799. /*--------------------------
  800. Isotope active
  801. ---------------------------- */
  802. // $('.grid-2').imagesLoaded(function() {
  803. // // init Isotope
  804. // $('.grid-2').isotope({
  805. // itemSelector: '.grid-item-2',
  806. // percentPosition: true,
  807. // layoutMode: 'masonry',
  808. // masonry: {
  809. // // use outer width of grid-sizer for columnWidth
  810. // columnWidth: '.grid-sizer',
  811. // }
  812. // });
  813. // });
  814. /*--------------------------
  815. Isotope active
  816. ---------------------------- */
  817. // $('.grid-3').imagesLoaded(function() {
  818. // // init Isotope
  819. // $('.grid-3').isotope({
  820. // itemSelector: '.grid-item-3',
  821. // percentPosition: true,
  822. // layoutMode: 'masonry',
  823. // masonry: {
  824. // // use outer width of grid-sizer for columnWidth
  825. // columnWidth: 1,
  826. // }
  827. // });
  828. // });
  829. /*------------------------------------
  830. testimonial img slider active 2
  831. --------------------------------------*/
  832. $('.testimonial-img-slider-active-2').slick({
  833. slidesToShow: 5,
  834. slidesToScroll: 1,
  835. arrows: false,
  836. dots: false,
  837. focusOnSelect: true,
  838. draggable: false,
  839. fade: false,
  840. asNavFor: '.testimonial-active-4',
  841. responsive: [
  842. {
  843. breakpoint: 1199,
  844. settings: {
  845. slidesToShow: 4,
  846. }
  847. },
  848. {
  849. breakpoint: 991,
  850. settings: {
  851. slidesToShow: 5,
  852. }
  853. },
  854. {
  855. breakpoint: 767,
  856. settings: {
  857. slidesToShow: 3,
  858. }
  859. },
  860. {
  861. breakpoint: 575,
  862. settings: {
  863. slidesToShow: 2,
  864. }
  865. }
  866. ]
  867. });
  868. /*--------------------------------
  869. Testimonial active 4
  870. -----------------------------------*/
  871. $('.testimonial-active-4').slick({
  872. slidesToShow: 1,
  873. slidesToScroll: 1,
  874. asNavFor: '.testimonial-img-slider-active-2',
  875. dots: false,
  876. focusOnSelect: true,
  877. fade: true,
  878. arrows: false
  879. });
  880. /*--------------------------------
  881. Testimonial active 5
  882. -----------------------------------*/
  883. $('.testimonial-active-5').slick({
  884. slidesToShow: 1,
  885. slidesToScroll: 1,
  886. dots: false,
  887. fade: false,
  888. arrows: false,
  889. responsive: [{
  890. breakpoint: 1500,
  891. settings: {
  892. slidesToShow: 1,
  893. slidesToScroll: 1,
  894. }
  895. },
  896. {
  897. breakpoint: 1199,
  898. settings: {
  899. slidesToShow: 1,
  900. slidesToScroll: 1,
  901. }
  902. },
  903. {
  904. breakpoint: 991,
  905. settings: {
  906. slidesToShow: 1,
  907. slidesToScroll: 1,
  908. }
  909. },
  910. {
  911. breakpoint: 767,
  912. settings: {
  913. autoplay: true,
  914. slidesToShow: 1,
  915. slidesToScroll: 1,
  916. }
  917. }
  918. ]
  919. });
  920. /*--------------------------------
  921. Categori slider active
  922. -----------------------------------*/
  923. $('.categori-slider-active').slick({
  924. slidesToShow: 6,
  925. slidesToScroll: 1,
  926. dots: false,
  927. fade: false,
  928. arrows: false,
  929. responsive: [{
  930. breakpoint: 1500,
  931. settings: {
  932. slidesToShow: 6,
  933. slidesToScroll: 1,
  934. }
  935. },
  936. {
  937. breakpoint: 1199,
  938. settings: {
  939. slidesToShow: 6,
  940. slidesToScroll: 1,
  941. }
  942. },
  943. {
  944. breakpoint: 991,
  945. settings: {
  946. slidesToShow: 4,
  947. slidesToScroll: 1,
  948. }
  949. },
  950. {
  951. breakpoint: 767,
  952. settings: {
  953. autoplay: true,
  954. slidesToShow: 3,
  955. slidesToScroll: 1,
  956. }
  957. },
  958. {
  959. breakpoint: 575,
  960. settings: {
  961. autoplay: true,
  962. slidesToShow: 2,
  963. slidesToScroll: 1,
  964. }
  965. }
  966. ]
  967. });
  968. /*--------------------------------
  969. Testimonial active 6
  970. -----------------------------------*/
  971. $('.testimonial-active-6').slick({
  972. slidesToShow: 2,
  973. slidesToScroll: 1,
  974. dots: true,
  975. fade: false,
  976. arrows: false,
  977. responsive: [{
  978. breakpoint: 1500,
  979. settings: {
  980. slidesToShow: 2,
  981. slidesToScroll: 1,
  982. }
  983. },
  984. {
  985. breakpoint: 1199,
  986. settings: {
  987. slidesToShow: 2,
  988. slidesToScroll: 1,
  989. }
  990. },
  991. {
  992. breakpoint: 991,
  993. settings: {
  994. slidesToShow: 1,
  995. slidesToScroll: 1,
  996. }
  997. },
  998. {
  999. breakpoint: 767,
  1000. settings: {
  1001. autoplay: true,
  1002. slidesToShow: 1,
  1003. slidesToScroll: 1,
  1004. }
  1005. }
  1006. ]
  1007. });
  1008. /*--------------------------------
  1009. Product img slider active
  1010. -----------------------------------*/
  1011. $('.product-img-slider-active').slick({
  1012. slidesToShow: 1,
  1013. slidesToScroll: 1,
  1014. dots: true,
  1015. fade: false,
  1016. arrows: false,
  1017. });
  1018. /*--------------------------------
  1019. Testimonial active 7
  1020. -----------------------------------*/
  1021. $('.testimonial-active-7').slick({
  1022. slidesToShow: 1,
  1023. slidesToScroll: 1,
  1024. dots: false,
  1025. fade: false,
  1026. arrows: false,
  1027. });
  1028. /*--------------------------------
  1029. Product details 3 img slider
  1030. -----------------------------------*/
  1031. $('.product-details-3-img-slider').slick({
  1032. slidesToShow: 1,
  1033. slidesToScroll: 1,
  1034. dots: true,
  1035. loop: true,
  1036. fade: false,
  1037. arrows: false,
  1038. });
  1039. /*--------------------------------
  1040. Product details 3 img slider 2
  1041. -----------------------------------*/
  1042. $('.product-details-3-img-slider-2').slick({
  1043. slidesToShow: 1,
  1044. slidesToScroll: 1,
  1045. dots: true,
  1046. loop: true,
  1047. fade: false,
  1048. arrows: false,
  1049. });
  1050. /*====== SidebarSearch ======*/
  1051. function sidebarSearch() {
  1052. var searchTrigger = $('.search-active'),
  1053. endTriggersearch = $('.megashop-search-close'),
  1054. container = $('.main-search-active');
  1055. searchTrigger.on('click', function(e) {
  1056. e.preventDefault();
  1057. container.addClass('search-visible');
  1058. });
  1059. endTriggersearch.on('click', function() {
  1060. container.removeClass('search-visible');
  1061. });
  1062. };
  1063. sidebarSearch();
  1064. /*---------------------
  1065. Price range
  1066. --------------------- */
  1067. // var sliderrange = $('#slider-range');
  1068. // var amountprice = $('#amount');
  1069. // $(function() {
  1070. // sliderrange.slider({
  1071. // range: true,
  1072. // min: 16,
  1073. // max: 400,
  1074. // values: [0, 300],
  1075. // slide: function(event, ui) {
  1076. // amountprice.val("$" + ui.values[0] + " - $" + ui.values[1]);
  1077. // }
  1078. // });
  1079. // amountprice.val("$" + sliderrange.slider("values", 0) +
  1080. // " - $" + sliderrange.slider("values", 1));
  1081. // });
  1082. /*---------------------
  1083. Video popup
  1084. --------------------- */
  1085. // $('.video-popup').magnificPopup({
  1086. // type: 'iframe',
  1087. // mainClass: 'mfp-fade',
  1088. // removalDelay: 160,
  1089. // preloader: false,
  1090. // zoom: {
  1091. // enabled: true,
  1092. // }
  1093. // });
  1094. /*-------------------------------------
  1095. checkout one click toggle function
  1096. ---------------------------------------*/
  1097. var checked = $( '.sin-payment input:checked' )
  1098. if(checked){
  1099. $(checked).siblings( '.payment-box' ).slideDown(900);
  1100. };
  1101. $( '.sin-payment input' ).on('change', function() {
  1102. $( '.payment-box' ).slideUp(900);
  1103. $(this).siblings( '.payment-box' ).slideToggle(900);
  1104. });
  1105. /*-----------------------
  1106. Shop filter active
  1107. ------------------------- */
  1108. $('.shop-filter-active').on('click', function(e) {
  1109. e.preventDefault();
  1110. $('.product-filter-wrapper').slideToggle();
  1111. })
  1112. var shopFiltericon = $('.shop-filter-active');
  1113. shopFiltericon.on('click', function() {
  1114. $('.shop-filter-active').toggleClass('active');
  1115. })
  1116. /*--
  1117. Product details slider 2
  1118. -----------------------------------*/
  1119. $('.pro-dec-big-img-slider-2').slick({
  1120. slidesToShow: 1,
  1121. slidesToScroll: 1,
  1122. arrows: false,
  1123. draggable: false,
  1124. fade: false,
  1125. asNavFor: '.product-dec-slider-2',
  1126. });
  1127. /*--
  1128. Product details 2 slick carousel as Nav
  1129. --------------------------------------------*/
  1130. $('.product-dec-slider-2').slick({
  1131. slidesToShow: 7,
  1132. slidesToScroll: 1,
  1133. vertical: true,
  1134. asNavFor: '.pro-dec-big-img-slider-2',
  1135. dots: false,
  1136. focusOnSelect:true,
  1137. fade: false,
  1138. arrows: false,
  1139. responsive: [
  1140. {
  1141. breakpoint: 1199,
  1142. settings: {
  1143. slidesToShow: 5,
  1144. slidesToScroll: 1,
  1145. }
  1146. },
  1147. {
  1148. breakpoint: 991,
  1149. settings: {
  1150. slidesToShow: 7,
  1151. slidesToScroll: 1,
  1152. }
  1153. },
  1154. {
  1155. breakpoint: 767,
  1156. settings: {
  1157. slidesToShow: 5,
  1158. slidesToScroll: 1,
  1159. }
  1160. },
  1161. {
  1162. breakpoint: 575,
  1163. settings: {
  1164. autoplay: true,
  1165. slidesToShow: 3,
  1166. }
  1167. }
  1168. ]
  1169. });
  1170. // Instantiate EasyZoom instances
  1171. // var $easyzoom = $('.easyzoom').easyZoom();
  1172. /*--------------------------------
  1173. Product details slider 5 active
  1174. -----------------------------------*/
  1175. $('.product-details-slider-5-active').slick({
  1176. slidesToShow: 1,
  1177. slidesToScroll: 1,
  1178. dots: false,
  1179. loop: true,
  1180. fade: false,
  1181. arrows: false,
  1182. });
  1183. /*--------------------------------
  1184. Product details tab small
  1185. -----------------------------------*/
  1186. $('.product-details-tab-small').slick({
  1187. slidesToShow: 5,
  1188. slidesToScroll: 1,
  1189. dots: false,
  1190. loop: true,
  1191. fade: false,
  1192. arrows: false,
  1193. responsive: [
  1194. {
  1195. breakpoint: 767,
  1196. settings: {
  1197. slidesToShow: 3,
  1198. slidesToScroll: 1,
  1199. }
  1200. }
  1201. ]
  1202. });
  1203. /*--------------------------
  1204. Tab active
  1205. ---------------------------- */
  1206. var ProductDetailsSmall = $('.product-details-tab-small a');
  1207. ProductDetailsSmall.on('click', function(e) {
  1208. e.preventDefault();
  1209. var $href = $(this).attr('href');
  1210. ProductDetailsSmall.removeClass('active');
  1211. $(this).addClass('active');
  1212. $('.product-details-tab-large .tab-pane').removeClass('active');
  1213. $('.product-details-tab-large ' + $href).addClass('active');
  1214. })
  1215. // $('.multiple-items').slick({
  1216. // infinite: true,
  1217. // slidesToShow: 3,
  1218. // slidesToScroll: 3
  1219. // });
  1220. // $('.slider-hero').slick({
  1221. // dots: false,
  1222. // lazyLoad: 'ondemand',
  1223. // // autoplay: true,
  1224. // // autoplaySpeed: 1000,
  1225. // slidesToShow: 4,
  1226. // slidesToScroll: 1,
  1227. // responsive: [
  1228. // {
  1229. // breakpoint: 1024,
  1230. // settings: {
  1231. // slidesToShow: 3,
  1232. // slidesToScroll: 3,
  1233. // infinite: true,
  1234. // }
  1235. // },
  1236. // {
  1237. // breakpoint: 600,
  1238. // settings: {
  1239. // slidesToShow: 2,
  1240. // slidesToScroll: 2
  1241. // }
  1242. // },
  1243. // {
  1244. // breakpoint: 480,
  1245. // settings: {
  1246. // slidesToShow: 1,
  1247. // slidesToScroll: 1
  1248. // }
  1249. // },
  1250. // {
  1251. // breakpoint: 1199,
  1252. // settings: {
  1253. // slidesToShow: 5,
  1254. // slidesToScroll: 1,
  1255. // }
  1256. // },
  1257. // {
  1258. // breakpoint: 991,
  1259. // settings: {
  1260. // slidesToShow: 3,
  1261. // slidesToScroll: 1,
  1262. // }
  1263. // },
  1264. // {
  1265. // breakpoint: 767,
  1266. // settings: {
  1267. // slidesToShow: 3,
  1268. // slidesToScroll: 1,
  1269. // }
  1270. // },
  1271. // {
  1272. // breakpoint: 575,
  1273. // settings: {
  1274. // autoplay: true,
  1275. // slidesToShow: 3,
  1276. // }
  1277. // }
  1278. // // You can unslick at a given breakpoint now by adding:
  1279. // // settings: "unslick"
  1280. // // instead of a settings object
  1281. // ]
  1282. // });
  1283. //pres overview slider
  1284. $(".press_slider-hero").slick({
  1285. dots: false,
  1286. lazyLoad: 'ondemand',
  1287. // autoplay: true,
  1288. // autoplaySpeed: 1000,
  1289. slidesToShow: 1,
  1290. slidesToScroll: 1,
  1291. responsive: [
  1292. {
  1293. breakpoint: 1024,
  1294. settings: {
  1295. slidesToShow: 1,
  1296. slidesToScroll: 1,
  1297. infinite: true,
  1298. }
  1299. },
  1300. {
  1301. breakpoint: 600,
  1302. settings: {
  1303. slidesToShow: 1,
  1304. slidesToScroll: 1
  1305. }
  1306. },
  1307. {
  1308. breakpoint: 480,
  1309. settings: {
  1310. slidesToShow: 1,
  1311. slidesToScroll: 1
  1312. }
  1313. },
  1314. {
  1315. breakpoint: 1199,
  1316. settings: {
  1317. slidesToShow: 1,
  1318. slidesToScroll: 1,
  1319. }
  1320. },
  1321. {
  1322. breakpoint: 991,
  1323. settings: {
  1324. slidesToShow: 1,
  1325. slidesToScroll: 1,
  1326. }
  1327. },
  1328. {
  1329. breakpoint: 767,
  1330. settings: {
  1331. slidesToShow: 1,
  1332. slidesToScroll: 1,
  1333. }
  1334. },
  1335. {
  1336. breakpoint: 575,
  1337. settings: {
  1338. autoplay: true,
  1339. slidesToShow: 1,
  1340. }
  1341. }
  1342. ]
  1343. });
  1344. })(jQuery);