暫無描述
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

main.js 42KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452
  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","#fff");
  13. }
  14. setTimeout(naChanges, 1000);
  15. win.on('scroll', function() {
  16. var scroll = win.scrollTop();
  17. if (scroll < 200) {
  18. header.removeClass('stick');
  19. if(ele_page == true){
  20. $(".header-bottom.sticky-bar.stick").removeClass("sticky-bar stick");
  21. let img_src = `./dist/assets/imgs/anwi-logo-2.png`;
  22. $(".logo-menu-wrap").find("a img").attr("src",img_src);
  23. $(".main-menu").find("nav ul li a").addClass("text-white");
  24. $("body.product_pg").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#fff");
  25. }
  26. } else {
  27. header.addClass('stick');
  28. if(ele_page == true){
  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","currentcolor");
  34. }
  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);