🚀 建立自動推薦文章或商品區塊

本頁將示範如何透過 TagLite 標籤 API，動態產生「推薦文章」或「推薦商品」區塊，實現即時個人化推薦功能。

✅ 前置條件

請先確認網站已正確嵌入以下兩段 JavaScript：

<script src="https://cdn.taglite.com.tw/js/core.js"></script>
<script src="https://cdn.taglite.com.tw/js/get-info.js" defer></script>

🧠 一、推薦文章區塊

從使用者標籤中隨機取一個關鍵字，並呼叫推薦 API，回傳文章清單。

HTML 容器：

<div id="taglite-recommend">載入中...</div>

JavaScript：

<script>
document.addEventListener('DOMContentLoaded', function () {
  window.addEventListener('TagLiteInfos', function(e) {
    const tags = e.detail?.in_tag?.tag || [];
    if (!tags.length) return;
    
    const topTags = tags.sort((a, b) => b.score - a.score).slice(0, 5);
    const selectedTag = topTags[Math.floor(Math.random() * topTags.length)]?.tag;
    if (!selectedTag) return;

    const url = `/wp-json/taglite/v1/recommend?s=${encodeURIComponent(selectedTag)}`;
    fetch(url)
      .then(res => res.json())
      .then(articles => {
        const container = document.getElementById('taglite-recommend');
        if (!container || !articles.length) return;

        const html = '<h4>你可能感興趣的文章</h4><ul>' +
          articles.map(a => `<li><a href="${a.url}" target="_blank" rel="noopener">${a.title}</a></li>`).join('') +
          '</ul>';
        container.innerHTML = html;
      });
  });
});
</script>

🛒 二、推薦商品區塊（WooCommerce）

API 回傳的商品格式如下：

{
  "id": 123,
  "title": "經典 T-shirt",
  "url": "https://yourstore.com/product/t-shirt",
  "thumbnail": "https://yourstore.com/wp-content/uploads/xxx.jpg",
  "price": "599",
  "price_html": "<span class='woocommerce-Price-amount'>NT$599</span>"
}

你可使用這些欄位，自訂樣式與顯示方式，例如：

• 商品圖與標題
• 顯示價錢與購買按鈕
• 依照版面樣式設計卡片區塊

💡 應用建議

• 在首頁、分類頁或推薦區加入區塊，提升互動率
• 搭配分類設定不同區塊，如「猜你喜歡」、「熱門活動」
• 電商可根據標籤推薦高轉換商品

🔒 標籤來源說明

• in_tag：根據網站內行為自動生成，合理應用免費
• out_tag：跨站標籤來源，屬於進階功能，將納入收費機制