fabric-stock-styles.user.js

// ==UserScript==
// @name         Fabric.com - Item styling
// @namespace    http://tampermonkey.net/
// @version      0.1.2
// @description  Style items when browsing so that its simple to see what's available and unavailable while shopping.
// @author       Jacob Vallejo <jake@vcastle.net>
// @match        https://fabric.com/*
// @match        https://www.fabric.com/*
// @homepageURL  https://gist.github.com/jahkeup/95565e8874ae3e48dc94d63bf8a955cd
// @updateURL    https://gist.github.com/jahkeup/95565e8874ae3e48dc94d63bf8a955cd/raw/fabric-stock-styles.user.js
// @downloadURL  https://gist.github.com/jahkeup/95565e8874ae3e48dc94d63bf8a955cd/raw/fabric-stock-styles.user.js
// @icon         http://fabric.com/favicon.ico
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
.catalog-product.out-of-stock {
    opacity: 0.3;
}
.catalog-product:hover {
    opacity: 1 !important;
}
.out-of-stock.inventory-status {
    background: red;
    padding: 2em;
    position: absolute;
    top: calc(20%);
    color: white;
    text-shadow: black 1px 0 10px;
    border: thin solid darkred;
    font-weight: 1000;
    width: calc(105%);
    margin-left: calc(-1 * 2.5%);
}

.low-stock.inventory-status {
    background: pink;
    padding: 1.2em;
    border: thin solid darkred;
}

.low-stock.inventory-status span[id$='Count'] {
    font-size-adjust: 0.7;
    text-decoration: underline dotted;
    padding: 0.2rem;
}

.catalog-product div > span > strong {
    font-size-adjust: 0.9;
    opacity: 0.15;
}

.catalog-product:hover div > span > strong {
    opacity: 1;
}
    `);

    const StockStatus = {
        IN_STOCK: 0,
        LOW_STOCK: 1,
        OUT_OF_STOCK: 2,
    }

    console.log("setting item availability styles");

    //let products = document.getElementsByClassName('catalog-product');
    let products = document.querySelectorAll('.catalog .catalog-product');

    for (let product of products) {
        let status = StockStatus.IN_STOCK;

        let notAvailableMessage = product.querySelector(`[id$="NotAvailable"]`)
        if (notAvailableMessage) {
            status = StockStatus.OUT_OF_STOCK;
            notAvailableMessage.classList.toggle("out-of-stock");
            notAvailableMessage.classList.toggle("inventory-status");
        }

        if (status == StockStatus.IN_STOCK) {
            let lowStockMessage = product.querySelector(`[id$="LowStock"]`)
            if (lowStockMessage) {
                status = StockStatus.LOW_STOCK;
                lowStockMessage.classList.toggle("low-stock");
                lowStockMessage.classList.toggle("inventory-status");
            }
        }

        switch (status) {
            case StockStatus.LOW_STOCK:
                product.classList.toggle('low-stock');
                break;
            case StockStatus.OUT_OF_STOCK:
                product.classList.toggle('out-of-stock');
                break;
        }
    }
})();