解決cyberbiz.co在後台商品規格太多導致頁面冗長的問題

Collapse content in specific product classes for better readability

// ==UserScript==
// @name         解決cyberbiz.co在後台商品規格太多導致頁面冗長的問題
// @namespace    https://iflyer.tw
// @version      2024-10-08
// @description  Collapse content in specific product classes for better readability
// @author       飛鵝數位電訊
// @match        https://*.cyberbiz.co/admin/products
// @exclude      https://*.cyberbiz.co/admin/products/*  // 排除所有子目錄
// @icon         https://www.google.com/s2/favicons?sz=64&domain=cyberbiz.co
// @grant        none
// @run-at       document-end  // 在文檔完全加載後執行腳本
// @license     MIT 
// ==/UserScript==
(function() {
    'use strict';

    // 定義需要處理的 <td> 類名
    const classNames = [
        'product_variants',
        'product_price',
        'product_compare_at_price',
        'product_variants_inventory_quantity',
        'product_variants_sold'
    ];

    // 處理函式：限制每個 <td> 下的 <div> 數量
    function limitDivs() {
        classNames.forEach(className => {
            // 獲取對應類名的 <td>
            const tds = document.querySelectorAll(`td.${className}`);

            tds.forEach(td => {
                // 找到每個 <td> 中的 <div>
                const divs = Array.from(td.querySelectorAll('div')); // 轉換為陣列以便操作

                // 如果 <div> 的數量超過 3 個
                if (divs.length > 3) {
                    // 刪除多餘的 <div>
                    divs.slice(3).forEach(div => div.remove()); // 保留前三個，刪除剩餘的
                    console.log(`Removed ${divs.length - 3} divs from <td class="${className}">`);
                }
            });
        });
    }

    // 使用 MutationObserver 來監視 DOM 變化，確保在內容載入完成後執行
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList' || mutation.type === 'subtree') {
                // 呼叫限制 <div> 數量的函式
                limitDivs();
            }
        });
    });

    // 觀察頁面上的變化，確保頁面內容完全載入
    observer.observe(document.body, { childList: true, subtree: true });

})();