Display of Remaining Stock Quantity on Hololive Shop

On the product page of Hololive Shop, the remaining quantity of each product is displayed.

// ==UserScript==
// @name Display of Remaining Stock Quantity on Hololive Shop
// @name:ja Hololive Shopの残り商品数量表示
// @name:zh-TW Hololive Shop 剩餘商品數量顯示
// @namespace elspw/hololive-shop-variant-quantity-display
// @version 2
// @description On the product page of Hololive Shop, the remaining quantity of each product is displayed.
// @description:ja Hololive Shopの商品ページには、各商品の残り在庫数が表示されます。
// @description:zh-tw 在 Hololive Shop 的商品頁面上顯示每個商品剩餘的數量。
// @match https://shop.hololivepro.com/*
// @grant none
// ==/UserScript==

(function() {
	'use strict';

	// 檢查頁面是否為產品頁面
	// ページが製品ページかどうかをチェックします。
	// Check if the page is a product page
	if (window.location.pathname.startsWith('/products/') || window.location.pathname.startsWith('/en/products/')) {
		// 從頁面的 JavaScript 資料層中獲取產品物件
		// ページのJavaScriptデータレイヤーから製品オブジェクトを取得します。
		// Get the product object from the page's JavaScript data layer
		const product = window.Elspw.params.product;
		const isEnglish = window.location.pathname.startsWith('/en/');
		// 迴圈遍歷每個產品變體，並將其標籤更新為顯示數量
		// 各製品のバリアントをループし、数量を表示するようにラベルを更新します。
		// Loop through each product variant and update its label to show the quantity
		product.variants.forEach(variant => {
			const id = variant.id;
			const qty = variant.qty;
			const title = variant.title;
			let quantityLabel = "";

			const productLabel = document.querySelector(`input[value='${id}'] ~ label .ProductOption__label--product`);
			if (productLabel) {
				const titleText = isEnglish ? title.split('/')[0].trim() : title.substring(title.indexOf('/') + 1).trim();
				productLabel.innerHTML = `${titleText} / ${isEnglish ? 'Quantity' : (window.navigator.language.startsWith('zh') ? '數量' : '数量')}: </span><span style="color:red">${qty}</span>`;
			}
		});
	}
})();