Sách điện tử: Tuổi ít dẫn nhiều

THIS E-BOOK
JUST RIGHT FOR YOU

TẬN HƯỞNG CÔNG VIỆC CỦA BẠN VỚI oplacrm

Đừng trở thành Zombie văn phòng: Giải phóng niềm vui công việc bên trong của bạn với OPLACRM.
// Wait for the DOM to be fully loaded before running the script document.addEventListener('DOMContentLoaded', function() { // --- Configuration: Replace these with your actual class names and attributes --- // The class of the wrapper containing your Collection List const collectionListWrapperSelector = '.Collection-List-Wrapper'; // Updated based on Navigator // The class of the Collection List itself const collectionListSelector = '.Collection-List'; // Updated based on Navigator // The class of each individual Collection Item (blog post element) const collectionItemSelector = '.Collection-Item'; // Updated based on Navigator // Note: Filtering will be applied to the .Collection-Item element // The class used for all your filter buttons ("All", "Opla's News", etc.) const filterButtonSelector = '.Tab-link_v1'; // Updated based on Navigator // The data attribute on each Collection Item that stores its category // e.g., data-category="opla-news" - YOU NEED TO REPLACE 'data-category' const categoryDataAttribute = 'data-category'; // <<<<< REPLACE 'data-category' with your attribute name // The data attribute on each filter button that indicates which category it filters // e.g., data-filter="opla-news" or data-filter="all" - YOU NEED TO REPLACE 'data-filter' const filterDataAttribute = 'data-filter'; // <<<<< REPLACE 'data-filter' with your attribute name // Also, ensure your filter buttons have this attribute with values like "all", "oplas-news", "sale-b2b", etc. // The class added to the currently active filter button - YOU NEED TO CHOOSE/REPLACE THIS const activeFilterClass = 'is-active'; // <<<<< REPLACE 'is-active' with your desired active class // Webflow's default class for the 'Next' pagination button const nextButtonSelector = '.w-pagination-next'; // Webflow's default class for the 'Previous' pagination button const prevButtonSelector = '.w-pagination-previous'; // --- End Configuration --- // Get references to the main elements const collectionListWrapper = document.querySelector(collectionListWrapperSelector); const collectionList = document.querySelector(collectionListSelector); const filterButtons = document.querySelectorAll(filterButtonSelector); const nextButton = document.querySelector(nextButtonSelector); const prevButton = document.querySelector(prevButtonSelector); // Variable to store the currently active filter category let currentFilter = 'all'; // Default to 'all' initially (assuming your "All" button has data-filter="all") // Function to filter the collection items function applyFilter(filter) { currentFilter = filter; // Update the active filter state const collectionItems = collectionList.querySelectorAll(collectionItemSelector); collectionItems.forEach(item => { const itemCategory = item.getAttribute(categoryDataAttribute); if (filter === 'all') { // Show all items if the filter is 'all' item.style.display = ''; // Or whatever display property your items use (e.g., 'block', 'flex', 'grid') } else { // Show item if its category matches the filter, hide otherwise if (itemCategory === filter) { item.style.display = ''; // Show the item } else { item.style.display = 'none'; // Hide the item } } }); // Update active class on filter buttons filterButtons.forEach(button => { if (button.getAttribute(filterDataAttribute) === filter) { button.classList.add(activeFilterClass); } else { button.classList.remove(activeFilterClass); } }); } // Add event listeners to filter buttons filterButtons.forEach(button => { button.addEventListener('click', function() { const filter = this.getAttribute(filterDataAttribute); applyFilter(filter); // When a filter button is clicked, you might want to go back to the first page. // Implementing this with Webflow's native pagination requires more advanced // techniques or potentially simulating a click on the first pagination button // if it exists and is visible. For now, we focus on applying the filter // correctly after pagination loads new items. }); }); // --- Mutation Observer to detect when new items are added by pagination --- // Select the target node for the observer (the Collection List where items are added) const targetNode = collectionList; // Options for the observer (listen for changes in the child list) const config = { childList: true }; // Callback function to execute when mutations are observed const callback = function(mutationsList, observer) { for(const mutation of mutationsList) { if (mutation.type === 'childList') { // Child nodes have been added or removed // Re-apply the current filter to the potentially new list items applyFilter(currentFilter); // console.log('Collection List updated by pagination. Filter reapplied.'); // Optional: for debugging } } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations if (targetNode) { observer.observe(targetNode, config); } else { console.error("Mutation Observer target node (Collection List) not found!"); } // --- Initial setup --- // Apply the default filter ('all') when the page loads // Ensure your "All" button has data-filter="all" applyFilter(currentFilter); });