| 1 |
1 |
/* --------------------------------------------------------------
|
| 2 |
|
cart_handler.js 2018-10-17
|
|
2 |
cart_handler.js 2019-02-27
|
| 3 |
3 |
Gambio GmbH
|
| 4 |
4 |
http://www.gambio.de
|
| 5 |
5 |
Copyright (c) 2018 Gambio GmbH
|
| ... | ... | |
| 30 |
30 |
|
| 31 |
31 |
'use strict';
|
| 32 |
32 |
|
| 33 |
|
// ########## VARIABLE INITIALIZATION ##########
|
|
33 |
// ########## VARIABLE INITIALIZATION ##########
|
| 34 |
34 |
|
| 35 |
35 |
var $this = $(this),
|
| 36 |
36 |
$body = $('body'),
|
| ... | ... | |
| 70 |
70 |
attributImagesSwiper: false,
|
| 71 |
71 |
// Trigger the attribute images to this selectors
|
| 72 |
72 |
triggerAttrImagesTo: '#product_image_swiper, #product_thumbnail_swiper, '
|
| 73 |
|
+ '#product_thumbnail_swiper_mobile',
|
|
73 |
+ '#product_thumbnail_swiper_mobile',
|
| 74 |
74 |
// Class that gets added to the button on processing
|
| 75 |
75 |
processingClass: 'loading',
|
| 76 |
76 |
// Duration for that the success or fail class gets added to the button
|
| ... | ... | |
| 103 |
103 |
},
|
| 104 |
104 |
options = $.extend(true, {}, defaults, data),
|
| 105 |
105 |
module = {},
|
| 106 |
|
mobile = $(window).width() <= 767;
|
|
106 |
mobile = $(window).width() <= 767,
|
|
107 |
changeListenerSet = false,
|
|
108 |
cookieObj;
|
| 107 |
109 |
|
| 108 |
110 |
|
| 109 |
|
// ########## HELPER FUNCTIONS ##########
|
|
111 |
// ########## HELPER FUNCTIONS ##########
|
| 110 |
112 |
|
| 111 |
113 |
/**
|
| 112 |
114 |
* Helper function that updates the button
|
| ... | ... | |
| 184 |
186 |
break;
|
| 185 |
187 |
}
|
| 186 |
188 |
});
|
| 187 |
|
|
|
189 |
|
| 188 |
190 |
// Dis- / Enable the buttons
|
| 189 |
|
if (disableButtons) {
|
| 190 |
|
var $buttons = $form.find(options.cartButtons);
|
| 191 |
|
if (data.success) {
|
|
191 |
if(disableButtons)
|
|
192 |
{
|
|
193 |
var $buttons = $form.find(options.cartButtons);
|
|
194 |
|
|
195 |
if(data.success)
|
|
196 |
{
|
| 192 |
197 |
$buttons.removeClass('inactive');
|
| 193 |
198 |
$buttons.removeClass('btn-inactive');
|
| 194 |
|
} else {
|
|
199 |
}
|
|
200 |
|
|
201 |
else
|
|
202 |
{
|
| 195 |
203 |
$buttons.addClass('inactive');
|
| 196 |
204 |
$buttons.addClass('btn-inactive');
|
| 197 |
205 |
}
|
| ... | ... | |
| 207 |
215 |
$errorField
|
| 208 |
216 |
.addClass('hidden')
|
| 209 |
217 |
.hide();
|
| 210 |
|
|
|
218 |
|
| 211 |
219 |
if (showNoCombiSelectedMesssage
|
| 212 |
220 |
&& data.content.messageNoCombiSelected !== undefined
|
| 213 |
221 |
&& data.content.messageNoCombiSelected) {
|
| ... | ... | |
| 223 |
231 |
}
|
| 224 |
232 |
}
|
| 225 |
233 |
}
|
| 226 |
|
|
|
234 |
|
| 227 |
235 |
$window.trigger(jse.libs.template.events.STICKYBOX_CONTENT_CHANGE());
|
|
236 |
|
|
237 |
if(changeListenerSet === false && (changeListenerSet = true))
|
|
238 |
{
|
|
239 |
let addToCartWithQuantity = [], hiddenInput;
|
|
240 |
|
|
241 |
// Adding every add to cart button that has a quantity input
|
|
242 |
$('button[name="btn-add-to-cart"]').parent().parent().each(function(index, row)
|
|
243 |
{
|
|
244 |
// Quantity inputs are hidden if disabled
|
|
245 |
hiddenInput = $(row).find('input[type="hidden"]');
|
|
246 |
|
|
247 |
if(hiddenInput.length === 0)
|
|
248 |
|
|
249 |
addToCartWithQuantity.push($(row).find('input[name="products_qty"]'));
|
|
250 |
});
|
|
251 |
|
|
252 |
// Setting OnChange listener on items with a selectable quantity
|
|
253 |
if(addToCartWithQuantity.length > 0)
|
|
254 |
|
|
255 |
addToCartWithQuantity.forEach(function(quantity)
|
|
256 |
{
|
|
257 |
quantity.bind('change', _quantityChange);
|
|
258 |
});
|
|
259 |
|
|
260 |
// Adding prototype method for hash generation on strings
|
|
261 |
if(typeof String.prototype.hashCode === 'undefined')
|
|
262 |
|
|
263 |
String.prototype.hashCode = function()
|
|
264 |
{
|
|
265 |
let hash = 0;
|
|
266 |
|
|
267 |
if(this.length === 0)
|
|
268 |
|
|
269 |
return hash;
|
|
270 |
|
|
271 |
for(let index = 0, char = this.charCodeAt(index); index < this.length; char = this.charCodeAt(++index))
|
|
272 |
{
|
|
273 |
hash = ((hash << 5) - hash) + char;
|
|
274 |
hash = hash & hash;
|
|
275 |
}
|
|
276 |
|
|
277 |
return hash;
|
|
278 |
};
|
|
279 |
|
|
280 |
cookieObj = document.cookie.length && document.cookie.indexOf('category-quantities') !== -1
|
|
281 |
? JSON.parse((document.cookie + ';').match(new RegExp('category-quantities=.*;'))[0].split(/=|;/)[1])
|
|
282 |
: {};
|
|
283 |
}
|
|
284 |
|
|
285 |
let productForm = $('form.form-horizontal.js-product-form.product-info'), productName, productPrice, hash;
|
|
286 |
|
|
287 |
if(productForm.length !== 0)
|
|
288 |
{
|
|
289 |
productName = productForm.find('h1').html().trim();
|
|
290 |
productPrice = productForm.find('div.current-price-container').html().trim().match(/^[^\d]*([0-9,.]+).*$/ms)[1].replace(/,/g, '.') - 0;
|
|
291 |
hash = (productName + productPrice).hashCode();
|
|
292 |
|
|
293 |
if(typeof cookieObj[hash] !== 'undefined')
|
|
294 |
|
|
295 |
$('#attributes-calc-quantity').val(cookieObj[hash]);
|
|
296 |
}
|
|
297 |
};
|
|
298 |
|
|
299 |
var _quantityChange = function()
|
|
300 |
{
|
|
301 |
let value = $(this).val(), row, productName, productPrice;
|
|
302 |
|
|
303 |
// only numbers and "." are processed
|
|
304 |
if(value.match(/^[0-9.]+$/) !== null)
|
|
305 |
{
|
|
306 |
// converting from string to int/double
|
|
307 |
value -= 0;
|
|
308 |
|
|
309 |
// finding the name and price of the product
|
|
310 |
row = $(this).parent().parent().parent().parent().parent();
|
|
311 |
productName = row.find('a.product-url').html().trim();
|
|
312 |
productPrice = row.find('span.current-price-container').html().trim().match(/^[^\d]*([0-9,.]+).*$/ms)[1].replace(/,/g, '.') - 0;
|
|
313 |
|
|
314 |
|
|
315 |
// generating cookie expire string (30min)
|
|
316 |
let date = new Date, expires;
|
|
317 |
date.setTime(date.getTime() + ((1 / 48) * 24 * 60 * 60 * 1000));
|
|
318 |
expires = "; expires=" + date.toGMTString();
|
|
319 |
|
|
320 |
cookieObj[(productName + productPrice).hashCode()] = value;
|
|
321 |
|
|
322 |
document.cookie = "category-quantities=" + JSON.stringify(cookieObj) + expires + "; path=/";
|
|
323 |
}
|
| 228 |
324 |
};
|
| 229 |
325 |
|
| 230 |
326 |
/**
|
| ... | ... | |
| 239 |
335 |
*/
|
| 240 |
336 |
var _addToSomewhere = function(data, $form, url, $button) {
|
| 241 |
337 |
function callback() {
|
| 242 |
|
jse.libs.xhr.post({url: url, data: data}, true).done(function(result) {
|
| 243 |
|
try {
|
| 244 |
|
// Fill the page with the result from the ajax
|
| 245 |
|
_stateManager(result, $form, false);
|
|
338 |
jse.libs.xhr.post({url: url, data: data}, true).done(function(result) {
|
|
339 |
try {
|
|
340 |
// Fill the page with the result from the ajax
|
|
341 |
_stateManager(result, $form, false);
|
| 246 |
342 |
|
| 247 |
|
// If the AJAX was successful execute
|
| 248 |
|
// a custom functionality
|
| 249 |
|
if (result.success) {
|
| 250 |
|
switch (result.type) {
|
| 251 |
|
case 'url':
|
| 252 |
|
if (result.url.substr(0, 4) !== 'http') {
|
| 253 |
|
location.href = jse.core.config.get('appUrl') + '/' + result.url;
|
| 254 |
|
} else {
|
| 255 |
|
location.href = result.url;
|
| 256 |
|
}
|
|
343 |
// If the AJAX was successful execute
|
|
344 |
// a custom functionality
|
|
345 |
if (result.success) {
|
|
346 |
switch (result.type) {
|
|
347 |
case 'url':
|
|
348 |
if (result.url.substr(0, 4) !== 'http') {
|
|
349 |
location.href = jse.core.config.get('appUrl') + '/' + result.url;
|
|
350 |
} else {
|
|
351 |
location.href = result.url;
|
|
352 |
}
|
| 257 |
353 |
|
| 258 |
|
break;
|
| 259 |
|
case 'dropdown':
|
| 260 |
|
$body.trigger(jse.libs.template.events.CART_UPDATE(), [true]);
|
| 261 |
|
break;
|
| 262 |
|
case 'layer':
|
| 263 |
|
jse.libs.template.modal.info({title: result.title, content: result.msg});
|
| 264 |
|
break;
|
| 265 |
|
default:
|
| 266 |
|
break;
|
| 267 |
|
}
|
| 268 |
|
}
|
| 269 |
|
} catch (ignore) {
|
| 270 |
|
}
|
| 271 |
|
_addButtonState($button, '-success');
|
| 272 |
|
}).fail(function() {
|
| 273 |
|
_addButtonState($button, '-fail');
|
| 274 |
|
}).always(function() {
|
| 275 |
|
// Reset the busy flag to be able to perform
|
| 276 |
|
// further AJAX requests
|
| 277 |
|
busy = false;
|
| 278 |
|
});
|
| 279 |
|
}
|
|
354 |
break;
|
|
355 |
case 'dropdown':
|
|
356 |
$body.trigger(jse.libs.template.events.CART_UPDATE(), [true]);
|
|
357 |
break;
|
|
358 |
case 'layer':
|
|
359 |
jse.libs.template.modal.info({title: result.title, content: result.msg});
|
|
360 |
break;
|
|
361 |
default:
|
|
362 |
break;
|
|
363 |
}
|
|
364 |
}
|
|
365 |
} catch (ignore) {
|
|
366 |
}
|
|
367 |
_addButtonState($button, '-success');
|
|
368 |
}).fail(function() {
|
|
369 |
_addButtonState($button, '-fail');
|
|
370 |
}).always(function() {
|
|
371 |
// Reset the busy flag to be able to perform
|
|
372 |
// further AJAX requests
|
|
373 |
busy = false;
|
|
374 |
});
|
|
375 |
}
|
| 280 |
376 |
|
| 281 |
377 |
if (!busy) {
|
| 282 |
378 |
// only execute the ajax
|
| ... | ... | |
| 291 |
387 |
};
|
| 292 |
388 |
|
| 293 |
389 |
|
| 294 |
|
// ########## EVENT HANDLER ##########
|
|
390 |
// ########## EVENT HANDLER ##########
|
| 295 |
391 |
|
| 296 |
392 |
/**
|
| 297 |
393 |
* Handler for the submit form / click
|
| ... | ... | |
| 349 |
445 |
}
|
| 350 |
446 |
|
| 351 |
447 |
ajax = jse.libs.xhr.get({
|
| 352 |
|
url: options.checkUrl + module,
|
| 353 |
|
data: formdata
|
| 354 |
|
}, true).done(function(result) {
|
|
448 |
url: options.checkUrl + module,
|
|
449 |
data: formdata
|
|
450 |
}, true).done(function(result) {
|
| 355 |
451 |
_stateManager(result, $form, true, showNoCombiSelectedMesssage);
|
| 356 |
452 |
$this.removeClass('loading');
|
| 357 |
453 |
|
| ... | ... | |
| 378 |
474 |
$form.attr('action', options.priceOfferUrl).attr('method', options.priceOfferMethod);
|
| 379 |
475 |
$form.off('submit');
|
| 380 |
476 |
$form.submit();
|
| 381 |
|
|
|
477 |
|
| 382 |
478 |
return;
|
| 383 |
479 |
default:
|
| 384 |
480 |
setTimeout(function() {
|
| ... | ... | |
| 406 |
502 |
});
|
| 407 |
503 |
}
|
| 408 |
504 |
};
|
| 409 |
|
|
|
505 |
|
| 410 |
506 |
/**
|
| 411 |
507 |
* Keyup handler for quantity input field
|
| 412 |
|
*
|
|
508 |
*
|
| 413 |
509 |
* @param e
|
| 414 |
510 |
* @private
|
| 415 |
511 |
*/
|
| 416 |
512 |
var _keyupHandler = function(e) {
|
| 417 |
513 |
clearTimeout(timeout);
|
| 418 |
|
|
|
514 |
|
| 419 |
515 |
timeout = setTimeout(function() {
|
| 420 |
516 |
_submitHandler.call(this, e)
|
| 421 |
517 |
}.bind(this), 300);
|
| 422 |
518 |
};
|
| 423 |
|
|
|
519 |
|
| 424 |
520 |
/**
|
| 425 |
521 |
* Event handler for the add to cart button, that shows or hides the throbber.
|
| 426 |
522 |
*/
|
| ... | ... | |
| 428 |
524 |
const $btn = $(this);
|
| 429 |
525 |
const $btnFake = $this.find(".btn-add-to-cart-fake");
|
| 430 |
526 |
let formReady = true;
|
| 431 |
|
|
|
527 |
|
| 432 |
528 |
$(".properties-selection-form select").each(function() {
|
| 433 |
529 |
const val = $(this).val();
|
| 434 |
530 |
if (!val || val < 1) {
|
| 435 |
531 |
formReady = false;
|
| 436 |
532 |
}
|
| 437 |
533 |
});
|
| 438 |
|
|
|
534 |
|
| 439 |
535 |
if (formReady) {
|
| 440 |
536 |
$btn.hide();
|
| 441 |
537 |
$btnFake.show()
|
| ... | ... | |
| 443 |
539 |
.prepend('<span class="throbbler"></span>');
|
| 444 |
540 |
}
|
| 445 |
541 |
};
|
| 446 |
|
|
|
542 |
|
| 447 |
543 |
/**
|
| 448 |
544 |
* Cart dropdown oben event handler for the body.
|
| 449 |
545 |
*/
|
| ... | ... | |
| 452 |
548 |
const $btnFake = $this.find(".btn-add-to-cart-fake");
|
| 453 |
549 |
const fakeOrigLabel = $btnFake.html();
|
| 454 |
550 |
const productCount = $(".cart-products-count").html();
|
| 455 |
|
|
|
551 |
|
| 456 |
552 |
const textPhrases = JSON.parse($('#product-details-text-phrases').html());
|
| 457 |
553 |
console.log(textPhrases['productsInCartSuffix']);
|
| 458 |
|
|
|
554 |
|
| 459 |
555 |
$btnFake.html("<i class=\"fa fa-check\"></i> " + parseInt(productCount)
|
| 460 |
556 |
+ textPhrases['productsInCartSuffix'])
|
| 461 |
557 |
.prop("disabled", true)
|
| 462 |
558 |
.addClass("btn-buy-complete");
|
| 463 |
|
|
|
559 |
|
| 464 |
560 |
setTimeout(function() {
|
| 465 |
561 |
$btnFake.html(fakeOrigLabel)
|
| 466 |
562 |
.removeClass("btn-buy-complete")
|
| ... | ... | |
| 469 |
565 |
$(".throbbler", $btn).remove();
|
| 470 |
566 |
$btn.show();
|
| 471 |
567 |
}, 5000);
|
| 472 |
|
|
|
568 |
|
| 473 |
569 |
if (mobile && $(".btn-go-to-cart").length == 0) {
|
| 474 |
570 |
const $btnGoTocart = $("<a></a>").addClass("btn btn-block btn-primary btn-lg btn-go-to-cart")
|
| 475 |
571 |
.attr("href", "shopping_cart.php")
|
| ... | ... | |
| 479 |
575 |
};
|
| 480 |
576 |
|
| 481 |
577 |
|
| 482 |
|
// ########## INITIALIZATION ##########
|
|
578 |
// ########## INITIALIZATION ##########
|
| 483 |
579 |
|
| 484 |
580 |
/**
|
| 485 |
581 |
* Init function of the widget
|
| ... | ... | |
| 488 |
584 |
module.init = function(done) {
|
| 489 |
585 |
|
| 490 |
586 |
var $forms = $this.find('form');
|
| 491 |
|
|
|
587 |
|
| 492 |
588 |
if (options.page === 'product-info') {
|
| 493 |
589 |
$forms.find("[name=btn-add-to-cart]").on('mouseup', _addToCartThrobberHandler);
|
| 494 |
590 |
$("body").on('CART_DROPDOWN_OPEN', _cartDropdownOpenHandler);
|
| ... | ... | |
| 509 |
605 |
$forms.not('.no-status-check').each(function() {
|
| 510 |
606 |
_submitHandler.call($(this));
|
| 511 |
607 |
});
|
| 512 |
|
|
|
608 |
|
| 513 |
609 |
done();
|
| 514 |
610 |
};
|
| 515 |
611 |
|
