> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 【官網設計】設定已上架商品的販售時間

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/6ygp55so5ywo6yoo5pa55qgi_15x389x.png)

這篇文章主要講解指定商品分類已經開放販售，到了指定時間自動隱藏指定商品分類對的購物車按鈕並不開放售賣，可是商品仍然顯示在官網；或是指定商品分類在上架商品後先隱藏購物車不開放販售，到了指定時間自動為指定商品分類開放購物車按鈕。

| 此功能非正式開發功能，EasyStore 本不支援客製化原始碼服務，但我們非常了解商家需求，特此提供修改原始碼路徑。然而，編輯原始碼會更改原本的架構，可能導致代碼不相容或影響到其他功能，本站概不負責。提醒商家在進行任何代碼修改之前，務必先進行測試、慎重考慮及深入評估。

|| 此文章僅適用於新版主題（Aroma 或其後發佈之佈景主題）

**在這篇文章裡：**

1. [注意事項](https://support.easystore.co/zh-tw/article/44cq5a6y57ay6kit6kii44cr6kit5a6a5bey5lik5p625zwg5zob55qe6lkp5zsu5pmc6zat-12kkt5h/?bust=1734671323329#1-1)
2. [指定時間後自動為指定商品分類顯示購物車按鈕](https://support.easystore.co/zh-tw/article/44cq5a6y57ay6kit6kii44cr6kit5a6a5bey5lik5p625zwg5zob55qe6lkp5zsu5pmc6zat-12kkt5h/?bust=1734671323329#1-2)
3. [指定時間後自動為指定商品分類隱藏購物車按鈕](https://support.easystore.co/zh-tw/article/44cq5a6y57ay6kit6kii44cr6kit5a6a5bey5lik5p625zwg5zob55qe6lkp5zsu5pmc6zat-12kkt5h/?bust=1734671323329#1-3)
---

# 1. 注意事項

1. 你需要執行以下設定，以確保購物車按鈕可完全隱藏：

（1）佈景主題 ：佈景主題設定內的所有「顯示加入購物車按鈕」都需要取消勾選

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1sotpds.png)

（2） 指定商品分類不可正在涉及加購和贈品類型的促銷優惠

（3）關閉「立即購買 Buy Now 按鈕」擴充

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_km5k4w.png)

2. 商品分類需排在最外層，不可在第二或第三層，如以下截圖

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_13uquud.png)
---

# 2. 指定時間後自動為指定商品分類顯示購物車按鈕

指定商品分類還沒開放售賣，到了特定時間後自動啟用指定商品分類的「加入購物車」按鈕

### 步驟一：安裝 Insert Code 擴充

1. 前往EasyStore後台 → 安裝擴充 → 更多 → 搜尋 Insert Code →  立即安裝擴充

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1ff32ii.png)

### 步驟二：設定目標指定商品分類

1. 新增商品分類（如有需要），如：搶購活動。這步驟也可沿用已有分類，指定商品分類主要會用在下方的原始碼內

2. 把指定商品加到指定商品分類裡

### 步驟三：設定程式碼

1. 回到 Insert Code 擴充 → 創建代碼

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1rmdcj.png)

2. 輸入代碼名稱

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1g2zb7z.png)

3. 複製以下代碼

```
<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>
```

4. 粘貼到 Insert Code 的 </body> 內

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1nsm6z7.png)

5. 你需要更換代碼裡的商品分類名稱，成你要「加入購物車」按鈕被顯示的商品分類名稱，即步驟二所設定的指定商品分類名稱

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_u1hvug.png)

例如：

```
// Check if the "category" key contains the value "商品分類名稱"
            if (productData.category && productData.category.includes("商品分類名稱")) {
```

6. 日期和時間你需要在  `const targetDate = new Date("2024-10-29T04:00:00Z")` 更改成你想要的自動讓「加入購物車」按鈕顯示的時間

**🔸注意：填入的時間為 24小時制，並且需要比實際顯示的時間少 8 小時**

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_bs7a5o.png)

例如你想要設定代碼生效於 2024 年 10 月 30 號，下午 3 點，需編輯的代碼如下：

`const targetDate = new Date("2024-10-30T07:00:00Z")` 

7. 點擊儲存

### 設定結果：

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1h5abbc.png)
---

# 3. 指定時間後自動為指定商品分類隱藏購物車按鈕

指定商品分類已經開始售賣，到了指定時間後自動為指定商品分類隱藏「加入購物車」按鈕

### 步驟一：安裝 Insert Code 擴充

1. 前往EasyStore後台 → 安裝擴充 → 更多 → 搜尋 Insert Code →  立即安裝擴充

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1ff32ii.png)

### 步驟二：設定商品分類

1. 新增商品分類（如有需要），如：搶購活動。這步驟也可沿用已有分類，商品分類主要會用在下方的原始碼內

2. 把指定商品加到該分類裡

### 步驟三：設定程式碼

1. 回到 Insert Code 擴充 → 創建代碼

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1rmdcj.png)

2. 輸入代碼名稱（自定義的標題）

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1g2zb7z.png)

3. 複製以下代碼

```
<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>
```

4. 粘貼到 Insert Code 的 </body> 內

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1nsm6z7.png)

5. 你需要更換代碼裡的商品分類名稱，成你要「加入購物車」按鈕被隱藏的商品分類名稱，即步驟二所設定的商品分類名稱

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1ohtnln.png)

例如：

```
// Check if the "category" key contains the value "商品分類名稱"
            if (productData.category && productData.category.includes("商品分類名稱")) {
```

6. 日期和時間你需要在  `const targetDate = new Date("2024-10-29T04:00:00Z")` 更改成你想要的「加入購物車」按鈕被隱藏的時間

**🔸注意：填入的時間為 24小時制，並且需要比實際顯示的時間少 8 小時**

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_bm10f.png)

例如你想要設定代碼生效於 2024 年 10 月 30 號，下午 3 點，需編輯的代碼如下：

`const targetDate = new Date("2024-10-30T07:00:00Z")` 

7. 點擊儲存

### 設定結果：

到了指定時間後，「加入購物車」按鈕將會隱藏
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1jrylmu.png)
---