【管網設計】設定已上架商品的販售時間
這篇文章主要講解指定商品分類已經開放販售，到了指定時間自動隱藏指定商品分類對的購物車按鈕並不開放售賣，可是商品仍然顯示在官網；或是指定商品分類在上架商品後先隱藏購物車不開放販售，到了指定時間自動為指定商品分類開放購物車按鈕。
此文章僅適用於新版主題（Aroma 或其後發佈之佈景主題）
在這篇文章裡：
指定時間後自動為指定商品分類顯示購物車按鈕
指定時間後自動為指定商品分類隱藏購物車按鈕
注意事項
1. 指定時間後自動為指定商品分類顯示購物車按鈕
指定商品分類還沒開放售賣，到了特定時間後自動啟用指定商品分類的「加入購物車」按鈕
步驟一：安裝 Insert Code 擴充
前往EasyStore後台 → 安裝擴充 → 更多 → 搜尋 Insert Code → 立即安裝擴充
步驟二：設定目標指定商品分類
新增商品分類（如有需要），如：搶購活動。這步驟也可沿用已有分類，指定商品分類主要會用在下方的原始碼內
把指定商品加到指定商品分類裡
步驟三：設定程式碼
回到 Insert Code 擴充 → 創建代碼
輸入代碼名稱
複製以下代碼
<script>
document.addEventListener("DOMContentLoaded", function() {
// Select the form and the button by their respective IDs
const addToCartForm = document.getElementById("AddToCartForm-main-product");
const addToCartButton = document.getElementById("AddToCart");
if (addToCartForm && addToCartButton) {
// Extract the data from the data-addtocart attribute
const addToCartData = addToCartForm.getAttribute("data-addtocart");
try {
// Parse the data as JSON
const productData = JSON.parse(addToCartData);
// Check if the "category" key contains the value "搶購活動"
if (productData.category && productData.category.includes("搶購活動")) {
// Set the target date and time in GMT+8 (e.g., 2024/10/29 12:00:00 GMT+8)
const targetDate = new Date("2024-10-29T04:00:00Z"); // Convert GMT+8 to UTC (GMT+0)
// Hide the original button initially if the current time is earlier than the target date
const now = new Date();
if (now < targetDate) {
// Replace the Add to Cart button content with the countdown timer
addToCartButton.removeAttribute("type"); // Remove the submit type to disable form submission
addToCartButton.disabled = true; // Disable the button to prevent clicking
addToCartButton.innerHTML = ""; // Clear the existing content
// Function to update the countdown timer on the button
function updateCountdown() {
const currentTime = new Date();
const timeRemaining = targetDate - currentTime;
if (timeRemaining <= 0) {
// If the target date has been reached, change the button text to "加入購物車" and restore original action
addToCartButton.innerHTML = "加入購物車";
addToCartButton.setAttribute("type", "submit"); // Restore the button functionality
addToCartButton.disabled = false; // Enable the button for clicking
clearInterval(countdownInterval);
} else {
// Calculate remaining days, hours, minutes, and seconds
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
// Update the countdown timer display on the button
addToCartButton.innerHTML = `距離開賣: ${days}天 ${hours}小時 ${minutes}分鐘 ${seconds}秒`;
}
}
// Run the countdown update function every second
const countdownInterval = setInterval(updateCountdown, 1000);
// Run the countdown immediately to initialize the display
updateCountdown();
}
}
} catch (e) {
console.error("Error parsing JSON data-addtocart attribute: ", e);
}
}
});
</script>粘貼到 Insert Code 的 </body> 內
你需要更換代碼裡的商品分類名稱，成你要「加入購物車」按鈕被顯示的商品分類名稱，即步驟二所設定的指定商品分類名稱
例如：
// Check if the "category" key contains the value "商品分類名稱"
if (productData.category && productData.category.includes("商品分類名稱")) {日期和時間你需要在 const targetDate = new Date("2024-10-29T04:00:00Z") 更改成你想要的自動讓「加入購物車」按鈕顯示的時間
🔸注意：填入的時間為 24小時制，並且需要比實際顯示的時間少 8 小時
例如你想要設定代碼生效於 2024 年 10 月 30 號，下午 3 點，需編輯的代碼如下：
const targetDate = new Date("2024-10-30T07:00:00Z")
點擊儲存
設定結果：
2. 指定時間後自動為指定商品分類隱藏購物車按鈕
指定商品分類已經開始售賣，到了指定時間後自動為指定商品分類隱藏「加入購物車」按鈕
步驟一：安裝 Insert Code 擴充
前往EasyStore後台 → 安裝擴充 → 更多 → 搜尋 Insert Code → 立即安裝擴充
步驟二：設定商品分類
新增商品分類（如有需要），如：搶購活動。這步驟也可沿用已有分類，商品分類主要會用在下方的原始碼內
把指定商品加到該分類裡
步驟三：設定程式碼
回到 Insert Code 擴充 → 創建代碼
輸入代碼名稱
複製以下代碼
<script>
document.addEventListener("DOMContentLoaded", function() {
// Select the form by ID
const addToCartForm = document.getElementById("AddToCartForm-main-product");
const addToCartButton = document.getElementById("AddToCart");
if (addToCartForm && addToCartButton) {
// Extract the data from the data-addtocart attribute
const addToCartData = addToCartForm.getAttribute("data-addtocart");
try {
// Parse the data as JSON
const productData = JSON.parse(addToCartData);
// Check if the "category" key contains the value "倒數"
if (productData.category && productData.category.includes("倒數")) {
// Set the target date and time in GMT+8 (e.g., 2024/10/22 10:00:00 GMT+8)
const targetDate = new Date("2024-10-22T02:00:00Z"); // Convert GMT+8 to UTC (GMT+0)
function checkTime() {
const now = new Date();
// Check if the current time is greater than or equal to the target time
if (now >= targetDate) {
addToCartButton.style.display = "none";
}
}
// Run the function initially to check if the button should be hidden
checkTime();
// Set an interval to check periodically (every second)
setInterval(checkTime, 1000);
}
} catch (e) {
console.error("Error parsing JSON data-addtocart attribute: ", e);
}
}
});
</script>粘貼到 Insert Code 的 </body> 內
你需要更換代碼裡的商品分類名稱，成你要「加入購物車」按鈕被隱藏的商品分類名稱，即步驟二所設定的商品分類名稱
例如：
// Check if the "category" key contains the value "商品分類名稱"
if (productData.category && productData.category.includes("商品分類名稱")) {日期和時間你需要在 const targetDate = new Date("2024-10-29T04:00:00Z") 更改成你想要的「加入購物車」按鈕被隱藏的時間
🔸注意：填入的時間為 24小時制，並且需要比實際顯示的時間少 8 小時
例如你想要設定代碼生效於 2024 年 10 月 30 號，下午 3 點，需編輯的代碼如下：
const targetDate = new Date("2024-10-30T07:00:00Z")
點擊儲存
設定結果：
到了指定時間後，「加入購物車」按鈕將會隱藏
3. 注意事項
你需要執行以下設定，以確保購物車按鈕可完全隱藏：
（1）佈景主題 ：佈景主題設定內的所有「顯示加入購物車按鈕」都需要取消勾選
（2） 指定商品分類不可正在涉及加購和贈品類型的促銷優惠
（3）關閉「立即購買 Buy Now 按鈕」擴充
商品分類需排在最外層，不可在第二或第三層，如以下截圖
此功能非正式開發功能，EasyStore 本不支援客製化原始碼服務，但我們非常了解商家需求，特此提供修改原始碼路徑。然而，編輯原始碼會更改原本的架構，可能導致代碼不相容或影響到其他功能，本站概不負責。提醒商家在進行任何代碼修改之前，務必先進行測試、慎重考慮及深入評估。
更新時間： 29/10/2024
感謝！