PageRenderTime 45ms CodeModel.GetById 15ms RepoModel.GetById 1ms app.codeStats 0ms

/catalog/view/javascript/src/common.js

https://gitlab.com/reclamare/mao
JavaScript | 526 lines | 403 code | 94 blank | 29 comment | 57 complexity | 0914b38c98128432d76fb6ba6e318f37 MD5 | raw file
  1. function getURLVar(key) {
  2. var value = [];
  3. var query = String(document.location).split('?');
  4. if (query[1]) {
  5. var part = query[1].split('&');
  6. for (i = 0; i < part.length; i++) {
  7. var data = part[i].split('=');
  8. if (data[0] && data[1]) {
  9. value[data[0]] = data[1];
  10. }
  11. }
  12. if (value[key]) {
  13. return value[key];
  14. } else {
  15. return '';
  16. }
  17. }
  18. }
  19. $(document).ready(function() {
  20. var $searchInput = $('#search-input');
  21. var $body = $('body');
  22. var $searchInputBlock = $('.search-input-block');
  23. var $closeSearch = $('#close-search');
  24. var $searchOverlay = $('.search-overlay');
  25. var $navBtn = $('#nav-btn');
  26. var $navMenu = $('#menu');
  27. var $searchCol = $('#search-col');
  28. var $content = $("#content");
  29. $navBtn.on('click', function () {
  30. $(this).toggleClass('active');
  31. $body.toggleClass('overflow-hidden-fixed');
  32. $navMenu.toggleClass('open');
  33. });
  34. console.log(1);
  35. // Language
  36. $searchInput.on('click', function() {
  37. $body.addClass('overflow-hidden');
  38. $searchInputBlock.addClass('search-active');
  39. $searchCol.addClass('active');
  40. $content.addClass('search-active');
  41. });
  42. $closeSearch.on('click', function () {
  43. $body.removeClass('overflow-hidden');
  44. $searchInputBlock.removeClass('search-active');
  45. $searchCol.removeClass('active');
  46. $content.removeClass('search-active');
  47. });
  48. $searchOverlay.on('click', function () {
  49. $body.removeClass('overflow-hidden');
  50. $searchInputBlock.removeClass('search-active');
  51. $content.removeClass('search-active');
  52. $searchCol.removeClass('active');
  53. });
  54. // Highlight any found errors
  55. $('.text-danger').each(function() {
  56. var element = $(this).parent().parent();
  57. if (element.hasClass('form-group')) {
  58. element.addClass('has-error');
  59. }
  60. });
  61. // Currency
  62. $('#currency .currency-select').on('click', function(e) {
  63. e.preventDefault();
  64. $('#currency input[name=\'code\']').attr('value', $(this).attr('name'));
  65. $('#currency').submit();
  66. });
  67. // Language
  68. $('#language a').on('click', function(e) {
  69. e.preventDefault();
  70. $('#language input[name=\'code\']').attr('value', $(this).attr('href'));
  71. $('#language').submit();
  72. });
  73. /* Search */
  74. $('#search input[name=\'search\']').parent().find('button').on('click', function() {
  75. url = $('base').attr('href') + 'index.php?route=product/search';
  76. var value = $('header input[name=\'search\']').val();
  77. if (value) {
  78. url += '&search=' + encodeURIComponent(value);
  79. }
  80. location = url;
  81. });
  82. $('#search input[name=\'search\']').on('keydown', function(e) {
  83. if (e.keyCode == 13) {
  84. $('header input[name=\'search\']').parent().find('button').trigger('click');
  85. }
  86. });
  87. // Menu
  88. $('#menu .dropdown-menu').each(function() {
  89. var menu = $('#menu').offset();
  90. var dropdown = $(this).parent().offset();
  91. var i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#menu').outerWidth());
  92. if (i > 0) {
  93. $(this).css('margin-left', '-' + (i + 5) + 'px');
  94. }
  95. });
  96. // Product List
  97. $('#list-view').click(function() {
  98. $('#content .product-grid > .clearfix').remove();
  99. //$('#content .product-layout').attr('class', 'product-layout product-list col-xs-12');
  100. $('#content .row > .product-grid').attr('class', 'product-layout product-list col-xs-12');
  101. localStorage.setItem('display', 'list');
  102. });
  103. // Product Grid
  104. $('#grid-view').click(function() {
  105. // What a shame bootstrap does not take into account dynamically loaded columns
  106. cols = $('#column-right, #column-left').length;
  107. if (cols == 2) {
  108. $('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
  109. } else if (cols == 1) {
  110. $('#content .product-list').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
  111. } else {
  112. $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
  113. }
  114. localStorage.setItem('display', 'grid');
  115. });
  116. if (localStorage.getItem('display') == 'list') {
  117. $('#list-view').trigger('click');
  118. } else {
  119. $('#grid-view').trigger('click');
  120. }
  121. // Checkout
  122. $(document).on('keydown', '#collapse-checkout-option input[name=\'email\'], #collapse-checkout-option input[name=\'password\']', function(e) {
  123. if (e.keyCode == 13) {
  124. $('#collapse-checkout-option #button-login').trigger('click');
  125. }
  126. });
  127. // tooltips on hover
  128. $('[data-toggle=\'tooltip\']').tooltip({container: 'body'});
  129. // Makes tooltips work on ajax generated content
  130. $(document).ajaxStop(function() {
  131. $('[data-toggle=\'tooltip\']').tooltip({container: 'body'});
  132. });
  133. });
  134. // Cart add remove functions
  135. var cart = {
  136. 'add': function(product_id, quantity) {
  137. $.ajax({
  138. url: 'index.php?route=checkout/cart/add',
  139. type: 'post',
  140. data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
  141. dataType: 'json',
  142. beforeSend: function() {
  143. $('#cart > button').button('loading');
  144. },
  145. complete: function() {
  146. $('#cart > button').button('reset');
  147. },
  148. success: function(json) {
  149. $('.alert, .text-danger').remove();
  150. if (json['redirect']) {
  151. location = json['redirect'];
  152. }
  153. if (json['success']) {
  154. $('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
  155. // Need to set timeout otherwise it wont update the total
  156. setTimeout(function () {
  157. $('#cart > button').html('<span id="cart-total">' + json['total'] + '</span>');
  158. }, 100);
  159. $('html, body').animate({ scrollTop: 0 }, 'slow');
  160. $('#cart > ul').load('index.php?route=common/cart/info ul li');
  161. }
  162. },
  163. error: function(xhr, ajaxOptions, thrownError) {
  164. alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
  165. }
  166. });
  167. },
  168. 'update': function(key, quantity) {
  169. $.ajax({
  170. url: 'index.php?route=checkout/cart/edit',
  171. type: 'post',
  172. data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
  173. dataType: 'json',
  174. beforeSend: function() {
  175. $('#cart > button').button('loading');
  176. },
  177. complete: function() {
  178. $('#cart > button').button('reset');
  179. },
  180. success: function(json) {
  181. // Need to set timeout otherwise it wont update the total
  182. setTimeout(function () {
  183. $('#cart > button').html('<span id="cart-total">' + json['total'] + '</span>');
  184. }, 100);
  185. if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
  186. location = 'index.php?route=checkout/cart';
  187. } else {
  188. $('#cart > ul').load('index.php?route=common/cart/info ul li');
  189. }
  190. },
  191. error: function(xhr, ajaxOptions, thrownError) {
  192. alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
  193. }
  194. });
  195. },
  196. 'remove': function(key) {
  197. $.ajax({
  198. url: 'index.php?route=checkout/cart/remove',
  199. type: 'post',
  200. data: 'key=' + key,
  201. dataType: 'json',
  202. beforeSend: function() {
  203. $('#cart > button').button('loading');
  204. },
  205. complete: function() {
  206. $('#cart > button').button('reset');
  207. },
  208. success: function(json) {
  209. // Need to set timeout otherwise it wont update the total
  210. setTimeout(function () {
  211. $('#cart > button').html('<span id="cart-total">' + json['total'] + '</span>');
  212. }, 100);
  213. if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
  214. location = 'index.php?route=checkout/cart';
  215. } else {
  216. $('#cart > ul').load('index.php?route=common/cart/info ul li');
  217. }
  218. },
  219. error: function(xhr, ajaxOptions, thrownError) {
  220. alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
  221. }
  222. });
  223. }
  224. }
  225. var voucher = {
  226. 'add': function() {
  227. },
  228. 'remove': function(key) {
  229. $.ajax({
  230. url: 'index.php?route=checkout/cart/remove',
  231. type: 'post',
  232. data: 'key=' + key,
  233. dataType: 'json',
  234. beforeSend: function() {
  235. $('#cart > button').button('loading');
  236. },
  237. complete: function() {
  238. $('#cart > button').button('reset');
  239. },
  240. success: function(json) {
  241. // Need to set timeout otherwise it wont update the total
  242. setTimeout(function () {
  243. $('#cart > button').html('<span id="cart-total">' + json['total'] + '</span>');
  244. }, 100);
  245. if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
  246. location = 'index.php?route=checkout/cart';
  247. } else {
  248. $('#cart > ul').load('index.php?route=common/cart/info ul li');
  249. }
  250. },
  251. error: function(xhr, ajaxOptions, thrownError) {
  252. alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
  253. }
  254. });
  255. }
  256. }
  257. var wishlist = {
  258. 'add': function(product_id) {
  259. $.ajax({
  260. url: 'index.php?route=account/wishlist/add',
  261. type: 'post',
  262. data: 'product_id=' + product_id,
  263. dataType: 'json',
  264. success: function(json) {
  265. $('.alert').remove();
  266. if (json['redirect']) {
  267. location = json['redirect'];
  268. }
  269. if (json['success']) {
  270. $('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
  271. }
  272. $('#wishlist-total span').html(json['total']);
  273. $('#wishlist-total').attr('title', json['total']);
  274. $('html, body').animate({ scrollTop: 0 }, 'slow');
  275. },
  276. error: function(xhr, ajaxOptions, thrownError) {
  277. alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
  278. }
  279. });
  280. },
  281. 'remove': function() {
  282. }
  283. }
  284. var compare = {
  285. 'add': function(product_id) {
  286. $.ajax({
  287. url: 'index.php?route=product/compare/add',
  288. type: 'post',
  289. data: 'product_id=' + product_id,
  290. dataType: 'json',
  291. success: function(json) {
  292. $('.alert').remove();
  293. if (json['success']) {
  294. $('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
  295. $('#compare-total').html(json['total']);
  296. $('html, body').animate({ scrollTop: 0 }, 'slow');
  297. }
  298. },
  299. error: function(xhr, ajaxOptions, thrownError) {
  300. alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
  301. }
  302. });
  303. },
  304. 'remove': function() {
  305. }
  306. }
  307. /* Agree to Terms */
  308. $(document).delegate('.agree', 'click', function(e) {
  309. e.preventDefault();
  310. $('#modal-agree').remove();
  311. var element = this;
  312. $.ajax({
  313. url: $(element).attr('href'),
  314. type: 'get',
  315. dataType: 'html',
  316. success: function(data) {
  317. html = '<div id="modal-agree" class="modal">';
  318. html += ' <div class="modal-dialog">';
  319. html += ' <div class="modal-content">';
  320. html += ' <div class="modal-header">';
  321. html += ' <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
  322. html += ' <h4 class="modal-title">' + $(element).text() + '</h4>';
  323. html += ' </div>';
  324. html += ' <div class="modal-body">' + data + '</div>';
  325. html += ' </div';
  326. html += ' </div>';
  327. html += '</div>';
  328. $('body').append(html);
  329. $('#modal-agree').modal('show');
  330. }
  331. });
  332. });
  333. // Autocomplete */
  334. (function($) {
  335. $.fn.autocomplete = function(option) {
  336. return this.each(function() {
  337. this.timer = null;
  338. this.items = new Array();
  339. $.extend(this, option);
  340. $(this).attr('autocomplete', 'off');
  341. // Focus
  342. $(this).on('focus', function() {
  343. this.request();
  344. });
  345. // Blur
  346. $(this).on('blur', function() {
  347. setTimeout(function(object) {
  348. object.hide();
  349. }, 200, this);
  350. });
  351. // Keydown
  352. $(this).on('keydown', function(event) {
  353. switch(event.keyCode) {
  354. case 27: // escape
  355. this.hide();
  356. break;
  357. default:
  358. this.request();
  359. break;
  360. }
  361. });
  362. // Click
  363. this.click = function(event) {
  364. event.preventDefault();
  365. value = $(event.target).parent().attr('data-value');
  366. if (value && this.items[value]) {
  367. this.select(this.items[value]);
  368. }
  369. }
  370. // Show
  371. this.show = function() {
  372. var pos = $(this).position();
  373. $(this).siblings('ul.dropdown-menu').css({
  374. top: pos.top + $(this).outerHeight(),
  375. left: pos.left
  376. });
  377. $(this).siblings('ul.dropdown-menu').show();
  378. }
  379. // Hide
  380. this.hide = function() {
  381. $(this).siblings('ul.dropdown-menu').hide();
  382. }
  383. // Request
  384. this.request = function() {
  385. clearTimeout(this.timer);
  386. this.timer = setTimeout(function(object) {
  387. object.source($(object).val(), $.proxy(object.response, object));
  388. }, 200, this);
  389. }
  390. // Response
  391. this.response = function(json) {
  392. html = '';
  393. if (json.length) {
  394. for (i = 0; i < json.length; i++) {
  395. this.items[json[i]['value']] = json[i];
  396. }
  397. for (i = 0; i < json.length; i++) {
  398. if (!json[i]['category']) {
  399. html += '<li data-value="' + json[i]['value'] + '"><a href="#">' + json[i]['label'] + '</a></li>';
  400. }
  401. }
  402. // Get all the ones with a categories
  403. var category = new Array();
  404. for (i = 0; i < json.length; i++) {
  405. if (json[i]['category']) {
  406. if (!category[json[i]['category']]) {
  407. category[json[i]['category']] = new Array();
  408. category[json[i]['category']]['name'] = json[i]['category'];
  409. category[json[i]['category']]['item'] = new Array();
  410. }
  411. category[json[i]['category']]['item'].push(json[i]);
  412. }
  413. }
  414. for (i in category) {
  415. html += '<li class="dropdown-header">' + category[i]['name'] + '</li>';
  416. for (j = 0; j < category[i]['item'].length; j++) {
  417. html += '<li data-value="' + category[i]['item'][j]['value'] + '"><a href="#">&nbsp;&nbsp;&nbsp;' + category[i]['item'][j]['label'] + '</a></li>';
  418. }
  419. }
  420. }
  421. if (html) {
  422. this.show();
  423. } else {
  424. this.hide();
  425. }
  426. $(this).siblings('ul.dropdown-menu').html(html);
  427. }
  428. $(this).after('<ul class="dropdown-menu"></ul>');
  429. $(this).siblings('ul.dropdown-menu').delegate('a', 'click', $.proxy(this.click, this));
  430. });
  431. }
  432. })(window.jQuery);