/**
* Copyright ? 2022 Blueskytechco. All rights reserved.
* See https://blueskytechco.com/ for license details.
*/
define([
'jquery',
'mage/translate',
'Blueskytechco_QuickviewProduct/js/blueskytechco_quickview',
'jquery/ui',
'productListToolbarForm'
], function ($, $t, QuickView) {
"use strict";
$.widget('blueskytechco.layeredAjax', {
options: {
productsListSelector: '#layered-ajax-list-products',
navigationSelector: '#layered-filter-block',
quickviewUrl: '',
labelQuickview: '',
positionQuickview: '',
classPositionQuickview: '[data-role=add-to-links]',
addClassQuickview: ''
},
_create: function () {
this.initProductListUrl();
this.initObserve();
this.bindLoadMoreClick();
this.bindSortDirectionClick();
this.bindSorterChange();
},
initProductListUrl: function () {
var self = this;
$.mage.productListToolbarForm.prototype.changeUrl = function (paramName, paramValue, defaultValue) {
var urlPaths = this.options.url.split('?'),
baseUrl = urlPaths[0],
urlParams = urlPaths[1] ? urlPaths[1].split('&') : [],
paramData = {},
parameters;
for (var i = 0; i < urlParams.length; i++) {
parameters = urlParams[i].split('=');
paramData[parameters[0]] = parameters[1] !== undefined
? window.decodeURIComponent(parameters[1].replace(/\+/g, '%20'))
: '';
}
paramData[paramName] = paramValue;
if (paramValue == defaultValue) {
delete paramData[paramName];
}
paramData = $.param(paramData);
self.ajaxSubmit(baseUrl + (paramData.length ? '?' + paramData : ''));
}
},
initObserve: function () {
var self = this;
var aElements = this.element.find('a');
aElements.each(function (index) {
var el = $(this);
var link = self.checkUrl(el.prop('href'));
if (!link) return;
el.on('click', function (e) {
if (el.hasClass('swatch-option-link-layered')) {
var childEl = el.find('.swatch-option');
childEl.addClass('selected');
} else {
var checkboxEl = el.find('input[type=checkbox]');
checkboxEl.prop('checked', !checkboxEl.prop('checked'));
}
self.ajaxSubmit(link);
e.stopPropagation();
e.preventDefault();
});
var checkbox = el.find('input[type=checkbox]');
checkbox.on('click', function (e) {
self.ajaxSubmit(link);
e.stopPropagation();
});
});
if ($(window).width() < 992) {
$(".filter-options-item").removeClass('active');
$(".filter-options-item .filter-options-content").hide();
$(".filter-options-item").first().addClass('active');
$(".filter-options-item").first().find(".filter-options-content").show();
}
$(".filter-options-title").on('click', function (e) {
if ($(this).closest('.filter-options-item').hasClass('active')) {
$(this).closest(".filter-options-item").removeClass('active');
$(this).closest(".filter-options-item").find(".filter-options-content").slideUp(500);
} else {
$(this).closest(".filter-options-item").addClass('active');
$(this).closest(".filter-options-item").find(".filter-options-content").slideDown(500);
}
});
$("#layered-filter-block .expand-item-link").on('click', function (e) {
if ($(this).hasClass("expanding")) {
$(this).find('a').text($t('Show More'));
} else {
$(this).find('a').text($t('Show Less'));
}
$(this).toggleClass('expanding');
$(this).closest('ol').find('.orther-link').slideToggle('slow');
});
$(".filter-current a").on('click', function (e) {
var link = self.checkUrl($(this).prop('href'));
if (!link) return;
self.ajaxSubmit(link);
e.stopPropagation();
e.preventDefault();
});
$(".filter-actions a").on('click', function (e) {
var link = self.checkUrl($(this).prop('href'));
if (!link) return;
self.ajaxSubmit(link);
e.stopPropagation();
e.preventDefault();
});
},
bindSortDirectionClick: function () {
var self = this;
$(document).on('click', '[data-role="direction-switcher"]', function (e) {
e.preventDefault();
e.stopPropagation();
var $link = $(this);
var currentUrl = window.location.href;
var url = self.updateUrlParameter(currentUrl, 'product_list_order',
$link.hasClass('sort-desc') ? 'asc' : 'desc');
// Submit via AJAX
self.ajaxSubmit(url);
});
},
bindSorterChange: function () {
var self = this;
$(document).on('change', '[data-role="sorter"]', function (e) {
e.preventDefault();
e.stopPropagation();
var $select = $(this);
var currentUrl = window.location.href;
var url = self.updateUrlParameter(currentUrl, 'product_list_order', $select.val());
// Submit via AJAX
self.ajaxSubmit(url);
});
},
updateUrlParameter: function (uri, key, value) {
// Remove existing page parameter to avoid conflicts
uri = uri.replace(/&?p=\d+/g, '');
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
} else {
return uri + separator + key + "=" + value;
}
},
bindLoadMoreClick: function () {
var self = this;
$(document).off('click', '.category-load-more.ajax-true').on('click', '.category-load-more.ajax-true', function (e) {
e.preventDefault();
e.stopPropagation();
var $btn = $(this);
var url = $btn.data('url') || $btn.attr('href');
if ($btn.hasClass('disabled') || $btn.hasClass('loading')) {
return false;
}
$btn.addClass('loading disabled');
$btn.prop('disabled', true);
$btn.find('span').text($t('Loading...'));
$.ajax({
url: url,
type: 'GET',
cache: true,
timeout: 10000,
success: function (response) {
$btn.removeClass('loading disabled');
$btn.prop('disabled', false);
$btn.find('span').text($t('Load More'));
var $response = $(response);
var $newProducts = $response.find('.item.product.product-item');
if ($newProducts.length > 0) {
$('.products.list.items.product-items').append($newProducts);
var totalProducts = $('.item.product.product-item').length;
$('.toolbar-amount').html('
' + totalProducts + ' ' +
(totalProducts === 1 ? $t('Item') : $t('Items')) + '');
var $nextLink = $response.find('.pages .next').last();
if (!$nextLink.length) {
$nextLink = $response.find('.toolbar .next').last();
}
if (!$nextLink.length) {
$nextLink = $response.find('a.next').last();
}
if ($nextLink.length) {
var nextUrl = $nextLink.attr('href');
if (nextUrl) {
if (nextUrl.indexOf('load_more=1') === -1) {
nextUrl += (nextUrl.indexOf('?') === -1 ? '?' : '&') + 'load_more=1';
}
if ($btn.is('a')) {
$btn.attr('href', nextUrl);
} else {
$btn.data('url', nextUrl);
}
if ($btn.hasClass('load-on-scroll')) {
self.clickOnScrollButton($btn, $('.products.list.items.product-items'));
}
} else {
self.showAllLoaded($btn);
}
} else {
self.showAllLoaded($btn);
}
self.reinitializeProductFeatures();
$(document).trigger('contentUpdated');
} else {
self.showNoMoreProducts($btn);
}
},
error: function (xhr, status, error) {
$btn.removeClass('loading disabled');
$btn.prop('disabled', false);
$btn.find('span').text($t('Error - Click to retry'));
setTimeout(function () {
$btn.find('span').text($t('Load More'));
}, 3000);
}
});
return false;
});
},
showNoMoreProducts: function ($btn) {
var $footer = $btn.closest('.products-footer');
$footer.html('');
},
showAllLoaded: function ($btn) {
var $footer = $btn.closest('.products-footer');
$footer.html('');
},
reinitializeProductFeatures: function () {
$('.action.tocart').prop('disabled', false);
if (typeof QuickView === 'function' && this.options.quickviewUrl) {
var opstionQuickView = {
quickviewUrl: this.options.quickviewUrl,
buttonText: this.options.labelQuickview,
actionInsert: this.options.positionQuickview,
classInsertPosition: this.options.classPositionQuickview,
classGallery: this.options.addClassQuickview
};
try {
QuickView(opstionQuickView);
} catch (e) {
console.log('QuickView error:', e);
}
}
$(document).trigger('swatches-visible');
$(document).trigger('ajaxFilterComplete');
},
clickOnScrollButton: function ($btn, $holder) {
if ($btn.length == 0) {
$btn = $('.products-footer .category-load-more');
}
if ($btn.length == 0 || $holder.length == 0 || !$btn.hasClass('load-on-scroll')) return;
if ($btn.data('waypoint')) {
$btn.data('waypoint').destroy();
}
if (typeof Waypoint !== 'undefined') {
var waypoint = new Waypoint({
element: $holder[0],
handler: function (direction) {
this.destroy();
$btn.trigger('click');
},
offset: "bottom-in-view"
});
$btn.data('waypoint', waypoint);
}
},
checkUrl: function (url) {
var regex = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
return regex.test(url) ? url : null;
},
ajaxSubmit: function (submitUrl) {
var self = this;
$.ajax({
url: submitUrl,
data: { isAjax: 1 },
type: 'post',
dataType: 'json',
beforeSend: function () {
$('body').addClass('ajax-filter');
$('.layered_ajax_overlay').show();
if (typeof window.history.pushState === 'function') {
window.history.pushState({ url: submitUrl }, '', submitUrl);
}
},
success: function (res) {
if (res.backUrl) {
window.location = res.backUrl;
return;
}
if (res.navigation) {
$(self.options.navigationSelector).replaceWith(res.navigation);
$(self.options.navigationSelector).trigger('contentUpdated');
}
if (res.products) {
$(self.options.productsListSelector).replaceWith(res.products);
$(self.options.productsListSelector).trigger('contentUpdated');
}
if (res.product_list_mode == 'list') {
$(".grid-mode-show-type-products").hide();
} else {
$(".grid-mode-show-type-products").show();
}
// Update sorting direction switcher UI based on response
if (res.direction) {
var directionSwitcher = $('[data-role="direction-switcher"]');
if (res.direction === 'desc') {
directionSwitcher.removeClass('sort-asc').addClass('sort-desc');
directionSwitcher.attr('title', 'Set Ascending Direction');
} else {
directionSwitcher.removeClass('sort-desc').addClass('sort-asc');
directionSwitcher.attr('title', 'Set Descending Direction');
}
}
// Update sorter selection
if (res.sorter) {
$('[data-role="sorter"]').val(res.sorter);
}
// HANDLE LOAD MORE BUTTON CREATION
if (res.page_load_more) {
var next = $('.toolbar .pages .next'),
product_items = '.products.list.items.product-items',
add_class = '',
products = $(product_items);
$('.toolbar .pages').hide();
var count = $(product_items).children().length,
toolbar_amount;
if (count > 1) {
toolbar_amount = '
' + count + ' ' + $t('Items') + '';
} else {
toolbar_amount = '
' + count + ' ' + $t('Item') + '';
}
$('.toolbar-amount').html(toolbar_amount);
$('.products-footer').remove();
if (next.length) {
var next_url = next.attr('href');
if (typeof (next_url) != 'undefined') {
next_url += '&load_more=1';
} else {
next_url = '';
}
if (next_url) {
if (res.page_load_more == 'scroll') {
add_class = ' load-on-scroll';
}
var next_html = '';
products.after(next_html);
if (res.page_load_more == 'scroll') {
var $btn = $('.products-footer .category-load-more.ajax-true');
self.clickOnScrollButton($btn, products);
}
}
}
}
$('body').removeClass('ajax-filter');
$('body').addClass('load-end');
setTimeout(function () {
$('body').removeClass('load-end');
if ($('.product-image-container').length > 0) {
$(".product-image-container").each(function () {
var get_c = $(this).data("hover");
$(this).closest('.product-item-info').addClass(get_c);
});
}
}, 300);
$('.layered_ajax_overlay').hide();
self.bindLoadMoreClick();
self.bindSortDirectionClick();
self.bindSorterChange();
if (self.options.quickviewUrl) {
var opstionQuickView = {
quickviewUrl: self.options.quickviewUrl,
buttonText: self.options.labelQuickview,
actionInsert: self.options.positionQuickview,
classInsertPosition: self.options.classPositionQuickview,
classGallery: self.options.addClassQuickview
}
QuickView(opstionQuickView);
}
// Trigger custom event for other scripts
$(document).trigger('ajaxFilterComplete');
},
error: function () {
window.location.reload();
}
});
}
});
return $.blueskytechco.layeredAjax;
});
Sign In
Registered Customers
Create New Account
Sign In With OTP
Enter phone number.
We will send an otp on this number via SMS
Sign In with OTP
Enter OTP
Sign In With Otp
Sign In For Product Restock Notification
Enter phone number.
We will send an otp on this number via SMS
Verify Otp
Create New Account