class CollectionProduct extends HTMLElement{ constructor(){ super(); this.totalPage = 0; this.containerHeight = 0; this.perRow = this.dataset.row; this.limit = this.dataset.limit; this.viewmore = this.dataset.viewmore; this.layout = (this.dataset.layout) ? '-' + this.dataset.layout : ''; this.tagsFilter = []; this.currentPage = 1; this.initData(); this.length = this.data.length; this.progress = 0; this.parser = new DOMParser(); this.productsContainer = this.getElementsByClassName('products-container')[0]; this.collectionGrid = document.getElementsByClassName('collection-grid__wrapper')[0]; this.filterContainer = document.getElementsByClassName('grid__item--sidebar')[0]; this.submitFilter = document.getElementsByClassName('submitTagsFilter'); this.btnOpenFilterMobile = document.getElementsByClassName('js-drawer-open-collection-filters')[0]; if(this.btnOpenFilterMobile != undefined) { this.btnOpenFilterText = this.btnOpenFilterMobile.querySelector(".btn-filter-text"); } Array.from(this.submitFilter).forEach(function(btn){ btn.addEventListener("click", this.actionSubmitFilter.bind(this)); }, this); this.tagListActive = document.querySelectorAll('#CollectionSidebar-v2 .tag-list--active-tags'); if(this.filterContainer != undefined) { this.filterItems = this.filterContainer.querySelectorAll('.tag span'); Array.from(this.filterItems).forEach(function(element){ element.addEventListener("click", this.getTagsFilter.bind(this)); }, this); } if(this.viewmore == '' || !this.viewmore) { this.createPagination(); }else { this.createViewMore(); } } initData(){ this.data = []; let p = ''; try{ p = JSON.parse('{"handle":"1080p-diy-hidden-camera-tiny","title":"DIY Micro Hidden Camera","status":"ACTIVE","tags":["Application_LookCamPro","Battery Capacity_1000 mAH","Camera Megapixels_5MP","Camera Type_Hidden","Camera Type_Mini","Camera Type_Nanny","Camera Type_Pinhole","Camera Type_Spy Camera","Collection_Spy Camera","Connectivity_WiFi\/Wireless","DIY_DIY","Features_App Push Notification","Features_Motion Activated","Features_Smartphone App","Field Of View_0 - 90 degrees","Live View_View Live Video","Location_Indoor","Location_Living Room","Location_Office \/ Business","Location_Warehouse","OS Compatibility_Android","OS Compatibility_IOS","Power Source_Battery","Power Source_Plug In","Recording Source_Audio + Video","Sensor_CMOS","Storage - Maximum Capacity_32 Gb (4 Hrs Recording)","Storage Type_Cloud Recording (In-App)","Storage Type_Memory Card","Video Resolution - Max_Full HD 1080p","Viewing_Remote View"]}'); this.data.push(p); p = JSON.parse('{"handle":"wireless-wi-fi-endoscope-camera-for-ios-android","title":"Wireless Wi-Fi Endoscope Camera For iOS & Android","status":"ACTIVE","tags":["Battery Capacity_500 mAH","Camera Megapixels_2MP","Camera Type_Appliance","Camera Type_Endoscope","Camera Type_Pinhole","Camera Type_Spy Camera","Collection_Spy Camera","Connectivity_WiFi\/Wireless","DIY_DIY","Features_Smartphone App","Field Of View_0 - 90 degrees","Lens_2 mega pixels","Location_Indoor","Location_Living Room","Location_Outdoor","Location_Warehouse","Night Vision Range_0-10 Metres","Night Vision_Night Vision Enabled","OS Compatibility_Android","OS Compatibility_IOS","OS Compatibility_Windows","Power Source_Battery","Power Source_Plug In","Recording Source_Video Only","Sensor_CMOS","Storage Type_Memory Card","Video Resolution - Max_Full HD 1080p","Viewing_Built in screen","Zoom_Digital"]}'); this.data.push(p); p = JSON.parse('{"handle":"mobile-phone-wireless-charger-clock-inbuilt-security-camera","title":"Wireless Charger Camera Clock","status":"ACTIVE","tags":["Brand_Awaretech","Camera Type_Charging Dock","Camera Type_Clock","Camera Type_Hidden","Camera Type_Nanny","Camera Type_Spy Camera","Collection_Spy Camera","Connectivity_WiFi\/Wireless","Features_Motion Activated","Live View_View Live Video","Location_Dining Room","Location_Indoor","Location_Office \/ Business","Location_Warehouse","OS Compatibility_Android","OS Compatibility_IOS","OS Compatibility_Windows","Power Source_Battery","Power Source_Plug In","Recording Source_Audio + Video","Storage Type_Cloud Recording (In-App)","Storage Type_Memory Card","Video Resolution - Max_Full HD 1080p","Viewing_Remote View"]}'); this.data.push(p); p = JSON.parse('{"handle":"lawmate-pv-rc200hdw-wifi-enabled-key-fob-spy-camera","title":"LawMate\u00ae PV-RC200HDW WiFi Enabled Key Fob Spy Camera","status":"ACTIVE","tags":["Application_PV Cam Viewer","Battery Capacity_650 mAh","Brand_LawMate\u00ae","Camera Megapixels_5MP","Camera Type_Car Key FOB & Chain","Camera Type_Hidden","Camera Type_Mini","Camera Type_Spy Camera","Camera Type_Wearable","Collection_Spy Camera","Connectivity_WiFi\/Wireless","Features_App Push Notification","Features_Motion Activated","Features_Smartphone App","Field Of View_0 - 90 degrees","Lens_3 mega piexels 1\/3''","Live View_View Live Video","Location_Indoor","Location_Office \/ Business","Location_Outdoor","Location_vehicle","Location_Warehouse","Night Vision Range_0-10 Metres","OS Compatibility_Android","OS Compatibility_IOS","OS Compatibility_Windows","Power Source_Battery","Recording Source_Audio + Video","Sensor_CMOS","Storage - Maximum Capacity_32 Gb (4 Hrs Recording)","Storage Type_Memory Card","Storage Type_NVR\/DVR","Video Resolution - Max_Full HD 1080p","Viewing_Memory Card Storage","Zoom_Digital"]}'); this.data.push(p); p = JSON.parse('{"handle":"covert-video-audio-wifi-security-camera","title":"Mini Blackbox Covert Video & Audio WiFi Hidden Camera","status":"ACTIVE","tags":["Application_IOT Living","Brand_Awaretech","Camera Type_Hidden","Camera Type_Mini","Camera Type_Spy Camera","Camera Type_Surveillance","Collection_Spy Camera","Connectivity_WiFi\/Wireless","Features_Motion Activated","Features_Smartphone App","Live View_View Live Video","Location_Indoor","Location_Living Room","Location_Office \/ Business","Location_Warehouse","New Arrivals","Night Vision_Night Vision Enabled","OS Compatibility_Android","OS Compatibility_IOS","OS Compatibility_Windows","Power Source_Battery","Recording Source_Audio + Video","Storage - Maximum Capacity_64 Gb (8 Hrs Recording)","Storage Type_Cloud Recording (In-App)","Storage Type_Memory Card","Video Resolution - Max_Full HD 1080p","Viewing_Remote View"]}'); this.data.push(p); p = JSON.parse('{"handle":"camera-clock-with-adjustable-angle","title":"Smart Alarm Clock Spy Camera 1080P\/2K\/4K Full HD with Remote Night Vision & Motion Detection","status":"ACTIVE","tags":["1080p Resolution","Battery Capacity_3000 mAh","Camera Type_Clock","Camera Type_Hidden","Camera Type_Nanny","Collection_Spy Camera","Colour_Black","Connectivity_WiFi\/Wireless","Features_Loop Recording","Features_Motion Activated","Features_Smartphone App","Field Of View_120 - 180-degree","Live View_View Live Video","Location_Bedroom","Location_Dining Room","Location_Indoor","Location_Living Room","Location_Nursing Home","Location_Office \/ Business","Location_Warehouse","Night Vision Range_0-10 Metres","Night Vision Range_5m","Night Vision_Night Vision Enabled","OS Compatibility_Android","OS Compatibility_IOS","Power Source_Battery","Power Source_Plug In","Spy Cameras","Storage - Maximum Capacity_256 Mb","Storage Type_Memory Card","Video Playback Viewing_Memory Stored","Video Playback Viewing_Remote View","Video Resolution_Full HD 1080p","Viewing_Memory Card Storage","Viewing_Remote View"]}'); this.data.push(p); p = JSON.parse('{"handle":"power-bank-with-hidden-camera-wireless-charging","title":"2K Spy Camera Wireless Charging Power Bank with Motion Detection (Support Offline Recording)","status":"ACTIVE","tags":["1080p Resolution","Battery Capacity_10000 mAh","Battery Powered Spy Camera","Bedroom","Camera Features_Motion Activated","Camera Features_No Internet Required","Camera Features_Smartphone App","Camera Type_Charging Dock","Camera Type_Hidden","Camera Type_Powerbank","Camera Type_Spy Camera","Cheating Spouse","Collection_Spy Camera","Colour_Black","Connectivity_WiFi\/Wireless","Featured","Features_Motion Activated","Features_Smartphone App","Field Of View_90 - 120 degrees","Live View_View from Memory","Live View_View Live Video","Location_Bedroom","Location_Dining Room","Location_Indoor","Location_Living Room","Location_Nursing Home","Location_Office \/ Business","Location_Warehouse","New Arrivals","Night Vision Range_0-10 Metres","OS Compatibility_Android","OS Compatibility_IOS","Power Source_Battery","Spy Cameras","Storage - Maximum Capacity_256 Gb (32 Hrs Recording)","Storage Type_Memory Card","Storage_Memory Card"]}'); this.data.push(p); p = JSON.parse('{"handle":"mini-ip-hd1080p-home-security-wireless-small-cctv-infrared-night-vision-v380","title":"V380 Wide-angle CCTV Wireless IP Camera with IR Night Vision","status":"ACTIVE","tags":["Camera Features_Smartphone App","Camera Type_Mini","Camera Type_Spy Camera","Location_Bedroom","Location_Dining Room","Location_Indoor","Location_Living Room","Location_Nursing Home","Location_Office \/ Business","Location_Warehouse","Power Source_Battery"]}'); this.data.push(p); p = JSON.parse('{"handle":"mini-wireless-security-camera-with-night-vision","title":"Mini Wireless Covert Camera with Night Vision","status":"ACTIVE","tags":["Application_IOT Living","Battery Capacity_520 mAh","Brand_Awaretech","Camera Type_Hidden","Camera Type_Mini","Camera Type_Spy Camera","Camera Type_Surveillance","Collection_Spy Camera","Connectivity_WiFi\/Wireless","Features_Motion Activated","Features_Smartphone App","Field Of View_90 - 120 degrees","Live View_View Live Video","Location_Indoor","Location_Living Room","Location_Warehouse","New Arrivals","Night Vision_Night Vision Enabled","OS Compatibility_Android","OS Compatibility_IOS","OS Compatibility_Windows","Power Source_Battery","Power Source_Plug In","Recording Source_Audio + Video","Storage - Maximum Capacity_64 Gb (8 Hrs Recording)","Storage Type_Cloud Recording (In-App)","Storage Type_Memory Card","Video Resolution - Max_Full HD 1080p","Viewing_Remote View"]}'); this.data.push(p); p = JSON.parse('{"handle":"mini-magnetic-wi-fi-camera-1080p-security-camera-with-night-vision-and-motion-detection","title":"Mini Magnetic Wi-Fi 1080P Security Camera with Night Vision and Motion Detection","status":"ACTIVE","tags":["Battery Capacity_800 mAh","Battery Powered Spy Camera","Bedroom","Camera Features_Motion Activated","Camera Features_Smartphone App","Camera Megapixels_1MP","Camera Type_Button","Camera Type_Mini","Camera Type_Nanny","Camera Type_Spy Camera","Cheating Spouse","Collection_Spy Camera","Colour_Black","Connectivity_WiFi\/Wireless","Features_App Push Notification","Features_Loop Recording","Features_Motion Activated","Features_Smartphone App","Field Of View_90 - 120 degrees","Live View_View from Memory","Live View_View Live Video","Location_Bedroom","Location_Dining Room","Location_Indoor","Location_Living Room","Location_Nursing Home","Location_Office \/ Business","Location_Warehouse","Microphone_Built-In","Mount_Base mount","Night Vision Range_0-5 Metres","Night Vision_Night Vision Enabled","OS Compatibility_Android","OS Compatibility_IOS","Power Source_Battery","Storage Type_Cloud Storage","Storage Type_Memory Card","Storage_Memory Card","Video Resolution - Max_Full HD 1080p","Viewing_Memory Card Storage"]}'); this.data.push(p); p = JSON.parse('{"handle":"hd-1080p-black-box-rotatable-security-wi-fi-camera-big-battery","title":"HD 1080P Black Box Rotatable Security Wi-Fi Camera","status":"ACTIVE","tags":["Camera Type_Hidden","Camera Type_Spy Camera","Camera Type_Surveillance","Collection_Spy Camera","Features_Motion Activated","Features_Smartphone App","Field Of View_90 - 120 degrees","Location_Dining Room","Location_Indoor","Location_Living Room","Location_Nursing Home","Location_Office \/ Business","Location_Warehouse","OS Compatibility_Android","OS Compatibility_IOS","OS Compatibility_Windows","Power Source_Battery","Power Source_Plug In","Storage - Maximum Capacity_128 Gb (16 Hrs Recording)","Storage Type_Cloud Storage","Storage Type_Memory Card","Storage_Cloud Recording (In-App)","Storage_Memory Card","Video Playback Viewing_Remote View","Viewing_Memory Card Storage","Viewing_Remote View"]}'); this.data.push(p); p = JSON.parse('{"handle":"tuya-series-4k-smart-alarm-clock-spy-camera-with-discreet-mirror-display","title":"[Tuya Series] 4K Smart Alarm Clock Spy Camera with Discreet Mirror Display","status":"ACTIVE","tags":["1080p Resolution","Battery Powered Spy Camera","Bedroom","Camera Features_Motion Activated","Camera Features_Smartphone App","Camera Type_Clock","Camera Type_Hidden","Camera Type_Nanny","Camera Type_Spy Camera","Camera Type_Surveillance","Collection_Spy Camera","Colour_Black","Connectivity_WiFi\/Wireless","Features_App Push Notification","Features_Loop Recording","Features_Motion Activated","Features_Smartphone App","Field Of View_120 - 180-degree","Location_Bedroom","Location_Dining Room","Location_Indoor","Location_Living Room","Location_Nursing Home","Location_Office \/ Business","Location_Warehouse","Microphone_Built-In","Night Vision Range_0-5 Metres","Night Vision_Night Vision Enabled","Office\/Business","OS Compatibility_Android","OS Compatibility_IOS","Power Source_Battery","Spy Cameras","Storage Type_Cloud Storage","Storage Type_Memory Card","Video Resolution_Full HD 1080p"]}'); this.data.push(p); p = JSON.parse('{"handle":"tuya-series-4k-mini-desktop-clock-camera-with-invisible-lens-motion-detection-and-night-vision","title":"[Tuya Series] 4K Mini Desktop Clock Camera with Invisible Lens, Motion Detection and Night Vision","status":"ACTIVE","tags":["1080p Resolution","Battery Powered Spy Camera","Camera Features_Motion Activated","Camera Features_Smartphone App","Camera Type_Clock","Camera Type_Hidden","Camera Type_Nanny","Camera Type_Spy Camera","Collection_Spy Camera","Colour_Black","Connectivity_WiFi\/Wireless","Features_App Push Notification","Features_Loop Recording","Features_Motion Activated","Features_Smartphone App","Field Of View_120 - 180-degree","Live View_View Live Video","Location_Bedroom","Location_Dining Room","Location_Indoor","Location_Living Room","Location_Nursing Home","Location_Office \/ Business","Location_Warehouse","Microphone_Built-In","Mount_Free standing","night vision","Night Vision Range_0-5 Metres","Night Vision_Night Vision Enabled","Office\/Business","OS Compatibility_Android","OS Compatibility_IOS","Power Source_Battery","Power Source_Plug In","Spy Cameras","Storage Type_Cloud Storage","Storage Type_Memory Card","Storage_Memory Card","Video Resolution_Full HD 1080p","Viewing_Remote View"]}'); this.data.push(p); p = JSON.parse('{"handle":"tuya-series-4k-table-alarm-clock-camera-with-night-vision-and-remote-viewing","title":"[Tuya Series] 4K Table Alarm Clock Camera with Night Vision and Remote Viewing","status":"ACTIVE","tags":["1080p Resolution","Battery Powered Spy Camera","Bedroom","Camera Features_Motion Activated","Camera Features_Smartphone App","Camera Type_Clock","Camera Type_Nanny","Camera Type_Spy Camera","Cheating Spouse","Collection_Spy Camera","Colour_Black","Connectivity_WiFi\/Wireless","Features_App Push Notification","Features_Loop Recording","Features_Motion Activated","Features_Smartphone App","Field Of View_120 - 180-degree","Location_Bedroom","Location_Dining Room","Location_Indoor","Location_Living Room","Location_Nursing Home","Location_Office \/ Business","Location_Warehouse","Microphone_Built-In","night vision","Night Vision Range_0-5 Metres","Night Vision_Night Vision Enabled","Office\/Business","OS Compatibility_Android","OS Compatibility_IOS","Power Source_Battery","Power Source_Plug In","Storage Type_Cloud Storage","Storage Type_Memory Card","Viewing_Remote View"]}'); this.data.push(p); p = JSON.parse('{"handle":"hd1080p-wireless-hidden-wall-mounted-security-camera","title":"HD 1080P Wireless Hidden Wall-mounted Hidden Camera with PIR Sensor","status":"ACTIVE","tags":["1080p Resolution","Badge: Hot","Badge: New","Battery Powered Spy Camera","Bedroom","Camera Features_Motion Activated","Camera Features_Smartphone App","Camera Features_Two-Way Audio","Camera Type_Hidden","Camera Type_Nanny","Camera Type_Spy Camera","Camera Type_Surveillance","Cheating Spouse","Collection_Outdoor","Collection_Spy Camera","Features_App Push Notification","Features_Motion Activated","Features_Smartphone App","Fleet Monitoring_In app monitoring","Location_Bedroom","Location_Dining Room","Location_Indoor","Location_Living Room","Location_Nursing Home","Location_Office \/ Business","Location_Outdoor","Location_Warehouse","Mount_Base mount","New Arrivals","Night Vision Range_0-5 Metres","OS Compatibility_Android","OS Compatibility_IOS","Spy Cameras","Video Playback Viewing_Memory Stored","Video Playback Viewing_Remote View"]}'); this.data.push(p); p = JSON.parse('{"handle":"4g-2k-ip-security-camera-with-30x-optical-zoom","title":"4G 2K IP Security Camera With 30x Optical Zoom","status":"ACTIVE","tags":["Application_Cam HiPro","Camera Features_Motion Activated","Camera Features_Smartphone App","Camera Features_Two-Way Audio","Camera Megapixels_2MP","Camera Type_Surveillance","Collection_Outdoor","Connectivity_4G Sim Enabled","Features_App Push Notification","Features_Loop Recording","Features_Motion Activated","Features_Smartphone App","Location_Outdoor","Location_Warehouse","Microphone_Built-In","Mount_Base mount","Night Vision_Night Vision Enabled","OS Compatibility_Android","OS Compatibility_IOS","OS Compatibility_Windows","Outdoor Camera Type_3G \/ 4G SIM Enabled","Outdoor Camera Type_Home Security","Outdoor Camera Type_Solar","Power Source_Plug In","Viewing_Memory Card Storage","Viewing_Remote View"]}'); this.data.push(p); } catch(e){ console.error(e); } } loadProductsGrid(start, stop, data){ let number_product = stop - start; for(let i = start; i < stop; i++) { let url = window.location.origin + '/products/' + data[i].handle + "?view=grid-item" + this.layout; fetch(url) .then((res) => { if(res.status == 404){ return false; } return res.text(); }) .then(res => this.addProduct(res, i, number_product)) .catch(err => console.log(err)); } } addProduct(res, i, number_product){ this.progress++; let doc = this.parser.parseFromString(res, 'text/html'); let product = doc.querySelector(".grid-product"); let layout = ''; let items_layout = document.getElementsByClassName('item-layout'); for(let i = 0; i < items_layout.length; i++) { if(items_layout[i].classList.contains('active')) { layout = items_layout[i].dataset.layout; } } if(product != null) { product.style.display = 'flex'; product.style.order = i + 1; product.classList.add(layout + '-active'); this.productsContainer.append(product); let compare = product.querySelector('.SPCMP_Add_span'); if(compare != null) { compare.innerText = 'COMPARE'; } let add_to_cart = product.querySelector('.grid-product__add-to-cart'); if(add_to_cart != null) { add_to_cart.addEventListener('click', function(e){ e.preventDefault(); let a_element = e.target.closest('a'); if(!a_element.classList.contains('added')) { a_element.classList.add('added'); let variant_id = a_element.dataset.variant; let formData = { 'items': [{ 'id': variant_id, 'quantity': 1 }] }; theme.cart.addItemFromForm(formData); } }); } } if(this.progress == number_product) { this.productsContainer.setAttribute('style', ''); if(this.viewmore == '' || !this.viewmore) { this.scrollToTop(); } } } render(resetCurrentPage = false){ if(resetCurrentPage) { this.currentPage = 1; } let productPerPage = this.limit; let end_index = this.currentPage * productPerPage; let start_index = end_index - productPerPage; if(this.tagsFilter.length < 1) { while (this.productsContainer.firstChild) this.productsContainer.removeChild(this.productsContainer.firstChild); let data = this.data; let stop_index = 0; if(data.length > (this.currentPage*productPerPage)) { stop_index = end_index }else{ stop_index = data.length; } if(this.currentPage > 1) { this.productsContainer.style.height = this.containerHeight + 'px'; } this.progress = 0; this.loadProductsGrid(start_index, stop_index, data); let pagination = this.productsContainer.parentElement.getElementsByClassName('pagination')[0]; if(pagination != undefined) { this.productsContainer.parentElement.removeChild(pagination); this.createPagination(data); } }else { let data = []; for (let i = 0; i < this.data.length; i++) { let productTags = this.data[i]['tags']; let is_passed = false; for(let j = 0; j < this.tagsFilter.length; j++) { if(productTags.includes(this.tagsFilter[j])) { is_passed = true; } } if(is_passed) { data.push(this.data[i]); } } while (this.productsContainer.firstChild) this.productsContainer.removeChild(this.productsContainer.firstChild); if(data.length > 0) { let stop_index = 0; if(data.length > (this.currentPage*productPerPage)) { stop_index = end_index }else{ stop_index = data.length; } if(this.currentPage > 1) { this.productsContainer.style.height = this.containerHeight + 'px'; } this.progress = 0; this.loadProductsGrid(start_index, stop_index, data); let pagination = this.productsContainer.parentElement.getElementsByClassName('pagination')[0]; this.productsContainer.parentElement.removeChild(pagination); this.createPagination(data); }else{ let notfound = '

Sorry, there are no products in this tags.

'; this.productsContainer.innerHTML = notfound; } } } reInitProductCompare(){ if(typeof window.reinitializeCompare == 'function'){ window.reinitializeCompare(); console.log("Product Compare reinited"); } } createPagination(data = []) { if(data.length > 0) { this.totalPage = data.length / this.limit; }else{ this.totalPage = this.data.length / this.limit; } if(!Number.isInteger(this.totalPage )) { this.totalPage += 1; } let pagination = document.createElement('div'); pagination.classList.add('pagination'); let html = ''; if(this.currentPage > 1) { html += ''; html += ''; html += ''; html += ''; html += ''; } for(let i = 1; i <= this.totalPage; i++) { if(this.currentPage == i) { html += ''+ i +''; }else{ html += ''+ i +''; } } if(this.currentPage < parseInt(this.totalPage)) { html += ''; html += ''; html += ''; html += ''; html += ''; } pagination.innerHTML = html; this.productsContainer.parentElement.appendChild(pagination); let pagination_item = pagination.querySelectorAll('.page a'); Array.from(pagination_item).forEach(function(element){ element.addEventListener("click", this.actionPagination.bind(this)); }, this); } actionPagination(e) { e.preventDefault(); this.currentPage = e.target.closest('a').dataset.page; // if(e.path[0].nodeName == 'A') { // this.currentPage = e.target.dataset.page; // }else{ // } let current_height = this.productsContainer.offsetHeight; this.containerHeight = current_height; this.render(); } createViewMore() { let btnViewMore = document.createElement('div'); btnViewMore.classList.add('btn-viewmore'); let viewMoreHtml = 'View more'; btnViewMore.dataset.times = 1; btnViewMore.innerHTML = viewMoreHtml; let viewMoreLink = btnViewMore.getElementsByTagName('a')[0]; viewMoreLink.addEventListener('click', this.actionViewMore.bind(this)); this.productsContainer.parentElement.appendChild(btnViewMore); } actionViewMore(e) { e.preventDefault(); this.currentTimes = e.target.closest('.btn-viewmore').dataset.times; let productPerPage = this.limit; let end_index = (parseFloat(this.currentTimes) + 1) * productPerPage; let start_index = end_index - productPerPage; let data = this.data; let number_product = end_index - start_index; let stop_index = 0; if(data.length > (this.currentTimes*productPerPage)) { stop_index = end_index }else{ stop_index = data.length; } for(let i = start_index; i < stop_index; i++) { if(data[i] != undefined) { let url = window.location.origin + '/products/' + data[i].handle + "?view=grid-item" + this.layout; fetch(url) .then(res => res.text()) .then(res => this.addProduct(res, i, number_product)); } if(i >= data.length) { let btnViewMore = this.getElementsByClassName('btn-viewmore')[0]; btnViewMore.style.display = 'none'; } } e.target.closest('.btn-viewmore').dataset.times = parseFloat(this.currentTimes) + 1; } getTagsFilter(e) { let tag = e.target.dataset.tag; Array.from(this.filterItems).forEach(function(element){ let tag_e = element.dataset.tag; let parent_e = element.parentElement; if(parent_e.classList.contains('tag--active') && tag_e == tag) { parent_e.classList.remove('tag--active'); this.removeRedTag(tag); let index = this.tagsFilter.indexOf(tag); if (index !== -1) { this.tagsFilter.splice(index, 1); } }else if (!parent_e.classList.contains('tag--active') && tag_e == tag) { parent_e.classList.add('tag--active'); let is_added = false; let tagListActiveItems = document.querySelectorAll('.tag--remove'); if(tagListActiveItems.length > 0) { Array.from(tagListActiveItems).forEach(function(item){ if(item.dataset.tag == tag) { is_added = true; } }, this); } if(!is_added) { this.addRedTag(tag); } if(!this.tagsFilter.includes(tag)) { this.tagsFilter.push(tag); } } this.btnOpenFilterText.innerText = 'Filter (' + this.tagsFilter.length + ')'; }, this); if (this.tagsFilter.length > 0 && !this.btnOpenFilterMobile.classList.contains('btn--tertiary-active')) { this.btnOpenFilterMobile.classList.add('btn--tertiary-active'); } else if (this.tagsFilter.length < 1){ this.btnOpenFilterMobile.classList.remove('btn--tertiary-active'); this.btnOpenFilterText.innerText = 'Filter'; } this.render(true); if (theme.FilterDrawer) { theme.FilterDrawer.close(); } } actionSubmitFilter(e) { e.preventDefault(); this.collectionGrid.classList.add('unload'); this.filterHandle(); let html = document.getElementsByTagName('html')[0]; let body = document.getElementsByTagName('body')[0]; let drawer = document.getElementById('FilterDrawer'); if(drawer.classList.contains('drawer--is-open')) { drawer.classList.remove('drawer--is-open'); } if(html.classList.contains('js-drawer-open') && body.classList.contains('js-drawer-open')) { html.classList.remove('js-drawer-open'); body.classList.remove('js-drawer-open'); let openFilterMobile = document.getElementsByClassName('js-drawer-open-collection-filters')[0]; openFilterMobile.click(); } } filterHandle() { this.render(true); this.collectionGrid.classList.remove('unload'); } addRedTag(tag) { let tag_arr = tag.split('_'); let html = ''+ tag_arr[1] +''; html += ''; let li_element = document.createElement('li'); li_element.classList.add('tag','tag--remove'); li_element.dataset.tag = tag; li_element.innerHTML = html; Array.from(this.tagListActive).forEach(function(ul){ let duplicatedE = li_element.cloneNode(true); ul.appendChild(duplicatedE); this.actionRemoveRedTag(duplicatedE); }.bind(this)); } removeRedTag(tag) { Array.from(this.tagListActive).forEach(function(ul){ let tags_remove = ul.getElementsByTagName('li'); for(let i = 0; i < tags_remove.length; i++) { if(tags_remove[i].dataset.tag == tag) { ul.removeChild(tags_remove[i]); } } }.bind(this)); } actionRemoveRedTag(element) { let redTag = element.querySelector('span'); redTag.addEventListener("click", function(e){ let tag_remove = redTag.parentElement.dataset.tag; let index = this.tagsFilter.indexOf(tag_remove); if (index !== -1) { this.tagsFilter.splice(index, 1); } this.removeRedTag(tag_remove); Array.from(this.filterItems).forEach(function(item){ let tag = item.dataset.tag; if(tag == tag_remove && item.parentElement.classList.contains('tag--active')) { item.parentElement.classList.remove('tag--active'); } }); if (this.tagsFilter.length < 1){ this.btnOpenFilterMobile.classList.remove('btn--tertiary-active'); this.btnOpenFilterText.innerText = 'Filter'; } else { this.btnOpenFilterText.innerText = 'Filter (' + this.tagsFilter.length + ')'; } this.render(); }.bind(this)); } switchSubmitFilterBtn() { if (this.tagsFilter.length > 0) { Array.from(this.submitFilter).forEach(function(btn){ btn.classList.remove('hide'); btn.text = 'submit filter (' + this.tagsFilter.length + ')'; }, this); }else{ Array.from(this.submitFilter).forEach(function(btn){ btn.classList.add('hide'); }, this); } } scrollToTop() { let scrollHeight = this.productsContainer.offsetTop; // if(window.innerWidth <= 768) { // scrollDiv = scrollDiv - 100; // } window.scrollTo({ top: scrollHeight - 200, behavior: 'smooth'}); } } customElements.define('collection-products', CollectionProduct);