Created
November 21, 2018 10:49
-
-
Save keyurshah/029e0c967d97ae76e8bf118cb2dcc975 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Override Settings | |
| var bcSfFilterSettings = { | |
| general: { | |
| limit: 60, | |
| showDisplay: false, | |
| activeScrollToTop: false, | |
| loadProductFirst: true, | |
| sortingList: ['manual', 'price-ascending', 'price-descending', 'title-ascending', 'title-descending', 'published-descending', 'published-ascending', 'sale-descending'], | |
| removePrefixFromSwatchFile: false, | |
| swatchStyle: 'square-grid' | |
| }, | |
| label: { | |
| sorting: { | |
| 'manual' : bcSfFilterConfig.label.sorting_featured, | |
| 'title-ascending': bcSfFilterConfig.label.sorting_title_ascending, | |
| 'title-descending': bcSfFilterConfig.label.sorting_title_descending, | |
| 'price-ascending' : bcSfFilterConfig.label.sorting_price_ascending, | |
| 'price-descending' : bcSfFilterConfig.label.sorting_price_descending, | |
| 'published-descending': bcSfFilterConfig.label.sorting_date_ascending, | |
| 'published-ascending': bcSfFilterConfig.label.sorting_date_descending, | |
| } | |
| } | |
| }; | |
| var bcSfFilterTemplate = { | |
| 'soldOutClass': 'product-item--sold-out', | |
| 'vendorHtml': '<h3 class="product-item__vendor"><a href="{{itemVendorUrl}}">{{itemVendorLabel}}</a></h3>', | |
| 'saleLabelHtml': '<div class="product-item__label"><span class="label label--on-sale">' + bcSfFilterConfig.label.sale + '</span></div>', | |
| 'soldOutLabelHtml': '<div class="product-item__label"><span class="label label--sold-out">' + bcSfFilterConfig.label.sold_out + '</span></div>', | |
| 'tagLabelHtml': '<div class="product-item__label"><span class="label label--custom">{{itemTagLabel}}</span></div>', | |
| 'quickViewHtml': ' <div class="product-item__label product-item__label--hidden">' + | |
| '<button class="label label--quick-shop" data-action="open-quick-shop" data-quick-shop-url="{{itemQuickViewUrl}}">' + | |
| '<svg class="icon icon-cart-empty">' + | |
| '<use xlink:href="#icon-cart-empty">' + | |
| '</use>' + | |
| '</svg>' + bcSfFilterConfig.label.quick_shop + | |
| '</button>' + | |
| '</div>', | |
| // Grid | |
| 'productGridItemHtml': '<div class="collection__item product-item {{itemSoldoutClass}} grid__cell 1/' + bcSfFilterConfig.custom.mobile_products_per_row + ' 1/' + bcSfFilterConfig.custom.tablet_products_per_row + '--handheld 1/' + bcSfFilterConfig.custom.products_per_row + '--lap-and-up">' + | |
| '<div class="product-item__inner">' + | |
| '<div class="product-item__labels">' + | |
| '{{itemQuickView}}' + | |
| '{{itemTagLabel}}' + | |
| '{{itemSaleLabel}}' + | |
| '{{itemSoldOutLabel}}' + | |
| '</div>' + | |
| '<a href="{{itemUrl}}" class="product-item__image">' + | |
| '<div class="product-item__image-wrapper">' + | |
| '<img src="{{itemThumbUrl}}" alt="{{itemTitle}}">' + | |
| '</div>' + | |
| '</a>' + | |
| '<div class="product-item__info">' + | |
| '{{itemVendor}}' + | |
| '<h2 class="product-item__title"><a href="{{itemUrl}}">{{itemTitle}}</a></h2>' + | |
| // '{{itemPrice}}' + | |
| '</div>' + | |
| '</div>' + | |
| '</div>', | |
| // Collage | |
| 'productCollageItemHtml': '<div class="collection__item product-item {{itemSoldoutClass}} grid__cell 1/' + bcSfFilterConfig.custom.mobile_products_per_row + ' 1/' + bcSfFilterConfig.custom.tablet_products_per_row + '--handheld 1/' + bcSfFilterConfig.custom.products_per_row + '--lap-and-up">' + | |
| '<div class="product-item__inner">' + | |
| '<div class="product-item__labels">' + | |
| '{{itemQuickView}}' + | |
| '{{itemTagLabel}}' + | |
| '{{itemSaleLabel}}' + | |
| '{{itemSoldOutLabel}}' + | |
| '</div>' + | |
| '<a href="{{itemUrl}}" class="product-item__image">' + | |
| '<div class="product-item__image-wrapper">' + | |
| '<img src="{{itemThumbUrl}}" alt="{{itemTitle}}">' + | |
| '</div>' + | |
| '</a>' + | |
| '<div class="product-item__info">' + | |
| '{{itemVendor}}' + | |
| '<h2 class="product-item__title"><a href="{{itemUrl}}">{{itemTitle}}</a></h2>' + | |
| '{{itemPrice}}' + | |
| '</div>' + | |
| '</div>' + | |
| '</div>', | |
| 'previousHtml': '<a class="button button--secondary pagination__nav pagination__nav--prev" rel="prev" href="{{itemUrl}}"><svg class="icon icon-arrow-left"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-left"></use></svg><span class="pagination__label">Previous</span></a>', | |
| 'nextHtml': '<a class="button button--secondary pagination__nav pagination__nav--next" rel="next" href="{{itemUrl}}"><span class="pagination__label">Next</span><svg class="icon icon-arrow-right"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-right"></use></svg></a>', | |
| 'paginateHtml': '{{previous}}<span class="pagination__current">{{pageItems}}</span>{{next}}', | |
| 'sortingHtml': '<svg class="icon icon-dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-dropdown-arrow"></use></svg><select>{{sortingItems}}</select>' | |
| }; | |
| BCSfFilter.prototype.buildProductGridItem = function(data) { | |
| // Prepare data | |
| data.price_min *= 100, data.price_max *= 100, data.compare_at_price_min *= 100, data.compare_at_price_max *= 100; | |
| data['variants'][0]['price_min'] = parseFloat(data['variants'][0]['price_min']) * 100; | |
| data['variants'][0]['compare_at_price_min'] = parseFloat(data['variants'][0]['compare_at_price_min']) * 100; | |
| var soldOut = !data.available; | |
| var onSale = data['variants'][0]['compare_at_price_min'] > data['variants'][0]['price_min']; | |
| var priceVaries = data.price_min != data.price_max; | |
| // Get Template | |
| var itemHtml = bcSfFilterTemplate.productGridItemHtml; | |
| // Add image size | |
| var imageSize = '600x600'; | |
| switch(bcSfFilterConfig.custom.products_per_row) { | |
| case 2: case '2': imageSize = '800x'; break; | |
| case 3: case '3': imageSize = '700x'; break; | |
| case 4: case '4': imageSize = '600x'; break; | |
| case 5: case '5': imageSize = '500x'; break; | |
| case 6: case '6': imageSize = '400x'; break; | |
| } | |
| // Add soldOut class | |
| var itemSoldoutClass = soldOut ? bcSfFilterTemplate.soldOutClass : ''; | |
| itemHtml = itemHtml.replace(/{{itemSoldoutClass}}/g, itemSoldoutClass); | |
| // Add sale label | |
| var itemSaleLabelHtml = !soldOut && onSale ? bcSfFilterTemplate.saleLabelHtml : ''; | |
| itemHtml = itemHtml.replace(/{{itemSaleLabel}}/g, itemSaleLabelHtml); | |
| // Add soldOut label | |
| var itemSoldOutLabelHtml = soldOut ? bcSfFilterTemplate.soldOutLabelHtml : ''; | |
| itemHtml = itemHtml.replace(/{{itemSoldOutLabel}}/g, itemSoldOutLabelHtml); | |
| // Add Tag label | |
| var itemTagLabelHtml = ''; | |
| for (var k in data.tags) { | |
| if (data['tags'][k].indexOf('__label') != -1) { | |
| var temp = data['tags'][k].split('__label:'); | |
| itemTagLabelHtml += (bcSfFilterTemplate.tagLabelHtml).replace(/{{itemTagLabel}}/g, temp[temp.length - 1]); | |
| } | |
| } | |
| itemHtml = itemHtml.replace(/{{itemTagLabel}}/g, itemTagLabelHtml); | |
| // Add Thumbnail | |
| var images = Object.keys(data.images).map(function (key) { return data.images[key]; }); | |
| var itemThumbUrl = images.length > 0 ? this.optimizeImage(images.shift(), imageSize) : bcSfFilterConfig.general.no_image_url; | |
| itemHtml = itemHtml.replace(/{{itemThumbUrl}}/g, itemThumbUrl); | |
| // Add Vendor | |
| var itemVendorHtml = bcSfFilterConfig.custom.show_vendor ? bcSfFilterTemplate.vendorHtml.replace(/{{itemVendorLabel}}/g, data.vendor).replace(/{{itemVendorUrl}}/g, this.buildProductItemVendorUrl(data.vendor)) : ''; | |
| itemHtml = itemHtml.replace(/{{itemVendor}}/g, itemVendorHtml); | |
| // Add Price | |
| var itemPriceHtml = ''; | |
| if (onSale) { | |
| itemPriceHtml += '<span class="product-item__price product-item__price--new" data-money-convertible>' + this.formatMoney(data['variants'][0]['price'], this.moneyFormat) + '</span>'; | |
| itemPriceHtml += '<span class="product-item__price product-item__price--old" data-money-convertible>' + this.formatMoney(data['compare_at_price_min'], this.moneyFormat) + '</span>'; | |
| } else { | |
| if (priceVaries) { | |
| itemPriceHtml += '<span class="product-item__price">' + (bcSfFilterConfig.label.from_price).replace(/{{ price }}/g, this.formatMoney(data.price_min, this.moneyFormat)) + '</span>'; | |
| } else { | |
| itemPriceHtml += '<span class="product-item__price" data-money-convertible>' + this.formatMoney(data['variants'][0]['price'], this.moneyFormat) + '</span>'; | |
| } | |
| } | |
| itemHtml = itemHtml.replace(/{{itemPrice}}/g, itemPriceHtml); | |
| // Add Quick view | |
| var itemQuickViewHtml = !soldOut && bcSfFilterConfig.custom.show_quick_shop ? (bcSfFilterTemplate.quickViewHtml).replace(/{{itemQuickViewUrl}}/g, this.buildProductItemUrl(data) + '?view=quick_shop') : ''; | |
| itemHtml = itemHtml.replace(/{{itemQuickView}}/g, itemQuickViewHtml); | |
| // Add main attribute | |
| itemHtml = itemHtml.replace(/{{itemTitle}}/g, data.title); | |
| itemHtml = itemHtml.replace(/{{itemUrl}}/g, this.buildProductItemUrl(data)); | |
| return itemHtml; | |
| } | |
| BCSfFilter.prototype.buildProductCollageItem = function(data) { | |
| // Prepare data | |
| data.price_min *= 100, data.price_max *= 100, data.compare_at_price_min *= 100, data.compare_at_price_max *= 100; | |
| data['variants'][0]['price_min'] = parseFloat(data['variants'][0]['price_min']) * 100; | |
| data['variants'][0]['compare_at_price_min'] = parseFloat(data['variants'][0]['compare_at_price_min']) * 100; | |
| var soldOut = !data.available; | |
| var onSale = data['variants'][0]['compare_at_price_min'] > data['variants'][0]['price_min']; | |
| var priceVaries = data.price_min != data.price_max; | |
| // Get Template | |
| var itemHtml = bcSfFilterTemplate.productCollageItemHtml; | |
| // Add image size | |
| var imageSize = '600x600'; | |
| switch(bcSfFilterConfig.custom.products_per_row) { | |
| case 2: case '2': imageSize = '800x'; break; | |
| case 3: case '3': imageSize = '700x'; break; | |
| case 4: case '4': imageSize = '600x'; break; | |
| case 5: case '5': imageSize = '500x'; break; | |
| case 6: case '6': imageSize = '400x'; break; | |
| } | |
| // Add soldOut class | |
| var itemSoldoutClass = soldOut ? bcSfFilterTemplate.soldOutClass : ''; | |
| itemHtml = itemHtml.replace(/{{itemSoldoutClass}}/g, itemSoldoutClass); | |
| // Add sale label | |
| var itemSaleLabelHtml = !soldOut && onSale ? bcSfFilterTemplate.saleLabelHtml : ''; | |
| itemHtml = itemHtml.replace(/{{itemSaleLabel}}/g, itemSaleLabelHtml); | |
| // Add soldOut label | |
| var itemSoldOutLabelHtml = soldOut ? bcSfFilterTemplate.soldOutLabelHtml : ''; | |
| itemHtml = itemHtml.replace(/{{itemSoldOutLabel}}/g, itemSoldOutLabelHtml); | |
| // Add Tag label | |
| var itemTagLabelHtml = ''; | |
| for (var k in data.tags) { | |
| if (data['tags'[k]].indexOf('__label') != -1) { | |
| var temp = data['tags'][k].split('__label:'); | |
| itemTagLabelHtml += (bcSfFilterTemplate.tagLabelHtml).replace(/{{itemTagLabel}}/g, temp[temp.length - 1]); | |
| } | |
| } | |
| itemHtml = itemHtml.replace(/{{itemTagLabel}}/g, itemTagLabelHtml); | |
| // Add Thumbnail | |
| var images = Object.keys(data.images).map(function (key) { return data.images[key]; }); | |
| var itemThumbUrl = images.length > 0 ? this.optimizeImage(images[0], imageSize) : bcSfFilterConfig.general.no_image_url; | |
| itemHtml = itemHtml.replace(/{{itemThumbUrl}}/g, itemThumbUrl); | |
| // Add Vendor | |
| var itemVendorHtml = bcSfFilterConfig.custom.show_vendor ? bcSfFilterTemplate.vendorHtml.replace(/{{itemVendorLabel}}/g, data.vendor).replace(/{{itemVendorUrl}}/g, this.buildProductItemVendorUrl(data.vendor)) : ''; | |
| itemHtml = itemHtml.replace(/{{itemVendor}}/g, itemVendorHtml); | |
| // Add Price | |
| var itemPriceHtml = ''; | |
| if (onSale) { | |
| itemPriceHtml += '<span class="product-item__price product-item__price--new" data-money-convertible>' + this.formatMoney(data['variants'][0]['price'], this.moneyFormat) + '</span>'; | |
| itemPriceHtml += '<span class="product-item__price product-item__price--old" data-money-convertible>' + this.formatMoney(data['compare_at_price_min'], this.moneyFormat) + '</span>'; | |
| } else { | |
| if (priceVaries) { | |
| itemPriceHtml += '<span class="product-item__price">' + (bcSfFilterConfig.label.from_price).replace(/{{price}}/g, this.formatMoney(data.price_min, this.moneyFormat)) + '</span>'; | |
| } else { | |
| var price = data['variants'][0]['available'] == true ? this.formatMoney(data['variants'][0]['price'], this.moneyFormat) : ''; | |
| itemPriceHtml += '<span class="product-item__price" data-money-convertible>' + price + '</span>'; | |
| } | |
| } | |
| itemHtml = itemHtml.replace(/{{itemPrice}}/g, itemPriceHtml); | |
| // Add Quick view | |
| var itemQuickViewHtml = !soldOut && bcSfFilterConfig.custom.show_quick_shop ? (bcSfFilterTemplate.quickViewHtml).replace(/{{itemQuickViewUrl}}/g, this.buildProductItemUrl(data) + '?view=quick_shop') : ''; | |
| itemHtml = itemHtml.replace(/{{itemQuickView}}/g, itemQuickViewHtml); | |
| // Add main attribute | |
| itemHtml = itemHtml.replace(/{{itemTitle}}/g, data.title); | |
| itemHtml = itemHtml.replace(/{{itemUrl}}/g, this.buildProductItemUrl(data)); | |
| return itemHtml; | |
| } | |
| // Build Pagination | |
| BCSfFilter.prototype.buildPagination = function(totalProduct) { | |
| // Get page info | |
| var currentPage = parseInt(this.queryParams.page); | |
| var totalPage = Math.ceil(totalProduct / this.queryParams.limit); | |
| // If it has only one page, clear Pagination | |
| if (totalPage == 1) { | |
| jQ(this.selector.bottomPagination).html(''); | |
| return false; | |
| } | |
| if (this.getSettingValue('general.paginationType') == 'default') { | |
| var paginationHtml = bcSfFilterTemplate.paginateHtml; | |
| // Build Previous | |
| var previousHtml = (currentPage > 1) ? bcSfFilterTemplate.previousHtml : ''; | |
| previousHtml = previousHtml.replace(/{{itemUrl}}/g, this.buildToolbarLink('page', currentPage, currentPage -1)); | |
| paginationHtml = paginationHtml.replace(/{{previous}}/g, previousHtml); | |
| // Build Next | |
| var nextHtml = (currentPage < totalPage) ? bcSfFilterTemplate.nextHtml : ''; | |
| nextHtml = nextHtml.replace(/{{itemUrl}}/g, this.buildToolbarLink('page', currentPage, currentPage + 1)); | |
| paginationHtml = paginationHtml.replace(/{{next}}/g, nextHtml); | |
| // Build page items | |
| paginationHtml = paginationHtml.replace(/{{pageItems}}/g, 'Page ' + currentPage + ' of ' + totalPage); | |
| jQ(this.selector.bottomPagination).html(paginationHtml); | |
| } | |
| }; | |
| // Build Sorting | |
| BCSfFilter.prototype.buildFilterSorting = function() { | |
| if (bcSfFilterTemplate.hasOwnProperty('sortingHtml')) { | |
| jQ(this.selector.topSorting).html(''); | |
| var sortingArr = this.getSortingList(); | |
| if (sortingArr) { | |
| // Build content | |
| var sortingItemsHtml = ''; | |
| for (var k in sortingArr) { | |
| sortingItemsHtml += '<option value="' + k +'">' + sortingArr[k] + '</option>'; | |
| } | |
| var html = bcSfFilterTemplate.sortingHtml.replace(/{{sortingItems}}/g, sortingItemsHtml); | |
| jQ(this.selector.topSorting).html(html); | |
| // Set current value | |
| jQ(this.selector.topSorting + ' select').val(this.queryParams.sort); | |
| } | |
| } | |
| }; | |
| // Build Filter option Label | |
| /* | |
| BCSfFilter.prototype.buildFilterOptionSwatchData = function(fOType, fOId, fOLabel, fODisplayType, fOSelectType, fOItemValue, fOData) { | |
| if (this.checkShowFilterOptionItem(fOItemValue, fOData)) { | |
| var iLabel = fOItemValue.key, iValue = fOItemValue.key; | |
| var colorOptionsArr = this.getSettingValue('general.colorOptionsArr'); | |
| var prefixSwatch = fOId.replace('pf_t_', '').replace('pf_opt_', ''); | |
| if (colorOptionsArr != '') { | |
| var isColor = colorOptionsArr.filter(function(item) { return fOId.indexOf(item) > -1; }); | |
| if (typeof isColor[0] !== 'undefined') { | |
| prefixSwatch = 'color'; | |
| } | |
| } | |
| var swatchName = iValue; | |
| if (this.getSettingValue('general.removePrefixFromSwatchFile') && fOData.prefix) { | |
| var prefix = fOData.prefix.replace(/\\/g, ''); | |
| swatchName = swatchName.replace(prefix, ''); | |
| } | |
| swatchName = this.slugify(swatchName); | |
| var html = this.getTemplate('filterOptionSwatchItem'); | |
| html = this.buildFilterOptionItem(html, iLabel, iValue, fOType, fOId, fOLabel, fODisplayType, fOSelectType, fOItemValue, fOData); | |
| var filePath = this.fileUrl.substring(0, this.fileUrl.lastIndexOf('?')); | |
| html = html.replace(/{{itemImageValue}}/g, filePath + prefixSwatch + '-' + swatchName + '.' + this.swatchExtension + '?v=' + (new Date().getTime())); | |
| var border = 'none'; | |
| if (this.getSettingValue('general.hasBorderColorSwatch') && colorOptionsArr.indexOf(prefixSwatch) > -1) { | |
| border = '1px solid ' + this.getSettingValue('general.borderColorSwatchItem'); | |
| } | |
| html = html.replace(/{{itemBorder}}/g, border); | |
| return html; | |
| } | |
| return ''; | |
| }; | |
| */ | |
| // BCSfFilter.prototype.buildFilterOptionLabel = function(label, productNumber, fOData) { | |
| // label = label.replace('__color:', '') | |
| // .replace('color:', '') | |
| // .replace('__size:', '') | |
| // .replace('__size_card:', '') | |
| // .replace('__size_paper:', '') | |
| // .replace('__size_envelope:', '') | |
| // .replace('__size_label:', '') | |
| // .replace('__size_envelope_liner:', '') | |
| // .replace('__weight_group:', '') | |
| // .replace('__weight_paper:', '') | |
| // .replace('__family:', '') | |
| // .replace('__material:', ''); | |
| // return this.getSettingValue('general.showFilterOptionCount') && productNumber > 0 && fOData.displayType != 'box' ? label + ' (' + productNumber + ')' : label; | |
| // }; | |
| // Build item of Filter selection | |
| // BCSfFilter.prototype.buildFilterSelectionItem = function(template, title, label, clearLink) { | |
| // label = label.replace('__color:', '') | |
| // .replace('color:', '') | |
| // .replace('__size:', '') | |
| // .replace('__size_card:', '') | |
| // .replace('__size_paper:', '') | |
| // .replace('__size_envelope:', '') | |
| // .replace('__size_label:', '') | |
| // .replace('__size_envelope_liner:', '') | |
| // .replace('__weight_group:', '') | |
| // .replace('__weight_paper:', '') | |
| // .replace('__family:', '') | |
| // .replace('__material:', ''); | |
| // template = template.replace(/{{itemType}}/g, title); | |
| // template = template.replace(/{{itemLabel}}/g, label); | |
| // template = template.replace(/{{itemLink}}/g, clearLink); | |
| // return template; | |
| // }; | |
| // BCSfFilter.prototype.buildFilterOptionMultipleListData = function(fOType, fOId, fOLabel, fODisplayType, fOSelectType, fOItemValues, fOData) { | |
| // if (fOItemValues !== null && fOItemValues.hasOwnProperty('key') && fOItemValues.hasOwnProperty('doc_count') && fOItemValues.doc_count > 0) { | |
| // var iLabel = fOItemValues.key; | |
| // var iValue = encodeURIComponent(fOItemValues.key); | |
| // // Format label and value of each filter option item | |
| // if (fOType == 'price' || fOType == 'percent_sale') { | |
| // iValue = iValue.replace(/\*/g, '').replace(/\-/g, ':'); | |
| // if (!fOItemValues.hasOwnProperty('from') && fOItemValues.hasOwnProperty('to')) { | |
| // iLabel = 'Under ' + (fOType == 'price' ? this.formatMoney(fOItemValues.to * 100, this.moneyFormat) : fOItemValues.to + '%'); | |
| // } else if (fOItemValues.hasOwnProperty('from') && !fOItemValues.hasOwnProperty('to')) { | |
| // iLabel = 'Above ' + (fOType == 'price' ? this.formatMoney(fOItemValues.from * 100, this.moneyFormat) : fOItemValues.from + '%'); | |
| // } else if (fOItemValues.hasOwnProperty('from') && fOItemValues.hasOwnProperty('to')) { | |
| // iLabel = (fOType == 'price' ? this.formatMoney(fOItemValues.from * 100, this.moneyFormat) : fOItemValues.from + '%') + ' - ' + (fOType == 'price' ? this.formatMoney(fOItemValues.to * 100, this.moneyFormat) : fOItemValues.to + '%'); | |
| // } | |
| // } else if (fOType == 'stock') { | |
| // iLabel = fOItemValues.label; | |
| // iValue = fOItemValues.key == 'in-stock' ? true : false; | |
| // } | |
| // // Customize label | |
| // iLabel = this.buildFilterOptionLabel(iLabel, fOItemValues.doc_count, fOData); | |
| // // Get item HTML Template & Build Data | |
| // var itemHtml = this.getTemplate('filterOptionMultipleListItem'); | |
| // itemHtml = itemHtml.replace(/{{itemLabel}}/g, iLabel).replace(/{{itemParentId}}/g, fOId).replace(/{{itemValue}}/g, iValue).replace(/{{itemParentLabel}}/g, fOLabel).replace(/{{itemFunc}}/g, "onInteractWithFilterOptionValue(event, this, '" + fOType + "', '" + fODisplayType + "', '" + fOSelectType + "')"); | |
| // itemHtml = itemHtml.replace(/{{itemLink}}/g, this.buildFilterOptionLink(fOId, iValue, fOType, fODisplayType, fOSelectType)); | |
| // // Check if item is selected or not | |
| // itemHtml = this.checkFilterOptionSelected(fOId, iValue, fOType) ? itemHtml.replace(/{{itemSelected}}/g, 'selected') : itemHtml.replace(/{{itemSelected}}/g, ''); | |
| // return itemHtml; | |
| // } | |
| // return ''; | |
| // }; | |
| // BCSfFilter.prototype.onChangeData = function(url, type, value) { | |
| // value = decodeURIComponent (value); | |
| // this.updateApiParams(url); | |
| // this.getFilterData(type, url); | |
| // this.changeAddressBar(url, type, value); | |
| // }; | |
| // BCSfFilter.prototype.buildFilterOptionLink = function(paramType, paramValue, filterType, displayType, selectType, keepValuesStatic) { | |
| // var link = ''; | |
| // link = this.buildFilterOptionCustomLink(paramType, paramValue, filterType, displayType, selectType, keepValuesStatic); | |
| // if (link != '') return link; | |
| // if (filterType == 'collection' && !this.isSearchPage()) { | |
| // var keepValuesStatic = typeof keepValuesStatic !== 'undefined' ? keepValuesStatic : null; | |
| // // When url has "/" at the end of pathname, slice it | |
| // var pathName = window.location.pathname; | |
| // if (pathName.slice(-1) == '/') { | |
| // pathName = pathName.substring(0, pathName.length - 1); | |
| // } | |
| // // Sub Category | |
| // if (paramType == 'pf_cs_collection') { | |
| // if (window.location.href.indexOf(paramValue) > -1) { | |
| // link = pathName.replace(paramValue, '') + paramValue.split('/')[0]; | |
| // } else { | |
| // link = '/' + pathName.split('/')[1] + '/' + paramValue; | |
| // } | |
| // } else { | |
| // if (pathName != '') { | |
| // var newPathName = ''; | |
| // var pathNameArr = pathName.split('/'); | |
| // if (pathNameArr.length == 3) { | |
| // newPathName = pathNameArr.slice(0, -1).join('/') + '/' + paramValue; | |
| // } else { | |
| // // If pathName contains sub-category | |
| // if (pathNameArr.length > 3) { | |
| // newPathName = pathNameArr.slice(0, -2).join('/') + '/' + paramValue; | |
| // } | |
| // } | |
| // link = keepValuesStatic === true ? window.location.href.split("?")[0] : window.location.href; | |
| // link = link.replace(pathName, newPathName); | |
| // } | |
| // } | |
| // } else { | |
| // if (paramValue !== '' && paramValue !== null) { | |
| // var newParam = '&' + paramType + '=' + encodeURIParamValue(paramValue); | |
| // if ((displayType == 'range' || selectType == 'single') && this.queryParams.hasOwnProperty(paramType)) { | |
| // var oldParam = '&' + paramType + '=' + encodeURIParamValue(this.queryParams[paramType][0]).replace(/%20/g, '+'); | |
| // link = window.location.href.replace(oldParam, newParam); | |
| // } else { | |
| // // Check the param whether exists in url | |
| // // If Yes, remove this param from url | |
| // var currentUrl = window.location.href + '&'; | |
| // if (currentUrl.indexOf(newParam + '&') > -1) { | |
| // link = currentUrl.replace(newParam + '&', '&'); | |
| // if (link[link.length - 1] == '&') | |
| // link = link.slice(0, -1); | |
| // } | |
| // // If No, append this param to url | |
| // else { | |
| // link = window.location.href; | |
| // if (window.location.search.length == 0) { | |
| // link += '?_=' + this.prefix; | |
| // } else if (getParam('_') === null) { | |
| // link += '&_=' + this.prefix; | |
| // } | |
| // link += newParam; | |
| // } | |
| // } | |
| // } else { | |
| // link = window.location.href.replace('&' + paramType + '=' + encodeURIParamValue(this.queryParams[paramType]), ''); | |
| // } | |
| // } | |
| // link = link.replace(/%20/g, '+'); | |
| // // Remove pagination | |
| // if (this.queryParams.hasOwnProperty('page')) { | |
| // link = link.replace('&page=' + this.queryParams.page, ''); | |
| // } | |
| // link = this.customizeFilterOptionLink(link, paramType, paramValue, filterType, displayType, selectType, keepValuesStatic); | |
| // return link; | |
| // }; | |
| // // Set queryParams from address bar and settings | |
| // BCSfFilter.prototype.getFilterParams = function (url) { | |
| // var params = {}; | |
| // url = (typeof url === 'undefined' || url === false) ? window.location.search : '?' + url.split('?')[1]; | |
| // // Prepare params from URL | |
| // if (url.length) { | |
| // for (var aKeyValue, i = 0, aCouples = url.substr(1).split('&'); i < aCouples.length; i++) { | |
| // aKeyValue = aCouples[i].split('='); | |
| // if (aKeyValue.length > 1) { | |
| // var paramType = decodeURIComponent(aKeyValue[0]); | |
| // var paramValue = decodeURIComponent(aKeyValue[1]).replace(/\+/g, ' '); | |
| // if (params.hasOwnProperty(paramType)) { | |
| // params[paramType].push(paramValue); | |
| // } else { | |
| // params[paramType] = this.findIndexArray(paramType, this.imutableFilterTree) > -1 || paramType == 'q' ? paramValue : [paramValue]; | |
| // } | |
| // if (paramType.indexOf('pf_') > -1) { | |
| // this.hasFilterOptionParam = true; | |
| // } | |
| // } | |
| // } | |
| // } | |
| // // Set default params if missing from url params | |
| // // Set data back to queryParams | |
| // return params; | |
| // }; | |
| // function encodeURIParamValue(paramValue) { | |
| // paramValue = encodeURIComponent(paramValue).replace(/&/g, "%26").replace(/'/g, "%27"); | |
| // return paramValue; | |
| // } | |
| // // Check has error from API result | |
| // BCSfFilter.prototype.buildClearFilterOptionLink = function(type, label, value) { | |
| // if (Array.isArray(value)) { | |
| // var currentValues = ''; | |
| // for (var i = 0; i < value.length; i++) { | |
| // currentValues += '&' + type + '=' + encodeURIParamValue(value[i]); | |
| // } | |
| // var link = (window.location.href).replace(currentValues, ''); | |
| // } else { | |
| // var reg = new RegExp('&' + type + '=' + encodeURIParamValue(value).replace(/(?=[() ])/g, '\\') + '&', 'g'); | |
| // // Custom Theme | |
| // var currentUrl = window.location.href.replace(/\+/g, '%20'); | |
| // // Build all data in the collection page | |
| // var link = (currentUrl + '&').replace(reg, '&'); | |
| // // Build Page Information of Sub Category | |
| // } | |
| // if (link[link.length - 1] == '&') { | |
| // link = link.slice(0, -1); | |
| // } | |
| // if (this.queryParams.hasOwnProperty('page')) { | |
| // link = link.replace('&page=' + this.queryParams.page, ''); | |
| // } | |
| // return link; | |
| // }; | |
| /*********** BC CUSTOM URL: REMOVE %20 on ADDRESSBAR ********/ | |
| // Set queryParams from address bar and settings | |
| BCSfFilter.prototype.updateApiParams = function (url) { | |
| var params = {}; | |
| url = url === false ? window.location.search : '?' + url.split('?')[1]; | |
| // Prepare params from URL | |
| if (url.length) { | |
| url = url.replace('---',' '); | |
| for (var aKeyValue, i = 0, aCouples = url.substr(1).split('&'); i < aCouples.length; i++) { | |
| aKeyValue = aCouples[i].split('='); | |
| if (aKeyValue.length > 1) { | |
| var paramType = decodeURIComponent(aKeyValue[0]); | |
| var paramValue = decodeURIComponent(aKeyValue[1]); | |
| if (params.hasOwnProperty(paramType)) { | |
| params[paramType].push(paramValue); | |
| } else { | |
| params[paramType] = this.imutableFilterTree.indexOf(paramType) > -1 ? paramValue : [paramValue]; | |
| } | |
| if (paramType.indexOf('pf_') > -1) { | |
| this.hasFilterOptionParam = true; | |
| } | |
| } | |
| } | |
| } | |
| // Set default params if missing from url params | |
| params = this.setDefaultParams(params); | |
| // Set data back to queryParams | |
| this.queryParams = params; | |
| }; | |
| // Using history to change address bar for not reloading page | |
| BCSfFilter.prototype.changeAddressBar = function(newUrl, eventType, value) { | |
| // Replace ?_=pf by blank when url does not exist any params | |
| var tempUrl = '?' + newUrl.split('?')[1]; | |
| var params = tempUrl.substr(1).split('&'); | |
| if (params.length == 1) { | |
| newUrl = newUrl.replace('?_=' + this.prefix, ''); | |
| } | |
| newUrl = newUrl.replace('%20','+'); | |
| // If having selected collection "Currrent collection name + Shop name", Else get current title | |
| var newTitle = document.title; | |
| if (typeof eventType !== 'undefined' && typeof value !== 'undefined' && eventType == 'collection') { | |
| newTitle = this.textify(value) + ' - ' + this.shopName; | |
| } | |
| History.pushState({param: this.queryParams}, newTitle, newUrl); | |
| }; | |
| BCSfFilter.prototype.buildFilterSelectionData = function(data) { | |
| function buildItem(template, title, label, clearLink) { | |
| template = template.replace(/{{itemType}}/g, title); | |
| template = template.replace(/{{itemLabel}}/g, label.replace('+',' ')); | |
| template = template.replace(/{{itemLink}}/g, clearLink); | |
| return template; | |
| } | |
| var _this = this; | |
| var selectionContent = ''; | |
| var itemHtml = this.getSettingValue('general.refineByStyle') == 'style2' ? this.getTemplate('filterRefineItem2') : this.getTemplate('filterRefineItem'); | |
| var options = data.filter.options; | |
| var urlParam = window.location.search; | |
| if (urlParam != '') { | |
| var paramsArr = urlParam.split('&'); | |
| var inputParams = []; | |
| // Group "Refine by" by filter option | |
| if (this.getSettingValue('general.refineByStyle') == 'style2') { | |
| paramsArr = paramsArr.sort(); | |
| var tempFilterOptionId = ''; | |
| } | |
| for (var i = 0; i < paramsArr.length; i++) { | |
| var param = paramsArr[i]; | |
| if (param.indexOf('_=pf') == -1) { | |
| inputParams.push(param); | |
| var id = param.split('=')[0]; | |
| var selectedOption = options.filter(function(e) { return e.filterOptionId == id })[0]; | |
| if (typeof selectedOption !== 'undefined') { | |
| var value = decodeURIComponent(param.split('=')[1]); | |
| var label = value; | |
| var clearLink = _this.buildClearFilterOptionLink(id, title, value); | |
| var prefix = selectedOption.prefix; | |
| if (typeof prefix !== 'undefined' && prefix !== null && prefix !== false) { | |
| prefix = prefix.replace(/\\/g, ''); | |
| value = value.replace(prefix, '').trim(); | |
| } | |
| var title = selectedOption.label; | |
| var type = selectedOption.filterType; | |
| var displayType = selectedOption.displayType; | |
| // Customize label | |
| label = this.customizeFilterOptionLabel(label, prefix, type); | |
| if (value != '') { | |
| if (displayType == 'range') { | |
| var elements = value.split(':'); | |
| if (type == 'price') { | |
| var minPrice = _this.formatMoney(elements[0] * 100), | |
| maxPrice = _this.formatMoney(elements[1] * 100); | |
| if (_this.getSettingValue('general.removePriceDecimal')) { | |
| minPrice = _this.removeDecimal(minPrice), maxPrice = _this.removeDecimal(maxPrice); | |
| } | |
| label = minPrice + ' - ' + maxPrice; | |
| } else { | |
| label = elements[0] + ' - ' + elements[1]; | |
| } | |
| } else { | |
| switch(type) { | |
| case 'price': label = _this.getPriceLabel(value); break; | |
| case 'percent_sale': label = _this.getPercentSaleLabel(value); break; | |
| case 'stock': label = (value === 'true') ? selectedOption.values[0].label : selectedOption.values[1].label; break; | |
| case 'review_ratings': label = _this.getReviewRatingsLabel(value); break; | |
| } | |
| } | |
| } | |
| // Group "Refine by" by filter option | |
| if (this.getSettingValue('general.refineByStyle') == 'style2') { | |
| if (tempFilterOptionId != id) { | |
| tempFilterOptionId = id; | |
| selectionContent += '<div class="selected-item-label">' + title + ':</div>'; | |
| } | |
| } | |
| selectionContent += buildItem(itemHtml, title, label, clearLink); | |
| } | |
| } | |
| } | |
| if (jQ('#bc-sf-filter-params').length == 0) { | |
| jQ('body').append('<input type="hidden" id="bc-sf-filter-params" value="' + inputParams.join('|') + '" />') | |
| } else { | |
| jQ('#bc-sf-filter-params').attr('value', inputParams.join('|')); | |
| } | |
| } | |
| return selectionContent; | |
| }; | |
| /*********** BC END CUSTOM URL: REMOVE %20 on ADDRESSBAR ********/ |
Hi thanks for this, can you point me to how can I add product.type next to the itemTitle
Nevermind thanks figured it out
Hi, I want to sort by best selling. What is the query for best selling/popularity?
What to do If I want to filter on sales product?
sorry, i don't use this app anymore. it would be best to contact the developer
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi thanks for this, can you point me to how can I add product.type next to the itemTitle