low stocks

<!-- Low Stock badge by [email protected] -->
<script>
window.addEventListener('DOMContentLoaded', async () => {
    const bodyClasses = document.body.classList;
    if (!bodyClasses.contains('collection-type-products') || bodyClasses.contains('view-item')) return;
    
    const fetchJSON = async (path) => {
        const queryParams = '?format=json&' + Date.now();
        const response = await fetch(path + queryParams);
        return await response.json();
    };
    
    const collectionJsonData = await fetchJSON(window.location.pathname);
    if (!collectionJsonData.items) return;
    
    for (const item of collectionJsonData.items) {
        try {
            const productJsonData = await fetchJSON(item.fullUrl);
            if (!productJsonData.item) continue;
            
            const productLink = document.querySelector(`[href="${item.fullUrl}"]`);
            if (!productLink) continue;
            
            const productListItem = productLink.closest('.product-list-item');
            if (!productListItem) continue;
            
            let totalStock = 0;
            let hasUnlimited = false;
            
            if (productJsonData.item.variants && productJsonData.item.variants.length > 0) {
                productJsonData.item.variants.forEach(variant => {
                    if (variant.unlimited) {
                        hasUnlimited = true;
                    } else {
                        totalStock += variant.qtyInStock || 0;
                    }
                });
            }
            
            if (!hasUnlimited && totalStock >= 1 && totalStock <= 3) {
                productListItem.classList.add('low-stocks');
            }
            
        } catch (error) {
            console.error('Error:', error);
        }
    }
});
</script>
<style>
div.product-list-item.low-stocks:after {
    content: "LOW STOCK";
    width: 70px;
    text-align: center;
    background: #ff24ef !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 12px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    font-size: 10px;
}
</style>